/* RuntimeHelix – tokenized layer over Bootstrap 5.3 (no inline styles) */

:root {
  /* RuntimeHelix – Brand tokens (HEX, stable across browsers) */
  --rh-primary: #164f99;        /* Even darker for WCAG AA on rh-surface (was #1856B8) */
  --rh-accent:  #149286;        /* Darker Teal for better contrast (was #18B3A4) */
  --rh-navy:    #0F2747;        /* Deep Navy (depth/footers/dark accents) */

  /* Accent (targeted) */
  --rh-accent-strong: #05665D;   /* Darker for better contrast (was #067A6F) */
  --rh-accent-soft:   #EAF9F6;

  /* Surfaces / neutrals */
  --rh-surface: #F0F2F5;    /* was #F5F7FA, now darker to pass contrast for rh-text-muted and buttons */
  --rh-neutral: #E6E9EF;    /* was #EEF1F4, now slightly darker */
  --rh-card:    #FFFFFF;        /* cards */

  /* Text */
  --rh-text:       #0B1220;
  --rh-text-muted: #333E4F; /* Darker for better contrast (was #3B485C) */

  /* Radius / shadows */
  --rh-radius: 1.1rem;
  --rh-shadow-sm: 0 6px 24px rgba(15, 23, 42, 0.08);
  --rh-shadow-xs: 0 2px 10px rgba(15, 23, 42, 0.06);

  /* Focus ring (based on accent) */
  --rh-ring: 0 0 0 .25rem rgba(20, 146, 134, 0.35);

  --rh-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Bootstrap mappings */
  --bs-primary: var(--rh-primary);
  --bs-body-color: var(--rh-text);
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--rh-primary);
  --bs-secondary-color: var(--rh-text-muted);
  --bs-tertiary-color: color-mix(in srgb, var(--rh-text-muted) 80%, transparent);

  /* States */
  --bs-link-hover-color: #1856B8;
  --bs-border-color: #E3E8EF;

  /* Component backgrounds derived from surfaces */
  --rh-metric-bg: #DAE9FF;  /* was #E3EEFF, now slightly darker */
  --rh-step-impact-bg: #D9F2EF; /* was #E6F7F5, now slightly darker */
  --rh-proof-impact-bg: #DCEBFF; /* was #EAF4FF, now slightly darker */
  --rh-accent-border:   #A7E6DE;  /* soft teal border */

  /* Editorial callout */
  --rh-editorial-max: 72ch;
  --rh-editorial-bg: #F0F8FF; /* slightly darker tint for better contrast (was #F5FBFF) */
  --rh-editorial-border: var(--rh-accent-strong);

  --rh-primary-dark: #1856B8; /* Primary darker for hover/active */
  --rh-primary-tint: #EEF5FF; /* very light primary surface */
  --rh-accent-dark: #0E8F83;  /* darker accent for hover */
  --rh-accent-tint: #F2FBFA;  /* very light accent surface */

  /* Component-specific light-mode tokens (overridden in dark mode) */
  --rh-proof-bg: #ffffff;
  --rh-partner-bg: #ffffff;
  --rh-partner-tag-bg: #DCEBFF;
  --rh-concept-primary-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
}
/* OKLCH progressive enhancement: override variables in browsers that support oklch() */
@supports (color: oklch(50% 0.1 200deg)) {
  :root {
    /* Brand in OKLCH (approx) */
    --rh-primary: oklch(43% 0.17 255deg);  /* Darkened further for contrast (was 45%) */
    --rh-accent:  oklch(60% 0.10 185deg);  /* Teal darkened for contrast */
    --rh-navy:    oklch(24% 0.07 250deg);  /* Deep Navy */

    --rh-surface: oklch(95.5% 0.01 250deg);
    --rh-neutral: oklch(95% 0.01 250deg);

    --rh-text: oklch(16% 0.03 250deg);
    --rh-text-muted: oklch(36% 0.03 250deg); /* darker for better contrast (was 42%) */

    --rh-ring: oklch(60% 0.10 185deg / 0.35);

    --bs-link-hover-color: color-mix(in oklch, var(--rh-primary) 82%, black 18%);
    --bs-border-color: color-mix(in oklch, var(--rh-text) 14%, white 86%);

    --rh-metric-bg: color-mix(in oklch, var(--rh-primary) 10%, white 90%);
    --rh-step-impact-bg: color-mix(in oklch, var(--rh-accent) 10%, white 90%);
    --rh-proof-impact-bg: color-mix(in oklch, var(--rh-primary) 7%, white 93%);
    --rh-accent-border: color-mix(in oklch, var(--rh-accent) 40%, var(--bs-border-color) 60%);

    --bs-secondary-color: var(--rh-text-muted);
  }
}
/* =========================
   Dark Mode (Tri-State: system | light | dark)
   ========================= */

/* System dark mode: applies when no data-bs-theme attribute and OS prefers dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    color-scheme: dark;

    --rh-primary: oklch(72% 0.17 255deg);
    --rh-accent:  oklch(78% 0.11 185deg);
    --rh-navy:    oklch(18% 0.06 250deg);

    /* Accent (targeted) */
    --rh-accent-strong: var(--rh-accent);
    --rh-accent-soft: color-mix(in oklch, var(--rh-accent) 12%, var(--rh-surface) 88%);

    --rh-surface: oklch(16% 0.02 250deg);
    --rh-neutral: oklch(20% 0.02 250deg);
    --rh-card:    oklch(22% 0.02 250deg);

    --rh-text:       oklch(95% 0.01 250deg);
    --rh-text-muted: oklch(78% 0.01 250deg);

    --bs-border-color: oklch(32% 0.02 250deg);

    --bs-primary: var(--rh-primary);
    --bs-body-color: var(--rh-text);
    --bs-body-bg: var(--rh-surface);
    --bs-link-color: var(--rh-primary);

    --bs-link-hover-color: oklch(80% 0.16 255deg);

    --rh-shadow-sm: 0 10px 30px oklch(0% 0 0deg / 0.35);
    --rh-shadow-xs: 0 4px 16px  oklch(0% 0 0deg / 0.28);

    --rh-ring: 0 0 0 .25rem oklch(78% 0.11 185deg / 0.35);

    --rh-metric-bg:       oklch(20% 0.03 255deg);
    --rh-step-impact-bg:  oklch(20% 0.02 185deg);
    --rh-proof-impact-bg: oklch(18% 0.03 255deg);
    --rh-accent-border: oklch(52% 0.09 185deg);

    --rh-editorial-bg: oklch(18% 0.03 255deg);
    --rh-editorial-border: var(--rh-accent);

    --rh-callout-bg: var(--rh-editorial-bg);
    --rh-callout-border: var(--rh-editorial-border);

    /* Component-specific dark-mode tokens */
    --rh-proof-bg: rgba(255, 255, 255, 0.03);
    --rh-partner-bg: rgba(255, 255, 255, 0.03);
    --rh-partner-tag-bg: rgba(230, 244, 246, 0.08);
    --rh-concept-primary-shadow: 0 .5rem 1.25rem rgba(0,0,0,.20);
  }
}

/* Explicit dark mode: always dark, overrides system preference */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --rh-primary: oklch(72% 0.17 255deg);
  --rh-accent:  oklch(78% 0.11 185deg);
  --rh-navy:    oklch(18% 0.06 250deg);

  --rh-accent-strong: var(--rh-accent);
  --rh-accent-soft: color-mix(in oklch, var(--rh-accent) 12%, var(--rh-surface) 88%);

  --rh-surface: oklch(16% 0.02 250deg);
  --rh-neutral: oklch(20% 0.02 250deg);
  --rh-card:    oklch(22% 0.02 250deg);

  --rh-text:       oklch(95% 0.01 250deg);
  --rh-text-muted: oklch(78% 0.01 250deg);

  --bs-border-color: oklch(32% 0.02 250deg);

  --bs-primary: var(--rh-primary);
  --bs-body-color: var(--rh-text);
  --bs-body-bg: var(--rh-surface);
  --bs-link-color: var(--rh-primary);

  --bs-link-hover-color: oklch(80% 0.16 255deg);

  --rh-shadow-sm: 0 10px 30px oklch(0% 0 0deg / 0.35);
  --rh-shadow-xs: 0 4px 16px  oklch(0% 0 0deg / 0.28);

  --rh-ring: 0 0 0 .25rem oklch(78% 0.11 185deg / 0.35);

  --rh-metric-bg:       oklch(20% 0.03 255deg);
  --rh-step-impact-bg:  oklch(20% 0.02 185deg);
  --rh-proof-impact-bg: oklch(18% 0.03 255deg);
  --rh-accent-border: oklch(52% 0.09 185deg);

  --rh-editorial-bg: oklch(18% 0.03 255deg);
  --rh-editorial-border: var(--rh-accent);

  --rh-callout-bg: var(--rh-editorial-bg);
  --rh-callout-border: var(--rh-editorial-border);

  /* Component-specific dark-mode tokens */
  --rh-proof-bg: rgba(255, 255, 255, 0.03);
  --rh-partner-bg: rgba(255, 255, 255, 0.03);
  --rh-partner-tag-bg: rgba(230, 244, 246, 0.08);
  --rh-concept-primary-shadow: 0 .5rem 1.25rem rgba(0,0,0,.20);
}

/* Explicit light mode: always light, overrides system dark preference */
:root[data-bs-theme="light"] {
  color-scheme: light;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--rh-font);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* Skip link */
.rh-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rh-skip-link:focus-visible {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  z-index: 1050;
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.rh-skip-link:focus-visible {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  outline: 2px solid var(--rh-accent);
}
/* Focus ring */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.form-control:focus,
.btn:focus-visible {
  box-shadow: var(--rh-ring) !important;
  outline: none;
}
/* Header / brand */
.rh-header { background: var(--bs-body-bg); }
.rh-brandmark {
  width: 24px;
  height: 24px;
  border-radius: .6rem;
  background: var(--rh-primary);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
}
.rh-wordmark {
  font-weight: 650;
  letter-spacing: -0.01em;
}
.rh-brand {
  white-space: nowrap;
}
.rh-brand{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  text-decoration: none;
}
/* Stack logo + tagline */
.rh-brand__stack{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
}
/* Ensure the logo behaves like a block element (no baseline weirdness) */
.rh-logo{
  display: block;
  height: auto;
}
/* Tagline styling */
.rh-tagline{
  font-size: .75rem;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  max-width: 52ch;
}
/* Optional: hide tagline on very small screens to keep navbar compact */
@media (max-width: 575.98px){
  .rh-tagline{ display:none; }
}
.rh-nav .nav-link {
  text-decoration: none;
}
.rh-nav .nav-link:hover,
.rh-nav .nav-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .25em;
}
.rh-logo {
  display: block;
  width: auto;
  height: 44px; max-width: 220px;
}
@media (min-width: 992px) { .rh-logo { height: 56px; max-width: 260px; } }
.rh-logo--footer {
  height: 28px;
  max-width: 200px;
  opacity: 0.95;
}
/* Buttons (align with guide) */
.rh-btn--primary { border-radius: var(--rh-radius); }
.rh-btn--secondary { border-radius: var(--rh-radius); }
.rh-btn--icon {
  border-radius: 999px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Hero Hierarchie */
.rh-hero__subhead {
  font-weight: 700;
  font-size: clamp(1.1rem, 1.2vw, 1.35rem);
  color: var(--rh-primary);
  line-height: 1.25;
}
.rh-hero__copy {
  max-width: 56ch; /* bessere Lesbarkeit */
}
.rh-hero__lead {
  color: var(--rh-text-muted);
  line-height: 1.55;
}
.rh-hero__lead strong {
  color: var(--rh-text);
  font-weight: 700;
}
/* Proof Block */
.rh-hero__kicker {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none; /* All caps raus */
  color: var(--rh-text);
}
.rh-proof__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: .75rem;
  align-items: start;
  padding: .5rem 0;
}
.rh-proof__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: .4rem;
  margin-left: .5rem;
  background: var(--rh-accent);
}
/* Theme Toggle (Tri-State: system | light | dark) */
.rh-theme-toggle {
  --size: 44px;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.rh-theme-toggle:hover {
  background-color: var(--bs-secondary-bg);
}
.rh-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--rh-ring);
}
/* Icons */
.rh-theme-toggle__icon {
  position: absolute;
  font-size: 1rem;
  transition: opacity .15s ease, transform .15s ease;
}

/* Default state: show system icon */
.rh-theme-toggle__icon--sun,
.rh-theme-toggle__icon--moon,
.rh-theme-toggle__icon--system {
  opacity: 0;
  transform: rotate(-90deg);
}

.rh-theme-toggle__icon--system {
  opacity: 1;
  transform: rotate(0);
}

/* Light mode: show sun */
.rh-theme-toggle[data-theme-mode="light"] .rh-theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0);
}
.rh-theme-toggle[data-theme-mode="light"] .rh-theme-toggle__icon--system {
  opacity: 0;
  transform: rotate(-90deg);
}

/* Dark mode: show moon */
.rh-theme-toggle[data-theme-mode="dark"] .rh-theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0);
}
.rh-theme-toggle[data-theme-mode="dark"] .rh-theme-toggle__icon--system {
  opacity: 0;
  transform: rotate(-90deg);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .rh-theme-toggle,
  .rh-theme-toggle__icon {
    transition: none;
  }
}
/* Hero (no heavy images) */
.rh-hero { padding-block: clamp(2.5rem, 3vw, 3rem); }
@media (min-width: 992px) {
  .rh-hero { padding-block: clamp(3rem, 3.2vw, 3.5rem); }
}
.rh-hero__title {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.rh-hero__lead {
  color: var(--rh-text-muted);
  max-width: 60ch;
}
/* Hero card */
.rh-hero-card {
  border-radius: var(--rh-radius);
  background: var(--rh-card);
  color: var(--rh-text);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--rh-shadow-xs);
  padding: 2rem;
}
@media (min-width: 992px) {
  .rh-hero-card { padding: 1.5rem; }
}
.rh-hero-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.rh-metric {
  border-radius: .9rem;
  background: var(--rh-metric-bg);
  padding: .75rem;
}
.rh-metric__value { font-weight: 700; font-size: 1.25rem; }
.rh-metric__label { color: var(--rh-text-muted); font-size: .875rem; }
.rh-checklist__item {
  font-weight: bold;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}
.rh-checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .75rem;
  height: .75rem;
  border-radius: .2rem;
  background: var(--rh-accent);
}
.rh-surface { background: var(--rh-neutral); }
/* Cards (BEM) */
.rh-card {
  border-radius: var(--rh-radius);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--rh-shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease;
  background: var(--rh-card);
}
.rh-card:hover { transform: translateY(-2px); box-shadow: var(--rh-shadow-sm); }
.rh-card__body {
  padding: 1.25rem;
}
.rh-card__title { font-size: 1.25rem; margin-bottom: .5rem; }
.rh-card__text { color: var(--rh-text-muted); margin-bottom: .75rem; }
.rh-card__link { font-weight: 600; }
/* Steps */
.rh-steps {
  display: grid;
  gap: 1.25rem; /* consolidated, single source */
  padding-left: 1.25rem;
}
@media (min-width: 992px) {
  .rh-steps { grid-template-columns: repeat(3, 1fr); padding-left: 0; }
}

/* Steps – refined process presentation */

.rh-steps {
  display: grid;
  gap: 1.25rem;
  padding-left: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .rh-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rh-step__card {
  position: relative;
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--rh-radius);
  background: var(--rh-card);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--rh-shadow-xs);
}
.rh-step__index {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--rh-text);
}
.rh-step__title {
  margin-bottom: .5rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.rh-step__impact {
  margin-bottom: .75rem;
  padding-left: .75rem;
  border-left: 3px solid var(--rh-accent);
  font-size: .95rem;
  background: var(--rh-step-impact-bg);
  border-radius: .5rem;
}
.rh-step__text {
  color: var(--rh-text-muted);
  margin: 0;
}
/* final step slightly emphasized */
.rh-step__card--final {
  border-color: var(--rh-accent-border);
}
/* Steps – Start highlight + time pills + mini timeline */

.rh-steps__timeline {
  margin-bottom: 1rem;
}
.rh-progress {
  height: .55rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--rh-shadow-xs);
}
.rh-progress {
  background: var(--bs-border-color);
}
.rh-progress__bar {
  background: var(--rh-accent);
  opacity: 0.55;
}
.rh-progress__bar--step1,
.rh-progress__bar--step2,
.rh-progress__bar--step3 {
  width: 33.333%;
}
.rh-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .75rem;
}
.rh-step__pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid var(--bs-border-color);
  background: var(--rh-metric-bg);
  color: var(--rh-text);
}
.rh-step__pill--start {
  border-color: var(--rh-accent-border);
  background: var(--rh-proof-impact-bg);
}
.rh-step__pill--time {
  color: var(--rh-text);
}
/* Start step visually highlighted (but still calm) */
.rh-step__card--start {
  border-color: var(--rh-accent-border);
  background: var(--rh-proof-impact-bg);
}
.rh-step__card--start .rh-step__impact {
  border-left-color: var(--rh-primary);
}
/* Reduced motion friendliness */
@media (prefers-reduced-motion: reduce) {
  .rh-progress,
  .rh-progress__bar {
    transition: none !important;
  }
}
/* ===== Steps – Optimierungen (Timeline + Pills + Start) ===== */

.rh-step__card:focus-within {
  box-shadow: var(--rh-ring);
  border-color: var(--rh-accent-border);
}
/* Step numbers: a bit calmer */
.rh-step__index {
  opacity: 0.85;
  letter-spacing: .02em;
}
/* Meta pills row */
.rh-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .9rem;
}
.rh-step__pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 650;
  border: 1px solid var(--bs-border-color);
  color: var(--rh-text);
}
.rh-step__pill--start {
  border-color: var(--rh-accent-border);
  background: var(--rh-proof-impact-bg);
}
.rh-step__card--start {
  border-color: var(--rh-accent-border);
  background: var(--rh-proof-impact-bg);
}
/* Timeline */
.rh-steps__timeline {
  margin: .25rem 0 1.1rem;
}
.rh-progress {
  position: relative;
  height: .6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  box-shadow: var(--rh-shadow-xs);
}
/* segmented markers at 33% / 66% */
.rh-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
          linear-gradient(to right,
          transparent 0 33.1%,
          rgba(15, 23, 42, 0.18) 33.1% 33.4%,
          transparent 33.4% 66.4%,
          rgba(15, 23, 42, 0.18) 66.4% 66.7%,
          transparent 66.7% 100%);
}
/* Fill (subtle, looks “complete” but still decorative) */
.rh-progress__bar {
  width: 100%;
  background: var(--rh-accent);
  opacity: 0.55;
}
/* Reduced motion friendliness */
@media (prefers-reduced-motion: reduce) {
  .rh-step__card,
  .rh-progress,
  .rh-progress__bar {
    transition: none !important;
  }
}
/* Quotes */
.rh-quote {
  border-radius: var(--rh-radius);
  border: 1px solid var(--bs-border-color);
  padding: 1.25rem;
  background: #fff;
  box-shadow: var(--rh-shadow-xs);
}
.rh-quote__text { margin-bottom: .75rem; }
.rh-quote__meta { color: var(--rh-text-muted); margin: 0; }
/* Footer */
.rh-footer__title { margin-bottom: .75rem; }
.rh-footer__list li { margin-bottom: .35rem; }
.rh-text-muted { color: var(--rh-text-muted) !important; }
.rh-link {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.rh-link:hover,
.rh-link:focus-visible {
  color: var(--bs-link-hover-color);
}
/* ===== Proof cards (optimized) ===== */

.rh-proof {
  position: relative;
  border-radius: var(--rh-radius);
  border: 1px solid var(--bs-border-color);
  background: var(--rh-proof-bg);
  box-shadow: var(--rh-shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rh-proof:hover {
  transform: translateY(-2px);
  box-shadow: var(--rh-shadow-sm);
}
.rh-proof__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rh-proof__header {
  margin-bottom: .75rem;
}
.rh-proof__title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: .4rem;
}
.rh-proof__impact {
  margin: 0;
  padding: .55rem .75rem;
  border-left: 3px solid var(--rh-accent);
  border-radius: .75rem;
  background: var(--rh-proof-impact-bg);
  color: var(--rh-text);
  font-size: .95rem;
  line-height: 1.55;
}
.rh-proof__impact-label {
  font-weight: 650;
  margin-right: .35rem;
}
.rh-proof__text {
  color: var(--rh-text-muted);
  margin: 0 0 .75rem 0;
  max-width: 70ch;
}
/* compact meta: one divider, grid-like rhythm */
.rh-proof__meta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: .85rem;
  border-top: 1px solid var(--bs-border-color);

  display: grid;
  grid-template-columns: 7.25rem 1fr;
  gap: .45rem .75rem;
}
.rh-proof__meta-key {
  margin: 0;
  color: var(--rh-text-muted);
  font-size: .875rem;
}
.rh-proof__meta-val {
  margin: 0;
  font-size: .95rem;
}
/* better keyboard focus (when a link/button is inside later) */
.rh-proof:focus-within {
  box-shadow: var(--rh-ring);
  border-color: var(--rh-accent-border);
}
/* ===== Partner network (data-driven) ===== */
.rh-network-disclosure {
  margin-block: 4rem 5rem; /* klare Distanz zu Content & Footer */
  padding-top: 2rem;
  border-top: 1px solid var(--bs-border-color);
  text-align: center;
}
.rh-network-disclosure__hint {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  color: var(--rh-text-muted);
  font-size: 0.95rem;
}
.rh-network-disclosure__btn {
  --bs-btn-color: var(--rh-primary);
  --bs-btn-border-color: var(--rh-primary);
  --bs-btn-hover-bg: var(--rh-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--rh-primary);

  padding-inline: 1.25rem;
  border-radius: 999px; /* bewusst „soft“, nicht CTA-hard */
  font-weight: 500;
}
.rh-partner {
  border-radius: var(--rh-radius);
  border: 1px solid var(--bs-border-color);
  background: var(--rh-partner-bg);
  box-shadow: var(--rh-shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rh-partner:hover {
  transform: translateY(-2px);
  box-shadow: var(--rh-shadow-sm);
}
.rh-partner__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rh-partner__name {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: .1rem;
}
.rh-partner__role {
  margin: 0;
  font-size: .95rem;
  color: var(--rh-text-muted);
}
.rh-partner__text {
  margin: .75rem 0;
  color: var(--rh-text);
  max-width: 70ch;
}
.rh-partner__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}
.rh-partner__tag {
  font-size: .8rem;
  padding: .2rem .5rem;
  border-radius: .5rem;
  background: var(--rh-partner-tag-bg);
  color: var(--rh-text-muted);
}
.rh-partner__links {
  margin-top: auto;
  font-size: .9rem;
}
.rh-partner__sep {
  margin: 0 .35rem;
  color: var(--rh-text-muted);
}
.rh-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: .65rem;
  border: 1px solid var(--rh-accent-border);
  background: var(--rh-proof-impact-bg);
  color: var(--rh-text);
  font-size: .8125rem;
  font-weight: 650;
}
.rh-card:focus-within,
.rh-step__card:focus-within {
  box-shadow: var(--rh-ring);
  border-color: var(--rh-accent-border);
}
.rh-partner:focus-within {
  box-shadow: var(--rh-ring);
  border-color: var(--rh-accent-border);
}
/* Section rhythm */
.rh-editorial{
  padding-block: clamp(2.25rem, 4vw, 4rem);
  color: var(--rh-text);
}
.rh-editorial + .rh-editorial{
  padding-top: clamp(1.75rem, 3vw, 3rem);
}
/* Constrain line length independent of grid/cards around it */
.rh-editorial__inner{
  max-width: var(--rh-editorial-max);
}
@media (min-width: 992px){
  .rh-editorial__inner{
    margin-left: 0;  /* keep left-aligned like your layout */
  }
}
/* Title */
.rh-editorial__title{
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: .75rem; /* tighter to lead */
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}
/* Lead: stronger hierarchy */
.rh-editorial__lead{
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  line-height: 1.65;
  color: var(--rh-text);
}
/* Body copy */
.rh-editorial__body p{
  margin: 0;
  color: var(--rh-text-muted);
  line-height: 1.7;
}
/* Slight paragraph rhythm if you add more than one later */
.rh-editorial__body p + p{
  margin-top: .75rem;
}
/* System section: editorial callout (not a heavy card) */
.rh-editorial__inner--callout{
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--rh-editorial-bg);
  border-left: 4px solid var(--rh-editorial-border);
  border-radius: .75rem;
}

/* Callout base styles */
.rh-callout {
  background: var(--rh-callout-bg);
  border-left: 4px solid var(--rh-callout-border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 2rem;
}


/* Prefer reduced motion support (in case you later add transitions) */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
  }
}
/* Mobile “On this page” box */
.rh-toc .card{
  border-radius: var(--rh-radius);
  border: 1px solid var(--bs-border-color);
}
.rh-toc a{
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
}
.rh-toc a:focus-visible{
  box-shadow: var(--rh-ring);
  outline: none;
  border-radius: .25rem;
}
/* Safer anchor navigation when a fixed/sticky header is present */
@supports (scroll-margin-top: 1px){
  section[id]{
    scroll-margin-top: 6rem;
  }
}
.rh-toc--desktop .card{
  border: 1px solid var(--bs-border-color);
}
.rh-toc--desktop a[aria-current="true"],
.rh-toc--desktop a.is-active{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
/* DevOps page: Klartext emphasis */
.rh-klartext{
  font-weight: 650;
  letter-spacing: -0.01em;
}
/* Grid layouts (BEM pattern) */
.rh-grid {
  display: grid;
  gap: 1.25rem;
}
.rh-grid--two {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .rh-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rh-grid--three {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .rh-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .rh-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rh-system-block { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem; border-radius: .5rem; background: var(--rh-card); border: 1px solid transparent; }
.rh-icon { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--rh-primary-dark); }
.rh-icon i.bi { font-size: 1.25rem; line-height: 1; display: inline-block; color: inherit; }
.rh-text--meta { color: var(--rh-text-muted); font-size: .95rem; margin: 0; }
.rh-system-block h4.h6 { margin: 0 0 .25rem 0; font-size: 1rem; }
.rh-system-block p { margin: 0; color: var(--rh-text); font-size: .95rem; line-height: 1.4; }
.rh-concept{

  background: var(--rh-card);
}
/* Konzepte: text wrapping & overflow robustness */
.rh-concept .d-flex{
  align-items: flex-start;
  gap: .75rem !important;
}
/* Wichtig: Flex-Child darf schrumpfen */
.rh-concept .d-flex > div{
  min-width: 0;
}
/* Lange Wörter/Komposita sauber umbrechen (DE) */
.rh-concept h4,
.rh-concept p{
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
/* Typo in Kacheln ruhiger */
.rh-concept h4{
  line-height: 1.25;
  margin-bottom: .5rem;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin-bottom: .35rem !important;
}
.rh-concept p{
  margin-bottom: 0 !important;
  line-height: 1.45;

  overflow-wrap: break-word;
  hyphens: manual;
}
/* Auf kleinen Screens: etwas kompakter */
@media (max-width: 575.98px){
  .rh-concept{
    padding: 1rem !important; /* wirkt auch wenn du p-3/p-4 nutzt */
  }
  .rh-concept p{
    font-size: .95rem;
  }
}
.rh-concept__body{ min-width: 0; }
.rh-concept--primary{
  /* primary already gets soft bg + outline via utilities; keep only subtle emphasis */
  box-shadow: var(--rh-concept-primary-shadow);
}
.rh-concept--primary .text-body-secondary{
  color: var(--rh-text-muted) !important;
}
.rh-concept i.bi{
  font-size: 1.1rem !important; /* statt fs-4/fs-5 Dominanz */
}
.rh-toc--rail{
  position: sticky;
  top: 5.5rem;              /* passt zu deinem Header */
  max-width: 28rem;         /* nicht zu breit */
  margin: clamp(1.5rem, 3vw, 2rem) 0 2rem;
  z-index: 2;
}
.rh-toc--rail .card{
  border: 1px solid var(--bs-border-color);
  box-shadow: none;         /* kein Card-Gewicht */
}
.rh-toc--rail .card-body{
  padding: 1rem;
}
.rh-toc--rail a{
  display: inline-block;
  padding: .2rem 0;
  font-size: .95rem;
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
}
.rh-toc--rail a[aria-current="true"],
.rh-toc--rail a.is-active{
  font-weight: 600;
}
:root{
  --rh-ring: 0 0 0 .25rem rgba(24, 86, 184, 0.35);
  --rh-callout-bg: #f4fbff;
  --rh-callout-border: #149286;
}
.rh-page__title{
  letter-spacing:-.02em;
}
/* TOC */
.rh-toc__card{
  border-radius: 1rem;
}
.rh-toc__list{
  display: grid;
  gap: .5rem;
}
.rh-toc__link{
  text-decoration: underline;
  text-underline-offset: .2em;
}
.rh-toc__link.active{
  font-weight: 600;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
/* Sections */
.section--surface {
  background: var(--rh-surface);
}
/* End of added accent utilities */


/* =========================================================
   DevOps page — spacing & rhythm pass (2026-01)
   Goal: clearer section separation, calmer vertical flow
   ========================================================= */

:root{
  --rh-section-pad: clamp(1.5rem, 3vw, 2.5rem);
  --rh-section-gap: clamp(2rem, 4vw, 3.5rem);
  --rh-card-pad: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* Page header rhythm */
.rh-page__header{
  /* tightened to avoid stacking when followed by callout/benefits */
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.rh-page__subtitle{
  max-width: 72ch;
}
/* Concepts grid: more outside spacing; slightly tighter inside on mobile */
.rh-concept{
  padding: 1.25rem !important;
}
@media (max-width: 575.98px){
  .rh-concept{
    padding: 1rem !important;
  }
}
/* TOC rail: less prominent, more offset */
.rh-toc--rail{
  max-width: 28rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 2rem;
}
.rh-toc--rail .card{
  background: transparent;
  box-shadow: none;
}
/* 2) TOC: ensure it behaves like normal flow content */
.rh-toc--desktop,
.rh-toc--rail,
.rh-toc.position-sticky {
  position: static !important;
  top: auto !important;
}
/* 3) Optional: give TOC a bit of breathing room since it no longer sticks */
.rh-toc,
.rh-toc--rail,
.rh-toc--desktop {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
/* =========================
   TOC (gekürzt auf 5 Punkte)
   ========================= */

/* TOC wirkt leichter mit weniger Punkten */
.rh-toc__list {
  gap: .35rem;
}
/* Mehr Luft zwischen TOC und Content */
.rh-toc {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
/* Konzepte bewusst etwas leiser */
.rh-concept h4 {
  font-size: .95rem;
}
.rh-concept p {
  font-size: .9rem;
}


.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-body-bg);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background-color: #0F2747;
  color: #ffffff;
  border-color: #0F2747;
}

.btn-outline-primary:focus-visible {
  box-shadow: var(--rh-ring);
}

.rh-surface {
  background-color: var(--rh-surface);
  color: var(--rh-text); /* ensure default body text */
}

.rh-surface .text-muted,
.rh-surface .rh-text-muted {
  color: #2A3442; /* slightly darker */
}

.rh-surface h2,
.rh-surface h3 {
  color: var(--rh-navy);
}