/* =========================================================
   RocketAds — site styles
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--ra-fw-regular) var(--ra-text-body)/var(--ra-lh-body) var(--ra-font-sans);
  color: var(--ra-ink-3);
  background: var(--ra-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ra-blue); text-decoration: none; }
a:hover { color: var(--ra-blue-hover); }
em { font-style: italic; color: var(--ra-ink-2); }

.container {
  max-width: var(--ra-container-max);
  margin: 0 auto;
  padding-left: var(--ra-container-gutter);
  padding-right: var(--ra-container-gutter);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ra-space-2);
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-semi);
  border: 0;
  border-radius: var(--ra-radius-pill);
  cursor: pointer;
  transition: background var(--ra-dur-base) var(--ra-ease-out),
              color var(--ra-dur-base) var(--ra-ease-out),
              box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-fast) var(--ra-ease-out);
  white-space: nowrap;
}
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--primary {
  background: var(--ra-blue);
  color: var(--ra-blue-on);
  box-shadow: var(--ra-shadow-blue);
}
.btn--primary:hover { background: var(--ra-blue-hover); color: var(--ra-blue-on); transform: translateY(-1px); }
.btn--primary:active { background: var(--ra-blue-pressed); transform: translateY(0); }

/* ============ HERO (inset rounded card, fills viewport on load) ============ */
.hero-wrap {
  padding: 12px;
}
@media (min-width: 720px){
  .hero-wrap { padding: 14px; }
}
.hero {
  position: relative;
  border-radius: 25px;
  background: var(--ra-gradient-mesh);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 80px) clamp(72px, 9vw, 120px);
  /* Fill the viewport on load. Subtract top + bottom wrap padding so the
     colorful card stretches to the fold while leaving an even white frame. */
  min-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ra-ink-7);
}
/* Mobile: tighter padding around the card, more breathing room inside */
@media (max-width: 640px){
  .hero-wrap { padding: 10px; }
  .hero {
    min-height: calc(100svh - 20px);
    padding: 88px 28px 80px;
    border-radius: 20px;
  }
  .hero__inner { padding-top: 52px; }
}
.hero__logo {
  position: absolute;
  top: clamp(24px, 3vw, 36px);
  left: clamp(24px, 3vw, 44px);
  display: inline-block;
}
.hero__logo img {
  height: 32px;
  width: auto;
}
.hero__inner {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  padding-top: clamp(88px, 11vw, 156px);
}
.hero__title {
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-bold);       /* was 800 — less heavy now */
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ra-ink);
  margin: 0 0 var(--ra-space-4);
  text-wrap: balance;
}
.hero__kicker {
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-semi);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ra-blue);
  margin: 0 0 var(--ra-space-10);
}
.hero__ctas { display: flex; justify-content: center; }

/* Mini hero variant (legal pages) */
.hero--mini {
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hero--mini .hero__inner { padding-top: clamp(24px, 3vw, 40px); }
.hero__title--sm {
  font-size: clamp(36px, 5vw, 56px);
}

/* ============ LEGAL PAGES ============ */
.legal {
  padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 120px);
}
.legal__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--ra-container-gutter);
  color: var(--ra-ink-3);
}
.legal__inner h2 {
  font: var(--ra-fw-bold) var(--ra-text-h3)/var(--ra-lh-h3) var(--ra-font-sans);
  letter-spacing: var(--ra-tr-h3);
  color: var(--ra-ink);
  margin: var(--ra-space-10) 0 var(--ra-space-4);
}
.legal__inner h3 {
  font: var(--ra-fw-bold) 18px/1.3 var(--ra-font-sans);
  color: var(--ra-ink);
  margin: var(--ra-space-10) 0 var(--ra-space-3);
}
.legal__inner h4 {
  font: var(--ra-fw-semi) 16px/1.35 var(--ra-font-sans);
  color: var(--ra-ink-2);
  margin: var(--ra-space-6) 0 var(--ra-space-2);
}
.legal__inner p,
.legal__inner ul {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ra-ink-3);
  margin: 0 0 var(--ra-space-4);
}
.legal__inner ul {
  padding-left: 20px;
}
.legal__inner li { margin-bottom: var(--ra-space-2); }
.legal__inner strong { color: var(--ra-ink-2); font-weight: var(--ra-fw-semi); }
.legal__inner a { color: var(--ra-blue); word-break: break-word; }
.legal__inner a:hover { text-decoration: underline; }

/* ============ METRIC ============ */
.metric {
  padding: var(--ra-space-20) 0 var(--ra-space-12);
  text-align: center;
}
.metric .ra-eyebrow { margin: 0 0 var(--ra-space-3); }
.metric__value {
  font: var(--ra-fw-bold) clamp(24px, 3vw, 34px)/1.2 var(--ra-font-sans);
  letter-spacing: -0.02em;
  color: var(--ra-ink);
  margin: 0;
}

/* ============ LOGO MARQUEE ============ */
.logos {
  padding: var(--ra-space-4) 0 var(--ra-space-16);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.logos__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  padding-right: clamp(40px, 6vw, 80px);
}
.logos__row img {
  height: 42px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--ra-dur-base) var(--ra-ease-out);
  flex-shrink: 0;
}
.logos__row img:hover { opacity: 0.95; }
/* <picture> is a transparent wrapper: let the inner <img> stay the flex item */
.logos__row picture, .logo-grid picture { display: contents; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect reduced-motion: stop the marquee (logos stay readable, just static) */
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
}

/* ============ BRAND TRUST GRID (landing pages) ============ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 5vw, 60px) clamp(24px, 4vw, 48px);
  align-items: center;
  justify-items: center;
  margin-top: clamp(40px, 6vw, 64px);
}
.logo-grid img {
  height: 40px; width: auto; max-width: 100%;
  opacity: 0.6; filter: grayscale(1);
  transition: opacity var(--ra-dur-base) var(--ra-ease-out);
}
.logo-grid img:hover { opacity: 0.95; }
.ra-accent { color: var(--ra-blue); }
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .logo-grid img { height: 34px; }
}

/* landing pages: left-align the centered hero + section headers on phones */
@media (max-width: 640px) {
  .ad-lp .subhero__inner--center,
  .ad-lp .section__header--center { text-align: left; }
  .ad-lp .subhero__inner--center .subhero__sub { margin-left: 0; margin-right: 0; }
  .ad-lp .subhero__inner--center .subhero__ctas { justify-content: flex-start; }
  .ad-lp .section__header--center .section__lead { margin-left: 0; margin-right: 0; }
}

/* ============ SECTIONS ============ */
.section {
  padding: clamp(72px, 9vw, 120px) 0;
}
.section--muted { background: var(--ra-ink-9); }
.section__header {
  margin-bottom: var(--ra-space-16);
  max-width: 720px;
}
.section__header .ra-eyebrow { margin: 0 0 var(--ra-space-3); }
.section__header h2 { margin: 0; }
.section__header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section__header .section__sub { margin: var(--ra-space-4) 0 0; color: var(--ra-ink-4); font-size: 17px; line-height: 1.6; }
.article__cases-cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }

/* ============ PILLARS ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ra-space-5);
}
.pillar-card {
  background: var(--ra-white);
  border: var(--ra-border-1);
  border-radius: var(--ra-radius-lg);
  padding: var(--ra-space-8);
  box-shadow: var(--ra-shadow-xs);
  transition: box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out);
}
.pillar-card:hover {
  box-shadow: var(--ra-shadow-md);
  transform: translateY(-2px);
}
.pillar-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--ra-radius-md);
  background: var(--ra-blue);              /* solid indigo tile, white glyph */
  color: var(--ra-blue-on);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ra-space-5);
  box-shadow: var(--ra-shadow-blue);
}
.pillar-card__icon svg { width: 24px; height: 24px; }
.pillar-card h3 { margin: 0 0 var(--ra-space-3); }
.pillar-card p { margin: 0; color: var(--ra-ink-4); }

/* ============ PLATEAUS ============ */
.plateaus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ra-space-5);
}
.plateau-card {
  border-radius: var(--ra-radius-xl);
  padding: var(--ra-space-8);
  border: var(--ra-border-1);
  box-shadow: var(--ra-shadow-sm);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.plateau-card--a { background: radial-gradient(190px 160px at 88% 6%, rgba(91,141,239,0.22)  0%, transparent 70%), var(--ra-white); }
.plateau-card--b { background: radial-gradient(190px 160px at 88% 6%, rgba(166,106,224,0.20) 0%, transparent 70%), var(--ra-white); }
.plateau-card--c { background: radial-gradient(190px 160px at 88% 6%, rgba(246,160,107,0.24) 0%, transparent 70%), var(--ra-white); }
.plateau-card__label {
  font: var(--ra-fw-semi) var(--ra-text-eyebrow)/1.2 var(--ra-font-sans);
  letter-spacing: var(--ra-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ra-blue);
  margin: 0 0 var(--ra-space-4);
}
.plateau-card__stat {
  font: var(--ra-fw-bold) 26px/1.2 var(--ra-font-sans);
  letter-spacing: -0.02em;
  color: var(--ra-ink);
  margin: 0 0 var(--ra-space-6);
}
.plateau-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ra-space-3);
}
.plateau-card__list li {
  position: relative;
  padding-left: 22px;
  color: var(--ra-ink-3);
  font-size: 15px;
  line-height: 1.5;
}
.plateau-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--ra-blue);
}

/* ============ GRADIENT BAND ============ */
.band {
  position: relative;
  background: var(--ra-gradient-mesh);
  padding: clamp(80px, 10vw, 140px) 0;
}
.band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 28px);
}
.chip {
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-bold);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ra-blue);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.band__rule {
  width: clamp(28px, 5vw, 56px);
  height: 2px;
  border-radius: 2px;
  background: var(--ra-blue);
  opacity: 0.85;
}
@media (max-width: 640px){
  .band__rule { width: 20px; }
  .chip { font-size: 12px; }
}

/* ============ TABS ============ */
.tabs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--ra-ink-7);
  margin-bottom: var(--ra-space-10);
}
.tabs__tab {
  background: transparent;
  border: 0;
  padding: var(--ra-space-4) 0;
  font: var(--ra-fw-semi) clamp(18px, 2vw, 24px)/1.25 var(--ra-font-sans);
  letter-spacing: -0.015em;
  color: var(--ra-ink-5);
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: color var(--ra-dur-base) var(--ra-ease-out);
}
.tabs__tab:hover { color: var(--ra-ink-3); }
.tabs__tab.is-active { color: var(--ra-blue); }
.tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--ra-blue);
  border-radius: 2px;
}
.tabs__panel {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--ra-space-10);
  align-items: center;
}
.tabs__panel[hidden] { display: none; }
.tabs__copy h3 { margin: 0 0 var(--ra-space-4); }
.tabs__copy p  { margin: 0; color: var(--ra-ink-4); max-width: 38ch; }
.tabs__visual {
  border-radius: var(--ra-radius-lg);
  overflow: hidden;
  box-shadow: var(--ra-shadow-sm);
  border: 1px solid var(--ra-ink-7);
  aspect-ratio: 2 / 1;
  background: #fff;
}
.tabs__visual svg { width: 100%; height: 100%; display: block; }

/* ============ FAQ ============ */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ra-space-10) var(--ra-space-12);
  max-width: 1040px;
  margin: 0 auto;
}
.faq__col { display: flex; flex-direction: column; }
.faq__item {
  border-bottom: 1px solid var(--ra-ink-7);
  padding: var(--ra-space-6) 0;
}
.faq__item:first-child { padding-top: 0; }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ra-space-4);
  font: var(--ra-fw-semi) 16px/1.4 var(--ra-font-sans);
  color: var(--ra-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-right: 2px solid var(--ra-ink-3);
  border-bottom: 2px solid var(--ra-ink-3);
  transform: rotate(45deg);
  transition: transform var(--ra-dur-base) var(--ra-ease-out);
  margin-top: 4px;
}
.faq__item[open] .faq__chev { transform: rotate(-135deg); margin-top: 8px; }
.faq__body { padding-top: var(--ra-space-3); }
.faq__body p {
  margin: 0;
  color: var(--ra-ink-4);
  font-size: 15px;
  line-height: 1.6;
}

/* ============ CTA ============ */
.cta {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  background: var(--ra-gradient-mesh);
  margin-top: 0;
}
.cta .ra-eyebrow { margin: 0 0 var(--ra-space-4); }
.cta__title {
  margin: 0 0 var(--ra-space-4);
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ra-ink);
}
.cta__sub {
  font-size: 18px;
  color: var(--ra-ink-4);
  margin: 0 auto var(--ra-space-10);
  max-width: 560px;
}

/* ============ FOOTER (light) ============ */
.footer {
  background: var(--ra-white);
  color: var(--ra-ink-4);
  padding: var(--ra-space-20) 0 var(--ra-space-8);
  border-top: 1px solid var(--ra-ink-7);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 72px);
  flex-wrap: nowrap;
  padding-bottom: var(--ra-space-16);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--ra-space-4); max-width: 320px; flex-shrink: 0; }
.footer__logo {
  height: 32px;
  width: auto;
  color: var(--ra-blue);        /* SVG inherits currentColor */
}
.footer__logo svg { height: 100%; width: auto; display: block; fill: currentColor; }
.footer__tag {
  color: var(--ra-ink-4);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.footer__social { display: flex; gap: var(--ra-space-3); margin-top: var(--ra-space-2); }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: var(--ra-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ra-ink-8);
  color: var(--ra-ink-2);
  transition: background var(--ra-dur-base) var(--ra-ease-out), color var(--ra-dur-base) var(--ra-ease-out);
}
.footer__social a:hover { background: var(--ra-blue); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }

/* Column groups (homepage sitemap) */
.footer__cols {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
  flex-wrap: nowrap;
}
.footer__col { display: flex; flex-direction: column; gap: var(--ra-space-3); }
.footer__col-title {
  font: var(--ra-fw-semi) 13px/1.2 var(--ra-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ra-ink-5);
  margin: 0 0 var(--ra-space-2);
}
.footer__col a,
.footer__col button {
  color: var(--ra-ink-3);
  font-size: 15px;
  background: transparent;
  border: 0; padding: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--ra-dur-base) var(--ra-ease-out);
}
.footer__col a:hover,
.footer__col button:hover { color: var(--ra-blue); }

/* Legacy inline nav (legal pages) */
.footer__nav {
  display: flex;
  gap: var(--ra-space-6);
  align-items: center;
  flex-wrap: wrap;
}
.footer__nav a,
.footer__nav button.footer__cookie-link {
  color: var(--ra-ink-3);
  font-size: 14px;
  background: transparent;
  border: 0; padding: 0;
  font: inherit;
  cursor: pointer;
}
.footer__nav a:hover,
.footer__nav button.footer__cookie-link:hover { color: var(--ra-blue); }

.footer__meta {
  max-width: var(--ra-container-max);
  margin: 0 auto;
  padding: var(--ra-space-6) var(--ra-container-gutter) 0;
  color: var(--ra-ink-5);
  border-top: 1px solid var(--ra-ink-7);
  text-align: center;
}
.footer__meta p { margin: 0; }

/* ============ COOKIE BANNER (TTDSG/DSGVO) ============ */
.cookie-banner {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cookie-banner__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--ra-white);
  border-radius: var(--ra-radius-xl);
  border: var(--ra-border-1);
  box-shadow: var(--ra-shadow-xl);
  padding: clamp(20px, 3vw, 32px);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  animation: cookie-rise var(--ra-dur-slow) var(--ra-ease-out);
}
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner__title {
  font: var(--ra-fw-bold) var(--ra-text-h4)/var(--ra-lh-h4) var(--ra-font-sans);
  letter-spacing: var(--ra-tr-h4);
  color: var(--ra-ink);
  margin: 0 0 var(--ra-space-3);
}
.cookie-banner__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ra-ink-4);
  margin: 0 0 var(--ra-space-5);
}
.cookie-banner__text a { color: var(--ra-blue); text-decoration: underline; }
.cookie-banner__text a:hover { color: var(--ra-blue-hover); }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-3);
  align-items: center;
}
.cookie-banner__btn {
  padding: 12px 20px;
  font-size: 14px;
  flex: 1 1 0;
  min-width: 160px;
  justify-content: center;
}
.cookie-banner__link {
  background: transparent;
  border: 0;
  color: var(--ra-ink-3);
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-semi);
  font-size: 14px;
  cursor: pointer;
  padding: 12px 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--ra-radius-pill);
  flex: 0 0 auto;
}
.cookie-banner__link:hover { color: var(--ra-blue); }
.cookie-banner__categories {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ra-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ra-space-3);
}
.cookie-cat {
  border: var(--ra-border-1);
  border-radius: var(--ra-radius-md);
  padding: var(--ra-space-4) var(--ra-space-5);
  background: var(--ra-ink-9);
}
.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ra-space-3);
  margin-bottom: var(--ra-space-2);
}
.cookie-cat__name {
  font: var(--ra-fw-semi) 16px/1.3 var(--ra-font-sans);
  color: var(--ra-ink);
  margin: 0;
}
.cookie-cat__badge {
  font-size: 12px;
  font-weight: var(--ra-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-blue);
  background: var(--ra-blue-soft);
  padding: 4px 10px;
  border-radius: var(--ra-radius-pill);
}
.cookie-cat__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ra-ink-4);
  margin: 0;
}
.cookie-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookie-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--ra-ink-6);
  border-radius: var(--ra-radius-pill);
  transition: background var(--ra-dur-base) var(--ra-ease-out);
}
.cookie-toggle__track::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--ra-white);
  border-radius: 50%;
  box-shadow: var(--ra-shadow-xs);
  transition: transform var(--ra-dur-base) var(--ra-ease-out);
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--ra-blue); }
.cookie-toggle input:checked + .cookie-toggle__track::before { transform: translateX(18px); }
.cookie-toggle input:focus-visible + .cookie-toggle__track { box-shadow: var(--ra-shadow-focus); }
.btn--ghost {
  background: var(--ra-white);
  color: var(--ra-blue);
  border: 1.5px solid var(--ra-blue);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ra-blue-soft); color: var(--ra-blue-hover); transform: translateY(-1px); }
.btn--ghost:active { background: var(--ra-blue-soft); transform: translateY(0); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 540px) {
  .cookie-banner__actions { flex-direction: column; align-items: stretch; }
  .cookie-banner__btn { min-width: 0; width: 100%; }
  .cookie-banner__link { width: 100%; text-align: center; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  .pillars, .plateaus, .faq { grid-template-columns: 1fr; }
  .tabs__panel { grid-template-columns: 1fr; gap: var(--ra-space-6); }
  .tabs__tab { font-size: 16px; }
}
@media (max-width: 640px) {
  /* NB: horizontal hero padding is set in the .hero block at the top of the
     file (88px 28px 80px); do not zero it out here or text touches the card. */
  .btn--lg { padding: 14px 22px; font-size: 15px; }
  .section { padding: 72px 0; }
  .section__header { margin-bottom: var(--ra-space-10); }
  .logos__row img { height: 32px; }
}

/* ============ NAV (sticky header) ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--ra-space-6);
  height: 72px;
}
.nav__logo { display: inline-flex; }
.nav__logo img { height: 26px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--ra-space-7);
  margin-left: auto;
  margin-right: var(--ra-space-7);
}
.nav__links > a,
.nav__grouptrigger {
  color: var(--ra-ink-3);
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-medium);
  font-size: 15px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__links > a:hover,
.nav__grouptrigger:hover { color: var(--ra-blue); }
.nav__grouptrigger svg { width: 12px; height: 12px; transition: transform var(--ra-dur-base) var(--ra-ease-out); }

/* Dropdown groups */
.nav__group { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--ra-white);
  border: 1px solid var(--ra-ink-7);
  border-radius: var(--ra-radius-md);
  box-shadow: var(--ra-shadow-lg);
  padding: var(--ra-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out),
              visibility var(--ra-dur-base);
}
.nav__menu::before {     /* hover bridge so the menu doesn't close in the gap */
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  height: 16px;
}
.nav__menu a {
  color: var(--ra-ink-3);
  font-size: 14px;
  font-weight: var(--ra-fw-medium);
  padding: 9px 12px;
  border-radius: var(--ra-radius-sm);
}
.nav__menu a:hover { color: var(--ra-blue); background: var(--ra-blue-soft); }
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__group:hover .nav__grouptrigger svg { transform: rotate(180deg); }
.nav__cta { flex-shrink: 0; }

/* Hamburger toggle (mobile only) */
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 0;
  border-radius: var(--ra-radius-sm);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav__toggle span {
  width: 18px; height: 2px;
  background: var(--ra-ink-2);
  border-radius: 2px;
  transition: transform var(--ra-dur-base) var(--ra-ease-out),
              opacity var(--ra-dur-base) var(--ra-ease-out);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ra-white);
    border-bottom: 1px solid var(--ra-ink-7);
    box-shadow: var(--ra-shadow-lg);
    padding: var(--ra-space-3) var(--ra-container-gutter) var(--ra-space-5);
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    display: none;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links > a,
  .nav__grouptrigger { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--ra-ink-8); width: 100%; }
  .nav__group { padding-bottom: 4px; }
  .nav__grouptrigger { justify-content: space-between; }
  .nav__menu {
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    border: 0; box-shadow: none; min-width: 0;
    padding: 4px 0 var(--ra-space-3) var(--ra-space-4);
    display: flex;
  }
  .nav__menu::before { display: none; }
}

/* ============ HERO badge + subtext ============ */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--ra-fw-semi) 13px/1.2 var(--ra-font-sans);
  letter-spacing: 0.02em;
  color: var(--ra-blue);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ra-ink-7);
  padding: 7px 14px;
  border-radius: var(--ra-radius-pill);
  margin-bottom: var(--ra-space-6);
  box-shadow: var(--ra-shadow-xs);
}
.hero__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ra-ink-4);
  max-width: 600px;
  margin: 0 auto var(--ra-space-8);
}
.hero__ctas { gap: var(--ra-space-3); flex-wrap: wrap; }

/* ============================================================
   CONTENT-PAGE COMPONENTS (service / branchen / case studies)
   ============================================================ */

/* ----- Sub-page hero (shorter than the home hero) ----- */
.subhero {
  background: var(--ra-gradient-mesh);
  border-bottom: 1px solid var(--ra-ink-7);
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 88px);
}
.subhero__inner { max-width: 760px; }
.subhero__inner--center { margin-left: auto; margin-right: auto; text-align: center; }
.subhero .ra-eyebrow { margin: 0 0 var(--ra-space-5); }
.subhero h1 {
  font-family: var(--ra-font-sans);
  font-weight: var(--ra-fw-bold);
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ra-ink);
  margin: 0 0 var(--ra-space-5);
  text-wrap: balance;
}
.subhero__sub {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ra-ink-4);
  margin: 0;
  max-width: 620px;
}
.subhero__inner--center .subhero__sub { margin-left: auto; margin-right: auto; }
.subhero__ctas { display: flex; gap: var(--ra-space-3); flex-wrap: wrap; margin-top: var(--ra-space-8); }
.subhero__inner--center .subhero__ctas { justify-content: center; }

/* ----- Section intro lead ----- */
.section__lead {
  color: var(--ra-ink-4);
  font-size: 18px;
  line-height: 1.6;
  max-width: 640px;
  margin: var(--ra-space-4) 0 0;
}
.section__header--center .section__lead { margin-left: auto; margin-right: auto; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }

/* ----- Split: text + visual ----- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split + .split { margin-top: clamp(48px, 7vw, 104px); }
.split--reverse .split__media { order: -1; }
.split__body h2 { margin: 0 0 var(--ra-space-4); }
.split__body > p:not(.ra-eyebrow) { color: var(--ra-ink-4); font-size: 17px; line-height: 1.65; margin: 0 0 var(--ra-space-4); }
.split__media {
  border-radius: var(--ra-radius-xl);
  border: 1px solid var(--ra-ink-7);
  box-shadow: var(--ra-shadow-md);
  background: var(--ra-gradient-mesh-tight);
  min-height: 300px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__media svg { width: 100%; height: auto; }

/* small checklist used inside split bodies */
.ticks { list-style: none; padding: 0; margin: var(--ra-space-2) 0 0; display: flex; flex-direction: column; gap: var(--ra-space-3); }
.ticks li { position: relative; padding-left: 30px; color: var(--ra-ink-3); font-size: 16px; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: var(--ra-radius-pill);
  background: var(--ra-blue-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230018FE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ----- Numbered process steps ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ra-space-5); }
.steps--2 { grid-template-columns: repeat(2, 1fr); }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step {
  background: var(--ra-white);
  border: 1px solid var(--ra-ink-7);
  border-radius: var(--ra-radius-lg);
  padding: var(--ra-space-8);
  box-shadow: var(--ra-shadow-xs);
}
.step__num {
  width: 40px; height: 40px;
  border-radius: var(--ra-radius-pill);
  background: var(--ra-blue);
  color: var(--ra-blue-on);
  font-weight: var(--ra-fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--ra-space-5);
}
.step h3 { margin: 0 0 var(--ra-space-2); }
.step p { margin: 0; color: var(--ra-ink-4); font-size: 15px; line-height: 1.6; }

/* ----- Stat row ----- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ra-space-6); }
.stat__num {
  font: var(--ra-fw-bold) clamp(32px, 4vw, 48px)/1 var(--ra-font-sans);
  letter-spacing: -0.02em;
  color: var(--ra-blue);
}
.stat__label { color: var(--ra-ink-4); font-size: 15px; line-height: 1.45; margin-top: var(--ra-space-2); }

/* ----- Small tag ----- */
.tag {
  display: inline-flex; align-items: center;
  font: var(--ra-fw-semi) 12px/1 var(--ra-font-sans);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ra-ink-4); background: var(--ra-ink-8);
  padding: 6px 11px; border-radius: var(--ra-radius-pill);
  align-self: flex-start;
}

/* ----- Anonymised case-study cards ----- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ra-space-6); }
.case-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ra-ink-7);
  border-radius: var(--ra-radius-lg);
  overflow: hidden;
  background: var(--ra-white);
  box-shadow: var(--ra-shadow-xs);
  transition: box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out);
}
.case-card:hover { box-shadow: var(--ra-shadow-md); transform: translateY(-3px); }
.case-card__media {
  aspect-ratio: 16 / 10;
  background: var(--ra-gradient-mesh-tight);
  border-bottom: 1px solid var(--ra-ink-7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--ra-space-6);
}
.case-card__stat { font: var(--ra-fw-bold) clamp(28px, 3.4vw, 42px)/1 var(--ra-font-sans); letter-spacing: -0.02em; color: var(--ra-blue); }
.case-card__statlabel { font-size: 13px; color: var(--ra-ink-4); margin-top: var(--ra-space-2); }
.case-card__body { padding: var(--ra-space-6); display: flex; flex-direction: column; gap: var(--ra-space-3); flex: 1; }
.case-card h3 { margin: 0; font: var(--ra-fw-semi) var(--ra-text-h4)/var(--ra-lh-h4) var(--ra-font-sans); letter-spacing: var(--ra-tr-h4); color: var(--ra-ink); }
.case-card p { margin: 0; color: var(--ra-ink-4); font-size: 14px; line-height: 1.55; }

/* ----- Long-form prose ----- */
.prose { max-width: 760px; }
.prose > p { color: var(--ra-ink-3); font-size: 17px; line-height: 1.75; margin: 0 0 var(--ra-space-5); }
.prose h3 { font: var(--ra-fw-bold) var(--ra-text-h3)/var(--ra-lh-h3) var(--ra-font-sans); letter-spacing: var(--ra-tr-h3); color: var(--ra-ink); margin: var(--ra-space-10) 0 var(--ra-space-3); }
.prose strong { color: var(--ra-ink-2); font-weight: var(--ra-fw-semi); }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--ra-space-8); }
  .split--reverse .split__media { order: 0; }
  .steps, .steps--2, .steps--4 { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Simple grids + link cards ----- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ra-space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ra-space-5); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 620px) and (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
a.pillar-card { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.pillar-card__more {
  margin-top: auto;
  padding-top: var(--ra-space-5);
  color: var(--ra-blue);
  font-weight: var(--ra-fw-semi);
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pillar-card__more svg { width: 14px; height: 14px; transition: transform var(--ra-dur-base) var(--ra-ease-out); }
a.pillar-card:hover .pillar-card__more svg { transform: translateX(3px); }

/* Legal/short heroes should not fill the viewport */
.hero--mini { min-height: auto; }

/* ============================================================
   CUSTOMER JOURNEY (Full-Funnel signature section)
   ============================================================ */
.journey {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--ra-space-3);
}
.journey__stage {
  position: relative;
  background: var(--ra-white);
  border: 1px solid var(--ra-ink-7);
  border-radius: var(--ra-radius-lg);
  padding: var(--ra-space-7);
  box-shadow: var(--ra-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--ra-space-3);
  overflow: hidden;
  transition: box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out);
}
.journey__stage:hover { box-shadow: var(--ra-shadow-md); transform: translateY(-3px); }
.journey__stage::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ra-blue), #5B8DEF, #A66AE0);
}
.journey__phase {
  font: var(--ra-fw-semi) 12px/1 var(--ra-font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ra-blue);
}
.journey__stage h3 { margin: 0; }
.journey__stage > p { margin: 0; color: var(--ra-ink-4); font-size: 15px; line-height: 1.6; flex: 1; }
.journey__formats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ra-space-2); }
.journey__formats span {
  font: var(--ra-fw-medium) 12px/1 var(--ra-font-sans);
  color: var(--ra-ink-3); background: var(--ra-ink-8);
  border-radius: var(--ra-radius-pill); padding: 7px 11px;
}
.journey__arrow { display: flex; align-items: center; justify-content: center; color: var(--ra-blue); }
.journey__arrow svg { width: 26px; height: 26px; }
.journey__foot {
  text-align: center;
  max-width: 620px;
  margin: var(--ra-space-10) auto 0;
  color: var(--ra-ink-4);
  font-size: 16px;
}
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; }
  .journey__arrow { transform: rotate(90deg); padding: var(--ra-space-1) 0; }
}

/* ============================================================
   ANIMATIONS — scroll reveal + hero glow (reduced-motion safe)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transition: opacity 0.7s var(--ra-ease-out), transform 0.7s var(--ra-ease-out);
    will-change: opacity, transform;
  }
  [data-reveal="up"], [data-reveal=""] { transform: translateY(26px); }
  [data-reveal="left"]  { transform: translateX(-44px); }
  [data-reveal="right"] { transform: translateX(44px); }
  [data-reveal="scale"] { transform: scale(0.92); }
  [data-reveal].is-in { opacity: 1; transform: none; }

  .hero::after {
    content: "";
    position: absolute;
    width: 46%; aspect-ratio: 1 / 1;
    right: -6%; top: -12%;
    background: radial-gradient(circle, rgba(0, 24, 254, 0.18), transparent 70%);
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
    animation: ra-floaty 16s ease-in-out infinite alternate;
  }
}
@keyframes ra-floaty {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-7%, 7%) scale(1.12); }
}

/* ============================================================
   FANCY POLISH — entrance, hover shine, flowing accents
   (all reduced-motion safe)
   ============================================================ */
.nav.is-scrolled { box-shadow: var(--ra-shadow-sm); background: rgba(255, 255, 255, 0.92); }

@media (min-width: 881px) {
  .nav__contact { display: none; }   /* desktop uses the CTA button instead */
  .nav__links > a { position: relative; }
  .nav__links > a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
    height: 2px; border-radius: 2px; background: var(--ra-blue);
    transition: right var(--ra-dur-base) var(--ra-ease-out);
  }
  .nav__links > a:hover::after { right: 0; }
}

.pillar-card:hover, .case-card:hover, .step:hover, .journey__stage:hover { border-color: #B9C2FF; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: staggered entrance on load */
  .hero__badge { animation: ra-rise .7s var(--ra-ease-out) both; }
  .hero__title { animation: ra-rise .7s .08s var(--ra-ease-out) both; }
  .hero__sub   { animation: ra-rise .7s .16s var(--ra-ease-out) both; }
  .hero__ctas  { animation: ra-rise .7s .24s var(--ra-ease-out) both; }

  /* Sub-hero (focus + insights pages): same staggered entrance as the home hero */
  .subhero__inner > .ra-eyebrow { animation: ra-rise .6s var(--ra-ease-out) both; }
  .subhero__inner > h1          { animation: ra-rise .7s .08s var(--ra-ease-out) both; }
  .subhero__sub                 { animation: ra-rise .7s .16s var(--ra-ease-out) both; }
  .subhero__ctas                { animation: ra-rise .7s .24s var(--ra-ease-out) both; }
  .subhero__proof               { animation: ra-rise .7s .32s var(--ra-ease-out) both; }

  /* Primary button: light sweep on hover */
  .btn--primary { position: relative; overflow: hidden; }
  .btn--primary::after {
    content: ""; position: absolute; top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .btn--primary:hover::after { animation: ra-shine .8s var(--ra-ease-out); }

  /* Journey strip: gently flowing gradient */
  .journey__stage::before { background-size: 200% 100%; animation: ra-flow 6s linear infinite; }

  /* CTA band: floating glow like the hero */
  .cta { overflow: hidden; }
  .cta::after {
    content: ""; position: absolute; width: 40%; aspect-ratio: 1 / 1;
    left: -8%; bottom: -22%;
    background: radial-gradient(circle, rgba(0, 24, 254, 0.16), transparent 70%);
    filter: blur(50px); z-index: 0; pointer-events: none;
    animation: ra-floaty 18s ease-in-out infinite alternate;
  }
  .cta__inner { position: relative; z-index: 1; }
}
@keyframes ra-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ra-shine { to { left: 130%; } }
@keyframes ra-flow  { to { background-position: 200% 0; } }


/* ============================================================
   ADVANCED ANIMATIONS — tilt, spotlight, orbs, progress, magnetic
   ============================================================ */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--ra-blue),#5B8DEF,#A66AE0,#F6A06B);z-index:200;pointer-events:none;}

@media (prefers-reduced-motion: no-preference){
  /* hero ambient orbs */
  .hero__orbs{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;}
  .orb{position:absolute;border-radius:50%;filter:blur(45px);opacity:.55;}
  .orb--1{width:clamp(200px,30vw,360px);aspect-ratio:1;background:radial-gradient(circle,rgba(0,24,254,.5),transparent 70%);top:-8%;right:8%;animation:orb1 19s ease-in-out infinite alternate;}
  .orb--2{width:clamp(180px,26vw,320px);aspect-ratio:1;background:radial-gradient(circle,rgba(236,92,157,.42),transparent 70%);bottom:-12%;left:6%;animation:orb2 23s ease-in-out infinite alternate;}
  .orb--3{width:clamp(160px,22vw,280px);aspect-ratio:1;background:radial-gradient(circle,rgba(246,160,107,.4),transparent 70%);top:34%;left:42%;animation:orb3 27s ease-in-out infinite alternate;}
  @keyframes orb1{to{transform:translate(-46px,54px) scale(1.22);}}
  @keyframes orb2{to{transform:translate(64px,-44px) scale(1.18);}}
  @keyframes orb3{to{transform:translate(-34px,-30px) scale(1.12);}}

  /* journey arrows nudge continuously */
  .journey__arrow svg{animation:arrow-nudge 1.8s ease-in-out infinite;}
  @keyframes arrow-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

  /* marquee pauses on hover */
  .logos:hover .logos__track{animation-play-state:paused;}

  /* 3D tilt + cursor spotlight (mouse only) */
  @media (hover:hover) and (pointer:fine){
    .tilt{position:relative;transition:transform .25s var(--ra-ease-out),box-shadow var(--ra-dur-base) var(--ra-ease-out);transform-style:preserve-3d;}
    .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,24,254,.10),transparent 60%);opacity:0;transition:opacity .3s var(--ra-ease-out);pointer-events:none;}
    .tilt:hover::after{opacity:1;}
  }
}

/* ============================================================
   SERVICE cards (rich) — distinct from the Branchen layout
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ra-space-6); }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ra-white); border: 1px solid var(--ra-ink-7);
  border-radius: var(--ra-radius-xl); padding: var(--ra-space-8);
  box-shadow: var(--ra-shadow-xs); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out),
              border-color var(--ra-dur-base) var(--ra-ease-out);
}
.svc-card:hover { box-shadow: var(--ra-shadow-md); transform: translateY(-4px); border-color: #B9C2FF; }
.svc-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--ra-blue), #5B8DEF, #A66AE0); }
.svc-card__icon {
  width: 52px; height: 52px; border-radius: var(--ra-radius-md);
  background: var(--ra-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--ra-shadow-blue); margin: var(--ra-space-2) 0 var(--ra-space-5);
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__phase {
  align-self: flex-start;
  font: var(--ra-fw-semi) 11px/1 var(--ra-font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ra-blue); background: var(--ra-blue-soft);
  padding: 6px 10px; border-radius: var(--ra-radius-pill);
  margin-bottom: var(--ra-space-4);
}
.svc-card h3 {
  margin: 0 0 var(--ra-space-3);
  font: var(--ra-fw-bold) var(--ra-text-h3)/var(--ra-lh-h3) var(--ra-font-sans);
  letter-spacing: var(--ra-tr-h3); color: var(--ra-ink);
}
.svc-card > p { margin: 0 0 var(--ra-space-5); color: var(--ra-ink-4); font-size: 15px; line-height: 1.6; }
.svc-card .ticks { margin: 0 0 var(--ra-space-6); }
.svc-card .ticks li { font-size: 14px; padding-left: 28px; }
.svc-card .ticks li::before { width: 18px; height: 18px; }
.svc-card__more {
  margin-top: auto; color: var(--ra-blue);
  font-weight: var(--ra-fw-semi); font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.svc-card__more svg { width: 14px; height: 14px; transition: transform var(--ra-dur-base) var(--ra-ease-out); }
.svc-card:hover .svc-card__more svg { transform: translateX(3px); }

/* journey conversion rail — Conversion is the objective across every stage */
.journey__rail {
  margin: var(--ra-space-8) auto 0; max-width: 720px;
  display: flex; align-items: center; justify-content: center; gap: var(--ra-space-3);
  padding: var(--ra-space-4) var(--ra-space-6);
  border-radius: var(--ra-radius-pill);
  background: var(--ra-blue-soft); color: var(--ra-blue);
  font: var(--ra-fw-semi) 15px/1.3 var(--ra-font-sans); text-align: center;
}
.journey__rail svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   BRANCHEN — editorial split + stacked industry rows
   ============================================================ */
.bsplit { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.bsplit__head .section__lead { margin-bottom: var(--ra-space-8); }
.bsplit__list { display: flex; flex-direction: column; gap: var(--ra-space-4); }
.bindustry {
  display: flex; align-items: center; gap: var(--ra-space-5);
  padding: var(--ra-space-6); background: var(--ra-white);
  border: 1px solid var(--ra-ink-7); border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-xs); color: inherit; text-decoration: none;
  transition: box-shadow var(--ra-dur-base) var(--ra-ease-out),
              transform var(--ra-dur-base) var(--ra-ease-out),
              border-color var(--ra-dur-base) var(--ra-ease-out);
}
.bindustry:hover { box-shadow: var(--ra-shadow-md); transform: translateX(5px); border-color: #B9C2FF; }
.bindustry__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--ra-radius-md);
  background: var(--ra-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ra-shadow-blue);
}
.bindustry__icon svg { width: 24px; height: 24px; }
.bindustry__body { flex: 1; }
.bindustry__body h3 { margin: 0 0 4px; font: var(--ra-fw-semi) var(--ra-text-h4)/var(--ra-lh-h4) var(--ra-font-sans); color: var(--ra-ink); }
.bindustry__body p { margin: 0; color: var(--ra-ink-4); font-size: 14px; line-height: 1.5; }
.bindustry__arrow { flex-shrink: 0; width: 22px; height: 22px; color: var(--ra-ink-5); transition: transform var(--ra-dur-base) var(--ra-ease-out), color var(--ra-dur-base) var(--ra-ease-out); }
.bindustry:hover .bindustry__arrow { color: var(--ra-blue); transform: translateX(3px); }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  .bsplit { grid-template-columns: 1fr; gap: var(--ra-space-10); }
}
@media (min-width: 620px) and (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}

/* single-column FAQ for service / industry pages */
.faq--solo { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ----- Case study (detailed, varied layouts) ----- */
.case-study .split,
.case-study .steps,
.case-study .timeline,
.case-study .vsteps,
.case-study .statband,
.case-study .grid-2,
.case-study .section__header,
.case-study .prose,
.case-study .result-card { margin-top: var(--ra-space-10); }
.case-study .statband { justify-content: flex-start; gap: clamp(28px,5vw,72px); text-align: left; }
.case-study .result-card p + .stats { margin-top: var(--ra-space-6); }
.case-study .result-card > p:not(.result-card__label) { color: var(--ra-ink-2); margin: 0; }
.case-study__outlook {
  margin: var(--ra-space-10) 0 0;
  max-width: 820px;
  color: var(--ra-ink-3);
  font-size: 16px; line-height: 1.7;
}
.case-study__outlook strong { color: var(--ra-ink-2); }
.result-card {
  background: var(--ra-blue-soft);
  border-radius: var(--ra-radius-lg);
  padding: clamp(24px, 4vw, 40px);
}
.result-card__label {
  margin: 0 0 var(--ra-space-5);
  font: var(--ra-fw-semi) 13px/1 var(--ra-font-sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ra-blue);
}

/* ----- Case study subpages: card links + prev/next nav ----- */
a.case-card { text-decoration: none; color: inherit; }
.case-card__more { margin-top: auto; padding-top: var(--ra-space-2); color: var(--ra-blue); font-weight: var(--ra-fw-semi); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.case-card__more svg { width: 15px; height: 15px; }
.casenav { border-top: 1px solid var(--ra-ink-7); padding: var(--ra-space-10) 0; }
.casenav__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--ra-space-6); flex-wrap: wrap; }
.casenav__link { display: flex; flex-direction: column; gap: 4px; max-width: 42%; color: var(--ra-ink-4); font-size: 12px; text-decoration: none; }
.casenav__link--next { margin-left: auto; text-align: right; }
.casenav__title { color: var(--ra-ink); font-weight: var(--ra-fw-semi); font-size: 15px; line-height: 1.3; }
.casenav__link:hover .casenav__title { color: var(--ra-blue); }
.casenav__all { color: var(--ra-blue); font-weight: var(--ra-fw-semi); font-size: 14px; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px){ .casenav__link { max-width: 100%; } }

/* ----- Home v2 helpers ----- */
.cta__trust { margin: var(--ra-space-6) 0 0; font-size: 14px; color: var(--ra-ink-4); }
.ticks--muted li { color: var(--ra-ink-4); }
.ticks--muted li::before {
  background: rgba(208,89,79,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D0594F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
@media (max-width: 720px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Footer: single row on desktop, stack on smaller screens */
@media (max-width: 900px){
  .footer__inner { flex-wrap: wrap; }
  .footer__cols { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 560px){
  .footer__col { flex: 1 1 40%; }
}

/* ===== Structural variety: header beside content (editorial two-column) ===== */
@media (min-width: 960px){
  .section--aside > .container,
  .section--aside-end > .container { display: grid; gap: clamp(48px, 6vw, 104px); align-items: start; }
  .section--aside > .container { grid-template-columns: minmax(250px, 320px) 1fr; }
  .section--aside-end > .container { grid-template-columns: 1fr minmax(250px, 320px); }
  .section--aside .section__header,
  .section--aside-end .section__header { margin-bottom: 0; max-width: none; position: sticky; top: 96px; }
  .section--aside-end .section__header { order: 2; }
}

/* ============================================================
   LAYOUT LIBRARY — structural section variants (no colour change)
   ============================================================ */
.lab-tag { display:inline-block; font:var(--ra-fw-semi) 12px/1 var(--ra-font-sans); letter-spacing:0.10em; text-transform:uppercase; color:var(--ra-blue); background:var(--ra-blue-soft); padding:7px 12px; border-radius:var(--ra-radius-pill); margin-bottom:var(--ra-space-6); }
.lab-topbar { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--ra-ink-8); padding:14px 0; }
.lab-topbar__in { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lab-topbar img { height:24px; }

/* L4/L5 asymmetric split (modifiers on .split) */
.split--60 { grid-template-columns: 1.5fr 1fr; }
.split--40 { grid-template-columns: 1fr 1.6fr; }

/* L6 stat-led */
.statlead { display:grid; grid-template-columns:minmax(220px,0.85fr) 1.15fr; gap:clamp(40px,6vw,96px); align-items:center; }
.statlead__big { font:var(--ra-fw-bold) clamp(56px,9vw,118px)/0.92 var(--ra-font-sans); letter-spacing:-0.04em; color:var(--ra-blue); }
.statlead__big span { display:block; font-size:0.32em; letter-spacing:0; color:var(--ra-ink-4); font-weight:var(--ra-fw-semi); margin-top:var(--ra-space-3); }
@media(max-width:760px){ .statlead{ grid-template-columns:1fr; } }

/* L7 centered statement */
.statement { max-width:920px; margin:0 auto; text-align:center; }
.statement p { font:var(--ra-fw-bold) clamp(26px,3.8vw,44px)/1.22 var(--ra-font-sans); letter-spacing:-0.02em; color:var(--ra-ink); margin:0; }

/* L8 horizontal timeline */
.timeline { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--ra-space-6); position:relative; }
.timeline::before { content:""; position:absolute; top:19px; left:6%; right:6%; height:2px; background:var(--ra-ink-8); }
.timeline__item { position:relative; text-align:center; }
.timeline__dot { width:40px; height:40px; border-radius:50%; background:var(--ra-blue); color:var(--ra-blue-on); display:grid; place-items:center; font-weight:700; margin:0 auto var(--ra-space-4); position:relative; z-index:1; }
@media(max-width:760px){ .timeline{ grid-auto-flow:row; } .timeline::before{ display:none; } .timeline__item{ text-align:left; } .timeline__dot{ margin:0 0 var(--ra-space-3); } }

/* L9 vertical numbered list */
.vsteps { display:flex; flex-direction:column; gap:var(--ra-space-8); max-width:820px; }
.vstep { display:grid; grid-template-columns:72px 1fr; gap:var(--ra-space-6); align-items:start; padding-bottom:var(--ra-space-8); border-bottom:1px solid var(--ra-ink-8); }
.vstep:last-child{ border-bottom:0; padding-bottom:0; }
.vstep__n { font:var(--ra-fw-bold) 44px/1 var(--ra-font-sans); color:var(--ra-blue); letter-spacing:-0.03em; }

/* L10 zigzag */
.zig { display:flex; flex-direction:column; gap:clamp(40px,6vw,88px); }
.zigrow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.zigrow--rev .zigrow__media { order:-1; }
@media(max-width:760px){ .zigrow{ grid-template-columns:1fr; } .zigrow--rev .zigrow__media{ order:0; } }

/* L11 two-up */
.twoup { display:grid; grid-template-columns:1fr 1fr; gap:var(--ra-space-6); }
@media(max-width:760px){ .twoup{ grid-template-columns:1fr; } }

/* L12 sticky index */
.stickyx { display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:clamp(40px,6vw,96px); align-items:start; }
.stickyx__aside { position:sticky; top:96px; }
@media(max-width:900px){ .stickyx{ grid-template-columns:1fr; } .stickyx__aside{ position:static; } }

/* L13 offset cards */
.offset { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ra-space-5); }
.offset > :nth-child(2){ transform:translateY(34px); }
.offset > :nth-child(3){ transform:translateY(68px); }
@media(max-width:820px){ .offset{ grid-template-columns:1fr; } .offset>*{ transform:none !important; } }

/* L14 inline stat band */
.statband { display:flex; justify-content:center; gap:clamp(36px,6vw,104px); flex-wrap:wrap; text-align:center; }

/* L15 bordered panel */
.panel { border:1px solid var(--ra-ink-7); border-radius:var(--ra-radius-xl); padding:clamp(28px,4vw,60px); background:var(--ra-white); box-shadow:var(--ra-shadow-xs); }
.panel__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
@media(max-width:760px){ .panel__grid{ grid-template-columns:1fr; } }

/* ============================================================
   MOTION LAYER — section visualisations (all reduced-motion safe)
   ============================================================ */

/* Spacing: a process/grid block that follows a split needs breathing room */
.split + .timeline,
.split + .vsteps,
.split + .steps,
.split + .pillars,
.split + .grid-3,
.split + .offset,
.split + .statband { margin-top: clamp(56px, 8vw, 104px); }

/* Timeline dots: smooth base for the sequenced pop */
.timeline__dot { transition: box-shadow .4s var(--ra-ease-out); }

@media (prefers-reduced-motion: no-preference) {
  /* --- Timeline: line draws in + a soft impulse drifts along it + dots wake in sequence --- */
  .timeline[data-line]::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ra-ease-out); }
  .timeline[data-line].is-in::before { transform: scaleX(1); }

  .timeline[data-line].is-in::after {
    content: ""; position: absolute; top: 19px; left: 6%;
    width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--ra-blue);
    box-shadow: 0 0 0 5px rgba(0,24,254,.10), 0 0 22px 6px rgba(0,24,254,.45);
    animation: ra-impulse 6.5s cubic-bezier(.45,0,.55,1) 1.2s infinite;
  }
  @keyframes ra-impulse {
    0% { left: 6%; opacity: 0; transform: scale(.5); }
    14% { opacity: .9; transform: scale(1); }
    50% { transform: scale(1.15); }
    86% { opacity: .9; transform: scale(1); }
    100% { left: 94%; opacity: 0; transform: scale(.5); }
  }
  /* dots blink + grow as the impulse sweeps past them (same 6.5s period, staggered) */
  .timeline[data-line].is-in .timeline__item .timeline__dot { animation: ra-dotwake 6.5s ease-out infinite; }
  .timeline[data-line].is-in .timeline__item:nth-child(1) .timeline__dot { animation-delay: 1.6s; }
  .timeline[data-line].is-in .timeline__item:nth-child(2) .timeline__dot { animation-delay: 3.0s; }
  .timeline[data-line].is-in .timeline__item:nth-child(3) .timeline__dot { animation-delay: 4.4s; }
  .timeline[data-line].is-in .timeline__item:nth-child(4) .timeline__dot { animation-delay: 5.8s; }
  .timeline[data-line].is-in .timeline__item:nth-child(5) .timeline__dot { animation-delay: 7.2s; }
  .timeline[data-line].is-in .timeline__item:nth-child(6) .timeline__dot { animation-delay: 8.6s; }
  @keyframes ra-dotwake {
    0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,24,254,0); }
    3% { transform: scale(1.34); box-shadow: 0 0 0 7px rgba(0,24,254,.22), 0 0 18px 4px rgba(0,24,254,.5); }
    11% { transform: scale(1); box-shadow: 0 0 0 16px rgba(0,24,254,0); }
  }
  /* vertical numbered list: numbers ease up from dim as they arrive */
  .vsteps.is-in .vstep__n { animation: ra-numglow 1.1s var(--ra-ease-out) both; }
  @keyframes ra-numglow { 0% { opacity:.2; } 100% { opacity:1; } }
}

/* --- Rocky budget-steering visual (live equaliser) --- */
.rocky-viz {
  border-radius: var(--ra-radius-lg);
  background: linear-gradient(160deg, var(--ra-white), var(--ra-blue-soft));
  border: 1px solid var(--ra-ink-8);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--ra-shadow-xs);
}
.rocky-viz__head { display:flex; align-items:center; gap:8px; font:var(--ra-fw-semi) 13px/1 var(--ra-font-sans); letter-spacing:.04em; color:var(--ra-ink-3); text-transform:uppercase; margin-bottom:var(--ra-space-5); }
.rocky-viz__live { width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.5); }
.cpa { display:flex; flex-direction:column; gap:14px; margin-top:var(--ra-space-2); }
.cpa__legend { display:flex; justify-content:space-between; font:var(--ra-fw-semi) 11px/1 var(--ra-font-sans); color:var(--ra-ink-4); }
.cpa__goal { color:var(--ra-blue); }
.cpa__row { display:grid; grid-template-columns:42px 1fr 92px; align-items:center; gap:10px; }
.cpa__name { font:var(--ra-fw-semi) 12px/1 var(--ra-font-sans); color:var(--ra-ink-3); }
.cpa__track { position:relative; height:28px; background:var(--ra-ink-8); border-radius:8px; }
.cpa__fill { position:absolute; left:0; top:0; bottom:0; width:2%; border-radius:8px; }
.cpa__fill--win { background:linear-gradient(90deg, var(--ra-blue), #22C55E); }
.cpa__fill--lose { background:linear-gradient(90deg, var(--ra-blue), #EF6A6A); }
.cpa__targetline { position:absolute; top:-3px; bottom:-3px; left:66.7%; width:2px; background:var(--ra-ink-3); border-radius:2px; z-index:2; }
.cpa__read { position:absolute; top:3px; bottom:3px; left:33.3%; width:0; border-left:2px dashed var(--ra-blue); opacity:.3; z-index:2; }
.cpa__verdict { font:var(--ra-fw-bold) 12px/1.1 var(--ra-font-sans); text-align:right; opacity:0; }
.cpa__verdict--up { color:#16A34A; }
.cpa__verdict--down { color:#DC2626; }
.rocky-viz__note { margin:var(--ra-space-5) 0 0; font-size:13px; line-height:1.55; color:var(--ra-ink-4); }
/* channel card link */
.card-link { display:inline-flex; align-items:center; gap:7px; margin-top:var(--ra-space-5); font:var(--ra-fw-semi) 14px/1 var(--ra-font-sans); color:var(--ra-blue); }
.card-link svg { transition:transform var(--ra-dur-base) var(--ra-ease-out); }
.card-link:hover svg { transform:translateX(4px); }
/* hide on small screens */
@media (max-width:600px){ .hide-sm { display:none !important; } }

/* --- "Was wir machen" audit window: check draws, lines build in sequence --- */
.build-viz__check { stroke: var(--ra-blue); stroke-width: 2.4; }
@media (prefers-reduced-motion: no-preference) {
  .split__media.is-in .build-viz__check { stroke-dasharray: 90; stroke-dashoffset: 90; animation: ra-draw .7s var(--ra-ease-out) .2s forwards; }
  .build-viz__lines path { stroke-dasharray: 90; stroke-dashoffset: 90; }
  .split__media.is-in .build-viz__lines path { animation: ra-draw .55s var(--ra-ease-out) both; }
  .split__media.is-in .build-viz__lines path:nth-child(1) { animation-delay: .55s; }
  .split__media.is-in .build-viz__lines path:nth-child(2) { animation-delay: .75s; }
  .split__media.is-in .build-viz__lines path:nth-child(3) { animation-delay: .95s; }
  .split__media.is-in .build-viz__lines path:nth-child(4) { animation-delay: 1.15s; }
  .split__media.is-in .build-viz__lines path:nth-child(5) { animation-delay: 1.35s; }
}

/* --- Reporting chart: bars grow + trend line draws on reveal --- */
.report-viz__bar { transform-box: fill-box; transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .report-viz__bar { transform: scaleY(0); }
  .split__media.is-in .report-viz__bar { animation: ra-grow .8s var(--ra-ease-out) both; }
  .split__media.is-in .report-viz rect.report-viz__bar:nth-of-type(1) { animation-delay: .15s; }
  .split__media.is-in .report-viz rect.report-viz__bar:nth-of-type(2) { animation-delay: .35s; }
  .split__media.is-in .report-viz rect.report-viz__bar:nth-of-type(3) { animation-delay: .55s; }
  @keyframes ra-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .report-viz__line { stroke-dasharray: 260; stroke-dashoffset: 260; }
  .split__media.is-in .report-viz__line { animation: ra-draw 1.2s var(--ra-ease-out) .7s forwards; }
}

/* --- Case slider: horizontal, click-through --- */
.case-slider { position:relative; }
.case-slider__track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px,calc(33.333% - var(--ra-space-6))); gap:var(--ra-space-6); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px; margin:0 -4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.case-slider__track::-webkit-scrollbar { display:none; }
.case-slider__track > .case-card { scroll-snap-align:start; }
.case-slider__nav { display:flex; gap:12px; justify-content:center; margin-top:var(--ra-space-8); }
.case-slider__btn { width:48px; height:48px; border-radius:50%; border:1px solid var(--ra-ink-7); background:var(--ra-white); display:inline-grid; place-items:center; cursor:pointer; color:var(--ra-ink-2); transition:border-color var(--ra-dur-base) var(--ra-ease-out), color var(--ra-dur-base) var(--ra-ease-out), opacity var(--ra-dur-base) var(--ra-ease-out); }
.case-slider__btn:hover { border-color:var(--ra-blue); color:var(--ra-blue); }
.case-slider__btn:disabled { opacity:.3; cursor:default; border-color:var(--ra-ink-7); color:var(--ra-ink-2); }
@media (max-width:760px){ .case-slider__track { grid-auto-columns:minmax(82%,82%); } }
/* two-column numbered list (e.g. Warum RocketAds) */
@media (min-width:760px){
  .vsteps--2col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,52px) clamp(40px,6vw,80px); max-width:none; }
  .vsteps--2col .vstep { border-bottom:0; padding-bottom:0; }
}

/* ============================================================
   MOBILE OPTIMISATION PASS
   ============================================================ */
/* hard stop against any horizontal scroll (clip keeps sticky nav working) */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }
/* counters keep a stable width while ticking (no horizontal jitter) */
.ra-ticker, [data-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 760px){
  /* asymmetric splits must collapse to one column like the base split,
     otherwise the media card overflows the screen on mobile */
  .split--60, .split--40 { grid-template-columns: 1fr; }
  .split--60 .split__media, .split--40 .split__media { order: 2; }
  /* the travelling impulse + connecting line only make sense on the
     horizontal (desktop) timeline; the dots still wake in sequence */
  .timeline[data-line].is-in::after { display: none; }
  /* media cards never push past the viewport */
  .split__media, .rocky-viz, .cpa { max-width: 100%; }
  .cpa__track { min-width: 0; }
}

@media (max-width: 440px){
  .cpa__row { grid-template-columns: 32px 1fr 78px; gap: 8px; }
  .cpa__verdict { font-size: 11px; }
  .cpa__legend { font-size: 10px; }
  .rocky-viz { padding: 18px; }
}

/* cookie banner: full-width sheet with proper, tappable buttons on mobile */
@media (max-width: 600px){
  .cookie-banner { padding: 0; align-items: flex-end; }
  .cookie-banner__panel {
    max-width: none;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
    max-height: 92svh;
  }
  .cookie-banner__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cookie-banner__btn { width: 100%; min-height: 54px; padding: 16px 20px; font-size: 16px; }
  .cookie-banner__link { width: 100%; text-align: center; padding: 14px 16px; font-size: 15px; }
}
.rocky-viz__big { font:var(--ra-fw-bold) clamp(40px,6vw,64px)/1 var(--ra-font-sans); letter-spacing:-.03em; color:var(--ra-blue); margin:var(--ra-space-6) 0 var(--ra-space-2); }
.rocky-viz__cap { color:var(--ra-ink-4); font-size:15px; line-height:1.6; margin:0; }
@media (prefers-reduced-motion: no-preference) {
  /* spend fills toward each ad's predicted CPA; Rocky reads early, then mehr Budget / Budget raus */
  .cpa__fill--win  { animation: ra-cpa-win 7s ease-in-out infinite; }
  .cpa__fill--lose { animation: ra-cpa-lose 7s ease-in-out infinite; }
  @keyframes ra-cpa-win  { 0%{width:2%} 38%{width:49%} 86%{width:49%} 100%{width:2%} }
  @keyframes ra-cpa-lose { 0%{width:2%} 38%{width:89%} 86%{width:89%} 100%{width:2%} }
  .cpa__row:nth-child(2) .cpa__verdict,
  .cpa__row:nth-child(3) .cpa__verdict { animation: ra-cpa-verdict 7s ease-out infinite; }
  @keyframes ra-cpa-verdict { 0%,42%{opacity:0; transform:translateX(-5px);} 52%{opacity:1; transform:none;} 86%{opacity:1;} 96%,100%{opacity:0;} }
  .cpa__read { animation: ra-cpa-read 7s ease-out infinite; }
  @keyframes ra-cpa-read { 0%,20%{opacity:.25;} 27%{opacity:1; box-shadow:0 0 10px 2px rgba(0,24,254,.5);} 38%{opacity:.4;} 100%{opacity:.25;} }
  .rocky-viz__live { animation: ra-live 2.8s ease-out infinite; }
  @keyframes ra-live { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%,100%{ box-shadow:0 0 0 8px rgba(34,197,94,0);} }
}

/* --- Funnel flow visual (advertorial funnel) --- */
.funnel-viz { width:100%; height:auto; }
.funnel-lbl { fill: var(--ra-ink-3); font: var(--ra-fw-semi) 11px/1 var(--ra-font-sans); text-anchor: middle; }
.funnel-src rect { stroke: var(--ra-ink-7); }
.funnel-feed { stroke: var(--ra-ink-7); stroke-dasharray: 2 5; }
.funnel-viz .fp { fill: var(--ra-blue); stroke: none; transform-box: fill-box; transform-origin: center; opacity:0; }
.funnel-rev .euro { fill: var(--ra-blue); font: var(--ra-fw-bold) 17px/1 var(--ra-font-sans); text-anchor: middle; opacity:0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .split__media.is-in .funnel-viz__shape { stroke-dasharray: 640; stroke-dashoffset: 640; animation: ra-draw 1.9s var(--ra-ease-out) .15s forwards; }
  @keyframes ra-draw { to { stroke-dashoffset: 0; } }
  /* many particles from Meta + TikTok, each its own pace, converging to the spout */
  .funnel-viz .fp { animation: ra-fall var(--dur,5s) cubic-bezier(.45,.05,.55,1) var(--delay,0s) infinite; }
  @keyframes ra-fall {
    0% { transform: translate(0,0) scale(.5); opacity:0; }
    12% { opacity:.9; }
    72% { opacity:.9; }
    100% { transform: translate(var(--dx,0), 134px) scale(.3); opacity:0; }
  }
  /* some never convert: they fade out mid-funnel */
  .funnel-viz .fp--drop { animation-name: ra-fall-drop; }
  @keyframes ra-fall-drop {
    0% { transform: translate(0,0) scale(.5); opacity:0; }
    16% { opacity:.8; }
    52% { opacity:.5; }
    74% { transform: translate(calc(var(--dx,0) / 2), 66px) scale(.42); opacity:0; }
    100% { opacity:0; }
  }
  /* arrivals turn into revenue (€) at the spout */
  .funnel-rev .euro { animation: ra-euro 3.6s ease-out var(--delay,0s) infinite; }
  @keyframes ra-euro {
    0% { opacity:0; transform: translateY(-4px) scale(.4); }
    14% { opacity:1; transform: translateY(0) scale(1.25); }
    32% { transform: translateY(2px) scale(1); }
    62% { opacity:1; transform: translateY(12px) scale(1); }
    100% { opacity:0; transform: translateY(24px) scale(.85); }
  }
  .funnel-viz__spout { animation: ra-spout 3.6s ease-in-out infinite; transform-origin: 120px 160px; }
  @keyframes ra-spout { 0%,100%{ opacity:.4; transform:scale(.85); } 50%{ opacity:.9; transform:scale(1.1); } }
}

/* --- Meta: budget climbs a curve, inside guardrails --- */
.scale-viz__rail { stroke: var(--ra-ink-7); }
.scale-viz__dot { fill: var(--ra-blue); stroke: none; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .scale-viz__line { stroke-dasharray: 300; stroke-dashoffset: 300; }
  .split__media.is-in .scale-viz__line { animation: ra-draw3 2.2s var(--ra-ease-out) .2s forwards; }
  @keyframes ra-draw3 { to { stroke-dashoffset: 0; } }
  .scale-viz__dot { animation: ra-climb 6.5s cubic-bezier(.4,.1,.4,1) 1s infinite; }
  @keyframes ra-climb {
    0% { transform: translate(0,0); opacity: 0; }
    9% { opacity: 1; }
    25% { transform: translate(46px,-25px); }
    50% { transform: translate(92px,-55px); }
    75% { transform: translate(138px,-83px); }
    92% { opacity: 1; }
    100% { transform: translate(184px,-105px); opacity: 0; }
  }
}

/* --- TikTok: native demand rolls in as overlapping waves --- */
.wave-viz__w { stroke: var(--ra-blue); }
.wave-viz__w1 { opacity: .6; } .wave-viz__w2 { opacity: .38; } .wave-viz__w3 { opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .wave-viz__w1 { animation: ra-flow 7s linear infinite; }
  .wave-viz__w2 { animation: ra-flow 10.5s linear infinite; }
  .wave-viz__w3 { animation: ra-flow 8.5s linear infinite reverse; }
  @keyframes ra-flow { from { transform: translateX(0); } to { transform: translateX(-80px); } }
}

/* --- Performance Creatives: variants tested, a winner is picked --- */
.creav__hl { fill: rgba(0,24,254,.07); stroke: var(--ra-blue); stroke-width: 2; transform-box: fill-box; }
.creav__check { stroke: var(--ra-blue); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .creav__hl { animation: ra-select 7.5s var(--ra-ease-in-out) infinite; }
  @keyframes ra-select {
    0%,16% { transform: translate(0,0); }
    30%,46% { transform: translate(96px,0); }
    60%,100% { transform: translate(52px,84px); }
  }
  .creav__check { opacity: 0; animation: ra-check 7.5s ease-out infinite; }
  @keyframes ra-check {
    0%,58% { opacity: 0; transform: scale(.4); }
    67% { opacity: 1; transform: scale(1.5); }
    80%,100% { opacity: 1; transform: scale(1); }
  }
}

/* --- Advertorial: the reader scans the story toward the offer --- */
.adv-scan { fill: rgba(0,24,254,.10); }
@media (prefers-reduced-motion: no-preference) {
  .adv-scan { animation: ra-scan 6s var(--ra-ease-in-out) infinite; }
  @keyframes ra-scan {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(120px); opacity: 0; }
  }
  .adv-arrow { animation: ra-arrow 2.8s ease-in-out infinite; }
  @keyframes ra-arrow { 0%,100% { transform: translateX(0); opacity: .55; } 50% { transform: translateX(5px); opacity: 1; } }
}

/* --- Paid Acquisition flow: Meta/TikTok ads -> clicks fall into the funnel -> Kauf --- */
.adflow { width:100%; height:auto; }
.adflow__ad { fill:var(--ra-white); stroke:var(--ra-ink-7); stroke-width:1.5; }
.adflow__bar { fill:var(--ra-ink-8); }
.adflow__funnel { fill:rgba(0,24,254,.05); stroke:var(--ra-ink-3); stroke-width:1.6; }
.adflow__div { fill:none; stroke:var(--ra-ink-7); stroke-width:1.1; stroke-dasharray:2 4; }
.adflow__meta { fill:none; stroke:#0866FF; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.adflow__tt-c { fill:#25F4EE; } .adflow__tt-p { fill:#FE2C55; } .adflow__tt { fill:#0B0B0F; }
.adflow__click { fill:var(--ra-blue); transform-box:fill-box; transform-origin:center; opacity:0; }
.adflow__buy { fill:var(--ra-blue); transform-box:fill-box; transform-origin:center; }
.adflow__buy-t { fill:#fff; font:var(--ra-fw-bold) 13px/1 var(--ra-font-sans); text-anchor:middle; }
.adflow__lbl { fill:var(--ra-ink-4); font:var(--ra-fw-semi) 10px/1 var(--ra-font-sans); }
@media (prefers-reduced-motion: no-preference){
  .split__media.is-in .adflow__funnel { stroke-dasharray:760; stroke-dashoffset:760; animation: ra-draw 1.6s var(--ra-ease-out) .2s forwards; }
  .adflow__click { animation: ra-aclick var(--dur,4s) cubic-bezier(.55,.05,.6,1) var(--delay,0s) infinite; }
  @keyframes ra-aclick {
    0% { transform: translate(0,0) scale(.95); opacity:0; }
    8% { opacity:1; }
    78% { opacity:1; }
    100% { transform: translate(var(--dx,0), 132px) scale(.4); opacity:0; }
  }
  .adflow__buy, .adflow__buy-t { animation: ra-abuy 4s ease-in-out infinite; }
  .adflow__buy-t { transform-box:fill-box; transform-origin:center; }
  @keyframes ra-abuy { 0%,100%{ transform:scale(.9); } 50%{ transform:scale(1.08); } }
}

/* --- "Was RocketAds übernimmt": a checklist that gets ticked off, layer by layer --- */
.own-box { stroke: var(--ra-ink-7); }
.own-line { stroke: var(--ra-ink-7); }
.own-check { stroke: var(--ra-blue); stroke-width: 2.6; transform-box: fill-box; transform-origin: center; opacity: 0; }
.own-fill { fill: var(--ra-blue-soft); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .own-list .own-row .own-check,
  .own-list .own-row .own-fill { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
  .own-list .own-row:nth-child(1) .own-check, .own-list .own-row:nth-child(1) .own-fill { animation-delay: .4s; }
  .own-list .own-row:nth-child(2) .own-check, .own-list .own-row:nth-child(2) .own-fill { animation-delay: 1.0s; }
  .own-list .own-row:nth-child(3) .own-check, .own-list .own-row:nth-child(3) .own-fill { animation-delay: 1.6s; }
  .own-list .own-row:nth-child(4) .own-check, .own-list .own-row:nth-child(4) .own-fill { animation-delay: 2.2s; }
  .own-list .own-row:nth-child(5) .own-check, .own-list .own-row:nth-child(5) .own-fill { animation-delay: 2.8s; }
  .own-list .own-row:nth-child(6) .own-check, .own-list .own-row:nth-child(6) .own-fill { animation-delay: 3.4s; }
  .own-list .own-row .own-check { animation-name: ra-tick; }
  .own-list .own-row .own-fill { animation-name: ra-tickfill; }
  @keyframes ra-tick {
    0%,4% { opacity: 0; transform: scale(.3); }
    9% { opacity: 1; transform: scale(1.35); }
    16% { transform: scale(1); }
    80% { opacity: 1; }
    90%,100% { opacity: 0; }
  }
  @keyframes ra-tickfill { 0%,4% { opacity: 0; } 12%,80% { opacity: 1; } 90%,100% { opacity: 0; } }
}

/* --- Platform partner badges on the channel cards --- */
.card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--ra-space-5); }
.card-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--ra-radius-pill); background: var(--ra-blue-soft); color: var(--ra-blue); font: var(--ra-fw-semi) 12px/1 var(--ra-font-sans); }
.card-badge svg { width: 14px; height: 14px; flex: none; }

/* --- Business-to-Ad Feedback Loop: a ring where the four layers feed back into each other --- */
.loopviz { width: 100%; max-width: 320px; margin-inline: auto; display: block; }
.loopviz__ring { stroke: var(--ra-ink-7); }
.loopviz__node { fill: var(--ra-white); stroke: var(--ra-blue); }
.loopviz__num { fill: var(--ra-blue); font: var(--ra-fw-bold) 16px/1 var(--ra-font-sans); text-anchor: middle; }
.loopviz__lbl { fill: var(--ra-ink-3); font: var(--ra-fw-semi) 11px/1 var(--ra-font-sans); text-anchor: middle; letter-spacing: .02em; }
.loopviz__center { fill: var(--ra-ink-4); font: var(--ra-fw-semi) 12px/1 var(--ra-font-sans); text-anchor: middle; letter-spacing: .02em; }
.loopviz__dot { fill: var(--ra-blue); }
@media (prefers-reduced-motion: no-preference) {
  .loopviz__spin { transform-box: view-box; transform-origin: 120px 120px; }
  .split__media.is-in .loopviz__spin { animation: ra-orbit 7.5s linear infinite; }
  @keyframes ra-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
}

/* --- Paid-acquisition pillar helpers --- */
.subhero__proof { margin-top: clamp(32px, 5vw, 52px); justify-content: flex-start; text-align: left; gap: clamp(28px, 5vw, 72px); }
@media (max-width: 760px) { .subhero__proof { justify-content: center; text-align: center; } }
.vstep__out { margin: var(--ra-space-3) 0 0; font: var(--ra-fw-semi) 14px/1.5 var(--ra-font-sans); color: var(--ra-blue); }
.section__note { text-align: center; max-width: 760px; margin: clamp(32px, 5vw, 56px) auto 0; color: var(--ra-ink-4); font-size: 15px; line-height: 1.65; }
.zusammenarbeit { margin-top: clamp(40px, 6vw, 72px); }
.zusammenarbeit h3 { margin: 0 0 var(--ra-space-3); }
.zusammenarbeit p { margin: 0; color: var(--ra-ink-4); }
.cta__micro { margin: var(--ra-space-6) 0 0; font-size: 14px; color: var(--ra-ink-4); }

/* --- Average vs marginal CPA curve (paid-social) --- */
.cpacurve { width: 100%; max-width: 360px; margin-inline: auto; display: block; }
.cpacurve__axis { stroke: var(--ra-ink-7); stroke-width: 1.5; }
.cpacurve__avg { stroke: #94A3B8; stroke-width: 2.5; fill: none; }
.cpacurve__marg { stroke: var(--ra-blue); stroke-width: 3; fill: none; }
.cpacurve__limit { stroke: var(--ra-ink-6); stroke-width: 1.5; stroke-dasharray: 3 4; }
.cpacurve__lbl { fill: var(--ra-ink-4); font: var(--ra-fw-semi) 11px/1 var(--ra-font-sans); }
.cpacurve__lbl--marg { fill: var(--ra-blue); }
.cpacurve__lbl--axis { fill: var(--ra-ink-5); font: var(--ra-fw-medium) 10px/1 var(--ra-font-sans); letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) {
  .cpacurve__avg, .cpacurve__marg { stroke-dasharray: 330; stroke-dashoffset: 330; }
  .split__media.is-in .cpacurve__avg { animation: ra-draw 1.2s var(--ra-ease-out) .2s forwards; }
  .split__media.is-in .cpacurve__marg { animation: ra-draw 1.3s var(--ra-ease-out) .6s forwards; }
}

/* --- Insights articles (TOFU/MOFU) --- */
.article-hero { padding: clamp(40px, 6vw, 80px) 0 0; }
.article-wrap { max-width: 760px; margin-inline: auto; }
.article__breadcrumb { font-size: 13px; color: var(--ra-ink-4); margin-bottom: var(--ra-space-5); }
.article__breadcrumb a { color: var(--ra-ink-4); }
.article__breadcrumb a:hover { color: var(--ra-blue); }
.article__metaline { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--ra-ink-4); font-size: 14px; margin-top: var(--ra-space-6); }
.article__metaline span { display: inline-flex; align-items: center; gap: 6px; }
.prose { max-width: 760px; margin-inline: auto; }
.prose__lead { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.6; color: var(--ra-ink-2); margin: 0 0 var(--ra-space-8); }
.prose > p { color: var(--ra-ink-3); font-size: 17px; line-height: 1.75; margin: 0 0 var(--ra-space-6); }
.prose > h2 { font: var(--ra-fw-bold) clamp(24px, 3vw, 32px)/1.2 var(--ra-font-sans); letter-spacing: -0.02em; color: var(--ra-ink); margin: clamp(36px, 5vw, 52px) 0 var(--ra-space-5); }
.prose > h3 { font: var(--ra-fw-semi) 20px/1.3 var(--ra-font-sans); color: var(--ra-ink); margin: var(--ra-space-8) 0 var(--ra-space-3); }
.prose > ul, .prose > ol { margin: 0 0 var(--ra-space-6); padding-left: 22px; color: var(--ra-ink-3); font-size: 17px; line-height: 1.7; display: flex; flex-direction: column; gap: 10px; }
.prose a { color: var(--ra-blue); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ra-ink); font-weight: var(--ra-fw-semi); }
.prose .result-card { margin: var(--ra-space-8) 0; }
/* Decision matrices / diagnosis tables inside articles */
.prose table { width: 100%; border-collapse: collapse; margin: var(--ra-space-6) 0; font-size: 15px; line-height: 1.55; display: block; overflow-x: auto; }
.prose table thead th { text-align: left; font-weight: var(--ra-fw-semi); color: var(--ra-ink); background: var(--ra-ink-8, #f4f5f8); border-bottom: 2px solid var(--ra-ink-7); padding: 11px 14px; white-space: nowrap; }
.prose table td { color: var(--ra-ink-3); border-bottom: 1px solid var(--ra-ink-7); padding: 11px 14px; vertical-align: top; }
.prose table tbody tr:last-child td { border-bottom: 0; }
.prose table strong { color: var(--ra-ink); }
.article__foot { max-width: 760px; margin: clamp(40px, 6vw, 72px) auto 0; padding-top: var(--ra-space-8); border-top: 1px solid var(--ra-ink-7); display: flex; flex-wrap: wrap; gap: var(--ra-space-5); align-items: center; justify-content: space-between; }
.article__foot p { margin: 0; color: var(--ra-ink-4); font-size: 15px; max-width: 42ch; }
.article__related { width: 100%; margin: var(--ra-space-4) 0 0; font-size: 14px; color: var(--ra-ink-4); }
.article__related a { color: var(--ra-blue); text-decoration: underline; text-underline-offset: 2px; }
.insights-group__title { font: var(--ra-fw-bold) clamp(20px, 2.6vw, 26px)/1.2 var(--ra-font-sans); letter-spacing: -0.02em; color: var(--ra-ink); margin: 0 0 var(--ra-space-6); }

/* ============================================================
   MOBILE POLISH PASS — phone-first refinements (max-width only,
   desktop layout untouched). Builds on the existing MOBILE
   OPTIMISATION PASS / overflow-x: clip guard above.
   ============================================================ */

/* ---- Phones (<=640px): the main refinement band ---- */
@media (max-width: 640px) {
  /* Headlines: tighten the top of the clamp so big German words don't crowd
     a 360–390px screen. We only lower the floor; desktop sizes are unchanged
     because they sit far above these new minimums. */
  .hero__title       { font-size: clamp(34px, 9vw, 44px); }
  .subhero h1        { font-size: clamp(30px, 8.2vw, 40px); }
  .cta__title        { font-size: clamp(30px, 8.5vw, 42px); }
  .ra-h1             { font-size: clamp(28px, 7.6vw, 36px); }
  .ra-hero           { font-size: clamp(30px, 8.5vw, 42px); }
  .ra-display        { font-size: clamp(34px, 10vw, 56px); }

  /* Section headers can use the full width on phones */
  .section__header   { max-width: none; }

  /* Hero/subhero vertical rhythm: a touch tighter so the fold shows content */
  .hero__sub         { margin-bottom: var(--ra-space-6); }
  .subhero           { padding: clamp(28px, 7vw, 40px) 0 clamp(36px, 8vw, 56px); }

  /* Primary CTAs go full-width and wrap their (long) labels gracefully.
     Buttons are inline-flex by default; only stretch the standalone CTAs. */
  .hero__ctas,
  .subhero__ctas    { width: 100%; }
  .hero__ctas .btn,
  .subhero__ctas .btn,
  .cta .btn--lg,
  .booking__submit  { width: 100%; justify-content: center; }
  /* long German labels must never force horizontal overflow */
  .btn              { white-space: normal; text-align: center; }
  .btn--lg          { min-height: 52px; }

  /* Stat band / hero proof: tighten the big numbers and keep even spacing */
  .stat__num        { font-size: clamp(28px, 8vw, 40px); }
  .statband         { gap: clamp(20px, 6vw, 40px) clamp(28px, 8vw, 56px); }
  .subhero__proof   { gap: clamp(20px, 6vw, 40px) clamp(28px, 8vw, 56px); }

  /* Cards: a little less inner padding so content has more room */
  .pillar-card,
  .svc-card,
  .step,
  .journey__stage   { padding: var(--ra-space-6); }

  /* Footer: comfortable tap targets + safe-area breathing room */
  .footer           { padding-bottom: calc(var(--ra-space-8) + env(safe-area-inset-bottom)); }
  .footer__social a { width: 44px; height: 44px; }
  .footer__col a,
  .footer__col button { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 0; }

  /* Nav drawer links: a hair more height for confident tapping */
  .nav__menu a      { padding: 11px 12px; }
}

/* ---- Small phones (<=400px): final squeeze so nothing crowds 360px ---- */
@media (max-width: 400px) {
  .hero__title      { font-size: clamp(30px, 8.8vw, 38px); }
  .subhero h1,
  .cta__title       { font-size: clamp(27px, 8vw, 34px); }
  .prose__lead      { font-size: 18px; }
  .prose > p,
  .prose > ul,
  .prose > ol       { font-size: 16px; }
  /* statband: stack to a single readable column on the tightest screens */
  .statband,
  .subhero__proof   { flex-direction: column; align-items: flex-start; gap: var(--ra-space-6); }
  .subhero__inner--center .statband,
  .subhero__inner--center .subhero__proof { align-items: center; }
  /* footer: one clean column so links never crowd at 360px */
  .footer__col { flex: 1 1 100%; }
}