/* ═══════════════════════════════════════════════════════
   IBS Base CSS — Shared Token System v1.0
   Single Source of Truth für alle intelego.solutions Partials
   Import: <style>@import url('/assets/ibs-base.css')</style>
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── TOKEN SYSTEM ────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:    #f4f5f8;   /* page bg */
  --bg2:   #eceef4;   /* alt section bg */
  --sf:    #ffffff;   /* surface (cards) */
  --el:    #e8eaf2;   /* elevated */

  /* Ink */
  --ink:   #0d0e16;
  --ink2:  #2e3248;
  --ink3:  #494e5e;
  --ink4:  #6b7280;
  --ink5:  #9ca3af;

  /* Borders */
  --bd:    rgba(0,0,0,.08);
  --bdh:   rgba(0,0,0,.15);

  /* Brand */
  --ibs:   #1a3870;   /* Intelego Blue */
  --ibs2:  #2454a0;

  /* Pillars */
  --ibp:   #7c3aed;   --ibp-d: rgba(124,58,237,.07);
  --ibo:   #025d8f;   --ibo-d: rgba(2,93,143,.07);
  --iba:   #025c43;   --iba-d: rgba(2,92,67,.07);  --iba2: #047857;

  /* Accents */
  --grn:   #059669;
  --amber: #d97706;
  --red:   #dc2626;

  /* Typography */
  --f: 'Inter', system-ui, -apple-system, sans-serif;
  --m: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Radii */
  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 20px; --r6: 28px;

  /* Shadows */
  --s1: 0 1px 8px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --s2: 0 4px 24px rgba(0,0,0,.10), 0 8px 40px rgba(0,0,0,.06);
  --s3: 0 12px 60px rgba(0,0,0,.14), 0 24px 80px rgba(0,0,0,.08);

  /* Layout */
  --max:   1080px;
  --max-w: 1280px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
}
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
img{ display: block; max-width: 100%; }
::selection { background: rgba(26,56,112,.15); }
:focus-visible { outline: 2px solid var(--ibs); outline-offset: 3px; border-radius: var(--r1); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.c      { max-width: var(--max);   margin: 0 auto; padding: 0 clamp(1.25rem,5vw,2.5rem); }
.c-wide { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem,5vw,2.5rem); }

section { position: relative; padding: clamp(5rem,10vh,8rem) 0; }
.sec-alt { background: var(--bg2); }
.sec-sf  { background: var(--sf); }
.sec-sm  { padding: clamp(3rem,6vh,5rem) 0; }
.sec-xs  { padding: clamp(2rem,4vh,3.5rem) 0; }

/* ── EYEBROW ─────────────────────────────────────────────── */
.eyebrow, .section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--m);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 1.5rem;
}
.ey-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ibs);
  flex-shrink: 0;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.page-title, .h1 {
  font-size: clamp(2.2rem,5.5vw,4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ink);
}
.h2 {
  font-size: clamp(1.6rem,3.8vw,2.8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--ink);
}
.h3 {
  font-size: clamp(1.1rem,2vw,1.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}
.page-sub, .sub, .lead {
  font-size: clamp(.95rem,1.8vw,1.1rem);
  color: var(--ink3);
  line-height: 1.85;
  max-width: 620px;
}
.lede {
  font-size: clamp(.9rem,1.6vw,1rem);
  color: var(--ink3);
  line-height: 1.8;
}
.caption {
  font-family: var(--m);
  font-size: .65rem;
  color: var(--ink4);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Colour accents */
.acc     { color: var(--ibs); }
.acc-ibp { color: var(--ibp); }
.acc-ibo { color: var(--ibo); }
.acc-iba { color: var(--iba); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary, .btn-p {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.85rem;
  background: var(--ibs);
  color: #fff;
  border-radius: var(--r3);
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary:hover, .btn-p:hover {
  background: var(--ibs2);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(26,56,112,.25);
}
.btn-secondary, .btn-s {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.85rem;
  background: transparent;
  color: var(--ink2);
  border: 1.5px solid var(--bd);
  border-radius: var(--r3);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .18s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover, .btn-s:hover {
  border-color: var(--ibs);
  color: var(--ibs);
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink3);
  text-decoration: none;
  transition: color .15s;
  padding: .2rem 0;
}
.btn-ghost:hover { color: var(--ibs); }
.btn-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Pillar CTAs */
.btn-ibp { background: var(--ibp); }
.btn-ibp:hover { background: #6d28d9; }
.btn-ibo { background: var(--ibo); }
.btn-ibo:hover { background: #01426b; }
.btn-iba { background: var(--iba); }
.btn-iba:hover { background: #014d38; }

/* ── BADGES / PILLS ──────────────────────────────────────── */
.badge, .trust-pill, .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--m);
  font-size: .62rem;
  font-weight: 600;
  padding: .28rem .75rem;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
}
.badge-blue   { background: rgba(26,56,112,.08); color: var(--ibs); border-color: rgba(26,56,112,.18); }
.badge-green  { background: rgba(5,150,105,.08); color: var(--grn); border-color: rgba(5,150,105,.18); }
.badge-purple { background: rgba(124,58,237,.08); color: var(--ibp); border-color: rgba(124,58,237,.18); }
.badge-teal   { background: rgba(2,93,143,.08); color: var(--ibo); border-color: rgba(2,93,143,.18); }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}
.trust-pill {
  background: rgba(0,0,0,.04);
  color: var(--ink3);
  border-color: var(--bd);
}
.trust-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grn);
  flex-shrink: 0;
}

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--r4);
  padding: 2rem;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.card:hover { border-color: var(--bdh); box-shadow: var(--s1); }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--s2); }
.card-xl { padding: 2.5rem; border-radius: var(--r5); }
.card-sm { padding: 1.5rem; border-radius: var(--r3); }

/* ── DIVIDERS ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--bd);
  border: none;
  margin: 0;
}

/* ── GRID PATTERNS ───────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr)); gap: 1.5rem; }

/* ── DENSE GRID (1px gap) ────────────────────────────────── */
.grid-dense {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: var(--r5);
  overflow: hidden;
}
.grid-dense > * { background: var(--sf); transition: background .2s; }
.grid-dense > *:hover { background: var(--bg2); }

/* ── STAT ROWS ───────────────────────────────────────────── */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--bd);
  margin-top: clamp(2rem,4vh,3.5rem);
}
.stat-row-item {
  padding: clamp(1.25rem,3vh,2rem) clamp(1.25rem,3vw,2.5rem);
  border-right: 1px solid var(--bd);
}
.stat-row-item:first-child { padding-left: 0; }
.stat-row-item:last-child  { border-right: none; }
.stat-val {
  font-family: var(--m);
  font-size: clamp(1.4rem,3vw,2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}
.stat-lbl {
  font-size: .72rem;
  color: var(--ink4);
  margin-top: .3rem;
}

/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal, .r {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.visible, .r.v { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){.reveal,.r{opacity:1;transform:none;transition:none}}

/* ── NAV ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(244,245,248,.94);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--bd);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem,5vw,2.5rem);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-logo {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.02em;
  color: var(--ink);
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-dot { color: var(--ibs); }
.nav-links {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex: 1;
}
.nav-links a {
  font-size: .82rem;
  color: var(--ink3);
  padding: .38rem .75rem;
  border-radius: var(--r2);
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links a:hover    { color: var(--ink); background: rgba(0,0,0,.04); }
.nav-links a.active   { color: var(--ibs); font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.nav-cta {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: var(--ibs);
  padding: .42rem 1.1rem;
  border-radius: var(--r2);
  transition: background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover { background: var(--ibs2); }

/* ── PILLAR STRIP ────────────────────────────────────────── */
.pillar-strip {
  background: var(--sf);
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 66px;
  z-index: 100;
}
.ps-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem,5vw,2.5rem);
  height: 44px;
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-in::-webkit-scrollbar { display: none; }
.ps-label {
  font-family: var(--m);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink5);
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: .5rem;
}
.ps-link {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink3);
  padding: .28rem .75rem;
  border-radius: var(--r2);
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.ps-link:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.ps-ibp { }  .ps-ibp:hover { color: var(--ibp); }
.ps-ibo { }  .ps-ibo:hover { color: var(--ibo); }
.ps-iba { }  .ps-iba:hover { color: var(--iba); }
.ps-konfig { font-weight: 700; color: var(--ibs); }
.ps-konfig:hover { background: rgba(26,56,112,.07); }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--ink4);
  margin-bottom: 1.75rem;
}
.breadcrumb a { color: var(--ink4); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--ibs); }
.breadcrumb span { color: var(--ink5); font-size: .9rem; }
.breadcrumb span[aria-hidden] { color: var(--ink4); margin: 0 .1rem; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: clamp(3.5rem,7vh,5.5rem) 0 2.5rem;
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem,5vw,4rem);
  margin-bottom: 3rem;
}
.footer-brand .brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: .65rem;
}
.footer-brand .brand-dot { color: var(--ibs); }
.footer-brand p { font-size: .84rem; line-height: 1.7; max-width: 28ch; }
.footer-col h4 {
  font-family: var(--m);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  padding: .28rem 0;
  transition: color .15s;
  text-decoration: none;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.35); }
.footer-legal { display: flex; gap: 1.25rem; }
.footer-legal a { font-size: .78rem; color: rgba(255,255,255,.35); transition: color .15s; text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,.7); }

/* ── CTA SECTION ─────────────────────────────────────────── */
.cta-section {
  background: var(--ibs);
  color: #fff;
  text-align: center;
  padding: clamp(4rem,8vh,7rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(255,255,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section .c { position: relative; z-index: 1; }
.cta-section .h2 { color: #fff; margin-bottom: 1rem; }
.cta-section .sub { color: rgba(255,255,255,.82); margin: 0 auto 2.5rem; }
.cta-section .btn-secondary {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.cta-section .btn-secondary:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.cta-section .btn-primary {
  background: #fff;
  color: var(--ibs);
}
.cta-section .btn-primary:hover {
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

/* ── SKIP LINK ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px; left: 1rem;
  background: var(--ibs); color: #fff;
  padding: .5rem 1rem;
  border-radius: var(--r2);
  font-weight: 700; font-size: .85rem;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px) {
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .btn-actions { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr; }
  .stat-row { flex-wrap: wrap; }
  .stat-row-item { padding: 1rem 1.25rem; border-right: none; border-bottom: 1px solid var(--bd); }
  .stat-row-item:last-child { border-bottom: none; }
}

/* ── MOBILE ENHANCEMENTS (R15) ───────────────────────────── */
@media(max-width:480px) {
  .hero-card { display: none; }  /* Hero-Card auf kleinen Phones ausblenden */
  .stats-strip .stat-item { flex: 0 0 50%; }
  .pillar-tags { gap: .3rem; }
  .prozess { gap: 0; }
  .nav-actions .btn-ghost { display: none; }
}

/* ── TYPOGRAPHY REFINEMENTS (R16) ───────────────────────── */
/* Bessere Lesbarkeit bei längeren Texten */
.lede + .lede { margin-top: 1.25rem; }
.sub + .btn-actions { margin-top: 2rem; }
h2 + .sub { margin-top: 1rem; }
h2 + p   { margin-top: 1rem; }
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }

/* Konsistente Abschnitt-Einleitung */
.section-intro {
  margin-bottom: clamp(3rem,6vh,5rem);
}
.section-intro .eyebrow { margin-bottom: 1rem; }
.section-intro h2 { margin-bottom: 1rem; }
.section-intro .sub { margin-top: 0; }

/* Links in Fließtext */
.prose a { color: var(--ibs); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ibs2); }

/* Listenformatierung */
.check-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.check-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--ink3); line-height: 1.65; padding-left: 0; }
.check-list li::before { content: '✓'; color: var(--grn); font-weight: 700; font-size: .8rem; flex-shrink: 0; margin-top: .12rem; }

/* Arrow list */
.arrow-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.arrow-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; color: var(--ink3); line-height: 1.65; }
.arrow-list li::before { content: '→'; color: var(--ibs); font-weight: 700; font-size: .8rem; flex-shrink: 0; margin-top: .12rem; }

/* Section separator */
.sec-sep { height: 3px; background: linear-gradient(90deg,var(--ibp),var(--ibo),var(--iba)); border: none; margin: 0; }

@keyframes tp-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.trust-pill-dot { animation: tp-pulse 2.5s ease-in-out infinite; }

/* ════════════════════════════════════════════════
   GLOBALE KOMPONENTEN — R01 2026-06-12
   Alle Partials nutzen diese Klassen statt inline-styles
   ════════════════════════════════════════════════ */

/* ── CTA-SECTION (dark, Pillar-Farbe) ─────────── */
.cta-section {
  background: var(--ibs);
  color: #fff;
  text-align: center;
  padding: clamp(4.5rem,9vh,7rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 800px 400px at 50% 50%, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.cta-section .c { position: relative; z-index: 1; }
.cta-section .h2 { color: #fff; margin-bottom: 1rem; }
.cta-section .sub { color: rgba(255,255,255,.82); margin: 0 auto 2.5rem; }
.cta-section .btn-primary { background:#fff; color:var(--ibs); }
.cta-section .btn-primary:hover { background:rgba(255,255,255,.9); box-shadow:0 4px 20px rgba(0,0,0,.2); }
.cta-section .btn-secondary { color:#fff; border-color:rgba(255,255,255,.4); }
.cta-section .btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-1px); }

/* Pillar-varianten */
.cta-section.cta-ibp { background: var(--ibp); }
.cta-section.cta-ibo { background: var(--ibo); }
.cta-section.cta-iba { background: var(--iba); }

/* ── PAGE-HERO MUSTER ─────────────────────────── */
.page-hero {
  padding: clamp(5.5rem,10vh,8rem) 0 clamp(3.5rem,7vh,5.5rem);
  border-bottom: 1px solid var(--bd);
  position: relative;
  overflow: hidden;
}
.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,5rem);
  align-items: center;
}
.page-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--m); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; padding: .3rem .85rem; border-radius: 100px;
  margin-bottom: 1.75rem;
}
.page-hero-badge.ibp { background: var(--ibp-d); border: 1px solid var(--ibp-b); color: var(--ibp); }
.page-hero-badge.ibo { background: var(--ibo-d); border: 1px solid var(--ibo-b); color: var(--ibo); }
.page-hero-badge.iba { background: var(--iba-d); border: 1px solid var(--iba-b); color: var(--iba); }
.page-hero-badge.ibs { background: rgba(26,56,112,.08); border: 1px solid rgba(26,56,112,.18); color: var(--ibs); }

/* ── IIO-BAND ─────────────────────────────────── */
.iio-band {
  background: var(--bg2);
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  padding: 1.25rem 0;
}
.iio-band-inner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.iio-band-text {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; color: var(--ink3); flex-wrap: wrap;
}
.iio-band-text strong { color: var(--ink); }
.iio-band-sep { color: var(--bd); }
.iio-band-link {
  font-family: var(--m); font-size: .72rem; font-weight: 700;
  color: var(--ibs); white-space: nowrap;
  border: 1.5px solid var(--ibs); border-radius: var(--r2);
  padding: .3rem .85rem; transition: background .15s; text-decoration: none;
}
.iio-band-link:hover { background: rgba(26,56,112,.07); }

/* ── SECTION-H2 MODIFIER (kein inline-style!) ── */
.h2-sm   { font-size: clamp(1.4rem,2.8vw,2rem) !important; }
.h2-md   { font-size: clamp(1.5rem,3.2vw,2.4rem) !important; }
.h2-center { text-align: center !important; max-width: 100% !important; }

/* ── PILLAR STRIP: top sync mit nav ─────────────── */
.pillar-strip { top: 66px; }

/* ════════════════════════════════════════════════
   R08 — Neue globale Klassen 2026-06-12
   ════════════════════════════════════════════════ */

/* ── EY-DOT Pillar-Farben ─────────────────────── */
.ey-dot-ibp { background: var(--ibp) !important; }
.ey-dot-ibo { background: var(--ibo) !important; }
.ey-dot-iba { background: var(--iba) !important; }

/* ── SZENARIO-BADGE ───────────────────────────── */
.szen-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ibp);
  color: #fff;
  font-family: var(--m);
  font-size: .6rem; font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.szen-num {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--m);
  font-size: .6rem;
  color: var(--ibp);
  letter-spacing: .14em;
  margin-bottom: .75rem;
}

/* ── CHECK OK / NO ────────────────────────────── */
.check-ok   { color: var(--grn); font-weight: 700; }
.check-no   { color: var(--ink5); }
.check-ibp  { color: var(--ibp); }

/* ── TABLE PRICE ──────────────────────────────── */
.td-price-ibp { color: var(--ibp) !important; font-family: var(--m); font-weight: 700; }
.td-price-ibo { color: var(--ibo) !important; font-family: var(--m); font-weight: 700; }
.td-price-iba { color: var(--iba) !important; font-family: var(--m); font-weight: 700; }

/* ── TABLE-CLEAN ──────────────────────────────── */
.table-clean {
  width: 100%; border-collapse: collapse;
  font-size: .88rem;
}
.table-clean th {
  padding: .75rem 1rem;
  background: var(--bg2); border-bottom: 2px solid var(--bd);
  text-align: left; font-family: var(--m); font-size: .65rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink4);
}
.table-clean td {
  padding: .65rem 1rem; border-bottom: 1px solid var(--bd);
  color: var(--ink3); line-height: 1.5;
}
.table-clean tr:hover td { background: var(--bg2); }
.table-clean tr:last-child td { border-bottom: none; }

/* ── BTN-ACTIONS ──────────────────────────────── */
.btn-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ── BTN-OUT deprecated → btn-secondary ──────── */
.btn-out {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.75rem;
  background: transparent;
  color: var(--ink3); border: 1.5px solid var(--bd);
  border-radius: var(--r3); font-size: .9rem; font-weight: 600;
  transition: border-color .18s, color .18s; text-decoration: none;
}
.btn-out:hover { border-color: var(--ibs); color: var(--ibs); transform: translateY(-1px); }

/* ── HL-BOX ───────────────────────────────────── */
.hl-box {
  background: var(--bg2);
  border: 1px solid var(--bd); border-left: 3px solid var(--ibs);
  border-radius: var(--r3); padding: 1.1rem 1.4rem;
  font-size: .9rem; color: var(--ink3); line-height: 1.75;
}
.hl-box-ibp { border-left-color: var(--ibp); background: var(--ibp-d); }
.hl-box-ibo { border-left-color: var(--ibo); background: var(--ibo-d); }
.hl-box-iba { border-left-color: var(--iba); background: var(--iba-d); }

/* ── FLOW-STEPS ───────────────────────────────── */
.flow { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.flow-step {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--sf); border: 1px solid var(--bd);
  border-radius: var(--r4); transition: border-color .2s;
}
.flow-step:hover { border-color: var(--bdh); }
.flow-n {
  font-family: var(--m); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink4); background: var(--bg2);
  border: 1px solid var(--bd); border-radius: var(--r1);
  padding: .25rem .55rem; white-space: nowrap; flex-shrink: 0;
  margin-top: .1rem;
}

/* ── OVERFLOW SCROLL ──────────────────────────── */
.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }