/* ==========================================================================
   Akquise Werk: Prototype Stylesheet
   Palette: white canvas + neutral ink + brand accent #04b7f6 only.
   Structure & motion language adapted from the Amplemarket style reference
   (DESIGN.md): 1200px canvas, 8px buttons / 12px cards, weight-400 headings,
   negative display tracking, transform+opacity motion only.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand:        #04b7f6;
  --brand-600:    #039ad2;
  --brand-700:    #0280ae;
  --brand-100:    #cdeefd;
  --brand-50:     #eaf8fe;
  --brand-wash:   rgba(4, 183, 246, 0.10);

  /* Werkstraße: zwei Spurfarben (Weg A / Weg B) */
  --wa:      #04b7f6;
  --wa-deep: #0271b0;
  --wb:      #8b7bff;

  /* Neutrals */
  --ink:          #111111;
  --ink-soft:     #2b2b2b;
  --ash:          #6d6c6b;
  --stone:        #b1b1af;
  --pearl:        #ecebea;
  --cream:        #f6f5f3;
  --white:        #ffffff;
  --hairline:     rgba(17, 17, 17, 0.08);
  --hairline-2:   rgba(17, 17, 17, 0.14);
  --dark:         #111111;

  /* Type */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accent: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Shape */
  --r-btn:   8px;
  --r-card:  12px;
  --r-pill:  9999px;

  /* Elevation */
  --shadow-soft: rgba(17, 17, 17, 0.02) 0 -6px 6px 0, rgba(17, 17, 17, 0.01) 0 -23px 9px 0;
  --shadow-xl:   rgba(17, 17, 17, 0.12) 0 26px 60px -6px, rgba(17, 17, 17, 0.02) 0 28px 28px -14px,
                 rgba(17, 17, 17, 0.04) 0 6px 6px -3px, rgba(17, 17, 17, 0.04) 0 1px 1px -0.5px;
  --shadow-brand: rgba(4, 183, 246, 0.30) 0 12px 32px -10px, rgba(4, 183, 246, 0.18) 0 4px 10px -4px;

  /* Layout */
  --page: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --t-micro:  0.25s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
/* <picture> soll das Layout nicht beeinflussen: das <img> bleibt direktes Kind
   seines Containers, damit Regeln wie "height: 100%" weiter greifen. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
.display,
h1.display {
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 400;
}
.h2 {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 400;
}
.h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 400;
}
.h4 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ash);
}
.body-sm { font-size: 14px; line-height: 1.5; color: var(--ash); }
.muted { color: var(--ash); }
.accent { color: var(--brand); }

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-wash);
}
.eyebrow--plain::before { display: none; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 84px) 0; }
/* Kennzahlen schließen direkt an die Logowall im Hero an */
.section--metrics { padding-top: clamp(26px, 3vw, 40px); }
.section--cream { background: var(--cream); }
.section--dark { background: var(--dark); color: var(--white); }
.section-head { max-width: 720px; }
.section-head .h2 { margin-top: 16px; }
.section-head .lead { margin-top: 20px; }
.section-head--center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: 20px; }
.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--brand-600); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-2);
}
.btn--ghost:hover { background: var(--white); border-color: var(--ink); }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--pearl); }

.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn .ico { width: 16px; height: 16px; flex: none; transition: transform var(--t-micro) var(--ease-out); }
.btn:hover .ico { transform: translateX(3px); }
.btn--play:hover .ico { transform: none; }

/* Text link with animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.link:hover::after { transform: scaleX(1); }
.link .ico { width: 14px; height: 14px; transition: transform var(--t-micro) var(--ease-out); }
.link:hover .ico { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height 0.45s var(--ease);
}
.nav__inner {
  position: relative;
  width: 100%;
  max-width: var(--page);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: max-width 0.55s var(--ease-out), height 0.45s var(--ease-out),
              padding 0.45s var(--ease-out), background-color 0.45s var(--ease),
              border-color 0.45s var(--ease), box-shadow 0.55s var(--ease),
              backdrop-filter 0.45s var(--ease);
}
.nav.is-scrolled { height: 78px; }
.nav.is-scrolled .nav__inner {
  max-width: 1160px;
  height: 62px;
  padding: 0 10px 0 22px;
  gap: 14px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(17, 17, 17, 0.07);
  box-shadow: rgba(17, 17, 17, 0.10) 0 16px 40px -16px,
              rgba(17, 17, 17, 0.05) 0 4px 12px -6px;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

/* Current-section indicator next to the logo */
.nav__section {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ash);
  border-left: 1px solid transparent;
  transition: max-width 0.55s var(--ease-out), opacity 0.35s var(--ease),
              padding-left 0.55s var(--ease-out), border-color 0.45s var(--ease);
}
.nav.has-section .nav__section {
  max-width: 200px;
  opacity: 1;
  padding-left: 15px;
  border-left-color: var(--hairline);
}
.nav__section i {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.nav__section-label {
  display: inline-block;
  /* schrumpft als Flex-Element und kuerzt notfalls mit Auslassungspunkten;
     "max-width: 100%" waere hier zirkulaer und liesse das Label auf 0 fallen */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.35s var(--ease-out), opacity 0.25s var(--ease);
}
.nav__section-label.is-out { transform: translateY(-9px); opacity: 0; }
.nav__section-label.is-in  { transform: translateY(9px); opacity: 0; transition: none; }
.nav__logo img { height: 38px; width: auto; }
.nav.is-scrolled .nav__logo img { height: 34px; }
/* Im eingefahrenen Zustand ist die Leiste schmaler, deshalb ruecken die
   Menuepunkte dort etwas zusammen. */
.nav.is-scrolled .nav__link { padding: 8px 12px; }
.nav__logo img { transition: height 0.4s var(--ease); }
/* Logo, Menue und Buttons behalten ihre volle Breite. Ohne das war das Logo
   das erste Element, das der Flexbox-Umbruch zusammengedrueckt hat. */
.nav__logo { flex: none; }
.nav__links { flex: none; }
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid rgba(4, 183, 246, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, -50%, 0);
  transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out),
              opacity 0.35s var(--ease);
}
.nav__link {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  padding: 8px 15px;
  font-size: 15px;
  font-weight: 450;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color var(--t-micro) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--brand-700); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 16px; flex: none; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-btn);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 12px;
  width: 18px; height: 1.6px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.2s var(--ease);
}
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 24px; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(0) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--white);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Auf niedrigen Displays passen Navigation und Handlungsaufforderungen nicht
     mehr auf einen Schirm, deshalb darf das Menue scrollen. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out), visibility 0.35s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }
.mobile-menu a.mobile-menu__link {
  font-size: 28px;
  letter-spacing: -0.03em;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease);
}
body.menu-open .mobile-menu__link { transform: none; opacity: 1; }
.mobile-menu__cta { margin-top: 28px; display: grid; gap: 10px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  isolation: isolate;
}
.hero__aura {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform, opacity;
}
.hero__aura--1 {
  top: -280px; left: 50%;
  width: min(1180px, 130vw); height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(4,183,246,0.34) 0%, rgba(4,183,246,0.12) 45%, rgba(4,183,246,0) 72%);
  animation: auraFloat 16s var(--ease) infinite alternate;
}
.hero__aura--2 {
  top: 120px; right: -180px;
  width: 520px; height: 520px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,183,246,0.20) 0%, rgba(4,183,246,0) 70%);
  animation: auraFloat 20s var(--ease) 2s infinite alternate-reverse;
}
.hero__aura--3 {
  top: 260px; left: -200px;
  width: 460px; height: 460px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,183,246,0.14) 0%, rgba(4,183,246,0) 70%);
  animation: auraFloat 24s var(--ease) 1s infinite alternate;
}
@keyframes auraFloat {
  from { transform: translate3d(0,0,0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(0,34px,0) scale(1.09); opacity: 1; }
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(17,17,17,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
}
.hero__inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.hero .display { margin-top: 22px; }
.hero .display em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.005em;
  color: var(--brand);
}
.hero__sub { margin: 26px auto 0; max-width: 660px; }
.hero__cta {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hero__bullets {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
}
.hero__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ash);
}
.check {
  width: 20px; height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand-700);
}
.check svg { width: 11px; height: 11px; }

/* Badge pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  position: relative;
}
.pill .dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--brand);
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}


/* ---------- Rotating hero word ---------- */
.swap {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  color: var(--brand);
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.005em;
  width: 0;
  transition: width 0.75s var(--ease-out);
  will-change: width;
}
.swap__ghost { visibility: hidden; white-space: nowrap; }
.swap__word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: var(--brand);
  transition: transform 0.75s var(--ease-out),
              opacity 0.45s var(--ease),
              filter 0.55s var(--ease);
}
.swap__word.is-enter { transform: translateY(0.42em) scale(0.97); opacity: 0; filter: blur(10px); }
.swap__word.is-exit  { transform: translateY(-0.42em) scale(0.97); opacity: 0; filter: blur(10px); }
.swap__dot {
  color: var(--ink);
  font-family: var(--font);
  font-style: normal;
  font-size: 0.93em;
  letter-spacing: -0.045em;
}
.swap__measure { visibility: hidden; transition: none; }

/* Auf Tablet und Handy steht das Wechselwort auf einer eigenen Zeile. Damit
   bricht der statische Teil der Überschrift unabhängig vom eingeblendeten Wort
   um: egal ob "CIOs" oder "Geschäftsführern" läuft, die Zeilen darüber bleiben
   an derselben Stelle stehen. Die Breitenanimation entfällt hier, weil die
   Zeile ohnehin die volle Spaltenbreite einnimmt (siehe main.js). */
@media (max-width: 900px) {
  .swap {
    display: block;
    width: 100%;
    transition: none;
    text-align: center;
  }
  .swap__word { left: 0; right: 0; text-align: center; }
}

/* Feste Zeilenumbrueche in einer Ueberschrift: der Umbruch wird gesetzt, statt
   ihn dem Textfluss zu ueberlassen. So bleibt nie ein einzelnes Wort allein in
   der letzten Zeile stehen. */
.display--lines .display__line,
.h2--lines .display__line { display: block; }

/* Handy: die Kopfzeile steht in exakt drei Zeilen, die dritte ist das
   Wechselwort. Die Schriftgröße folgt der Viewportbreite, damit die längste
   statische Zeile auch auf 320px-Geräten in eine Zeile passt. */
@media (max-width: 640px) {
  .hero .display { font-size: clamp(23px, calc(8.2vw - 2px), 52px); }
  .hero .display .display__line { display: block; }
  .swap { margin-top: 0.06em; }
}

/* ---------- Video-Bühne mit zulaufenden Partikelbahnen ---------- */
.videostage {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}
.videostage__flow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: calc(100% + 560px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* ---------- Video frame ---------- */
.videoframe {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: transparent;
  padding: 0;
  box-shadow: var(--shadow-xl);
  transform-origin: center top;
  will-change: transform;
}
.videoframe__inner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}
.videoframe video { width: 100%; height: 100%; object-fit: cover; }
.videoframe__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(4,183,246,0.20), transparent 70%),
    linear-gradient(180deg, rgba(11,11,12,0.35), rgba(11,11,12,0.65));
  cursor: pointer;
  transition: opacity 0.45s var(--ease);
}
.videoframe.is-playing .videoframe__overlay { opacity: 0; pointer-events: none; }
.play {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-micro) var(--ease-out), background-color var(--t-micro) var(--ease);
}
.play::after {
  content: "";
  position: absolute;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  animation: ping 3s var(--ease-out) infinite;
}
.videoframe__overlay:hover .play { transform: scale(1.07); background: var(--brand); color: #fff; }
.play svg { width: 26px; height: 26px; margin-left: 4px; }
.videoframe__caption {
  position: absolute;
  left: 26px; bottom: 26px;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.01em;
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Wistia-Video: Platzhalter und Zwei-Klick-Einbettung ----------
   Alle Videos laufen ueber Wistia. Ein Videoblock ist immer:
     <div class="videoframe" data-wistia data-media-id="ABC123"> ... </div>
   Solange data-media-id leer ist, bleibt der "Coming soon"-Platzhalter stehen.
   Erst mit gefuellter ID baut assets/js/main.js den Wistia-Player ein, und
   auch dann erst nach einem bewussten Klick (Datenschutz, zwei Klicks). */
.videoblock { margin: 0; }
.videoblock__cap {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ash);
  text-align: center;
}
.section--dark .videoblock__cap { color: rgba(255, 255, 255, 0.62); }

/* Platzhalter, solange kein Video hinterlegt ist. Bewusst dezent: ruhige
   dunkle Flaeche ohne Farbverlauf und Raster, damit der leere Block nicht
   mehr Aufmerksamkeit zieht als die Inhalte drumherum. */
.vsoon {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,0.82);
  background: linear-gradient(170deg, #15181c 0%, #101317 60%, #0d0f12 100%);
}
.vsoon__ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
}
.vsoon__ico svg { width: 18px; height: 18px; margin-left: 2px; }
.vsoon__label {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.vsoon__note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.42);
  max-width: 34ch;
}

/* Startbild vor dem Laden des Players (Zwei-Klick-Loesung) */
.vfacade {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background-color: #0b0d10;
  background-size: cover;
  background-position: center;
  font: inherit;
  text-align: center;
}
.vfacade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,0.35), rgba(11,11,12,0.7));
}
.vfacade > * { position: relative; }
.vfacade__note {
  max-width: 42ch;
  padding: 0 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.74);
}
.vfacade__note a { color: #fff; text-decoration: underline; }
.videoframe wistia-player,
.videoframe .wistia_embed { display: block; width: 100%; height: 100%; }
/* Zwischen Einfuegen und Registrieren des Players bleibt der Rahmen dunkel,
   statt kurz weiss aufzublitzen. */
.videoframe wistia-player:not(:defined) { background: #0b0d10; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: #fff;
  font-size: 14.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee__item svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* ---------- Kundenlogo-Wall ---------- */
.clogo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 26px;
  color: var(--stone);
  transition: color var(--t-micro) var(--ease);
  white-space: nowrap;
}
.clogo:hover { color: var(--ink); }
.clogo svg { width: 22px; height: 22px; flex: none; }
.clogo b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.clogo i {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.75;
}
.logos .marquee__group { gap: 0; padding-right: 0; }

/* Logowall unter dem Video im Hero, mit kleiner Überschrift */
.logos__label {
  margin: clamp(72px, 9vw, 128px) 0 0;
  text-align: center;
}
/* Luft ober- und unterhalb der Beschriftung, damit sie zwischen Video und
   Logowall steht statt an den Logos zu kleben. */
.logos--hero { margin-top: clamp(34px, 3.6vw, 52px); }
.logos--hero .clogo--img { height: 58px; }
@media (max-width: 640px) {
  .logos__label { margin-top: 40px; }
  .logos--hero { margin-top: 22px; }
}

/* ---------- Karten-Kopf mit Nummer statt Icon ---------- */
.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.card__num {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  color: var(--brand);
}
.card__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  text-align: right;
}
.card .card__top + .h3 { margin-top: 20px; }

/* ---------- Praxis-Case (dunkle Sektion) ---------- */
.section--dark .lead { color: rgba(255, 255, 255, 0.68); }
.section--dark .eyebrow { color: var(--brand); }
/* ---------- Vorteile: asymmetrisch, ohne Karten ---------- */
.vorteile {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 96px);
}
.vorteile__aside {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
}
.vorteile__aside .h2 { margin-top: 16px; }
.vorteile__aside .lead { margin-top: 20px; max-width: 380px; }
.vorteile__list { display: grid; }
.vorteile__list li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.vorteile__list li:last-child { border-bottom: 1px solid var(--hairline); }
.vnum {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 0.85;
  color: var(--brand);
}
.vorteile__list h3 {
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.vorteile__list p { margin-top: 12px; color: var(--ash); font-size: 15.5px; max-width: 520px; }

@media (max-width: 900px) {
  .vorteile { grid-template-columns: 1fr; }
  .vorteile__aside { position: static; }
  .case__media { aspect-ratio: 3 / 2; }
  .case__sub {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.case__stats { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .vorteile__list li { grid-template-columns: 52px 1fr; }
  .vnum { font-size: 32px; }
}

/* ---------- Testimonials (marquee, portiert aus der shadcn-Vorlage) ---------- */
.reviews { position: relative; }
.rmarquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rmarquee + .rmarquee { margin-top: 18px; }
.rmarquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--dur, 52s) linear infinite;
}
.rmarquee--reverse .rmarquee__track { animation-direction: reverse; }
.rmarquee:hover .rmarquee__track { animation-play-state: paused; }
.rmarquee__group { display: flex; gap: 18px; padding-right: 18px; }

.review {
  width: 348px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: #fff;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.review:hover {
  transform: translateY(-4px);
  border-color: rgba(4, 183, 246, 0.35);
  box-shadow: var(--shadow-xl);
}
.review__head { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-50);
  border: 1px solid rgba(4, 183, 246, 0.2);
  color: var(--brand-700);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.review__who { min-width: 0; }
.review__who strong {
  display: block;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.014em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review__who span { font-size: 12.5px; color: var(--ash); }
.review__stars { display: flex; gap: 3px; color: var(--brand); }
.review__stars svg { width: 15px; height: 15px; }
.review__stars--sm svg { width: 12px; height: 12px; }
.review p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.6em;
}
/* Rezension, die nur aus einer Sternebewertung besteht */
.review__none { color: var(--stone); font-style: italic; }
@media (max-width: 640px) {
  .review { width: 290px; }
}

/* ---------- Metrics (Karte mit umlaufendem Lichtpunkt) ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.metric {
  position: relative;
  padding: 1px;                 /* diese 1px sind die Leuchtspur-Bahn */
  border-radius: var(--r-card);
  background: var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.metric__dot {
  position: absolute;
  z-index: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(4, 183, 246, 1) 0%, rgba(4, 183, 246, 0.55) 38%, rgba(4, 183, 246, 0) 72%);
  filter: blur(6px);
  animation: moveDot 11s linear infinite;
  will-change: top, right;
}
.metric:nth-child(2) .metric__dot { animation-delay: -3.7s; }
.metric:nth-child(3) .metric__dot { animation-delay: -7.4s; }
.metric:hover .metric__dot { animation-play-state: paused; }

@keyframes moveDot {
  0%,  100% { top: -42px;                right: -42px; }
  25%       { top: -42px;                right: calc(100% - 62px); }
  50%       { top: calc(100% - 62px);     right: calc(100% - 62px); }
  75%       { top: calc(100% - 62px);     right: -42px; }
}

.metric__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  border-radius: calc(var(--r-card) - 1px);
  background: #fff;
  transition: background-color var(--t-micro) var(--ease);
}
.metric:hover .metric__inner {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(4, 183, 246, 0.05), transparent 60%),
    #fff;
}
.metric__value {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: var(--ink);
}
.metric__value .accent { color: var(--brand); }
.metric__label { margin-top: 12px; font-size: 15px; color: var(--ash); }
.metric__bar {
  margin-top: 18px;
  height: 2px;
  background: var(--pearl);
  border-radius: 2px;
  overflow: hidden;
}
.metric__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out);
}
.is-visible .metric__bar i { transform: scaleX(1); }


/* ---------- Cards ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 28px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(4,183,246,0.35);
  box-shadow: var(--shadow-xl);
}
.card:hover .card .h3, .card .h4 { margin-top: 20px; }
.card p { margin-top: 12px; color: var(--ash); font-size: 15.5px; }
.card__list { margin-top: 20px; display: grid; gap: 9px; }
.card__list:not(:last-child) { margin-bottom: 24px; }
.card__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.card__list li::before {
  content: "";
  margin-top: 8px;
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
}
/* schiebt den Link ans Kartenende, damit er in allen Karten auf einer Linie liegt */
.card__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hairline); }

.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3-fill { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Breite Hervorhebungskarte unter einer Kartenreihe (Produktstrecke) */
.card--feature {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 40px);
  border-color: transparent;
  color: #fff;
  background:
    radial-gradient(62% 120% at 100% 0%, rgba(4, 183, 246, 0.22), transparent 62%),
    radial-gradient(52% 110% at 0% 100%, rgba(139, 123, 255, 0.18), transparent 62%),
    var(--ink);
}
.card--feature:hover { border-color: transparent; box-shadow: var(--shadow-xl); }
.card--feature .card__kicker { color: var(--brand); }
.card--feature .card__top { border-bottom-color: rgba(255, 255, 255, 0.14); }
.card--feature .h3 { color: #fff; }
.card--feature p { color: rgba(255, 255, 255, 0.7); font-size: 16px; }
.card--feature .card__list { margin-top: 4px; }
.card--feature .card__list li { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 820px) {
  .card--feature { grid-template-columns: minmax(0, 1fr); }
  .card--feature .card__list { margin-top: 0; }
}

/* Feature card variant with number */
.card--num .num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand);
}

/* ---------- Problem split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.stack-list { display: grid; gap: 12px; }
.stack-item {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 18px 20px;
  transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease);
}
.stack-item::before {
  content: "";
  position: absolute;
  left: -1px; top: 18px; bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease-out);
}
.stack-item:hover { transform: translateX(6px); border-color: rgba(4,183,246,0.35); }
.stack-item:hover::before { transform: scaleY(1); }
.stack-item h4 { font-size: 16px; font-weight: 550; letter-spacing: -0.014em; }
.stack-item p { margin-top: 4px; font-size: 14.5px; color: var(--ash); }

/* ---------- Process ---------- */
.process { position: relative; display: grid; gap: 0; }
.process__rail {
  position: absolute;
  left: 27px; top: 12px; bottom: 60px;
  width: 2px;
  background: var(--pearl);
  border-radius: 2px;
  overflow: hidden;
}
.process__rail i {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--brand), rgba(4,183,246,0.25));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  transition: transform 0.2s linear;
}
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding: 0 0 clamp(36px, 4vw, 56px);
  align-items: start;
}
.step__badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--hairline-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ash);
  position: relative;
  z-index: 1;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
              border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.step.is-active .step__badge {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  transform: scale(1.06);
  box-shadow: var(--shadow-brand);
}
.step__body { padding-top: 8px; }
.step__body h3 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 400; letter-spacing: -0.024em; }
.step__body p { margin-top: 12px; color: var(--ash); max-width: 640px; }

/* ---------- Founder ---------- */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.founder__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 4 / 5;
}
.founder__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out);
}
.founder__media:hover img { transform: scale(1.01); }
.founder__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(17,17,17,0.62));
  pointer-events: none;
}
.founder__tag {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 1;
  color: #fff;
}
.founder__tag strong { display: block; font-size: 19px; font-weight: 550; letter-spacing: -0.02em; }
.founder__tag span { font-size: 13.5px; opacity: 0.78; }
.founder__proof {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.proof {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--cream);
}
.proof b { font-size: 15px; font-weight: 550; letter-spacing: -0.014em; display: block; }
.proof span { font-size: 13.5px; color: var(--ash); }
.proof .check { background: #fff; }

/* ---------- Team ---------- */
/* Vier Karten pro Reihe, Portraits hochkant: acht Gesichter ergeben zwei volle Reihen */
/* Flexbox statt Grid: Eine nicht voll besetzte letzte Reihe soll mittig
   stehen, nicht linksbuendig. Bei fuenf Personen sind das drei Karten oben
   und zwei zentriert darunter — unabhaengig davon, wie viele Personen spaeter
   dazukommen. Die Spaltenbreite steckt in der flex-basis der Karte, der
   Abstand in --team-gap, damit beide zusammen umschalten. */
.team {
  --team-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.person {
  flex: 0 1 calc((100% - 2 * var(--team-gap)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: rgba(4,183,246,0.35); }
.person__ph {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(70% 70% at 50% 25%, rgba(4,183,246,0.18), transparent 70%),
    var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
/* --crop steuert den vertikalen Bildausschnitt je Person, Standard 18 Prozent */
.person__ph img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--crop, 18%);
  display: block;
}
.person__body {
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.person__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.person__meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.person__header strong,
.person__meta strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.person__role,
.person__meta > span {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid rgba(4,183,246,0.18);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-700);
  line-height: 1.35;
}
.person__desc,
.person__meta p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ash);
}
.person__li {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(4,183,246,0.10);
  color: var(--brand);
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out);
}
.person__li:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.person__li svg { width: 16px; height: 16px; }

/* Recruiting-Karte, volle Breite unter dem Team */
.person--cta {
  flex: 0 1 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  border-color: transparent;
  color: #fff;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(120deg, var(--brand) 0%, var(--brand-600) 55%, #0271b0 100%);
}
.person--cta:hover { transform: none; box-shadow: var(--shadow-brand); border-color: transparent; }
.person__cta-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 10px;
}
.person--cta .h4 { color: #fff; }
.person--cta p { color: rgba(255,255,255,0.88); font-size: 14.5px; margin-top: 10px; max-width: 52ch; }
.person--cta .btn { flex: none; }

@media (max-width: 860px) {
  .person:not(.person--cta) { flex-basis: calc((100% - var(--team-gap)) / 2); }
}
@media (max-width: 520px) {
  .team { --team-gap: 12px; }
  .person__body { padding: 14px 12px 16px; }
  .person__header strong, .person__meta strong { font-size: 15px; }
  .person__role, .person__meta > span { font-size: 11.5px; padding: 3px 9px; margin-top: 8px; }
  .person__desc, .person__meta p { font-size: 12px; line-height: 1.45; margin-top: 8px; }
  .person__li { width: 28px; height: 28px; border-radius: 7px; }
  .person__li svg { width: 14px; height: 14px; }
  .person--cta { flex-direction: column; align-items: flex-start; padding: 20px; }
}
@media (max-width: 360px) {
  .team { --team-gap: 8px; }
  .person__body { padding: 12px 9px 14px; }
  .person__header strong, .person__meta strong { font-size: 13.5px; }
  .person__role, .person__meta > span { font-size: 10.5px; padding: 2px 7px; margin-top: 6px; }
  .person__desc, .person__meta p { font-size: 11px; line-height: 1.4; margin-top: 6px; }
  .person__li { width: 26px; height: 26px; }
  .person__li svg { width: 13px; height: 13px; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 450;
  letter-spacing: -0.018em;
  transition: color var(--t-micro) var(--ease);
}
.faq__q:hover { color: var(--brand-700); }
.faq__sign {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease),
              transform 0.4s var(--ease-out);
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), background-color var(--t-micro) var(--ease);
}
.faq__sign::before { width: 11px; height: 1.6px; }
.faq__sign::after  { width: 1.6px; height: 11px; }
.faq__item.is-open .faq__sign { background: var(--brand); border-color: transparent; transform: rotate(90deg); }
.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after { background: #fff; }
.faq__item.is-open .faq__sign::after { transform: scaleY(0); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: 26px;
  max-width: 780px;
  color: var(--ash);
  font-size: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease) 0.05s, transform 0.5s var(--ease-out) 0.05s;
}
.faq__item.is-open .faq__a p { opacity: 1; transform: none; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink);
  color: #fff;
  padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 72px);
  text-align: center;
  isolation: isolate;
}
.cta-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(4,183,246,0.55) 0%, rgba(4,183,246,0) 68%);
  animation: auraFloat 18s var(--ease) infinite alternate;
}
.cta-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 72%);
  mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 72%);
}
.cta-banner .h2 { max-width: 780px; margin: 18px auto 0; }
.cta-banner .lead { color: rgba(255,255,255,0.72); max-width: 620px; margin: 20px auto 0; }
.cta-banner .eyebrow { color: var(--brand); }
.cta-banner__actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-banner__micro {
  margin-top: 28px;
  display: flex;
  gap: 12px 26px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255,255,255,0.68);
}
.cta-banner__micro li { display: flex; align-items: center; gap: 8px; }
.cta-banner__micro .check { background: rgba(4,183,246,0.18); color: var(--brand); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; padding: clamp(56px, 7vw, 88px) 0 32px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__logo img { height: 46px; width: auto; }
.footer__desc { margin-top: 20px; max-width: 320px; color: rgba(255,255,255,0.6); font-size: 14.5px; }
.footer h5 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.footer__list { display: grid; gap: 10px; }
.footer__list a {
  font-size: 14.5px;
  color: rgba(255,255,255,0.72);
  transition: color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out);
  display: inline-block;
}
.footer__list a:hover { color: var(--brand); transform: translateX(3px); }
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.72);
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out);
}
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; }
.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
}
.footer__made-by {
  margin-left: auto;
  order: 99;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.footer__made-by:hover {
  color: var(--brand);
}
.footer__made-by strong {
  font-weight: 550;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-micro) var(--ease);
}
.footer__made-by:hover strong {
  color: var(--brand);
}

/* ---------- Mitscrollende Spalte ---------- */
.sticky-aside {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
}
@media (max-width: 900px) {
  .sticky-aside { position: static; }
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(0.96) translateY(20px); }
.reveal--left.is-visible, .reveal--right.is-visible, .reveal--scale.is-visible { transform: none; }

/* ---------- Recruiting form ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
  padding: clamp(24px, 3.4vw, 44px);
  max-width: 720px;
  margin: 0 auto;
}
.form-progress { display: flex; align-items: center; gap: 14px; }
.form-progress__bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--pearl);
  overflow: hidden;
}
.form-progress__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.form-progress span { font-size: 13px; color: var(--ash); white-space: nowrap; }

.fstep { display: none; }
.fstep.is-current { display: block; animation: stepIn 0.5s var(--ease-out) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.fstep__q { margin-top: 28px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.028em; }
.options { margin-top: 24px; display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-card);
  cursor: pointer;
  font-size: 15.5px;
  background: #fff;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease-out);
}
.option:hover { border-color: var(--brand); transform: translateY(-2px); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__mark {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--stone);
  display: grid;
  place-items: center;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.option__mark::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--t-micro) var(--ease-out);
}
.option.is-selected { border-color: var(--brand); background: var(--brand-50); }
.option.is-selected .option__mark { background: var(--brand); border-color: var(--brand); }
.option.is-selected .option__mark::after { transform: scale(1); }
.form-error { margin-top: 20px; padding: 12px 14px; border-radius: 10px;
  background: #fdecec; color: #a11c1c; font-size: 14.5px; line-height: 1.45; }
[type="submit"][aria-busy="true"] { opacity: .6; pointer-events: none; }
.form-nav { margin-top: 28px; display: flex; gap: 10px; justify-content: space-between; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13.5px; color: var(--ash); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-card);
  background: #fff;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-wash);
}
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consent { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--ash); }
.consent input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; }
.form-success { text-align: center; padding: 20px 0; }
.form-success .check-big {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  animation: pop 0.6s var(--ease-out) both;
}
@keyframes pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Quote ---------- */
.quote {
  background: var(--cream);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 48px);
}
.quote blockquote {
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.022em;
  font-weight: 400;
}
.quote figcaption { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.quote .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* ---------- Legal pages ---------- */
.legal { padding-top: calc(var(--nav-h) + 56px); }
.legal__body { max-width: 760px; }
.legal__body h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.022em;
  margin-top: 44px;
}
.legal__body h3 { font-size: 17px; font-weight: 550; margin-top: 28px; }
.legal__body p, .legal__body li { color: var(--ash); font-size: 15.5px; margin-top: 12px; }
.legal__body ul { margin-top: 12px; display: grid; gap: 8px; }
.legal__body ul li { padding-left: 18px; position: relative; }
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.legal__body strong { color: var(--ink); font-weight: 550; }
.notice {
  margin-top: 28px;
  border: 1px solid rgba(4,183,246,0.3);
  background: var(--brand-50);
  border-radius: var(--r-card);
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.notice strong { display: block; margin-bottom: 6px; }

/* ---------- Scroll progress ---------- */
.scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--brand);
  z-index: 101;
  will-change: transform;
}

/* ==========================================================================
   Ergänzungen: Bewertungen, Partnerlogos, Werkstraße, Fallstudien, Blog
   ========================================================================== */

/* ---------- Sternebewertung mit Teilfüllung ---------- */
.stars {
  position: relative;
  display: inline-flex;
  flex: none;
  /* Feste Eigenbreite: sonst dehnt ein Flex-Container mit align-items:stretch
     das Element, und die prozentuale Füllbreite ergibt eine falsche Bewertung. */
  width: max-content;
  align-self: start;
  line-height: 0;
}
.stars__row { display: flex; gap: 2px; }
.stars__row svg { width: 15px; height: 15px; flex: none; }
.stars__fill .stars__row { width: max-content; }
.stars__base { color: #d9d8d6; }
.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--pct, 100%);
  color: #f5a623;
}
.stars--lg .stars__row svg { width: 19px; height: 19px; }

/* ---------- Google-Bewertungsbadge ---------- */
.gbadge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 13px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out),
              box-shadow 0.4s var(--ease);
}
a.gbadge:hover {
  border-color: rgba(4, 183, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.gbadge__logo { width: 22px; height: 22px; flex: none; }
.gbadge__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gbadge__line { display: flex; align-items: center; gap: 8px; }
.gbadge__score {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gbadge__meta {
  font-size: 12px;
  color: var(--ash);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.gbadge--hero { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(8px); }

/* ---------- Bewertungsleiste (Google, Agenturmarkt, TrustMarkt) ---------- */
.trustrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 48px;
}
.trustcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.trustcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}
.trustcard__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.trustcard__score b {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.trustcard__of { font-size: 14px; color: var(--ash); }
.trustcard p { font-size: 14.5px; color: var(--ash); margin: 0; }
.trustcard__foot { margin-top: auto; padding-top: 6px; }
/* Die Agentur-Score-Karte traegt statt Zahl und Text das fremde Widget. Es
   meldet seine Hoehe nach dem Laden selbst per postMessage, das Embed-Skript
   schreibt sie dann als Inline-Hoehe auf den Container. Eine feste Hoehe im
   Markup schnitt den unteren Rand des Widgets ab; hier steht deshalb nur eine
   Mindesthoehe, damit die Karte waehrend des Ladens nicht springt, und eine
   Obergrenze, damit ein unerwartet hohes Widget die Reihe nicht auseinander
   zieht. */
.trustcard--widget { justify-content: center; gap: 18px; }
.trustmarkt-widget {
  width: 100%;
  min-height: 132px;
  /* Auf der Produktivdomain meldet das Widget rund 150px. Die Obergrenze haelt
     nur einen entgleisten Wert ab und liegt bewusst weit darueber: eine knappe
     Grenze wuerde genau das Abschneiden zurueckholen, das hier behoben wurde. */
  max-height: 260px;
}
.trustmarkt-widget iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------- Partnerlogo-Wall (echte Logos, monochrom) ---------- */
.clogo--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  height: 72px;
}
.clogo--img img {
  max-height: 34px;
  max-width: 152px;
  width: auto;
  height: auto;
  opacity: 0.55;
  transition: opacity var(--t-micro) var(--ease);
}
.clogo--img:hover img { opacity: 1; }
@media (max-width: 640px) {
  .clogo--img { padding: 0 20px; height: 60px; }
  .clogo--img img { max-height: 28px; max-width: 118px; }
}

/* ---------- Werkstraße (Lead-Prozess) ---------- */
.werk {
  display: grid;
  grid-template-columns: 0.88fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.werk__viz {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  align-self: start;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px 18px;
}
.werk__viz svg {
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--nav-h) - 140px);
  min-height: 420px;
}
.werk__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--ash);
}
.werk__legend span { display: inline-flex; align-items: center; gap: 8px; }
.werk__legend i {
  width: 18px;
  height: 0;
  flex: none;
  border-top: 2px solid var(--stone);
}
.werk__legend i.is-a { border-color: var(--wa); }
.werk__legend i.is-b { border-color: var(--wb); }
.werk__legend i.is-express { border-top-style: dashed; border-color: var(--wb); }

.werk__steps { display: grid; gap: 12px; margin-top: 34px; }
.werk-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: border-color var(--t-micro) var(--ease), transform 0.45s var(--ease-out);
}
.werk-step:hover { border-color: rgba(4, 183, 246, 0.35); transform: translateX(3px); }
.werk-step__badge {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-50);
  border: 1px solid rgba(4, 183, 246, 0.22);
  color: var(--brand-700);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.werk-step--split .werk-step__badge {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.werk-step h3 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.022em;
}
.werk-step p { margin-top: 8px; font-size: 15px; color: var(--ash); }
.werk-step__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.werk-tag {
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}

.werk__photo {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--pearl);
}
.werk__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-out);
}
.werk__photo:hover img { transform: scale(1); }
.werk__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.56) 38%, rgba(8,8,8,0.06) 64%, transparent 78%),
    linear-gradient(0deg, rgba(8,8,8,0.6) 0%, rgba(8,8,8,0.1) 34%, transparent 52%);
  pointer-events: none;
}
.werk__photo figcaption {
  position: absolute;
  left: clamp(20px, 4vw, 44px);
  bottom: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 44px);
  z-index: 1;
  color: #fff;
  max-width: 460px;
}
.werk__photo figcaption strong {
  display: block;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 550;
  letter-spacing: -0.025em;
}
.werk__photo figcaption span {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.76);
}
@media (max-width: 900px) {
  .werk { grid-template-columns: minmax(0, 1fr); }
  .werk__viz { position: static; }
  .werk__viz svg { max-height: none; min-height: 0; }
  .werk__photo { aspect-ratio: 3 / 2; }
  .werk__photo::after { background: linear-gradient(180deg, transparent 30%, rgba(17,17,17,0.78)); }
}

/* SVG-Diagramm der Werkstraße (liegt auf dunklem Grund) */
.wdiag { font-family: var(--font); overflow: visible; }

/* Stationen */
.wdiag__node {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.1;
}
.wdiag__node--soft { fill: rgba(255, 255, 255, 0.085); stroke: rgba(255, 255, 255, 0.2); }
.wdiag__node--a    { fill: rgba(4, 183, 246, 0.14);   stroke: rgba(4, 183, 246, 0.48); }
.wdiag__node--b    { fill: rgba(139, 123, 255, 0.17); stroke: rgba(139, 123, 255, 0.52); }
.wdiag__node--line { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.24); }
.wdiag__node--up   { fill: rgba(139, 123, 255, 0.2);  stroke: rgba(139, 123, 255, 0.6); }
.wdiag__node--brand { fill: url(#wgLead); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; }
.wdiag__node--end   { fill: url(#wgEnd);  stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; }

/* Icons */
.wdiag__ico {
  fill: none;
  stroke: var(--wa);
  color: var(--wa);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wdiag__ico--b  { stroke: var(--wb); color: var(--wb); }
.wdiag__ico--on { stroke: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9); }

/* Beschriftung */
.wdiag__label {
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.016em;
  fill: rgba(255, 255, 255, 0.94);
}
.wdiag__label--on { fill: #fff; }
.wdiag__sub { font-size: 12.2px; fill: rgba(255, 255, 255, 0.55); letter-spacing: 0.005em; }
.wdiag__sub--on { fill: rgba(255, 255, 255, 0.82); }
.wdiag__edgelabel { font-size: 11.8px; fill: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; }
.wdiag__edgelabel--a { fill: rgba(4, 183, 246, 0.95); }
.wdiag__edgelabel--b { fill: rgba(160, 148, 255, 0.95); }

/* Wegmarken auf den Linien */
.wdiag__pill { fill: #15181c; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.wdiag__pill--a { stroke: rgba(4, 183, 246, 0.4); }
.wdiag__pill--b { stroke: rgba(139, 123, 255, 0.45); }

/* Verbindungen */
.wdiag__edge { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.6; }
.wdiag__edge--a { stroke: rgba(4, 183, 246, 0.68); }
.wdiag__edge--b { stroke: rgba(139, 123, 255, 0.68); }
.wdiag__edge--merge { stroke: url(#wgMerge); stroke-width: 2.2; }
.wdiag__edge--express {
  stroke: var(--wb);
  stroke-width: 1.8;
  stroke-dasharray: 6 6;
  animation: wdiagflow 1.6s linear infinite;
}
.wdiag__arrow { fill: rgba(255, 255, 255, 0.3); }
.wdiag__arrow--a { fill: rgba(4, 183, 246, 0.75); }
.wdiag__arrow--b { fill: rgba(139, 123, 255, 0.75); }
.wdiag__arrow--on { fill: rgba(255, 255, 255, 0.55); }

/* Schritt-Karte im Text hebt die zugehoerige Station im Diagramm hervor.
   Die Klasse .is-focus setzt das Skript nur, wenn ein echter Zeiger vorhanden
   ist; auf Touch waere es ein Blindeffekt. Die Darstellung braucht deshalb
   keine eigene Hover-Media-Query mehr: haengt sie an derselben Bedingung wie
   das Skript, faellt der Effekt auf Geraeten aus, die zwar eine Maus haben,
   sich gegenueber der Media-Query aber als Touch melden. */
.wdiag__station {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.werk.is-focus .wdiag__station { opacity: 0.18; }
.werk.is-focus .wdiag__edge { opacity: 0.22; transition: opacity 0.3s var(--ease); }

/* Die angesprochene Station bleibt voll sichtbar, waechst leicht an und
   bekommt einen Schein in der Farbe ihres Weges. */
.werk.is-focus .wdiag__station.is-on {
  opacity: 1;
  transform: scale(1.035);
  filter: drop-shadow(0 0 9px rgba(4, 183, 246, 0.6)) drop-shadow(0 0 26px rgba(4, 183, 246, 0.34));
}
.werk.is-focus .wdiag__station.is-on:has(.wdiag__node--b),
.werk.is-focus .wdiag__station.is-on:has(.wdiag__node--up) {
  filter: drop-shadow(0 0 9px rgba(139, 123, 255, 0.62)) drop-shadow(0 0 26px rgba(139, 123, 255, 0.36));
}
.wdiag__station.is-on .wdiag__node {
  stroke: var(--wa);
  stroke-width: 2.2;
}
.wdiag__station.is-on:has(.wdiag__node--b) .wdiag__node,
.wdiag__station.is-on:has(.wdiag__node--up) .wdiag__node {
  stroke: var(--wb);
}
.werk-step[data-nodes] { cursor: default; }

/* Waehrend eine Station leuchtet, tritt die Karte, die sie ausloest, ebenfalls
   hervor - sonst ist auf breiten Schirmen nicht zu sehen, was wozu gehoert. */
.section--dark .werk.is-focus .werk-step:hover {
  border-color: rgba(4, 183, 246, 0.55);
  background: rgba(4, 183, 246, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .werk.is-focus .wdiag__station.is-on { transform: none; }
}

@keyframes wdiagflow { to { stroke-dashoffset: -24; } }
.wdiag__bar { fill: var(--brand); }

/* ---------- Fallstudien ---------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.case:hover {
  transform: translateY(-4px);
  border-color: rgba(4, 183, 246, 0.35);
  box-shadow: var(--shadow-xl);
}
.case__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}
.case__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}
.case:hover .case__media img { transform: scale(1.06); }
.case__flag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.case__body { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.case__client {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.case__body .h3 { margin-top: 12px; }
.case__body > p { margin-top: 12px; font-size: 15.5px; color: var(--ash); }
.case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.case__stats div b {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.case__stats div span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ash);
}
.case__foot { margin-top: auto; padding-top: 26px; }
.case__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--brand-700);
}
.case__link svg { width: 17px; height: 17px; transition: transform var(--t-micro) var(--ease-out); }
.case:hover .case__link svg { transform: translateX(4px); }

/* Platzhalter-Fallstudie */
.case--soon .case__media {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(4,183,246,0.14), transparent 62%),
    var(--cream);
}
.case--soon .case__media img {
  width: auto; height: auto;
  max-width: 46%;
  max-height: 40%;
  object-fit: contain;
  opacity: 0.55;
  transform: none;
}
.case--soon:hover .case__media img { transform: none; }
.case--soon .case__flag { background: var(--ink); color: #fff; }
.case__soonlist { margin-top: 24px; display: grid; gap: 10px; }
.case__soonlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ash);
}
.case__soonlist li::before {
  content: "";
  width: 16px; height: 1px;
  flex: none;
  background: var(--stone);
}
@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; }
}

/* ---------- Blog ---------- */
.pagehero {
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(40px, 5vw, 64px);
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
}
.pagehero .h1, .pagehero .display { margin-top: 18px; }
.pagehero .lead { margin-top: 20px; max-width: 640px; }

.blogfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}
.blogfilter__btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}
.blogfilter__btn:hover { border-color: var(--ink); }
.blogfilter__btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.posts { display: grid; gap: 20px; }
.post {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: border-color var(--t-micro) var(--ease), box-shadow 0.45s var(--ease);
}
.post:hover { border-color: rgba(4, 183, 246, 0.32); box-shadow: var(--shadow-xl); }
.post[hidden] { display: none; }
.post__index {
  font-family: var(--font-accent);
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--stone);
}
.post__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.post__tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
}
.post__tag--type { background: var(--cream); color: var(--ink-soft); }
.post h2 {
  margin-top: 16px;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.post__body { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.post__body p + p { margin-top: 14px; }
.post__quote {
  margin-top: 20px;
  padding: 18px 22px;
  border-left: 2px solid var(--brand);
  background: var(--cream);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}
.post__quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--ash); }
.post__figures { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.post__figure {
  padding: 12px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: var(--cream);
}
.post__figure b {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.post__figure span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ash); }
.blog-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ash);
  font-size: 15px;
}
@media (max-width: 640px) {
  .post { grid-template-columns: 1fr; gap: 4px; }
  .post__index { font-size: 34px; }
}

/* ---------- Artikel-/Fallstudienseite ---------- */
.prose { max-width: 720px; }
.prose h2 {
  margin-top: 48px;
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 18px; font-size: 17px; line-height: 1.68; color: var(--ink-soft); }
.prose ul { margin-top: 20px; display: grid; gap: 10px; }
.prose ul li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prose ul li::before {
  content: "";
  margin-top: 10px;
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
}
.prose__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ash);
}
.caselayout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.casefacts {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  display: grid;
  gap: 22px;
  padding: 28px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.casefacts h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.casefacts dl { display: grid; gap: 14px; margin: 0; }
.casefacts dt { font-size: 12.5px; color: var(--ash); }
.casefacts dd {
  margin: 2px 0 0;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
@media (max-width: 900px) {
  .caselayout { grid-template-columns: 1fr; }
  .casefacts { position: static; }
}

/* ---------- Fallstudien-Karten (Ergebnistafel) ----------
   Die Kampagnengrafik wiederholte Headline und Kennzahlen eins zu eins und
   konkurrierte mit dem Text daneben. Statt Bild traegt jetzt die Zahl die
   Karte: heller Textteil oben, dunkles Kennzahlenband unten. */
.cboards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.cboard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: inherit;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.cboard::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 62%; height: 56%;
  background: radial-gradient(120% 100% at 100% 0%, rgba(4, 183, 246, 0.1), transparent 68%);
  pointer-events: none;
}
.cboard:hover {
  transform: translateY(-5px);
  border-color: rgba(4, 183, 246, 0.4);
  box-shadow: var(--shadow-xl);
}
.cboard__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(26px, 3vw, 36px);
}
.cboard__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cboard__client {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cboard__tag {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid rgba(4, 183, 246, 0.2);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--brand-700);
}
.cboard__title {
  margin-top: 18px;
  font-size: clamp(23px, 2.4vw, 29px);
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -0.035em;
}
.cboard__text {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ash);
}
.cboard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 26px;
}
.cboard__meta { font-size: 13px; color: var(--stone); }
.cboard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--brand-700);
}
.cboard__go svg { width: 17px; height: 17px; transition: transform var(--t-micro) var(--ease-out); }
.cboard:hover .cboard__go svg { transform: translateX(4px); }

/* Referenzvideo im Kartenkopf ---------------------------------------------
   Die Fallstudien behalten ihre eigenen Seiten; auf der Startseite steht
   zusaetzlich das Startbild des Referenzvideos oben in der Karte. Abgespielt
   wird direkt dort, nachgelesen wird auf der Detailseite. Das Bild uebernimmt
   dabei die Rolle des Farbverlaufs, deshalb faellt der bei diesen Karten weg. */
.cboard--media::before { content: none; }
.cboard__video { position: relative; z-index: 2; }
.cboard__video .videoframe {
  border-radius: 0;
  box-shadow: none;
  transform: none;
  will-change: auto;
}
.cboard__video .videoframe__inner {
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
}
/* Waehrend das Video laeuft, soll die Karte beim Zeigen nicht wegspringen. */
.cboard--media:has(.videoframe.is-playing):hover { transform: none; }

/* Ohne den Farbverlauf braucht der Textteil keine eigene Ebene mehr. Wichtig
   ist das fuer die Klickflaeche unten: nur wenn .cboard__body static ist,
   bezieht deren inset:0 sich auf die ganze Karte statt nur auf den Textteil. */
.cboard--media .cboard__body { position: static; }

/* Die Ueberschrift traegt den Link zur Fallstudie; sein ::after legt sich
   ueber die ganze Karte, sodass jede Stelle klickbar bleibt. Der Videoblock
   liegt mit hoeherem z-index darueber: ein Klick auf Play startet das Video,
   statt die Fallstudie zu oeffnen. */
.cboard__link { color: inherit; text-decoration: none; }
.cboard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cboard:focus-within {
  border-color: rgba(4, 183, 246, 0.4);
  box-shadow: var(--shadow-xl);
}

/* Dunkles Kennzahlenband am Kartenfuss */
.cboard__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.cboard__kpis > div {
  padding: 22px 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(4, 183, 246, 0.09), transparent 62%),
    var(--ink);
}
.cboard__kpis b {
  display: block;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #fff;
}
.cboard__kpis span {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}
.cboard__kpis .is-accent b { color: var(--brand); }
.cboard__kpis .is-accent {
  background:
    radial-gradient(130% 170% at 100% 0%, rgba(4, 183, 246, 0.28), transparent 66%),
    var(--ink);
}
.cboard__kpis .is-accent span { color: rgba(255, 255, 255, 0.68); }

/* Kennzahlenband ohne umgebende Karte (z. B. auf der Agenturseite) */
.cboard__kpis--solo { border-radius: 14px; overflow: hidden; }

/* Kompakter Ergebnisnachweis ohne Bild */
.caseproof { max-width: 780px; margin-inline: auto; text-align: center; }
.caseproof .lead { margin-inline: auto; }
.caseproof .cboard__kpis { margin-top: 32px; text-align: left; }
.caseproof .btn { margin-top: 32px; }

@media (max-width: 900px) { .cboards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .cboard__kpis { grid-template-columns: minmax(0, 1fr); }
  .cboard__kpis > div { padding: 16px 20px; }
  .cboard__kpis b { font-size: 26px; }
}

/* Zentrierter Abschluss-Button unter einer Kartenreihe */
.section-cta { display: flex; justify-content: center; margin-top: clamp(34px, 4vw, 48px); }

/* Brotkrumen auf hellem Grund */
.crumbs.crumbs--light { color: var(--ash); margin-bottom: 26px; }
.crumbs.crumbs--light a:hover { color: var(--ink); }
.crumbs.crumbs--light b { color: var(--ink); }
.crumbs.crumbs--light span { color: var(--stone); }

/* Summenleiste auf der Fallstudien-Uebersicht */
.casesum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 44px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--hairline);
  overflow: hidden;
}
.casesum > div {
  padding: 22px;
  background: #fff;
  transition: background var(--t-micro) var(--ease);
}
.casesum > div:hover { background: var(--brand-50); }
.casesum b {
  display: block;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.casesum span { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: var(--ash); }
@media (max-width: 780px) { .casesum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .casesum { grid-template-columns: minmax(0, 1fr); } }

/* Navigation ueber einem dunklen Aufmacher lesbar halten (bis gescrollt wird) */
body.has-dark-hero .nav:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, 0.72); }
body.has-dark-hero .nav:not(.is-scrolled) .nav__link:hover { color: #fff; }
body.has-dark-hero .nav:not(.is-scrolled) .nav__link.is-active { color: var(--brand); }
body.has-dark-hero .nav:not(.is-scrolled) .nav__pill { background: rgba(255, 255, 255, 0.1); }
body.has-dark-hero .nav:not(.is-scrolled) .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.26);
  background: transparent;
}
body.has-dark-hero .nav:not(.is-scrolled) .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
body.has-dark-hero .nav:not(.is-scrolled) .nav__burger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
body.has-dark-hero .nav:not(.is-scrolled) .nav__burger span { background: #fff; }

/* ---------- Fallstudie: dunkler Aufmacher ---------- */
.casetop {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(44px, 6vw, 78px)) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(58% 62% at 10% 0%,   rgba(4, 183, 246, 0.22), transparent 62%),
    radial-gradient(52% 58% at 96% 12%,  rgba(139, 123, 255, 0.20), transparent 62%),
    linear-gradient(168deg, #191d22 0%, #101317 48%, #0b0d10 100%);
  color: #fff;
}
.casetop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 72%);
  pointer-events: none;
}
.casetop .wrap { position: relative; z-index: 1; }
.casetop .eyebrow { color: var(--brand); }
.casetop .lead { color: rgba(255, 255, 255, 0.7); max-width: 56ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.crumbs a { transition: color var(--t-micro) var(--ease); }
.crumbs a:hover { color: #fff; }
.crumbs b { font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.crumbs span { color: rgba(255, 255, 255, 0.28); }

.casetop__grid {
  max-width: 900px;
  margin-top: clamp(24px, 3vw, 38px);
}
.casetop__grid .h1, .casetop__grid h1 {
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.042em;
  font-weight: 400;
}
.casetop__grid .h1, .casetop__grid .h2 { margin-top: 18px; }
.casetop__grid .lead { margin-top: 20px; }
.casetop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
}
.casetop__meta span {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}
.casetop__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.casetop__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: rgba(0, 0, 0, 0.55) 0 34px 70px -22px;
  background: rgba(255, 255, 255, 0.04);
}
.casetop__media img { width: 100%; height: auto; }

/* Kennzahlenleiste im Aufmacher */
.casetop__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 4.5vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.kpi {
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px);
  background: rgba(14, 17, 20, 0.86);
  transition: background var(--t-micro) var(--ease);
}
.kpi:hover { background: rgba(4, 183, 246, 0.08); }
.kpi--accent { background: rgba(4, 183, 246, 0.1); }
.kpi--accent b { color: var(--brand); }
.kpi--accent > span { color: rgba(255, 255, 255, 0.7); }
.kpi b {
  display: block;
  font-size: clamp(30px, 3.9vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}
/* nur die Beschriftung, nicht die Zaehl-Spans innerhalb von <b> */
.kpi > span {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}

/* "Auf einen Blick": Ausgangslage, Aufgabe, Ergebnis */
.caseglance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.glance {
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: #fff;
  transition: border-color var(--t-micro) var(--ease), transform 0.45s var(--ease-out);
}
.glance:hover { border-color: rgba(4, 183, 246, 0.35); transform: translateY(-3px); }
.glance__ico {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--brand-50);
  border: 1px solid rgba(4, 183, 246, 0.2);
  color: var(--brand-700);
}
.glance__ico svg { width: 19px; height: 19px; }
.glance h3 {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.glance p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.glance--result { background: var(--cream); border-color: rgba(4, 183, 246, 0.28); }

/* Zitat im Fliesstext */
.casequote {
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  background: var(--cream);
}
.casequote p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.casequote footer { margin-top: 16px; font-size: 13.5px; color: var(--ash); }

/* Vorgehen als nummerierte Zeitleiste */
.caseflow { position: relative; margin-top: 30px; display: grid; }
.caseflow::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, var(--brand), rgba(4, 183, 246, 0.15));
}
.cstep {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 22px;
  padding: 13px 0;
}
.cstep__n {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(4, 183, 246, 0.3);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.cstep:hover .cstep__n { background: var(--brand); border-color: var(--brand); color: #fff; }
.cstep h3 {
  margin-top: 9px;
  font-size: 18.5px;
  font-weight: 550;
  letter-spacing: -0.022em;
}
.cstep p { margin-top: 9px; font-size: 16px; line-height: 1.62; color: var(--ash); }

/* Vorher / Nachher */
.beforeafter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}
.bacard {
  padding: clamp(26px, 3vw, 36px);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: #fff;
}
.bacard h3 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}
.bacard ul { margin-top: 20px; display: grid; gap: 14px; }
.bacard li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.bacard li i {
  flex: none;
  width: 21px; height: 21px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.bacard li i svg { width: 12px; height: 12px; }
.bacard--before li i { background: rgba(17, 17, 17, 0.06); color: var(--ash); }
.bacard--after {
  border-color: transparent;
  color: #fff;
  background:
    radial-gradient(70% 110% at 100% 0%, rgba(4, 183, 246, 0.26), transparent 64%),
    radial-gradient(60% 100% at 0% 100%, rgba(139, 123, 255, 0.18), transparent 64%),
    var(--ink);
}
.bacard--after h3 { color: var(--brand); }
.bacard--after li { color: #fff; }
.bacard--after li i { background: rgba(4, 183, 246, 0.2); color: var(--brand); }
.bacard--after li b { font-weight: 550; }
.ba__arrow {
  align-self: center;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: #fff;
  color: var(--ink);
}
.ba__arrow svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .beforeafter { grid-template-columns: minmax(0, 1fr); }
  .ba__arrow { justify-self: center; transform: rotate(90deg); }
}


/* Kundenzitat mit Namensnennung (Originalton) */
.casevoice {
  margin-top: 44px;
  padding: 32px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
}
.casevoice p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.022em;
  color: #fff;
}
.casevoice figcaption { margin-top: 20px; display: grid; gap: 3px; }
.casevoice figcaption strong { font-size: 15px; font-weight: 550; }
.casevoice figcaption span { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }

/* Faktenspalte */
.casefacts__kpi {
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}
.casefacts__kpi b {
  display: block;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.casefacts__kpi span { display: block; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.62); }

/* Verweis auf die naechste Fallstudie (ohne Vorschaubild) */
.casenext {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  overflow: hidden;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
  transition: border-color var(--t-micro) var(--ease), box-shadow 0.45s var(--ease),
              transform 0.45s var(--ease-out);
}
.casenext::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), rgba(139, 123, 255, 0.7));
  transform: scaleY(0.4);
  transform-origin: center;
  transition: transform 0.45s var(--ease-out);
}
.casenext:hover {
  border-color: rgba(4, 183, 246, 0.4);
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}
.casenext:hover::before { transform: scaleY(1); }
.casenext__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.casenext__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ash);
}
.casenext h3 {
  margin-top: 12px;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.casenext p { margin-top: 9px; font-size: 15px; color: var(--ash); max-width: 52ch; }

/* Kennzahlen als kompakte Chips statt Bild */
.casenext__kpis { display: flex; gap: 10px; }
.casenext__kpi {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--cream);
  border: 1px solid var(--hairline);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ash);
  white-space: nowrap;
}
.casenext__kpi b {
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.casenext__arrow {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out);
}
.casenext:hover .casenext__arrow {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateX(3px);
}
.casenext__arrow svg { width: 19px; height: 19px; }
@media (max-width: 1000px) {
  .casenext { grid-template-columns: minmax(0, 1fr) auto; }
  .casenext__kpis { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .casenext__kpi { flex: 1 1 auto; }
}

@media (max-width: 900px) {
  .casetop__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caseglance { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .casetop__kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .casequote { padding: 22px; }
}

/* ---------- Platzierung der Bewertungsbadges ---------- */
.hero__rating { margin-top: 34px; }

/* Hero mit Videospalte: links das Video, rechts der Text */
.hero__inner--split {
  max-width: 1180px;
  display: grid;
  /* Beide Spalten exakt gleich breit; der Videorahmen zieht sich auf die
     Hoehe der Textspalte, damit links und rechts gleich grosse Bloecke stehen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 64px);
  text-align: left;
}
/* Halbe Spaltenbreite: die Kopfzeile wird entsprechend kleiner skaliert,
   damit keine Zeile umbricht und kein Wort allein stehen bleibt. */
.hero__inner--split .display { font-size: clamp(30px, 3.2vw, 48px); }
.hero__inner--split .hero__media { display: flex; }
.hero__inner--split .hero__media .videoframe { width: 100%; }
.hero__inner--split .hero__media .videoframe__inner {
  height: 100%;
  aspect-ratio: auto;
  min-height: 260px;
}
.hero__inner--split .hero__sub,
.hero__inner--split .body-sm { margin-left: 0; margin-right: 0; max-width: none; }
.hero__inner--split .hero__copy { display: flex; flex-direction: column; justify-content: center; }
.hero__inner--split .hero__cta,
.hero__inner--split .hero__bullets { justify-content: flex-start; }
.hero__media { min-width: 0; }
@media (max-width: 900px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero__inner--split .hero__sub,
  .hero__inner--split .body-sm { margin-left: auto; margin-right: auto; }
  .hero__inner--split .hero__cta,
  .hero__inner--split .hero__bullets { justify-content: center; }
  /* Auf schmalen Schirmen zuerst die Botschaft, danach das Video im 16:9-Format */
  .hero__media { order: 2; margin-top: 8px; }
  .hero__inner--split .hero__media .videoframe__inner { height: auto; aspect-ratio: 16 / 9; }
  .hero__copy { order: 1; }
}

.section-head__badge { margin-top: 26px; display: flex; justify-content: center; }
.trustcard__head svg { width: 17px; height: 17px; flex: none; }

/* ---------- Werkstraße auf dunklem Grund ---------- */
.section--dark .werk__viz {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background:
    radial-gradient(80% 42% at 18% 4%,  rgba(4, 183, 246, 0.20), transparent 62%),
    radial-gradient(78% 46% at 92% 96%, rgba(139, 123, 255, 0.22), transparent 64%),
    linear-gradient(168deg, #191d22 0%, #101317 46%, #0b0d10 100%);
  box-shadow:
    rgba(0, 0, 0, 0.5) 0 34px 70px -20px,
    inset rgba(255, 255, 255, 0.06) 0 1px 0 0;
}
/* feines Raster im Hintergrund, damit die Flaeche Tiefe bekommt */
.section--dark .werk__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.section--dark .werk__viz > * { position: relative; }
.section--dark .werk__legend { border-top-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
.section--dark .werk-step {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}
.section--dark .werk-step:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(4, 183, 246, 0.45);
}
.section--dark .werk-step p { color: rgba(255, 255, 255, 0.62); }
.section--dark .werk-step__badge {
  background: rgba(4, 183, 246, 0.14);
  border-color: rgba(4, 183, 246, 0.3);
  color: var(--brand);
}
.section--dark .werk-step--split .werk-step__badge {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.section--dark .werk-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Ab hier reicht die Breite fuer Menue und Buttons nicht mehr aus, ohne dass
   sich die Elemente beruehren: Umschaltung auf das Burger-Menue. */
@media (max-width: 1100px) {
  .nav__links, .nav__actions { display: none; }
  .nav.is-scrolled .nav__inner { max-width: none; margin: 0 12px; }
  .nav__burger { display: block; }
}
/* Solange das Burger-Menue aktiv ist, bleibt die Kapitelanzeige aus. */
@media (max-width: 1100px) {
  .nav.has-section .nav__section { max-width: 0; opacity: 0; padding-left: 0; border-left-color: transparent; }
}
/* Etwas engere Abstaende, solange die Leiste noch alles zeigen muss. */
@media (max-width: 1320px) {
  .nav__inner { gap: 14px; }
  .nav__link { padding: 8px 12px; }
}
@media (max-width: 900px) {
  .videostage__flow { display: none; }   /* auf schmalen Screens verdeckt das Video die Bahnen ohnehin */
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .split, .founder { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .founder__media { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .nav.has-section .nav__section { max-width: 0; opacity: 0; padding-left: 0; border-left-color: transparent; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .founder__proof { grid-template-columns: 1fr; }
  .fields-2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 44px 1fr; gap: 18px; }
  .step__badge { width: 44px; height: 44px; font-size: 13px; }
  .process__rail { left: 21px; }
  .hero__cta .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
}

/* Niedrige Displays (z. B. iPhone SE im Hochformat): Menuepunkte kompakter,
   damit Navigation und Handlungsaufforderungen ohne Scrollen sichtbar sind. */
@media (max-height: 720px) {
  .mobile-menu a.mobile-menu__link { font-size: 22px; padding: 11px 0; }
  .mobile-menu__cta { margin-top: 20px; }
}

/* Auf allen Touch-Breiten (Tablet und Handy) bekommen Textlinks eine
   Tippflaeche von rund 44px, wie es die Zugaenglichkeitsrichtlinien vorsehen. */
@media (max-width: 900px) {
  .link, .case__link { padding: 10px 0; }
  .footer__list { gap: 2px; }
  .footer__list a { padding: 9px 0; }
  .footer__bottom { gap: 10px 20px; }
  .blogfilter__btn { min-height: 42px; }
}

/* ---------- Feinschliff fuer Handy-Displays ----------
   Alles hier greift erst unterhalb von 640px und laesst die Desktop-Ansicht
   unberuehrt. */
@media (max-width: 640px) {

  /* Buttons duerfen umbrechen. Mit "white-space: nowrap" und fester Hoehe
     sprengte eine lange Beschriftung wie "Werkstraße für Ihre Zielgruppe
     aufsetzen" die Karte, in der sie steht, und schob die ganze Sektion aus
     dem sichtbaren Bereich. */
  .btn {
    height: auto;
    min-height: 48px;
    padding: 13px 16px;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: 1.25;
  }
  .btn--sm { height: auto; min-height: 42px; padding: 10px 16px; }
  .btn--lg { height: auto; min-height: 54px; padding: 15px 16px; font-size: 15.5px; }

  /* Die grossen Handlungsaufforderungen nehmen die volle Breite ein und stehen
     untereinander, statt sich nebeneinander zu quetschen. */
  .cta-banner__actions { flex-direction: column; align-items: stretch; }
  .cta-banner__actions .btn,
  .werk .btn,
  .vorteile__aside .btn,
  .section-head .btn { width: 100%; }

  /* Raster-Spalten duerfen unter ihre inhaltliche Mindestbreite schrumpfen.
     Ohne das erzwingt ein einzelnes breites Kind (Button, SVG-Diagramm) eine
     Spalte, die breiter ist als der Bildschirm. */
  .grid > *, .werk > *, .split > *, .founder > *, .vorteile > *,
  .cases > *, .caselayout > *, .metrics > *, .footer__top > * { min-width: 0; }
  .werk__viz svg { max-width: 100%; }

  /* Haken-Aufzaehlungen: zentrierter Block mit linksbuendigen Zeilen. Zentriert
     umbrechende Einzelzeilen wirken auf schmalen Displays unruhig. */
  .hero__bullets, .cta-banner__micro {
    flex-direction: column;
    align-items: flex-start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 11px;
  }
  .hero__bullets { margin-top: 30px; }

  /* Team: zwei Karten nebeneinander, sonst fuellt jedes Portrait fast einen
     ganzen Bildschirm. Die Karriere-Kachel bleibt ueber die volle Breite. */

  /* Ueberschriften der Prozessschritte haben keine eigene Zeilenhoehe und
     erben deshalb die 1,55 des Fliesstextes. Auf dem Handy brechen sie um und
     stehen dadurch auffaellig weit auseinander. */
  .step__body h3 { line-height: 1.18; }
  .step__body { padding-top: 4px; }

  /* Fallstudien-Kennzahlen etwas kompakter, damit die drei Spalten passen. */
  .case__stats { gap: 10px; }
  .case__stats div b { font-size: 21px; }
  .case__body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track, .rmarquee__track { animation: none !important; }
  .metric__dot { display: none; }
  .marquee, .rmarquee { overflow-x: auto; }
}

/* ==========================================================================
   Alle Vorteile: Sticky-Split
   Links bleibt die Illustration stehen und wechselt beim Scrollen mit, rechts
   laufen die neun Vergleiche durch. Der aktive Eintrag wird in main.js
   gesetzt (.is-active auf Bild, Punkt und Listeneintrag). Die Illustrationen
   animieren erst, wenn ihr Bild aktiv wird.
   ========================================================================== */
.advantages { background: linear-gradient(180deg, var(--cream) 0%, #fff 340px); }

.splitscroll {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}

/* ---- Buehne (bleibt stehen) ---- */
.ss__stage {
  position: sticky;
  top: calc(var(--nav-h) + clamp(24px, 6vh, 72px));
  display: grid;
  gap: 26px;
  justify-items: start;
}
.ss__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 200 / 164;
  border-radius: 24px;
  background: linear-gradient(160deg, #fff, var(--cream));
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.ss__viz {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.ss__viz.is-active { opacity: 1; transform: none; }
.ss__viz .cvz { width: 100%; height: 100%; }

.ss__meta { display: flex; align-items: baseline; gap: 14px; }
.ss__counter { display: inline-flex; align-items: baseline; gap: 5px; }
.ss__counter b {
  font-family: var(--font-accent);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
}
.ss__counter i { font-style: normal; font-size: 14px; color: var(--stone); }
.ss__now {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.ss__nav { display: grid; gap: 4px; width: 100%; }
.ss__dot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--stone);
  font-size: 13.5px;
  letter-spacing: -0.01em;
  transition: color var(--t-micro) var(--ease);
}
.ss__dot i {
  width: 22px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--hairline-2);
  transition: width 0.45s var(--ease-out), background 0.35s var(--ease);
}
.ss__dot:hover { color: var(--ink-soft); }
.ss__dot.is-active { color: var(--ink); font-weight: 550; }
.ss__dot.is-active i { width: 40px; background: var(--brand); }

/* ---- Liste (scrollt) ---- */
.ss__items { display: grid; }
.ss__item {
  padding: clamp(40px, 5vw, 68px) 0;
  border-top: 1px solid var(--hairline);
}
.ss__item:first-child { border-top: 0; padding-top: 0; }
/* Abgeblendet wird der Inhalt, nicht der Eintrag selbst: sonst ueberschreibt
   die Reveal-Animation (.reveal.is-visible) die Deckkraft wieder. */
.ss__head, .ss__pair { opacity: 0.4; transition: opacity 0.55s var(--ease); }
.ss__item.is-active .ss__head, .ss__item.is-active .ss__pair { opacity: 1; }

.ss__head { display: flex; align-items: baseline; gap: 14px; }
.ss__num {
  font-family: var(--font-accent);
  font-size: 20px;
  color: var(--stone);
  letter-spacing: -0.02em;
}
.ss__cat {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ss__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.ss__side { padding: 22px 22px 24px; border-radius: 14px; }
.ss__side--bad { background: var(--cream); border: 1px solid var(--hairline); }
.ss__side--good {
  background: linear-gradient(180deg, #fff, var(--brand-50));
  border: 1px solid rgba(4,183,246,0.3);
  box-shadow: rgba(4,183,246,0.10) 0 18px 40px -22px;
}
.ss__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ss__ico { width: 19px; height: 19px; flex: none; }
.ss__mark--no { color: #c0685c; }
.ss__mark--yes { color: var(--brand-600); }
.ss__side p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; }
.ss__side--bad p { color: var(--ash); }
.ss__side--good p { color: var(--ink-soft); }

/* ---- Illustrationen ---- */
.cvz { display: block; width: 100%; height: auto; overflow: visible; }
.cvz .ink        { fill: var(--ink); }
.cvz .ink-soft   { fill: #4b4a49; }
.cvz .brand      { fill: var(--brand); }
.cvz .fill-pearl { fill: #dcdbd8; }
.cvz__blob { fill: #e9e7e2; }
.cvz > *, .cvz g { transform-box: fill-box; transform-origin: center; }

.cvz__wire { fill: none; stroke: rgba(17,17,17,0.16); stroke-width: 4; stroke-linecap: round; }
.cvz__run {
  fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 12 96; stroke-dashoffset: 108;
}
.cvz__draw { stroke-dasharray: 120; stroke-dashoffset: 120; }
.cvz__ring { opacity: 0; }

.ss__viz.is-active .cvz__pop   { animation: cvzPop 0.7s 0.15s var(--ease-out) backwards; }
.ss__viz.is-active .cvz__draw  { animation: cvzDraw 0.9s 0.25s var(--ease-out) forwards; }
.ss__viz.is-active .cvz__grow  { animation: cvzGrow 0.7s var(--ease-out) backwards; transform-origin: center bottom; }
.ss__viz.is-active .cvz__grow--2 { animation-delay: 0.1s; }
.ss__viz.is-active .cvz__grow--3 { animation-delay: 0.2s; }
.ss__viz.is-active .cvz__grow--4 { animation-delay: 0.3s; }
.ss__viz.is-active .cvz__run   { animation: cvzRun 2.6s linear infinite; }
.ss__viz.is-active .cvz__run--2 { animation-delay: 0.4s; }
.ss__viz.is-active .cvz__run--3 { animation-delay: 0.8s; }
.ss__viz.is-active .cvz__ring  { animation: cvzRing 2.6s 1s var(--ease-out) infinite; }
.ss__viz.is-active .cvz__float { animation: cvzFloat 3.4s 0.3s var(--ease) infinite; }
.ss__viz.is-active .cvz__pulse { animation: cvzPulse 2.8s 0.5s var(--ease) infinite; }
.ss__viz.is-active .cvz__knob  { animation: cvzKnob 3.6s 0.5s var(--ease-out) infinite; transform-box: view-box; }
.ss__viz.is-active .cvz__slide { animation: cvzSlide 2.8s 0.4s var(--ease) infinite; }

@keyframes cvzPop   { 0% { transform: scale(0); opacity: 0; } 62% { transform: scale(1.22); } }
@keyframes cvzDraw  { to { stroke-dashoffset: 0; } }
@keyframes cvzGrow  { from { transform: scaleY(0.08); opacity: 0; } }
@keyframes cvzRun   { to { stroke-dashoffset: 0; } }
@keyframes cvzRing  { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cvzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cvzPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.28); opacity: 0.75; } }
@keyframes cvzKnob  { 0%, 14% { transform: translateX(0); } 40%, 76% { transform: translateX(82px); } 100% { transform: translateX(0); } }
@keyframes cvzSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }

.advantages__cta {
  margin-top: clamp(36px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  text-align: center;
}
.advantages__cta-note { font-size: 14px; color: var(--ash); }

@media (max-width: 1100px) {
  .splitscroll { grid-template-columns: 320px 1fr; gap: 40px; }
  .ss__pair { grid-template-columns: 1fr; gap: 14px; }
}

/* Handy und kleines Tablet: die Buehne wird zur schmalen Leiste, die oben
   stehen bleibt, waehrend die Vergleiche darunter durchlaufen. */
@media (max-width: 860px) {
  .splitscroll { grid-template-columns: 1fr; gap: 0; }
  .ss__stage {
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 16px;
    top: var(--nav-h);
    z-index: 3;
    padding: 12px 0;
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--hairline);
  }
  .ss__frame { width: 92px; border-radius: 18px; }
  .ss__meta { flex-direction: column; gap: 2px; align-items: flex-start; }
  .ss__counter b { font-size: 26px; }
  .ss__nav { display: none; }
  .ss__items { margin-top: 8px; }
  .ss__item { padding: 32px 0; }
  .ss__head, .ss__pair { opacity: 1; }
  .ss__side { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss__viz, .ss__item, .ss__dot i { transition: none !important; }
  .ss__viz .cvz * { animation: none !important; }
  .cvz__draw, .cvz__run { stroke-dashoffset: 0; }
  .cvz__ring { opacity: 0; }
}

/* ==========================================================================
   Blog: Kartenraster der Uebersicht und Layout der Einzelbeitraege
   ========================================================================== */
.bloggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bcard { display: flex; }
.bcard[hidden] { display: none; }
.bcard__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease), box-shadow 0.45s var(--ease),
              transform 0.5s var(--ease-out);
}
.bcard__link:hover { border-color: rgba(4,183,246,0.32); box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.bcard__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark);
  border-bottom: 1px solid var(--hairline);
}
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.bcard__link:hover .bcard__media img { transform: scale(1.04); }
.bcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.bcard__body .post__tags { margin-bottom: 16px; }
.bcard__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.028em;
}
.bcard__teaser {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ash);
}
.bcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: auto;
  padding-top: 22px;
}
.bcard__meta { font-size: 13px; color: var(--stone); }
.bcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--brand-700);
}
.bcard__more .ico { width: 17px; height: 17px; transition: transform var(--t-micro) var(--ease); }
.bcard__link:hover .bcard__more .ico { transform: translateX(4px); }

/* Aufmacher und Randspalte der Einzelseite */
.articlehero { max-width: 900px; margin: 0 auto; }
.articlehero img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xl);
}
.link--back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ash); }
.link--back:hover { color: var(--ink); }
.post__figures--stack { display: grid; gap: 10px; margin-top: 16px; }
.post__figures--stack .post__figure { width: 100%; }
.related { display: grid; gap: 14px; margin-top: 16px; }
.related a { display: block; font-size: 15px; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink-soft); }
.related a span {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.related a:hover { color: var(--brand-700); }

@media (max-width: 1040px) {
  .bloggrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .bloggrid { grid-template-columns: 1fr; gap: 18px; }
  .bcard__body { padding: 20px 20px 18px; }
  .bcard__title { font-size: 19px; }
}

/* ---------- Cookie-Consent ---------- */
/* Schmale Leiste am unteren Rand. Sie liegt fix ueber der Seite, deshalb reserviert
   consent.js unten genau ihre Hoehe als Polster: so bleibt jeder Text lesbar. */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  background: #fff;
  border-top: 1px solid var(--hairline-2);
  box-shadow: rgba(17, 17, 17, 0.10) 0 -12px 32px -12px;
}
.cc.is-open { display: block; }
/* hidden muss die display-Regeln der Bausteine schlagen */
.cc [hidden] { display: none !important; }
.cc__box {
  max-width: var(--page);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 32px;
  animation: cc-in 0.45s var(--ease-out) both;
}
@keyframes cc-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.cc__copy { grid-column: 1; }
.cc__side { grid-column: 2; }
.cc__opts { grid-column: 1 / -1; }
.cc__title { font-size: 15px; font-weight: 550; letter-spacing: -0.02em; }
.cc__text { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--ash); max-width: 78ch; }
.cc__text a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.cc__text a:hover { color: var(--brand); }
.cc__opts {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cc__opt {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--cream);
  cursor: pointer;
}
.cc__opt input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand); }
.cc__opt input:disabled { cursor: default; }
.cc__opt span { font-size: 12.5px; line-height: 1.5; color: var(--ash); }
.cc__opt strong { display: block; font-size: 13px; font-weight: 550; color: var(--ink); margin-bottom: 2px; }
.cc__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc__actions .btn { white-space: nowrap; }

.footer__cc {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.75;
}
.footer__cc:hover { opacity: 1; }

@media (max-width: 900px) {
  .cc__box { grid-template-columns: minmax(0, 1fr); }
  .cc__side { grid-column: 1; }
  .cc__opts { grid-template-columns: minmax(0, 1fr); }
  .cc__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 520px) {
  .cc__box { padding: 14px 16px; gap: 12px; }
  .cc__text { font-size: 12.5px; }
  .cc__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc__box { animation: none; }
}