/* ===========================================================
   BNO-Agency — Styles
   =========================================================== */

/* ---------- Base ---------- */
html {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-grotesk);
  font-size: var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  /* Header ist fixed — Platz oben freihalten */
  padding-top: var(--header-height);
}

/* ---------- Dark-theme Ambient-Hintergrund ----------
   Gold Zenith: schwarzer Grund mit warmen Zenit-Gradienten,
   darüber ein animiertes neuronales Netzwerk (Canvas, bg-neural.js). */
[data-theme="dark"] body {
  background: transparent;
}
/* Hellmodus: Body ebenfalls durchscheinend, damit der Neural-Canvas
   (Hintergrund liegt auf .bg-neural selbst) sichtbar ist */
:root:not([data-theme="dark"]) body {
  background: transparent;
}

.bg-neural {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
}

[data-theme="dark"] .bg-neural {
  background: #000000;
  background-image:
    radial-gradient(ellipse 85% 50% at 50% -5%, rgba(194, 174, 125, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 50% 0%, rgba(220, 200, 150, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 15% 65%, rgba(43, 30, 22, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 65%, rgba(43, 30, 22, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 110%, rgba(20, 12, 4, 0.95) 0%, transparent 50%);
}
.bg-neural canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Sektionen lassen den Ambient-Hintergrund durchscheinen */
[data-theme="dark"] .section,
[data-theme="dark"] .section:nth-child(even),
[data-theme="dark"] .section-company,
[data-theme="dark"] .section-cases,
[data-theme="dark"] .section-analysis,
[data-theme="dark"] .site-footer {
  background: transparent;
}

/* Helles Theme: Sektionen durchscheinend; dezentes Karo-Raster in #2b1e16
   liegt auf der fixen Hintergrund-Ebene — dadurch auch hinter dem Header sichtbar */
:root:not([data-theme="dark"]) .section,
:root:not([data-theme="dark"]) .site-footer {
  background-color: transparent;
}
:root:not([data-theme="dark"]) .bg-neural {
  background-image: none;
}
:root:not([data-theme="dark"]) .section-company,
:root:not([data-theme="dark"]) .section-cases,
:root:not([data-theme="dark"]) .section-analysis {
  background-color: transparent;
}

h1, h2, h3, h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  background: var(--accent);
  color: var(--color-brown);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus-visible { top: var(--space-4); }

/* Goldener Glow für alle goldenen Schriftzüge */
.eyebrow,
.hero-claim__gold,
.hero-claim__dot,
.stat__unit,
.section__title em,
.story__title em,
.exp__title em,
.expect__title em,
.cases__title em,
.story__final,
.case-card__stat,
.case-tile__stat,
.exp-stat__num,
.uc-stat__value,
.tm-stars,
.cases__badge,
.exp__badge,
.tm-badge,
.hero-claim__swap,
.uc__title em {
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}

/* Nur für Screenreader — visuell entfernt, im Accessibility-Tree erhalten */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Section primitives ---------- */
.section {
  background: var(--bg);
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-height) + 1rem);
  position: relative;
}

.section:nth-child(even) { background: var(--bg-elevated); }

/* explicit overrides for theme-driven alternation */
.section-company,
.section-cases,
.section-analysis { background: var(--bg-elevated); }

.section-hero,
.section-offers,
.section-testimonial,
.section-contact { background: var(--bg); }

.section__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: 48rem;
}

.section__title {
  font-size: var(--font-h2);
}

.eyebrow {
  font-family: var(--font-grotesk);
  font-size: var(--font-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* Section divider — Voltagent-style dashed rhythm cue */
.section + .section { border-top: 1px dashed var(--border-dashed); }
.section-hero + .section { border-top: 0; }
.section-cases + .section { border-top: 0; }
.section-offers { border-top: 0 !important; }
.section-offers { padding-block-end: 0; }
.section-roi { border-top: 0 !important; }
.section-testimonial { border-top: 0 !important; }
.section-team { border-top: 0 !important; }
.section-steps { border-top: 0 !important; }
.section-compliance { border-top: 0 !important; }
.section-convince { border-top: 0 !important; }
.section-integrations { border-top: 0 !important; }
.section-founders { border-top: 0 !important; }
.section-faq { border-top: 0 !important; }
.section-contact { border-top: 0 !important; }
.convince__title { font-family: Poppins, sans-serif !important; font-size: clamp(2rem, 3.1vw, 2.8rem); }
.convince__title em { font-weight: 400 !important; }
.compliance__title em,
.founders__title em,
.integrations__title em { font-weight: 400; }

.compliance-card__chip {
  background: linear-gradient(160deg, rgba(194, 174, 125, 0.22), rgba(194, 174, 125, 0.08)) !important;
  border-color: rgba(194, 174, 125, 0.55) !important;
  box-shadow: 0 0 26px rgba(194, 174, 125, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.08em;
}
.section-steps .section__header--center { max-width: 88rem; margin-bottom: calc(var(--space-7) + 5rem); }
.section-steps .section__title em { font-weight: 400; }
.section-exp + .section { border-top: 0; }
.section-story + .section { border-top: 0; }

/* ---------- Brand wordmark / logo ---------- */
.brand {
  font-family: var(--font-grotesk);
  font-weight: 600;
  letter-spacing: 0.16em;
  font-size: 0.875rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.brand__logo {
  display: block;
  height: 2.25rem;
  width: auto;
}
.brand__dot {
  color: var(--accent);
  padding-inline: 0.15em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  max-width: 100%;
  font-family: var(--font-grotesk);
  font-size: var(--font-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  position: relative;
  background: linear-gradient(180deg, #faa53d 0%, #f68b1f 55%, #ef7c10 100%);
  color: #ffffff;
  border-color: rgba(200, 105, 10, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(246, 139, 31, 0.25);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #fbb257 0%, #f79a37 55%, #f28a20 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 30px rgba(246, 139, 31, 0.4);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(160, 80, 5, 0.35), 0 4px 12px rgba(246, 139, 31, 0.25);
}

.btn--outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn--outline:hover {
  background: var(--accent);
  color: var(--color-brown);
  transform: translateY(-1px);
}

.btn--lg {
  padding: 1.05rem 3.5rem;
  font-weight: 800;
  font-size: 1rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.875rem 0.4rem;
  position: relative;
  transition: color var(--transition-fast), gap var(--transition-fast);
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.55rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.link-arrow svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-fast);
}
/* Hover nur fuer echte Zeigergeraete. Auf Touch bleibt :hover nach dem
   Antippen haengen: der Link blieb gold und der Unterstrich eingefahren,
   bis irgendwo anders getippt wurde. Maus und Trackpad verhalten sich
   unveraendert. */
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover {
    color: var(--accent);
    gap: var(--space-3);
  }
  .link-arrow:hover::after { transform: scaleX(1); }
  .link-arrow:hover svg { transform: translateX(3px); }
}

/* ===========================================================
   Header
   =========================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
/* Beim Scrollen: bleibt oben fixiert; dezenter Blur für Lesbarkeit,
   sonst komplett transparent */
.site-header.is-scrolled {
  background: rgba(8, 7, 5, 0.45);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
}
[data-theme="light"] .site-header.is-scrolled {
  background: rgba(244, 241, 236, 0.6);
}

.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  position: relative;
}

.site-nav { display: none; }
@media (min-width: 64em) {
  .site-nav {
    display: block;
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 42vw;
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  height: 3rem;
  gap: clamp(0.9rem, 1.5vw, 2rem);
  flex-wrap: nowrap;
}

.site-nav__link {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding-block: 0.25rem;
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right var(--transition);
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--text);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  right: 0;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__cta {
  display: none;
}
@media (min-width: 48em) {
  .site-header__cta {
    display: inline-flex;
    background: rgba(194, 174, 125, 0.06);
    color: var(--accent);
    border: 1px solid rgba(194, 174, 125, 0.55);
    box-shadow: none;
    padding: 0.62rem 1.4rem;
    font-weight: 500;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .site-header__cta:hover {
    background: linear-gradient(177deg, #e0cea0 0%, var(--accent) 52%, #b29b67 100%);
    color: var(--color-brown);
    border-color: rgba(120, 96, 54, 0.45);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px rgba(194, 174, 125, 0.3);
  }
}

/* Header-CTA im hellen Design: Braun statt Gold */
[data-theme="light"] .site-header__cta {
  color: var(--color-brown, #5a4426);
  border-color: rgba(90, 68, 38, 0.55);
}

/* Theme toggle */
.theme-toggle {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle__icon {
  width: 1.4rem;
  height: 1.4rem;
  position: absolute;
  transition: opacity var(--transition), transform var(--transition);
}
[data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0); }
[data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg); }
[data-theme="light"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg); }
[data-theme="light"] .theme-toggle__icon--moon { opacity: 1; transform: rotate(0); }

/* Burger */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
@media (min-width: 64em) { .nav-burger { display: none; } }

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  /* Dropdown statt Vollbild: nur so hoch wie der Inhalt, darunter
     bleibt die Seite sichtbar. max-height fängt kleine Viewports ab. */
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: auto;
  height: auto;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  background: var(--bg);
  z-index: 99;
  padding: var(--space-6) var(--gutter);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  /* Button folgt direkt auf den letzten Menuepunkt statt am unteren
     Rand zu kleben — space-between wuerde ihn nach unten druecken. */
  justify-content: flex-start;
  gap: var(--space-6);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-nav__list a {
  font-family: var(--font-montserrat);
  font-weight: 600;
  /* Montserrat läuft deutlich breiter als die Serifenschrift zuvor,
     daher etwas kleiner gesetzt — sonst brechen lange Einträge um. */
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  letter-spacing: -0.01em;
  color: var(--text);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  display: block;
  transition: color var(--transition-fast);
}
.mobile-nav__list a:hover { color: var(--accent); }
.mobile-nav__cta { align-self: stretch; }

/* ===========================================================
   Hero
   =========================================================== */
.section-hero {
  /* oben kompakt — Inhalt rückt nah an die Menüleiste */
  padding-block: 0 clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  position: relative;
}
.section-hero__inner {
  display: grid;
  gap: var(--space-8);
  position: relative;
  /* beide Spalten (Claim + Terminal) starten auf gleicher Höhe */
  align-items: start;
}
.section-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.section-hero__title {
  font-family: "Poppins", sans-serif;
  font-size: var(--font-display);
  max-width: 22ch;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* Satzschluss-Punkte — kleiner; erste beide gold, letzter weiß */
.hero-claim__dot {
  font-size: 0.7em;
  color: var(--accent);
}
.hero-claim__dot--gold {
  color: inherit;
}

/* Jede Claim-Zeile fest umbrochen — Zeilenanzahl bleibt bei jedem
   Wortwechsel konstant, kein Reflow während des Tippens. */
.hero-claim__line {
  display: block;
  white-space: nowrap;
}

/* Rotierende Claim-Wörter — Libre Baskerville Italic, Gold-Akzent.
   Werden per JS im Typewriter-Effekt ausgetauscht. */
.hero-claim__swap {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--accent);
  /* verhindert Umbruch des Wortes mitten im Tippen */
  white-space: nowrap;
}

.section-hero__subline {
  font-family: "Montserrat", var(--font-body, sans-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.6vw + 1.1rem, 1.45rem);
  color: var(--text);
  max-width: 52ch;
  line-height: 1.55;
}
[data-theme="light"] .section-hero__subline { color: rgba(43, 30, 22, 0.78) !important; }

.section-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: calc(-1 * var(--space-2) - 0.5 * var(--space-5));
}
@media (min-width: 40em) {
  .section-hero__ctas { flex-wrap: nowrap; }
}
/* Ab Tablet mehr Luft zwischen Subline und CTA-Reihe. Die Basis zieht die
   Reihe mit einem negativen Rand nach oben, der den row-gap des Hero-Rasters
   (24px) fast vollstaendig aufhob — es blieben 4px. Mobil bleibt der enge
   Stand erhalten, dort steht der Button ohnehin auf voller Breite. */
@media (min-width: 48em) {
  .section-hero__ctas { margin-top: var(--space-6); }
  /* Hero-CTA kompakter: der Editor setzt Schriftgroesse, Mindesthoehe,
     Polsterung und eine feste Breite als Inline-Style — daher !important und
     der [style]-Zusatz. Breite auf auto, damit der Knopf den Text umschliesst
     statt auf 283px aufgezogen zu werden. Mobil bleibt alles wie eingestellt. */
  /* Masse vom Referenz-Button (andreasbaulig.de) uebernommen: 336x60px bei
     15px Schrift und 20px Zeilenhoehe, zweizeilig. Die Hoehe ergibt sich aus
     2x20px Text + 2x9px Polsterung + 2x1px Rahmen = 60px. */
  .section-hero__ctas .btn[style] {
    font-size: 15px !important;
    line-height: 20px !important;
    padding: 9px 24px !important;
    /* 288 statt der 336px der Referenz: deren Knopf traegt 72px seitliche
       Polsterung, unserer nur 24px — bei gleicher Breite stuende der Text
       dadurch zu verloren. Die breiteste Textzeile misst 169px, mit
       Polsterung und Rahmen bleiben rund 70px Luft. */
    width: 288px !important;
    max-width: 100% !important;
    min-height: 0 !important;
    /* Ohne das schrumpft der Knopf im Flex-Container unter die 336px. */
    flex: 0 0 auto !important;
  }
  /* Der Sekundaerlink stand auf 19.2px und war damit groesser als der
     Haupt-Button. Auf dessen Groesse gezogen — das stellt die Gewichtung
     richtig und schafft zugleich den Platz, den der Button fuer seine
     336px braucht (Zeile ist nur 544px breit). */
  .section-hero__ctas .link-arrow[style] {
    font-size: 15px !important;
    /* Der Editor setzt zusaetzlich margin-left: 1.5rem, das sich zum gap der
       Zeile addiert. Zusammen sprengte das die 544px und schob den Link
       unter den Button. */
    margin-left: 0 !important;
  }
  /* Umbruch erlauben: wird die Zeile doch einmal zu eng, rutscht der Link
     nach unten, statt den Button zusammenzudruecken. */
  .section-hero__ctas { flex-wrap: wrap; }

  /* Alle orangen CTAs im Inhalt auf dieselben Masse wie der Hero-Button.
     Sie lagen zwischen 352 und 430px Breite bei 17.6 bis 19.2px Schrift.
     Bewusst nur innerhalb von main: der Button im Header und der im mobilen
     Menu haben eine andere Rolle und Groesse und bleiben unangetastet.
     !important ist noetig, weil der Editor Groesse, Mindesthoehe und
     Polsterung als Inline-Style setzt — eine Regel mit !important schlaegt
     Inline-Angaben ohne !important. */
  main .btn.btn--primary {
    /* Eine Quelle fuer die Breite: .story__cta rechnet damit seine
       Zentrierung unter dem Bild aus. */
    --cta-w: 288px;
    font-size: 15px !important;
    line-height: 20px !important;
    padding: 9px 24px !important;
    width: var(--cta-w) !important;
    max-width: 100% !important;
    /* min-width zuruecksetzen: .convince__cta bringt min-width:min(416px,100%)
       mit, und min-width schlaegt width — der Knopf blieb sonst 416px breit. */
    min-width: 0 !important;
    /* 60px statt 0, damit einzeilige CTAs (z. B. im ROI-Rechner) genauso hoch
       sind wie die zweizeiligen. Fuer diese aendert sich nichts: 2x20px Text
       + 2x9px Polsterung + 2x1px Rahmen ergeben exakt 60px. */
    min-height: 60px !important;
  }
}
.section-hero__ctas .btn { max-width: 100%; }
.section-hero__ctas .link-arrow { white-space: nowrap; flex-shrink: 0; }

.section-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  max-width: 44rem;
  width: 100%;
  min-width: 0;
}
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: normal; /* umbrechen statt aus der Spalte laufen */
  overflow-wrap: anywhere;
}
.stat__value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-top: auto;
}
.stat__unit { color: var(--accent); margin-left: 0.1em; }

@media (min-width: 64em) {
  .section-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
}

/* ---------- Terminal mockup ---------- */
.section-hero__mockup { width: 100%; position: relative; min-width: 0; }
.section-hero__stage { position: relative; }

/* ---------- Hero-Foto: Gründerteam-Aufnahme rechts, links bleibt der
   dunkle Neural-Hintergrund; die Kante dazwischen wird weich überblendet ---------- */
/* Mobil: Foto fließt unter dem Text, volle Breite (innerhalb der Seitenränder), Oberkante weich */
.section-hero__mockup--photo {
  margin-top: var(--space-6);
  padding-inline: var(--gutter);
}
.section-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
}

/* Ab Tablet: Foto füllt die rechte Hälfte über die volle Höhe; die linke
   Bildkante läuft per Verlauf weich in den dunklen Hintergrund aus */
@media (min-width: 60em) {
  .section-hero__stage {
    min-height: clamp(32rem, 82vh, 46rem);
    display: flex;
    align-items: center;
  }
  .section-hero__inner { width: 100%; }
  .section-hero__content { position: relative; z-index: 2; max-width: min(34rem, 48vw); }
  .section-hero__mockup--photo {
    position: absolute;
    top: clamp(2rem, 6vw, 5rem);
    /* rechte Bildkante mit Abstand zum Rand — wie im Beispiel */
    right: max(calc(var(--gutter) + clamp(3rem, 8vw, 8rem) - 30px), calc((100% - var(--container)) / 2 + clamp(3rem, 8vw, 8rem) - 30px));
    width: min(clamp(24rem, 46vw, 52rem), calc(100vw - 48vw - 3 * var(--gutter) - clamp(3rem, 8vw, 8rem) - 2rem));
    margin: 0;
    padding-inline: 0;
    pointer-events: none;
    z-index: 1;
  }
  .section-hero__photo {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: cover;
    margin: 0;
    border-radius: 18px;
    box-shadow: 0 0 45px 12px rgba(0, 0, 0, 0.6);
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.section-hero__demo { position: relative; }

/* ---------- Verschobene Hero-Demo im Angebote-Bereich ---------- */
.offers-demo {
  max-width: 34rem;
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
}
.offers-demo__eyebrow {
  text-align: center;
  margin-bottom: var(--space-4);
}

/* ---------- Trust-Logobar (durchlaufende Schleife) ---------- */
.logo-bar {
  width: 100%;
  max-width: var(--container);
  margin: calc(clamp(3rem, 6.5vh, 5rem) + clamp(2.2rem, 4.4vh, 4.1rem)) auto 0;
  padding-inline: var(--gutter);
}
.logo-bar__head {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--font-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: calc(var(--space-5) + clamp(3.5rem, 7vh, 6.5rem) - clamp(2.2rem, 4.4vh, 4.1rem));
}
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: max-content;
  animation: logo-scroll 95s linear infinite;
}
.logo-bar:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.logo-chip {
  flex: 0 0 auto;
  height: 3.875rem;
  min-width: 7.25rem;
  padding: 0 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-kashmire);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .logo-chip {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.08);
}
.logo-chip img {
  height: 1.625rem;
  width: auto;
  max-width: 9.375rem;
  object-fit: contain;
  display: block;
}
.logo-chip__icon {
  height: 42px;
  border-radius: 8px;
}
.logo-chip--ts img { height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; transform: translateX(0); }
}

/* ===========================================================
   Use-Case Prozess-Flow
   =========================================================== */
.section__lead {
  margin-top: var(--space-4);
  max-width: 46rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.1875rem);
  line-height: 1.6;
}

/* ===========================================================
   Use Case — Video-Stil (zwei Spalten)
   =========================================================== */
.uc-pinned { padding: 0; }
@media (min-width: 60em) {
  .uc-pinned { height: 230vh; position: relative; }
  .uc-pin {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: var(--space-7);
  }
}
.uc { display: grid; gap: var(--space-7); }
.uc--bpmn { display: block; }
.uc__intro--center { text-align: center; max-width: 46rem; margin: 0 auto var(--space-6); }
.bpmn {
  border: 1px solid rgba(194,174,125,0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22,18,13,0.96), rgba(10,8,6,0.98));
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.bpmn__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(244,241,236,0.07);
}
.bpmn__icon {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 8px;
  color: #241a0c;
  background: radial-gradient(circle at 50% 35%, #fbeec2, var(--accent) 70%);
  box-shadow: 0 0 18px rgba(194,174,125,0.4);
}
.bpmn__icon svg { width: 1.2rem; height: 1.2rem; }
.bpmn__titles { flex: 1; min-width: 0; }
.bpmn__title { font-family: var(--font-grotesk); font-size: 1rem; font-weight: 700; color: var(--text); }
.bpmn__sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-subtle); margin-top: 0.1rem; }
.bpmn__badge {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--accent); padding: 0.3rem 0.6rem;
  border: 1px solid rgba(194,174,125,0.35); border-radius: var(--radius-pill);
}
.bpmn__toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid rgba(244,241,236,0.07);
}
.bpmn__btn {
  font-family: var(--font-grotesk); font-size: 0.72rem; font-weight: 500;
  color: var(--text-muted);
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(244,241,236,0.1);
  border-radius: 7px;
  background: rgba(244,241,236,0.02);
}
.bpmn__btn--play { color: #241a0c; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.bpmn__btn--on { color: var(--accent); border-color: rgba(194,174,125,0.4); }
.bpmn__sep { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-subtle); margin-left: 0.4rem; }
.bpmn__svg { display: block; width: 100%; height: auto; padding: 0.8rem 1rem; }
.bpmn__status {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid rgba(244,241,236,0.07);
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted);
}
.bpmn__status i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(194,174,125,0.5);
  animation: uc-live 2s ease-out infinite;
}
/* BPMN nodes */
.bpmn-node .nd-box { fill: rgba(18,14,10,0.92); stroke: rgba(244,241,236,0.14); stroke-width: 1.5; transition: stroke 0.5s var(--ease), fill 0.5s var(--ease), filter 0.5s var(--ease); }
.bpmn-node .nd-t { fill: var(--text-subtle); transition: fill 0.5s var(--ease); }
.bpmn-node .nd-s { fill: rgba(244,241,236,0.32); }
.bpmn-node .nd-cap { fill: rgba(244,241,236,0.4); }
.bpmn-node .nd-ring { stroke: rgba(244,174,125,0.4); transition: stroke 0.5s var(--ease), filter 0.5s var(--ease); }
.bpmn-node .nd-fill { fill: rgba(244,174,125,0.4); transition: fill 0.5s var(--ease); }
/* lit (happy-path) */
.bpmn-node.is-lit .nd-box { stroke: var(--accent); fill: rgba(40,32,18,0.96); filter: drop-shadow(0 0 7px rgba(194,174,125,0.4)); }
.bpmn-node.is-lit .nd-t { fill: #fff; }
.bpmn-node.is-lit .nd-ring { stroke: var(--accent); filter: drop-shadow(0 0 7px rgba(194,174,125,0.5)); }
.bpmn-node.is-lit .nd-fill { fill: var(--accent); }
.bpmn-node.seg-flare .nd-box,
.bpmn-node.seg-flare .nd-ring { animation: bpmn-flare 0.7s var(--ease); }
@keyframes bpmn-flare {
  0% { filter: drop-shadow(0 0 2px transparent); }
  40% { filter: drop-shadow(0 0 16px rgba(194,174,125,0.9)); }
  100% { filter: drop-shadow(0 0 7px rgba(194,174,125,0.4)); }
}
/* green "ok" nodes when lit */
.bpmn-node--ok.is-lit .nd-box { stroke: #5fae6e; fill: rgba(28,42,30,0.95); filter: drop-shadow(0 0 7px rgba(95,174,110,0.4)); }
/* alt / wait nodes stay dimmed */
.bpmn-node--alt .nd-box { stroke: rgba(185,120,110,0.45); }
.bpmn-node--alt .nd-t { fill: rgba(185,120,110,0.7); }
.bpmn-node--alt { opacity: 0.5; }
.bpmn-node--wait .nd-box { stroke: rgba(217,167,46,0.5); }
.bpmn-node--wait .nd-t { fill: rgba(217,167,46,0.85); }
.bpmn-node--wait { opacity: 0.55; }
.bpmn-node--alt.is-lit { opacity: 1; }
.bpmn-node--alt.is-lit .nd-box { stroke: #e0563f; filter: drop-shadow(0 0 8px rgba(224,86,63,0.5)); }
.bpmn-node--alt.is-lit .nd-t { fill: #f0a99c; }
.bpmn-node--wait.is-lit { opacity: 1; }
.bpmn-node--wait.is-lit .nd-box { stroke: #d9a72e; filter: drop-shadow(0 0 8px rgba(217,167,46,0.5)); }
.bpmn-node--wait.is-lit .nd-t { fill: #f0cd72; }
.bpmn-end--alt { transition: filter 0.4s var(--ease); }
.bpmn-end--alt.is-lit { filter: drop-shadow(0 0 8px rgba(224,86,63,0.6)); }
.bpmn-end--alt.seg-flare { animation: bpmn-flare 0.6s var(--ease); }
.bpmn-link { transition: stroke 0.5s var(--ease); }
.bpmn-link.is-lit { stroke: var(--accent); }
.bpmn-link--alt.is-lit { stroke: #c9756a; }
.bpmn__btn[data-scn], .bpmn__btn[data-act] { cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.bpmn__btn[data-scn]:hover, .bpmn__btn[data-act]:hover { border-color: rgba(194,174,125,0.5); color: var(--text); }
.bpmn__status i { transition: background 0.4s var(--ease); }
.bpmn--err .bpmn__status i { background: #e0563f; }
.bpmn--ok .bpmn__status i, .bpmn--review .bpmn__status i { background: #5fae6e; }
@media (max-width: 60em) {
  .bpmn { max-width: 100%; }
  .bpmn__svg { padding: 0.4rem; }
}
@media (min-width: 60em) {
  .uc { grid-template-columns: 0.92fr 1.08fr; gap: var(--space-9); align-items: center; }
  .uc--cards { grid-template-columns: 1fr 1fr; }
  .uc--pipe { grid-template-columns: 1fr 1.1fr; align-items: center; }
}
/* Finance-AI Pipeline */
.uc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-5); }
.uc-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(194,174,125,0.3);
  border-radius: var(--radius-pill);
  background: rgba(194,174,125,0.05);
}
.uc-pipe__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin-bottom: var(--space-5);
}
.uc-pipe__line {
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(194,174,125,0.18);
  border-radius: 2px;
}
.uc-pipe__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #f4d99a);
  box-shadow: 0 0 8px rgba(228,201,132,0.6);
  transition: width 0.5s var(--ease);
}
.uc-pnode {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.uc-pnode__dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  background: rgba(16,13,9,0.95);
  border: 1px solid rgba(194,174,125,0.25);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.uc-pnode__dot svg { width: 1.3rem; height: 1.3rem; }
.uc-pnode__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  transition: color 0.4s var(--ease);
}
.uc-pnode.is-lit .uc-pnode__dot {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px rgba(228,201,132,0.3);
}
.uc-pnode.is-active .uc-pnode__dot {
  color: #241a0c;
  background: radial-gradient(circle at 50% 35%, #fbeec2, var(--accent) 70%);
  box-shadow: 0 0 26px rgba(228,201,132,0.55);
}
.uc-pnode.is-lit .uc-pnode__label { color: var(--text-muted); }
.uc-pipe__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: 0;
}
.uc-pstep {
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 0.8rem;
  background: rgba(244,241,236,0.02);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.uc-pstep::before { display: none; }
.uc-pstep .uc-step__no { font-size: 0.6rem; }
.uc-pstep .uc-step__title { font-size: 0.95rem; margin-top: 0.2rem; }
.uc-pstep .uc-step__text { max-height: none; opacity: 0.7; margin-top: 0.3rem; font-size: 0.78rem; }
.uc-pstep.is-lit { opacity: 1; }
.uc-pstep.is-active {
  border-color: rgba(228,201,132,0.6);
  box-shadow: 0 0 0 1px rgba(228,201,132,0.4), 0 0 24px rgba(228,201,132,0.14);
}
@media (max-width: 60em) {
  .uc-pipe__steps { grid-template-columns: 1fr 1fr; }
}
.uc__title--cards { font-family: "Poppins", sans-serif; font-weight: 700; }
/* Karten-Stapel (links) — Karten erscheinen beim Scrollen einzeln */
/* SMART-CRM App-Fenster (links) — saubere Activity-Feed-Darstellung */
.uc-app {
  align-self: center;
  width: 100%;
  max-width: 30rem;
  border-radius: 16px;
  border: 1px solid rgba(244,241,236,0.1);
  background: linear-gradient(180deg, rgba(22,18,13,0.96), rgba(12,10,7,0.98));
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.uc-app__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(244,241,236,0.07);
}
.uc-app__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,241,236,0.18);
}
.uc-app__name {
  margin-left: 0.5rem;
  font-family: var(--font-grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.uc-app__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.uc-app__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(194,174,125,0.5);
  animation: uc-live 2s ease-out infinite;
}
@keyframes uc-live {
  0% { box-shadow: 0 0 0 0 rgba(194,174,125,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(194,174,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,174,125,0); }
}
.uc-app__feed {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.uc-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0.95rem;
  border-radius: 11px;
  border: 1px solid transparent;
  opacity: 0.32;
  transform: translateX(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.uc-card.is-in {
  opacity: 1;
  transform: none;
  background: rgba(244,241,236,0.035);
  border-color: rgba(194,174,125,0.22);
}
.uc-card__ico {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-subtle);
  background: rgba(244,241,236,0.04);
  border: 1px solid rgba(244,241,236,0.08);
  transition: color 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.uc-card__ico svg { width: 1.15rem; height: 1.15rem; }
.uc-card.is-in .uc-card__ico {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(194,174,125,0.3);
}
.uc-card__body { flex: 1; min-width: 0; }
.uc-card__kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.uc-card__title {
  font-family: var(--font-grotesk);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-top: 0.15rem;
}
.uc-card__meta {
  font-size: 0.78rem;
  color: var(--text-subtle);
  margin-top: 0.2rem;
}
.uc-card__tag {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(194,174,125,0.35);
  border-radius: var(--radius-pill);
}
.uc-card__check {
  flex: 0 0 auto;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a130a;
  background: var(--accent);
}
.uc-card__check svg { width: 0.85rem; height: 0.85rem; }
@media (max-width: 60em) {
  .uc-app { max-width: 100%; }
}
.uc__title {
  font-size: var(--font-h2);
  line-height: 1.12;
  text-wrap: balance;
}
.uc__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.uc__lead {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40ch;
}
.uc__stats {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.uc-stat {
  flex: 1 1 0;
  min-width: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(244, 241, 236, 0.02);
}
.uc-stat__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
}
.uc-stat__label { font-size: 0.72rem; color: var(--text-subtle); line-height: 1.3; }

.uc-steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.uc-step {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-left: 2px solid var(--border);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.uc-step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: var(--space-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.uc-step__no {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.uc-step__title {
  font-family: var(--font-grotesk);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.2rem;
  transition: color var(--transition);
}
.uc-step__text {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-subtle);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease);
}
.uc-step.is-active {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
}
.uc-step.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  transform: scale(1.15);
}
.uc-step.is-active .uc-step__title { color: var(--text); }
.uc-step.is-active .uc-step__text { max-height: 8rem; opacity: 1; }
/* erreichte (gelitene) Schritte bleiben sichtbar, damit die Reihenfolge erkennbar ist */
.uc-step.is-lit:not(.is-active) .uc-step__title { color: var(--text-muted); }
.uc-step.is-lit:not(.is-active)::before { background: var(--accent); opacity: 0.6; }
.uc-pop { animation: uc-pop 0.5s var(--ease); }
@keyframes uc-pop {
  0% { transform: scale(0.9); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.uc-node.uc-pop { animation: uc-node-pop 0.5s var(--ease); }
@keyframes uc-node-pop {
  0% { transform: scale(0.92); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1.04); }
}

/* Rechtes Panel mit animiertem Diagramm */
.uc__panel {
  border: 1px solid rgba(194, 174, 125, 0.16);
  border-radius: var(--radius-lg, 18px);
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(194,174,125,0.07), transparent 70%),
    linear-gradient(180deg, rgba(20,17,12,0.6), rgba(8,7,5,0.75));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 60px rgba(0,0,0,0.45);
  padding: var(--space-6);
  overflow: hidden;
}
.uc-diagram {
  position: relative;
  aspect-ratio: 1 / 0.86;
  width: 100%;
}
.uc-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.uc-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.5rem;
  height: 6.5rem;
  display: grid;
  place-items: center;
  z-index: 2;
}
.uc-core__badge {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.1;
  background: radial-gradient(circle at 50% 32%, #fbeec2, #e3c984 55%, #b9a063 100%);
  color: #241a0c;
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 28px rgba(228,201,132,0.45), inset 0 2px 6px rgba(255,255,255,0.4);
}
.uc-core__badge small {
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0.62;
  margin-top: 0.1em;
}
.uc-core__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(228, 201, 132, 0.55);
  animation: uc-pulse 2.6s ease-out infinite;
}
.uc-core::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px dashed rgba(194, 174, 125, 0.28);
}
.uc-bolt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.uc-bolt-doc { pointer-events: none; }
.uc-core--ping { animation: uc-core-ping 0.7s var(--ease); }
@keyframes uc-core-ping {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes uc-pulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.uc-node {
  position: absolute;
  width: 45%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(244, 241, 236, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28,23,16,0.92), rgba(16,13,9,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 0.5;
  z-index: 2;
  transition: opacity 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.uc-node--tl { left: 0; top: 3%; }
.uc-node--tr { right: 0; top: 3%; }
.uc-node--bl { left: 0; bottom: 3%; }
.uc-node--br { right: 0; bottom: 3%; }
.uc-node.is-active {
  opacity: 1;
  border-color: rgba(228, 201, 132, 0.9);
  box-shadow: 0 0 0 1px rgba(228,201,132,0.7), 0 0 30px rgba(228,201,132,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: scale(1.03);
}
.uc-node.is-lit:not(.is-active) {
  opacity: 0.96;
  border-color: rgba(194, 174, 125, 0.32);
}
.uc-node__icon {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(194,174,125,0.18), rgba(194,174,125,0.06));
  border: 1px solid rgba(194,174,125,0.2);
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.uc-node.is-active .uc-node__icon {
  color: #241a0c;
  background: linear-gradient(180deg, #f3e2b0, #e0c781);
}
.uc-node__icon svg { width: 1.15rem; height: 1.15rem; }
.uc-node__label { font-family: var(--font-grotesk); font-size: 0.875rem; font-weight: 600; color: var(--text); }
.uc-node__meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-subtle); margin-top: 0.12rem; }
@media (max-width: 36em) {
  .uc-diagram { aspect-ratio: 1 / 1.3; }
  .uc-node { width: 100%; position: static; margin-bottom: 0.6rem; }
  .uc-core { display: none; }
  .uc-net { display: none; }
}

.flow {
  --flow-system: #6f93bd;
  --flow-ki: var(--accent);
  --flow-user: #7ea877;
  --flow-decision: var(--accent);
  --flow-reject: #c58a8a;
  margin-top: var(--space-7);
}

/* Raster: nimmt zwei Diagramme nebeneinander auf */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 24rem));
  gap: var(--space-7) var(--space-6);
  justify-content: center;
  margin-top: var(--space-7);
}
.flow-col {
  display: flex;
  flex-direction: column;
}
.flow-col__title {
  text-align: center;
  font-family: var(--font-grotesk);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

/* Legende */
.flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.flow__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.flow__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.flow__dot--system { background: var(--flow-system); }
.flow__dot--ki { background: var(--flow-ki); }
.flow__dot--user { background: var(--flow-user); }
.flow__dot--reject {
  background: transparent;
  border: 1.5px dashed var(--flow-reject);
}
.flow__diamond-mini {
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid var(--flow-decision);
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Vertikale Spine */
.flow__track {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.flow__track::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 2.5rem;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(194, 174, 125, 0.35), rgba(194, 174, 125, 0.12));
  transform: translateX(-50%);
  z-index: 0;
}

/* Schritt-Karten */
.flow-step {
  --cat: var(--flow-system);
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: rgba(16, 13, 9, 0.94);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--cat);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
}
.flow-step::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.32rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cat);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(13, 11, 8, 0.9);
  z-index: 2;
}
.flow-step--system { --cat: var(--flow-system); }
.flow-step--ki { --cat: var(--flow-ki); }
.flow-step--user { --cat: var(--flow-user); }
.flow-step__icon {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cat);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cat);
}
.flow-step__icon svg { width: 1rem; height: 1rem; }
.flow-step__kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat);
  margin-bottom: 0.1rem;
}
.flow-step__title {
  font-family: var(--font-grotesk);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.flow-step__sub {
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

/* Entscheidung (Diamant) + Nein-Abzweig */
.flow-decision {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}
.flow-diamond {
  position: relative;
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.flow-diamond__shape {
  content: "";
  position: absolute;
  inset: 0.35rem;
  transform: rotate(45deg);
  border: 1.5px solid var(--flow-decision);
  border-radius: 7px;
  background: rgba(20, 16, 10, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38), inset 0 0 14px rgba(194, 174, 125, 0.12);
}
.flow-diamond__q {
  position: relative;
  font-family: var(--font-grotesk);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}
.flow-diamond__cap {
  position: relative;
  display: block;
  margin-top: 0.06rem;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
/* Nein-Abzweig nach rechts */
.flow-branch {
  position: absolute;
  top: 50%;
  left: calc(50% + 4.3rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.flow-branch__line {
  width: 1.1rem;
  height: 0;
  border-top: 1.5px dashed var(--flow-reject);
  position: relative;
}
.flow-branch__label {
  position: absolute;
  top: -1.05rem;
  left: 0;
  font-size: 0.7rem;
  color: var(--flow-reject);
}
.flow-reject {
  padding: 0.45rem 0.75rem;
  border: 1.5px dashed var(--flow-reject);
  border-radius: var(--radius-sm);
  color: var(--flow-reject);
  background: rgba(16, 13, 9, 0.6);
  font-size: 0.78rem;
}
/* Ja-Label */
.flow-yes {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  color: var(--flow-user);
  margin-top: calc(var(--space-4) * -0.4);
}

/* Endknoten */
.flow-end {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  background: var(--accent);
  color: var(--color-brown);
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(194, 174, 125, 0.25);
}

@media (max-width: 47.99em) {
  .flow-branch {
    position: static;
    transform: none;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: var(--space-4);
  }
  .flow-branch__line { display: none; }
  .flow-branch__label { position: static; }
  .flow-decision { flex-direction: column; align-items: center; }
}

/* ===========================================================
   Horizontaler Flow (links → rechts)
   =========================================================== */
.flow-row {
  position: relative;
  margin-top: var(--space-6);
  overflow: hidden;
  text-align: center;
}

.flow-h {
  display: inline-flex;
  align-items: center;
  height: 17.5rem;
  gap: 0;
  transform-origin: left top;
  min-width: max-content;
}

/* Knoten-Karten */
.flow-node {
  --cat: var(--flow-system);
  flex: 0 0 10.5rem;
  width: 10.5rem;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  background: rgba(16, 13, 9, 0.94);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--cat);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
.flow-node--system { --cat: var(--flow-system); }
.flow-node--ki { --cat: var(--flow-ki); }
.flow-node--user { --cat: var(--flow-user); }
.flow-node__icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cat);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cat);
}
.flow-node__icon svg { width: 0.95rem; height: 0.95rem; }
.flow-node__kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cat);
  margin-top: 0.1rem;
}
.flow-node__title {
  font-family: var(--font-grotesk);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
.flow-node__sub {
  font-size: 0.78rem;
  color: var(--text-subtle);
  line-height: 1.3;
}

/* Pfeile zwischen den Knoten */
.flow-arrow {
  position: relative;
  flex: 0 0 1rem;
  height: 2px;
  margin-inline: 0.3rem;
  align-self: center;
  background: linear-gradient(90deg, rgba(194, 174, 125, 0.45), rgba(194, 174, 125, 0.28));
}
.flow-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid rgba(194, 174, 125, 0.6);
  border-right: 2px solid rgba(194, 174, 125, 0.6);
  transform: translateY(-50%) rotate(45deg);
}
.flow-arrow--yes {
  background: linear-gradient(90deg, rgba(126, 168, 119, 0.5), rgba(126, 168, 119, 0.3));
}
.flow-arrow--yes::after { border-color: var(--flow-user); }
.flow-arrow__tag {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--flow-user);
  white-space: nowrap;
}

/* Entscheidung im horizontalen Lauf */
.flow-dec {
  position: relative;
  flex: 0 0 7rem;
  align-self: center;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-dec__no {
  position: absolute;
  top: calc(50% + 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.flow-dec__no-line {
  width: 0;
  height: 0.7rem;
  border-left: 1.5px dashed var(--flow-reject);
}
.flow-dec__no-label {
  font-size: 0.68rem;
  color: var(--flow-reject);
}

.flow-hint {
  text-align: center;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
}

/* Play-Steuerung */
.flow-controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
.flow-play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.flow-play:hover { background: var(--accent); color: var(--color-brown); }
.flow-play__icon {
  width: 0;
  height: 0;
  border-left: 0.62rem solid currentColor;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
}
.flow-play.is-playing { opacity: 0.7; cursor: default; }

/* Abspiel-Zustände (links → rechts) */
.flow-h.is-playing > * {
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease),
    box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.flow-h.is-playing .flow-node,
.flow-h.is-playing .flow-arrow,
.flow-h.is-playing .flow-dec,
.flow-h.is-playing .flow-end {
  opacity: 0.32;
  filter: saturate(0.55);
}
.flow-h.is-playing .is-lit {
  opacity: 1;
  filter: none;
}
.flow-node.is-lit {
  box-shadow: 0 0 0 1px var(--cat), 0 0 26px rgba(194, 174, 125, 0.22), 0 12px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
}
.flow-arrow.is-lit {
  background: linear-gradient(90deg, var(--accent), rgba(194, 174, 125, 0.6));
}
.flow-arrow.is-lit::after { border-color: var(--accent); }
.flow-arrow--yes.is-lit {
  background: linear-gradient(90deg, var(--flow-user), rgba(126, 168, 119, 0.6));
}
.flow-arrow--yes.is-lit::after { border-color: var(--flow-user); }
.flow-dec.is-lit .flow-diamond__shape {
  border-color: var(--accent);
  box-shadow: 0 0 26px rgba(194, 174, 125, 0.3), inset 0 0 22px rgba(194, 174, 125, 0.18);
}
.flow-end.is-lit {
  transform: scale(1.04);
  box-shadow: 0 16px 40px rgba(194, 174, 125, 0.4);
}



/* ---------- Angebote (Bild-Karten, versetztes Raster) ---------- */
/* ---------- Angebote — BNA-Dreieck mit Scroll-Aufleuchten ---------- */
.offer-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 84rem;
  margin-inline: auto;
  position: relative;
}
.offer-tri {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: -1;
  max-width: 24rem;
  margin: 0 auto var(--space-2);
}
.offer-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.offer-tri__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.offer-tri__layers {
  position: absolute;
  left: 23.3%;
  top: 12.5%;
  width: 53.4%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  aspect-ratio: 464 / 391;
}
.offer-tri__seg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.offer-tri__seg.is-lit { opacity: 1; }
.offer-tri__bar { opacity: 0; transition: opacity 0.5s var(--ease); }
.offer-tri__bar.is-lit { opacity: 1; }
.offer-tri__bar.seg-flare { animation: bar-appear 0.6s var(--ease); }
@keyframes bar-appear {
  0% { opacity: 0; filter: brightness(2.2); }
  55% { opacity: 1; filter: brightness(1.6); }
  100% { opacity: 1; filter: brightness(1); }
}
.offer-tri__seg.seg-flare { animation: seg-appear 0.6s var(--ease); }
@keyframes seg-appear {
  0% { opacity: 0; transform: scale(0.94); filter: brightness(2); }
  60% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.offer-cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.offer-cta-row__btn {
  padding: 1.15rem 2.75rem;
  font-size: 1.0625rem;
}
/* (Logo-Bild entfernt — reines SVG-Dreieck) */
.offer-tri__progress {
  position: absolute;
  bottom: -3.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-subtle);
  white-space: nowrap;
}
.tri-seg {
  fill: var(--seg-color, var(--accent));
  stroke: none;
  opacity: 0;
  transition: opacity 1.15s var(--ease), filter 1.15s var(--ease);
}
.tri-seg--ring ellipse {
  fill: none;
  stroke: var(--seg-color);
  stroke-width: 9;
}
.seg-label {
  fill: #fff;
  font-family: var(--font-grotesk);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 2.6px;
}
.seg-label--sm { font-size: 11px; }
.ring-label {
  fill: var(--seg-color);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  stroke: none;
}
.tri-seg.is-lit {
  opacity: 0.95;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--seg-color) 40%, transparent));
}
/* Einmaliges Aufleuchten beim Erreichen (Signal-Puls wie im Video) */
.tri-seg.seg-flare { animation: tri-flare 0.7s var(--ease); }
@keyframes tri-flare {
  0% { opacity: 0.95; filter: drop-shadow(0 0 2px transparent); }
  35% { opacity: 1; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--seg-color) 95%, transparent)) drop-shadow(0 0 34px color-mix(in srgb, var(--seg-color) 60%, transparent)); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--seg-color) 40%, transparent)); }
}
.tri-num.num-flare circle { animation: num-flare 0.7s var(--ease); }
@keyframes num-flare {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.35); }
}
/* Nummern + Titel erscheinen mit ihrem Segment */
.tri-num { opacity: 0; transition: opacity 0.5s var(--ease); }
.tri-num.is-lit { opacity: 1; }
.tri-label { opacity: 0; transition: opacity 0.55s var(--ease); }
.tri-label.is-lit { opacity: 1; }
/* Segment-Glows: standardmäßig unsichtbar, leuchten beim Erreichen kurz auf */
.seg-glow { opacity: 0; }
.seg-glow.is-lit { opacity: 0.55; transition: opacity 0.5s var(--ease); }
.seg-glow.seg-flare { animation: seg-glow-flare 0.75s var(--ease); }
@keyframes seg-glow-flare {
  0% { opacity: 0.2; }
  35% { opacity: 1; }
  100% { opacity: 0.55; }
}
/* Ring erscheint beim Erreichen */
.seg-glow-ring { opacity: 0; transition: opacity 0.5s var(--ease); }
.seg-glow-ring.is-lit { opacity: 1; }
.seg-glow-ring.seg-flare { animation: ring-flare 0.75s var(--ease); }
@keyframes ring-flare {
  0% { opacity: 0; filter: drop-shadow(0 0 2px transparent); }
  45% { opacity: 1; filter: drop-shadow(0 0 14px rgba(70,168,201,0.95)) drop-shadow(0 0 30px rgba(70,168,201,0.6)); }
  100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(70,168,201,0.5)); }
}
.tri-seg[data-seg="0"] { --seg-color: #e8913e; }
.tri-seg[data-seg="1"] { --seg-color: #9a7be6; }
.tri-seg[data-seg="2"] { --seg-color: #5fae6e; }
.tri-seg[data-seg="3"] { --seg-color: #e0563f; }
.tri-seg[data-seg="4"] { --seg-color: #e8b431; }
.tri-seg[data-seg="5"] { --seg-color: #46a8c9; }
/* Nummern-Badges (in Aufleucht-Reihenfolge, in den Karten-Farben) */
.tri-num circle {
  fill: rgba(13, 11, 8, 0.9);
  stroke: var(--num-color, var(--accent));
  stroke-width: 2;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
}
.tri-num text {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
}
.tri-num[data-num="0"] { --num-color: #e8913e; }
.tri-num[data-num="1"] { --num-color: #9a7be6; }
.tri-num[data-num="2"] { --num-color: #5fae6e; }
.tri-num[data-num="3"] { --num-color: #e0563f; }
.tri-num[data-num="4"] { --num-color: #e8b431; }
.tri-num[data-num="5"] { --num-color: #46a8c9; }
.tri-num.is-lit circle { opacity: 1; fill: var(--num-color); stroke: var(--num-color); }
.tri-num.is-lit text { opacity: 1; fill: #fff; }

@media (min-width: 56em) {
  .offer-stage {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: var(--space-4) clamp(0.5rem, 1.2vw, 1.25rem);
    align-items: center;
  }
  .offer-card { align-self: center; }
  .offer-tri {
    grid-column: 2;
    grid-row: 2 / span 2;
    order: 0;
    max-width: none;
    margin: 0;
  }
  .offer-tri__progress { bottom: -3.4rem; }
  /* Hexagonal: 1 oben Mitte → 2 oben rechts → 3 unten rechts → 4 unten Mitte → 5 unten links → 6 oben links */
  .offer-card[data-offer="0"] { grid-column: 2; grid-row: 1; }
  .offer-card[data-offer="1"] { grid-column: 3; grid-row: 2; }
  .offer-card[data-offer="2"] { grid-column: 3; grid-row: 3; }
  .offer-card[data-offer="3"] { grid-column: 2; grid-row: 4; }
  .offer-card[data-offer="4"] { grid-column: 1; grid-row: 3; }
  .offer-card[data-offer="5"] { grid-column: 1; grid-row: 2; }
}

/* Scroll-Aufleuchten: nicht erreichte Angebote gedimmt */
.offer-stage.is-active .offer-card {
  opacity: 0.4;
  filter: saturate(0.6);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.offer-stage.is-active .offer-card.is-lit {
  opacity: 1;
  filter: none;
}
.offer-card.is-lit {
  border-color: var(--mark, rgba(194, 174, 125, 0.55));
  box-shadow: 0 0 0 1px var(--mark, rgba(194, 174, 125, 0.4)), 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 34px color-mix(in srgb, var(--mark, #c2ae7d) 28%, transparent);
}

/* Text-Karten (ohne Bild) mit farbiger Markierung */
.offer-card.offer-card--text {
  --mark: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: var(--space-4) var(--space-5);
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  transform: var(--circ, none);
}
.offer-card.offer-card--text:hover {
  transform: var(--circ, none);
  box-shadow: none;
  border-color: transparent;
}
[data-theme="light"] .offer-card.offer-card--text {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* Kreisanordnung um die Grafik: obere/untere Karten rücken zur Mitte,
   mittlere nach außen */
@media (min-width: 56em) {
  .offer-card--text[data-offer="0"] { --circ: none; }
  .offer-card--text[data-offer="1"] { --circ: translateX(-10%); }
  .offer-card--text[data-offer="2"] { --circ: translateX(-10%); }
  .offer-card--text[data-offer="3"] { --circ: translateY(clamp(-9rem, -7.5vw, -5rem)); }
  .offer-card--text[data-offer="4"] { --circ: translateX(10%); }
  .offer-card--text[data-offer="5"] { --circ: translateX(10%); }
  /* Nummern-Badges ausgeblendet — Nummer steht im Titel */
  .offer-card--text .offer-card__num { display: none; }
  /* obere/untere Karte mittig zentriert */
  .offer-card--text[data-offer="0"],
  .offer-card--text[data-offer="3"] {
    justify-self: center;
    align-items: flex-start;
    text-align: left;
  }
  /* linke Spalte: linksbündig */
  .offer-card--text[data-offer="4"],
  .offer-card--text[data-offer="5"] {
    align-items: flex-start;
    text-align: left;
  }
}
.offer-card--c1 { --mark: #e8913e; }
.offer-card--c2 { --mark: #9a7be6; }
.offer-card--c3 { --mark: #5fae6e; }
.offer-card--c4 { --mark: #e0563f; }
.offer-card--c5 { --mark: #e8b431; }
.offer-card--c6 { --mark: #46a8c9; }
.offer-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mark) 18%, transparent);
  border: 1px solid var(--mark);
  color: var(--mark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.offer-card--text .offer-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}
.offer-card__desc {
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.5;
}
.offer-card--text .offer-card__link {
  margin-top: 0.2rem;
  padding: 0;
  border-top: none;
}

.offer-card {
  --card-radius: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #0f0d0a;
  border: 1px solid rgba(194, 174, 125, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  align-self: start;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(194, 174, 125, 0.4);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}
.offer-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0907;
}
.offer-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 600ms var(--ease);
}
.offer-card__img--top { object-position: center 6%; }
.offer-card:hover .offer-card__img { transform: scale(1.04); }
/* Verlauf unten für Lesbarkeit, falls Titel ins Bild ragt */
.offer-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 7, 0.55), transparent 38%);
  pointer-events: none;
}
.offer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(194, 174, 125, 0.14);
}
.offer-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-kashmire);
  line-height: 1.25;
}
.offer-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--font-grotesk);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.55);
  transition: color var(--transition-fast), gap var(--transition-fast);
}
.offer-card__link svg { width: 0.9rem; height: 0.9rem; }
.offer-card__link:hover,
.offer-card:hover .offer-card__link {
  color: var(--accent);
  gap: 0.6rem;
}
[data-theme="light"] .offer-card {
  background: #ffffff;
  border-color: rgba(43, 30, 22, 0.1);
}
[data-theme="light"] .offer-card__footer { border-top-color: rgba(43, 30, 22, 0.1); }
[data-theme="light"] .offer-card__title { color: var(--color-brown); }
[data-theme="light"] .offer-card__link { color: rgba(43, 30, 22, 0.5); }


/* Code-Modus: feste Höhe + Clipping, damit das Tippen das Layout
   weder in der Höhe noch in der Breite verschiebt */
.terminal__body--code {
  min-height: 23.5rem;
  font-family: var(--font-mono);
  font-size: var(--font-code);
  overflow: hidden;
}
.code-line {
  min-height: 1.55em;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d4d4d4;
}
/* VS-Code-Farbschema (Dark+) */
.tok-k { color: #c586c0; } /* Keywords: from, import, def */
.tok-s { color: #ce9178; } /* Strings */
.tok-c { color: #6a9955; font-style: italic; } /* Kommentare */
.tok-t { color: #4ec9b0; } /* Klassen: CRM, Agent */
.tok-f { color: #dcdcaa; } /* Funktionen / Decorator */
.tok-v { color: #9cdcfe; } /* Variablen */
.tok-sh { color: var(--accent); } /* Shell-Prompt $ / ✓ */

.terminal {
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.terminal.is-dimmed {
  opacity: 0;
  transform: scale(0.97);
}

/* ---------- CRM-App (öffnet sich aus dem Skript) ---------- */
.crm-app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9) translateY(16px);
  pointer-events: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.crm-app.is-open {
  opacity: 1;
  transform: none;
}
.crm-app__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.crm-app__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-subtle);
  margin-left: 0.6rem;
  flex: 1;
  text-align: center;
}
.crm-app__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.crm-app__brand {
  font-family: var(--font-grotesk);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text);
}
.crm-app__tabs {
  display: flex;
  gap: var(--space-4);
  flex: 1;
}
.crm-app__tab {
  font-family: var(--font-grotesk);
  font-size: 0.8125rem;
  color: var(--text-subtle);
  padding-block: 0.2rem;
  border-bottom: 1.5px solid transparent;
}
.crm-app__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.crm-app__avatar {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.crm-app__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex: 1;
}
.crm-app__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.crm-app__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-inline: var(--space-4);
  border-left: 1px solid var(--border);
}
.crm-app__stat:first-child {
  padding-left: 0;
  border-left: none;
}
.crm-app__stat-label {
  font-family: var(--font-grotesk);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.crm-app__stat-value {
  font-family: var(--font-grotesk);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.crm-app__table {
  display: flex;
  flex-direction: column;
}
.crm-app__thead {
  display: grid;
  grid-template-columns: 1.5fr 1fr 6.5rem;
  gap: var(--space-3);
  padding: 0.45rem 0.25rem;
  border-bottom: 1px solid var(--border-strong);
}
.crm-app__thead span {
  font-family: var(--font-grotesk);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.crm-app__thead span:last-child { text-align: right; }
.crm-app__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 6.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.crm-app__row:last-child { border-bottom: none; }
.crm-app.is-open .crm-app__row {
  opacity: 1;
  transform: none;
}
.crm-app.is-open .crm-app__row:nth-child(2) { transition-delay: 250ms; }
.crm-app.is-open .crm-app__row:nth-child(3) { transition-delay: 380ms; }
.crm-app.is-open .crm-app__row:nth-child(4) { transition-delay: 510ms; }
.crm-app.is-open .crm-app__row:nth-child(5) { transition-delay: 640ms; }
.crm-app__name {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--font-grotesk);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}
.crm-app__firm {
  font-size: 0.6875rem;
  color: var(--text-subtle);
  font-weight: 400;
}
.crm-app__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-grotesk);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.crm-app__bar {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  position: relative;
  overflow: hidden;
}
.crm-app__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--score, 0%);
  background: var(--accent);
  border-radius: inherit;
  transition: width 700ms var(--ease) 600ms;
}
.crm-app:not(.is-open) .crm-app__bar::after { width: 0; }
.crm-app__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-family: var(--font-grotesk);
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.crm-app__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
}
.crm-app__status--hot { color: var(--text); }
.crm-app__status--hot::before { background: var(--accent); }
.crm-app__status--warm::before { background: #8a9a5b; }

.terminal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-code);
  line-height: 1.85;
  position: relative;
}
.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.terminal__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
}
.terminal__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--border-strong);
}
.terminal__dot:nth-child(1) { background: rgba(231, 90, 80, 0.55); }
.terminal__dot:nth-child(2) { background: rgba(225, 175, 76, 0.55); }
.terminal__dot:nth-child(3) { background: rgba(106, 168, 109, 0.55); }
.terminal__title {
  margin-left: var(--space-3);
  color: var(--text-subtle);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.terminal__status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--accent);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}
.terminal__pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 174, 125, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(194, 174, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 174, 125, 0); }
}
.terminal__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--text);
}
.terminal__line {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terminal__line--out { color: var(--text-muted); }
.terminal__prompt { color: var(--accent); margin-right: 0.6em; }
.terminal__ok { color: var(--accent); margin-right: 0.6em; }
.terminal__str { color: var(--text); }
.terminal__hl { color: var(--accent); }
.terminal__caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .terminal__caret, .terminal__pulse { animation: none; }
}

/* ===========================================================
   Unternehmen
   =========================================================== */
.section-company__inner {
  display: grid;
  gap: var(--space-7);
}
.section-company__head { max-width: 36rem; }
.section-company__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--text-muted);
  font-size: 1.38rem;
  line-height: 1.7;
  max-width: 58ch;
}
.section-company__body p:first-child {
  color: var(--text);
  font-size: 1.54rem;
}
.section-company__head .section__title {
  font-size: calc(var(--font-h2) * 1.3);
}

@media (min-width: 64em) {
  .section-company__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-9);
    align-items: start;
  }
}

/* ===========================================================
   Angebote (Features)
   =========================================================== */
.feature-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 48em) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  position: relative;
  transition: border-color var(--transition);
}
.feature::before {
  content: counter(feature-counter, decimal-leading-zero);
  counter-increment: feature-counter;
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
}
.feature-grid { counter-reset: feature-counter; }
.feature:hover { border-color: var(--border-strong); }
.feature__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature__icon svg { width: 100%; height: 100%; }
.feature__title { font-size: var(--font-h3); }
.feature__text {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 38ch;
}

/* ===========================================================
   Use Cases
   =========================================================== */
.case-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .case-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

.case {
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.case:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.case--featured {
  border: 2px solid var(--accent);
  background: var(--bg-elevated);
}
.case--featured:hover { border-color: var(--accent); }
.case--featured .pill { align-self: flex-start; margin-bottom: var(--space-2); }

.case__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.case__title { font-size: var(--font-h3); }
.case__text {
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---------- Pill tag (Voltagent button-pill-tag) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pill--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.pill--accent::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Inline code chip ---------- */
.code-chip {
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: 0.25rem 0.625rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-code);
  color: var(--text);
  letter-spacing: 0;
}
.case--featured .code-chip { background: var(--bg); }

/* ===========================================================
   Testimonials
   =========================================================== */
.section-testimonial__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.tm__title { text-wrap: nowrap; white-space: nowrap; line-height: 1.12; }
.section-testimonial .section__header--center { margin-bottom: 19px; }
.tm__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.tm-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.tm-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(244, 241, 236, 0.035), rgba(244, 241, 236, 0.01));
}
@media (min-width: 56em) {
  .tm-card { grid-template-columns: 1.18fr 0.82fr; gap: var(--space-7); align-items: stretch; }
  .tm-card__body { order: 1; justify-content: space-between; }
  .tm-card__media { order: 2; height: auto; align-self: start; }
  .tm-card__media .tm-slot { flex: 1 1 auto; aspect-ratio: auto; min-height: 9.375rem; }
}

/* Media-Karte mit Bild/Video-Platzhalter */
.tm-card__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  border: 1px solid rgba(194, 174, 125, 0.18);
}
.tm-badge {
  align-self: flex-start;
  font-family: var(--font-grotesk);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(194, 174, 125, 0.35);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
}
.tm-slot {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(45deg, rgba(244,241,236,0.03) 0 10px, transparent 10px 20px),
    #100d09;
  border: 1px dashed rgba(194, 174, 125, 0.4);
  color: var(--accent);
}
.tm-slot__play {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #1a130c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tm-slot__play svg { width: 1.4rem; height: 1.4rem; margin-left: 2px; }
.tm-slot__hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.tm-slot--filled {
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  border: 1px solid rgba(194, 174, 125, 0.25);
}
.tm-person { display: flex; flex-direction: column; gap: 0.25rem; }
.tm-person__quote {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.tm-person__name {
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.tm-person__firm { font-size: 0.85rem; color: var(--text-muted); }
.tm-person__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 0.35rem;
}
.tm-stars { color: var(--accent); font-size: 0.85rem; letter-spacing: 0.1em; }
.tm-person__web {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.tm-person__web:hover { color: var(--accent); text-decoration: underline; }

/* Textspalte: Problem / KI-Lösung / Ergebnis + Stats */
.tm-card__body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Karussell: nur die aktive Karte ist sichtbar */
.tm-list .tm-card { display: none; }
.tm-list .tm-card.is-active { display: grid; }

/* Problem / KI-Lösung / Ergebnis als eigene Blöcke */
.tm-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  flex: 1;
}
[data-theme="light"] .tm-block { background: #ffffff; }
.tm-block {
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tm-block:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .tm-block:hover {
  border-color: rgba(194, 174, 125, 0.6);
  box-shadow: 0 18px 44px rgba(43, 30, 22, 0.14);
}
.tm-block__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(194, 174, 125, 0.35);
  background: var(--accent-soft);
  color: var(--accent);
}
.tm-block__icon svg { width: 1.3rem; height: 1.3rem; }
.tm-block__content { display: flex; flex-direction: column; gap: 0.4rem; }

/* CTA-Buttons: Glow (orange) */
.btn--primary {
  box-shadow: 0 0 22px rgba(246, 139, 31, 0.4), 0 0 55px rgba(246, 139, 31, 0.18);
}
.btn--primary:hover {
  box-shadow: 0 0 30px rgba(246, 139, 31, 0.55), 0 0 70px rgba(246, 139, 31, 0.25);
}
.btn--primary.site-header__cta { box-shadow: none; }

/* Blätter-Navigation */
.tm-nav {
  margin-top: var(--space-5);
  position: relative;
  top: -3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 0.6rem 1.1rem;
  width: fit-content;
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #201c18, #131009);
}
[data-theme="light"] .tm-nav { background: #ffffff; }
.tm-nav__count [data-tm-current] { color: var(--accent); font-weight: 600; }
.tm-nav__btn {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.tm-nav__btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tm-nav__btn svg { width: 1.1rem; height: 1.1rem; }
.tm-nav__count {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
  min-width: 3.5rem;
  text-align: center;
}
.tm-block__label {
  font-family: var(--font-grotesk);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.tm-block__text {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.tm-block__list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tm-block__list li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.tm-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--accent);
}
.tm-block__list strong { color: var(--text); font-weight: 600; }
.tm-stats {
  display: flex;
  gap: var(--space-6);
  padding-left: var(--space-5);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.tm-stat dt {
  font-family: var(--font-grotesk);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.2rem;
}
.tm-stat dd {
  white-space: nowrap;
  margin: 0;
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tm-stat dd span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  text-shadow: none;
}
.tm-stat--up { color: #5fae6e; }
.tm-stat--blank dt { color: var(--text-subtle); }
.tm-stat--blank dd { color: var(--accent); }
.tm-stat--blank dd span { color: var(--text-subtle); }
/* Kunden-Stimmen (Kurz-Testimonials) — laufendes Band */
.tm-quotes {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 52em) {
  .tm-quotes:not(.tm-quotes--marquee) { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.tm-quotes--marquee {
  display: block;
  overflow: hidden;
  /* Platz für den Hover-Lift, damit Karten oben/unten nicht abgeschnitten werden */
  padding-block: 12px;
  margin-block: -12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.tm-quotes__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: tm-scroll 70s linear infinite;
}
.tm-quotes--marquee:hover .tm-quotes__track { animation-play-state: paused; }
.tm-quotes--marquee .tm-quote {
  width: clamp(20rem, 28vw, 26rem);
  flex: 0 0 auto;
}
@keyframes tm-scroll {
  to { transform: translateX(-50%); }
}
/* Senkrechte Variante fuer die mobile Ansicht: von unten nach oben. Der
   Inhalt ist im Markup verdoppelt, -50% ist also genau eine Runde. */
@keyframes tm-scroll-up {
  to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-quotes__track { animation: none; }
}
.tm-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tm-quote:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .tm-quote { background: #ffffff; }
[data-theme="light"] .tm-quote:hover { box-shadow: 0 18px 44px rgba(43, 30, 22, 0.14); }
.tm-quote__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.tm-quote__person {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.tm-quote__avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(194, 174, 125, 0.45);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tm-quote__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tm-quote__name {
  font-family: var(--font-grotesk);
  font-weight: 600;
  color: var(--text);
}
.tm-quote__firm {
  font-size: 0.875rem;
  color: var(--text-subtle);
}

.tm-note {
  display: none;
}

/* ===========================================================
   Compliance / DSGVO
   =========================================================== */
.section-compliance { background: var(--bg); }
@media (min-width: 52em) {
  .section-compliance .section__header {
    max-width: calc(3 * 430px + 2 * var(--space-5));
    margin-inline: auto;
  }
}
.compliance__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 2px solid rgba(194, 174, 125, 0.55);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  margin-bottom: var(--space-4);
  box-shadow: 0 0 18px rgba(194, 174, 125, 0.18);
}
.compliance__title {
  font-size: clamp(2rem, 3.2vw, 3rem);
}
@media (min-width: 52em) {
  .compliance__title { white-space: nowrap; }
}
.compliance__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.compliance__lead {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 42rem;
  margin-top: var(--space-3);
}
.compliance__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 52em) {
  .compliance__grid { grid-template-columns: repeat(3, minmax(0, 26.875rem)); justify-content: center; }
}
.compliance-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  min-height: clamp(15rem, 12.58rem + 10.33vw, 21.875rem); /* 240 → 350 */
  border: 1px solid rgba(194, 174, 125, 0.18);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
}
.compliance-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194, 174, 125, 0.9), transparent);
}
[data-theme="light"] .compliance-card { background: #ffffff; border-color: rgba(43, 30, 22, 0.14); }
.compliance-card__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194, 174, 125, 0.55);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(194, 174, 125, 0.22), rgba(194, 174, 125, 0.08));
  box-shadow: 0 0 26px rgba(194, 174, 125, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.compliance-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.compliance-card__text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.compliance-card__chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid rgba(194, 174, 125, 0.35);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  margin-top: auto;
}
/* ===========================================================
   Integrationen
   =========================================================== */
.section-integrations { background: var(--bg); overflow: hidden; }
.integrations__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.integrations__lead {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 42rem;
  margin: var(--space-3) auto 0;
}
.int-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.int-marquee__row { overflow: hidden; }
.int-marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
}
.int-marquee__row--left .int-marquee__track { animation: int-scroll-left 45s linear infinite; }
.int-marquee__row--right .int-marquee__track { animation: int-scroll-right 45s linear infinite; }
@keyframes int-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes int-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.int-marquee:hover .int-marquee__track { animation-play-state: paused; }
.section__header--center .compliance__badge { margin-inline: auto; width: fit-content; }
.int-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  min-width: 19rem;
  border: 1px solid rgba(194, 174, 125, 0.16);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #1c1813, #120f0a);
}
[data-theme="light"] .int-card { background: #ffffff; border-color: rgba(43, 30, 22, 0.14); }
.int-card__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194, 174, 125, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(194, 174, 125, 0.08);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 1.4rem;
}
.int-card__icon img { width: 32px; height: 32px; display: block; object-fit: contain; }
[data-theme="light"] .int-card__icon { color: var(--color-brown, #5a4426); }
[data-theme="light"] .int-card__icon img,
[data-theme="light"] .int-card__icon svg { filter: brightness(0.55) saturate(0.85); }
.int-card__meta { display: flex; flex-direction: column; gap: 0.15rem; }
.int-card__name {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  white-space: nowrap;
}
.int-card__sub {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* ===========================================================
   Über die BNO-Agency / Gründer
   =========================================================== */
.section-founders { background: var(--bg); }
.founders__title { text-align: center; }
.founders__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.founder-card {
  display: grid;
  gap: var(--space-5);
  margin-top: calc(var(--space-8) * 1.75);
  max-width: 68rem;
  margin-inline: auto;
}
@media (min-width: 56em) {
  .founder-card { grid-template-columns: minmax(min(20rem, 100%), 26rem) minmax(0, 1fr); align-items: center; gap: 0; }
  .founder-card .founder-card__photo { grid-area: 1 / 1 / 2 / 2; margin: 2.75rem 0 0; z-index: 1; align-self: start; }
  .founder-card--reverse { grid-template-columns: minmax(0, 1fr) minmax(min(20rem, 100%), 26rem); }
  .founder-card--reverse .founder-card__photo { grid-area: 1 / 2 / 2 / 3; }
  .founder-card .founder-card__text {
    grid-area: 1 / 1 / 2 / 3;
    margin: 0 0 0 2.5rem;
    padding-left: calc(26rem + 1rem);
    min-height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2.5rem;
  }
  .founder-card--reverse .founder-card__text {
    margin: 0 2.5rem 0 0;
    padding-left: clamp(1.75rem, 4vw, 3.25rem);
    padding-right: calc(26rem + 1rem);
  }
}
.founder-card__text {
  background: linear-gradient(180deg, #201c18, #131009);
  border: 1px solid rgba(194, 174, 125, 0.18);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 4rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .founder-card__text {
  background: #ffffff;
  border-color: rgba(43, 30, 22, 0.14);
  box-shadow: 0 16px 44px rgba(43, 30, 22, 0.1);
}
.founder-card__name {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem); /* 24 → 40 */
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.founder-card__role {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(194, 174, 125, 0.4);
  margin: 0 0 calc(var(--space-4) + 0.9rem);
}
.founder-card__p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
[data-theme="light"] .founder-card__p { color: #2b1e16; }
.founder-card__photo {
  width: 100%;
  max-width: 26rem;
  height: auto;
  aspect-ratio: var(--media-portrait);
  justify-self: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  align-self: start;
}
.founder-card__photo--placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(194, 174, 125, 0.4);
  background: repeating-linear-gradient(45deg, rgba(194, 174, 125, 0.05) 0 12px, transparent 12px 24px);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
[data-theme="light"] .founder-card__photo--placeholder {
  border-color: rgba(43, 30, 22, 0.3);
  background: repeating-linear-gradient(45deg, rgba(43, 30, 22, 0.04) 0 12px, transparent 12px 24px);
}

.section-convince { background: var(--bg); }
.convince {
  display: grid;
  align-items: center;
  gap: var(--space-6);
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 60em) {
  .convince { grid-template-columns: 1fr; gap: 0; align-items: stretch; }
  .convince__photo { grid-area: 1 / 1; position: relative; z-index: 1; margin: 0; align-self: center; justify-self: start; height: auto; }
  .convince__panel { grid-area: 1 / 1; margin: 3rem 0; margin-left: 19rem; padding-left: calc(var(--space-6) + 14rem); }
}
.convince__photo {
  max-width: 26rem;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.convince__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.convince__panel {
  background: linear-gradient(180deg, #201c18, #131009);
  border: 1px solid rgba(194, 174, 125, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-7) var(--space-7) calc(var(--space-7) + 3rem);
}
@media (max-width: 59.99em) {
  .convince__panel { padding: var(--space-6); }
}
@media (min-width: 60em) {
  .convince__panel { padding-left: calc(var(--space-7) + 12rem); }
}
[data-theme="light"] .convince__photo { background: transparent; color: var(--text-muted); }
[data-theme="light"] .convince__panel { background: #ffffff; border-color: rgba(43, 30, 22, 0.14); box-shadow: 0 10px 30px rgba(43, 30, 22, 0.08); }
.convince__title {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.convince__title .convince__gold {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.convince__text {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.convince__text + .convince__text { margin-top: var(--space-4); }
.convince__cta {
  margin-top: var(--space-6);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1.35;
  padding: 12px 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(26rem, 100%);
}
/* ===========================================================
   So arbeiten wir: 3 Schritte
   =========================================================== */
.section-steps { background: var(--bg); }
.section-steps .section__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
}
.step {
  display: grid;
  gap: var(--space-6);
  margin-top: calc(var(--space-8) * 2.2);
}
.step:first-of-type { margin-top: var(--space-8); }
@media (min-width: 60em) {
  .step { grid-template-columns: minmax(0, 22rem) auto; gap: calc(var(--space-6) + 2.5rem); align-items: start; justify-content: center; }
  .step__intro { justify-self: end; }
}
.step__title {
  font-family: var(--font-grotesk);
  font-size: clamp(2.3rem, 3.3vw, 3.1rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.step__sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.step__text {
  font-family: "Montserrat", sans-serif;
  font-size: 1.13rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.step-card__text strong { color: var(--accent); font-weight: 700; }
.step__text strong { color: var(--accent); font-weight: 700; }
.step__cta {
  margin-top: var(--space-5);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1.35;
  padding: 12px 26px;
  border-radius: 8px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.step__cards {
  display: grid;
  /* kein auto-fit: die Elternspalte ist `auto` und würde auf 1 Spalte kollabieren.
     Das Stapeln übernehmen die Breakpoints im Responsive-Layer. */
  grid-template-columns: repeat(3, minmax(0, 17rem));
  grid-auto-rows: 1fr;
  gap: calc(var(--space-5) + 0.8rem);
  justify-content: center;
}
.step-card {
  min-height: 21.7rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) 0;
  border: 1px solid rgba(194, 174, 125, 0.18);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  overflow: hidden;
}
[data-theme="light"] .step-card { background: #ffffff; border-color: rgba(43, 30, 22, 0.14); }
.step-card::after {
  content: "";
  display: block;
  height: 8px;
  box-sizing: content-box;
  margin: auto calc(-1 * var(--space-5)) 0;
  padding-top: var(--space-5);
  background: linear-gradient(90deg, #8a6d3b, var(--accent));
  background-clip: content-box;
}
.step-card__icon {
  width: 88px;
  height: 46px;
  margin: 0 auto 0;
  display: grid;
  place-items: center;
}
.step-card__icon img {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  display: block;
}
.step-card__icon img.step-icon-gray { filter: grayscale(1); opacity: 0.4; }
.step-card__icon img.step-icon-fill { clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0); }
.step-card__label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--accent);
  text-align: center;
  margin-bottom: 1.7rem;
}
.step-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: var(--space-3);
}
.step-card__text {
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
/* ===========================================================
   Dein BNO-Team
   =========================================================== */
.section-team { background: var(--bg); }
.team__title { margin-bottom: var(--space-7); }
.team__title em {
  font-family: var(--font-serif-italic);
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}
.team__title .team__colon { color: var(--accent); font-style: normal; }
.team__grid {
  display: grid;
  gap: var(--space-6);
}
/* --- Impressum-Modal --- */
.legal-modal[hidden] { display: none; }
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.75);
  backdrop-filter: blur(4px);
}
.legal-modal__card {
  position: relative;
  max-width: 34rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-7);
  border: 1px solid rgba(194, 174, 125, 0.25);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 34px rgba(194, 174, 125, 0.08);
}
[data-theme="light"] .legal-modal__backdrop { background: rgba(43, 30, 22, 0.4); }
[data-theme="light"] .legal-modal__card { background: #ffffff; border-color: rgba(43, 30, 22, 0.15); }
.legal-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: #e0563f;
  border: 1px solid rgba(224, 86, 63, 0.45);
  border-radius: 50%;
  background: rgba(224, 86, 63, 0.08);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.legal-modal__close:hover { background: rgba(224, 86, 63, 0.18); box-shadow: 0 0 14px rgba(224, 86, 63, 0.3); }
.legal-modal__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.legal-modal__sub {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--accent);
  margin: var(--space-5) 0 var(--space-3);
}
.legal-modal__text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-modal__text + .legal-modal__text { margin-top: var(--space-3); }
.legal-modal__text a { color: var(--accent); }
.legal-modal__text a:hover { text-decoration: underline; }
.legal-modal__card--wide { max-width: 46rem; }
.legal-modal__title--section { font-size: 1.6rem; margin: var(--space-6) 0 var(--space-4); }
.legal-modal__title--section:first-of-type { margin-top: var(--space-4); }
.legal-modal__sub--minor { font-size: 1.1rem; color: var(--text); }
.legal-modal__text + .legal-modal__sub,
.legal-modal__list + .legal-modal__sub,
.legal-modal__text + .legal-modal__sub--minor { margin-top: var(--space-5); }
.legal-modal__list {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  margin: var(--space-3) 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-modal__list a { color: var(--accent); }
.legal-modal__text + .legal-modal__list,
.legal-modal__list + .legal-modal__text { margin-top: var(--space-3); }
.team__logo {
  width: 100%;
  max-width: 21rem;
  display: block;
  mix-blend-mode: screen;
  margin-top: calc(var(--space-6) * 1.98 + 1.93rem - 4rem);
}
.team-collage {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: var(--space-4) calc(var(--space-4) + var(--space-7) * 0.6);
  align-items: start;
}
.team-collage__col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) + var(--space-7) * 0.6);
}
.team-collage__col--offset { margin-top: var(--space-7); }
.team-collage__img.team-collage__img--gap { margin-top: 0; }
.team-collage__img {
  width: clamp(6rem, 4.7rem + 5.5vw, 9.5rem);
  height: auto;
  aspect-ratio: 152 / 165;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .team-collage__img { border: 0; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
@media (min-width: 60em) {
  .team__grid { grid-template-columns: auto auto auto; justify-content: space-between; gap: var(--space-7); align-items: start; }
  .team__grid .team__col { max-width: 34rem; }
}
.team__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.team__col.team__col--photos { flex-direction: row; justify-content: flex-end; }
@media (min-width: 60em) {
  .team__col.team__col--photos { margin-top: -6.5rem; }
}
.team__label {
  font-family: var(--font-grotesk);
  font-size: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem); /* 18 → 22 */
  font-weight: 700;
  color: var(--text);
  margin-bottom: calc(var(--space-3) + 0.4rem);
}
.team__text {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}
.team__text + .team__text { margin-top: var(--space-3); }
.team__slot {
  min-height: 18rem;
  border: 1px dashed rgba(194, 174, 125, 0.4);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(45deg, rgba(194, 174, 125, 0.04) 0 10px, transparent 10px 20px);
}
.team__slot--tall { min-height: clamp(24rem, 40vw, 36rem); flex: 1; }

.tm-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin-top: var(--space-2);
}

/* (alte Einzel-Zitat-Styles bleiben ungenutzt) */
.section-testimonial__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 32ch;
}
.section-testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-small);
  letter-spacing: 0.04em;
}
.section-testimonial__name { color: var(--text); font-weight: 500; }

/* ===========================================================
   Potenzial-Analyse
   =========================================================== */
.section-analysis__inner {
  display: grid;
  gap: var(--space-7);
}
.section-analysis__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 58ch;
  color: var(--text-muted);
  line-height: 1.7;
}
.section-analysis__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.section-analysis__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text);
}
.section-analysis__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}
.section-analysis__body .btn { align-self: flex-start; margin-top: var(--space-2); }

@media (min-width: 64em) {
  .section-analysis__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-9);
    align-items: start;
  }
}

/* ===========================================================
   Contact CTA
   =========================================================== */
.section-contact {
  padding-block: clamp(5rem, 10vw, 8rem);
  text-align: center;
}
.section-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.section-contact__title {
  font-size: var(--font-h2);
  max-width: 28ch;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.section-contact__subline {
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 64ch;
  margin-top: 1.6rem;
}
.section-contact .btn { margin-top: var(--space-3); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
  background: var(--bg-elevated);
  border-top: 0;
  padding-block: var(--space-7);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
.site-footer__nav,
.site-footer__legal {
  display: flex;
  gap: var(--space-5);
  font-size: var(--font-small);
}
.site-footer__nav a,
.site-footer__legal a {
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.site-footer__nav a:hover,
.site-footer__legal a:hover { color: var(--accent); }

.site-footer__copy {
  max-width: var(--container);
  margin: var(--space-6) auto 0;
  padding-inline: var(--gutter);
  color: var(--text-subtle);
  font-size: var(--font-small);
  text-align: center;
}

@media (min-width: 48em) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ===========================================================
   Fallstudien / Marktfakten
   =========================================================== */
.section-cases { background: var(--bg); padding-block: clamp(2rem, 3.5vw, 3rem); }
.cases__head {
  max-width: 76rem;
  margin: 0 auto var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.cases__badge {
  margin-bottom: calc(var(--space-4) * 1.05);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 2px solid rgba(194, 174, 125, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(194, 174, 125, 0.06);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cases__badge svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; stroke-width: 2.6; }
[data-theme="light"] .cases__badge,
[data-theme="light"] .compliance__badge,
[data-theme="light"] .exp__badge {
  color: var(--color-brown, #5a4426);
  border-color: rgba(90, 68, 38, 0.45);
}
.cases__title {
  font-size: clamp(1.625rem, 0.824rem + 3.418vw, 3.9rem); /* 26 → 62.4 */
  margin-bottom: var(--space-4);
  font-weight: 700;
  line-height: 1.12;
}
.cases__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.cases__lead {
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1.55;
  max-width: 64rem;
  text-wrap: pretty;
}

.cases__grid {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  margin-bottom: calc(var(--space-4) * 1.5);
  max-width: 92rem;
  margin-inline: auto;
}
@media (min-width: 48em) {
  .cases__grid { grid-template-columns: repeat(3, 1fr); }
}
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) clamp(2.5rem, 4vh, 3.5rem);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(194, 174, 125, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(244, 241, 236, 0.04), rgba(244, 241, 236, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.1);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
[data-theme="light"] .case-card,
[data-theme="light"] .case-tile,
[data-theme="light"] .exp-stat { background: #ffffff; }
.case-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.5;
}
.case-card:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 0 48px rgba(194, 174, 125, 0.22), 0 18px 44px rgba(0, 0, 0, 0.4);
}
.case-card__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(194, 174, 125, 0.3);
}
.case-card__icon svg { width: 1.52rem; height: 1.52rem; }
.case-card__icon { margin-bottom: var(--space-2); }
.case-card__stat {
  font-family: var(--font-grotesk);
  font-weight: 700;
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
  font-size: clamp(2.9rem, 4.7vw, 3.75rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.case-card__unit { font-size: 0.55em; margin-left: 0.05em; }
.case-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.38rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.55rem;
}
.case-card__text {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-top: 0.35rem;
}
.case-card__rule {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  margin-top: var(--space-3);
  background: rgba(194, 174, 125, 0.15);
  overflow: hidden;
}
.case-card__rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(194, 174, 125, 0.35), var(--accent));
  transition: width 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.case-card__rule.is-counted::after {
  width: var(--pct, 50%);
}
.case-card__source {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

/* Sekundäre Kennzahlen-Leiste */
.cases__strip {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(244, 241, 236, 0.02);
  max-width: 92rem;
  margin-inline: auto;
}
@media (min-width: 40em) {
  .cases__strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72em) {
  .cases__strip { grid-template-columns: repeat(4, 1fr); }
}
.case-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: var(--space-3) var(--space-2);
  position: relative;
}
/* Balken + Quelle am Kartenende, immer auf gleicher Höhe */
.case-card__rule { margin-top: auto; padding-top: 0; }
.case-card__text { margin-bottom: var(--space-3); }
/* Hover auf der gesamten Leiste — identisch zum Karten-Hover oben, in beiden Themes */
.cases__strip {
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(194, 174, 125, 0.06), transparent 60%),
    linear-gradient(180deg, #201c18, #131009);
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.1);
}
.cases__strip:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 0 48px rgba(194, 174, 125, 0.22), 0 18px 44px rgba(0, 0, 0, 0.4);
}
@media (min-width: 40em) {
  .case-tile:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-4) * -0.5);
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--border);
  }
}
@media (min-width: 72em) {
  .case-tile:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-4) * -0.5);
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--border);
  }
}
.case-tile__icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(194, 174, 125, 0.25);
}
.case-tile__icon svg { width: 1.15rem; height: 1.15rem; }
.case-tile__body { flex: 1; display: flex; flex-direction: column; align-items: center; }
.case-tile__stat {
  font-family: var(--font-grotesk);
  font-weight: 700;
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
  font-size: 2.4rem;
  line-height: 1.05;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case-tile__stat span { font-size: 0.6em; margin-left: 0.05em; }
.case-tile__label {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.4;
}
.case-tile__label strong { color: var(--text); font-weight: 600; }
.case-tile__src {
  flex: 0 0 auto;
  align-self: center;
  margin-top: auto;
  padding-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.cases__refs {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-subtle);
  max-width: 50rem;
  margin-inline: auto;
  text-wrap: pretty;
}

/* ===========================================================
   Erfahrungswerte
   =========================================================== */
.section-exp { background: var(--bg); }
/* Reveal-Transform der Sektion deaktivieren, damit position:sticky funktioniert */
.section-exp.reveal,
.section-exp.reveal.is-visible { transform: none; }
.exp__inner {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 60em) {
  .exp__inner {
    grid-template-columns: 0.92fr 1.08fr;
    gap: var(--space-8);
    align-items: start;
  }
  .exp__intro {
    position: sticky;
    top: calc(var(--header-height) + 0.5rem);
  }
}
.exp__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 2px solid rgba(194, 174, 125, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(194, 174, 125, 0.06);
  color: var(--accent);
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exp__badge svg { width: 1.2rem; height: 1.2rem; }
.exp__badge { margin-bottom: calc(1.6rem - 5px); }
/* Shimmer/Shine: durchlaufender Glanzstreifen */
@keyframes shine-sweep {
  0% { transform: translateX(-130%) skewX(-20deg); }
  55%, 100% { transform: translateX(230%) skewX(-20deg); }
}
.site-header__cta { overflow: hidden; flex-shrink: 0; white-space: nowrap; }
/* Shine auf den Badge-Pillen: als Hintergrund-Layer, damit der Border-Beam nicht abgeschnitten wird */
@keyframes badge-shine {
  0% { background-position: 40% 0, 0 0; }
  55%, 100% { background-position: -66.7% 0, 0 0; }
}
.exp__badge,
.cases__badge,
.compliance__badge {
  background: linear-gradient(105deg, transparent 0%, rgba(233, 220, 184, 0.35) 12%, transparent 24%) no-repeat, rgba(194, 174, 125, 0.06);
  background-size: 250% 100%, auto;
  background-position: 40% 0, 0 0;
  animation: badge-shine 8.5s ease-in-out 1.8s infinite;
}
.site-header__cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(233, 220, 184, 0.35) 50%, transparent);
  animation: shine-sweep 8.5s ease-in-out infinite;
  pointer-events: none;
}
/* Border-Beam: wandernder Lichtstrahl um Badge-Pillen */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}
.exp__badge,
.cases__badge,
.compliance__badge,
.site-header__cta {
  position: relative;
}
.exp__badge::after,
.cases__badge::after,
.compliance__badge::after,
.site-header__cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--beam-angle), transparent 0turn 0.55turn, rgba(194, 174, 125, 0.18) 0.68turn, rgba(238, 226, 192, 1) 0.82turn, rgba(194, 174, 125, 0.18) 0.96turn, transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beam-spin 2.8s linear infinite;
  pointer-events: none;
}
.exp__title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  margin-top: var(--space-4);
  text-wrap: balance;
}
.exp__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.exp__title-gold { color: var(--accent); }
.exp__lead {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: 1.17rem;
  line-height: 1.8;
  max-width: 44ch;
}
.exp__text {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 1.17rem;
  line-height: 1.8;
  max-width: 46ch;
}

/* Statistik-Karten (Count-up) */
.exp__stats {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.exp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(244, 241, 236, 0.02);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.exp-stat:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
:root:not([data-theme="dark"]) .exp-stat:hover {
  border-color: rgba(194, 174, 125, 0.6);
  box-shadow: 0 18px 44px rgba(43, 30, 22, 0.14);
  background: #ffffff;
}
.exp-stat__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.exp-stat__label {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.exp-stat__bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.2s;
}
.exp-stat.is-in .exp-stat__bar { transform: scaleX(1); }
.exp-stat__src {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

/* Problem-Karten */
.exp__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.exp-card {
  --sev: var(--accent);
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color var(--transition);
}
.exp-card.is-in { opacity: 1; transform: none; }
.exp-card:hover,
.exp-card.is-in:hover {
  border-color: rgba(194, 174, 125, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}
:root:not([data-theme="dark"]) .exp-card:hover,
:root:not([data-theme="dark"]) .exp-card.is-in:hover {
  border-color: rgba(194, 174, 125, 0.6);
  box-shadow: 0 18px 44px rgba(43, 30, 22, 0.14);
  background: #ffffff;
}
.exp-card--kritisch { --sev: #e0563f; --sevw: 100%; }
/* Kritisch: Balken komplett in Rot gefüllt */
.exp-card--kritisch .exp-card__bar::before { background: var(--sev); }
.exp-card--hoch { --sev: #e8913e; --sevw: 72%; }
.exp-card--mittel { --sev: #c9b074; --sevw: 45%; }
.exp-card__head {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  margin-bottom: var(--space-3);
}
.exp-card__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--sev);
  background: color-mix(in srgb, var(--sev) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev) 35%, transparent);
}
.exp-card__icon svg { width: 35px; height: 32px; }
.exp-card__no {
  font-family: Montserrat, var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
[data-theme="light"] .exp-card__no { color: var(--accent); }
.exp-card__title {
  font-family: Montserrat, var(--font-grotesk);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
}
.exp-card__text {
  margin-top: 0.8rem;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}
.exp-card__bar {
  position: relative;
  height: 6px;
  margin: var(--space-5) 0 var(--space-5);
  border-radius: 999px;
  background: var(--border);
  overflow: visible;
}
.exp-card__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sevw, 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sev), color-mix(in srgb, var(--sev) 20%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) 0.15s;
}
.exp-card.is-in .exp-card__bar::before { transform: scaleX(1); }
.exp-card__sev {
  position: absolute;
  right: 0;
  bottom: 0.4rem;
  font-family: var(--font-grotesk);
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sev);
}
.exp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem;
}
.exp-card__tags span {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(194, 174, 125, 0.45);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  .exp-card, .exp-stat__bar, .exp-card__bar::before { opacity: 1; transform: none; }
}

/* ===========================================================
   ROI-Kalkulator
   =========================================================== */
.section-roi { background: var(--bg); padding-block-start: 0; }
.section-roi .section__header--center { margin-top: -3.5rem; max-width: 74rem; margin-bottom: calc(var(--space-6) - 1.5rem); }
.roi__title { max-width: 46ch; margin-inline: auto; }
.roi__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi__lead {
  color: var(--text-muted);
  font-size: 1.2rem;
  max-width: 62ch;
  text-wrap: pretty;
  margin-inline: auto;
  text-align: center;
}
.roi__grid {
  display: grid;
  gap: var(--space-5);
  max-width: 72rem;
  margin-inline: auto;
}
@media (min-width: 60em) {
  .roi__grid { grid-template-columns: 2fr 3fr; align-items: stretch; }
}
.roi-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
}
[data-theme="light"] .roi-card { background: #ffffff; }
.roi-card__head {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
#roi-punch-head { margin-top: 1rem; margin-bottom: 1rem; font-size: 1.05rem; color: var(--accent); }
.roi-gain > .roi-card__head,
.roi-ba > .roi-card__head,
.roi-final > .roi-card__head { font-size: 1.05rem; font-weight: 700; }
.roi-card__head--muted { color: var(--text-subtle); margin-bottom: var(--space-2); }
.roi-field { margin-bottom: var(--space-5); }
.roi-field:last-child { margin-bottom: 0; }
.roi-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 0.6rem;
}
.roi-field__row label {
  font-family: var(--font-grotesk);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.roi-field__val {
  font-family: var(--font-grotesk);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roi-field__hint { font-size: 0.85rem; color: var(--text-subtle); margin-top: 0.45rem; }
.roi-card--inputs .roi-field__hint { color: #e8a883; }
.roi-num {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 4.5ch;
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: inherit;
  color: var(--accent);
  text-align: right;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.15em 0.35em;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.roi-num:hover,
.roi-num:focus {
  background: var(--accent-soft);
  border-color: rgba(194, 174, 125, 0.45);
}
.roi-num::-webkit-outer-spin-button,
.roi-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-num:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(194, 174, 125, 0.35); }
.roi-num--wide { width: 6.5ch; }
.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), rgba(194, 174, 125, 0.18) var(--fill, 50%));
  outline: none;
  cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(194, 174, 125, 0.45);
  cursor: pointer;
}
.roi-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(194, 174, 125, 0.45);
  cursor: pointer;
}
.roi__output { display: flex; flex-direction: column; gap: var(--space-5); }
.roi__output .roi-punch, .roi__output .roi-gain { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.roi-card--big {
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(194, 174, 125, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(244, 241, 236, 0.04), rgba(244, 241, 236, 0.015));
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.1);
}
.roi-big {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi-big__sub { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-subtle); }
.roi-bar { margin-bottom: var(--space-4); }
.roi-bar:last-child { margin-bottom: 0; }
.roi-bar__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.roi-bar__gold { color: var(--accent); }
.roi-bar__track {
  height: 7px;
  border-radius: 999px;
  background: rgba(194, 174, 125, 0.12);
  overflow: hidden;
}
.roi-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s var(--ease);
}
.roi-bar__fill--grey { background: rgba(244, 241, 236, 0.35); }
[data-theme="light"] .roi-bar__fill--grey { background: rgba(43, 30, 22, 0.35); }
.roi-bar__fill--gold { background: linear-gradient(90deg, rgba(194, 174, 125, 0.35), var(--accent)); }
.roi__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.roi-tile__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.roi-tile__num--gold {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi-tile__sub { margin-top: 0.3rem; font-size: 0.85rem; color: var(--text-subtle); }
/* --- Der ehrliche Check: Chips, Punch, Budget, Final --- */
.roi__chips-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2rem 0 calc(var(--space-6) + 1.5rem);
  text-align: center;
}
.roi__chips-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.roi__chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.6rem; }
.roi-chip { white-space: nowrap; }
@media (max-width: 60em) { .roi__chips { flex-wrap: wrap; } }
.roi-tutorial-row {
  max-width: 72rem;
  gap: 0.6rem;
  margin: 0 auto var(--space-3);
  display: flex;
  justify-content: flex-end;
}
.roi-tutorial-btn {
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6fc98a;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(111, 201, 138, 0.35);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.roi-tutorial-btn:hover { background: rgba(111, 201, 138, 0.1); }
[data-theme="light"] .roi-tutorial-btn { color: #2e8b4f; border-color: rgba(46, 139, 79, 0.4); background: rgba(46, 139, 79, 0.06); }
.roi-tutorial { position: relative; max-width: 72rem; margin: 0 auto var(--space-6); }
.roi-tutorial-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: #e0563f;
  border: 1px solid rgba(224, 86, 63, 0.45);
  border-radius: 50%;
  background: rgba(224, 86, 63, 0.08);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.roi-tutorial-close:hover { background: rgba(224, 86, 63, 0.18); box-shadow: 0 0 14px rgba(224, 86, 63, 0.3); }
.roi-tutorial__grid { display: grid; gap: var(--space-5); }
@media (min-width: 56em) { .roi-tutorial__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.roi-tutorial__sub {
  font-family: var(--font-grotesk);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.roi-tutorial__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
  list-style: none;
  padding: 0;
}
.roi-tutorial__list strong { color: var(--accent); font-weight: 600; }
/* Beispielrechnung als "Collegeblock"-Papier */
.roi-paper {
  margin-top: var(--space-5);
  background-color: #fbfaf6;
  background-image:
    linear-gradient(rgba(70, 120, 180, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 120, 180, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 22px rgba(194, 174, 125, 0.35), 0 10px 28px rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm, 8px);
  padding: 24px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.roi-paper:hover {
  transform: translateY(-4px);
  border-color: #e4d3a6;
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.55), 0 18px 44px rgba(0, 0, 0, 0.4);
}
.roi-paper .roi-tutorial__sub { color: #2b1e16; line-height: 48px; margin-bottom: 0; }
.roi-paper .roi-tutorial__list { color: #111111; line-height: 24px; font-weight: 600; }
.roi-paper .roi-tutorial__list strong { font-weight: 800; }
.roi-paper .roi-tutorial__list li { line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roi-paper .roi-tutorial__list strong { color: #8a6d3b; }
.roi-chip {
  font-family: var(--font-grotesk);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.roi-chip:hover { border-color: var(--accent); color: var(--text); }
.roi-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #191510;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(194, 174, 125, 0.35);
}
.roi-punch {
  position: relative;
  text-align: center;
  border-color: rgba(224, 131, 107, 0.35);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(224, 131, 107, 0.08), transparent 60%),
    linear-gradient(180deg, #201c18, #131009);
}
[data-theme="light"] .roi-punch { background: #ffffff; }
.roi-punch__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.7vw, 2.95rem);
  line-height: 1.05;
  color: #e0836b;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(224, 131, 107, 0.4);
}
.roi-punch__sub { margin-top: 0.7rem; font-size: 1.15rem; color: var(--text-subtle); }
.roi-punch__sub strong { color: var(--text); font-weight: 600; }
/* Die drei Staffelzeilen unter der Jahreszahl. Ohne Aufzaehlungspunkte, weil
   die Karte mittig gesetzt ist und Punkte dort schief stehen wuerden. */
.roi-punch__list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 1.15rem;
  color: var(--text-subtle);
}
.roi-punch__list strong { color: var(--text); font-weight: 600; }
#roi-cum-total { color: #e0836b; }
.roi-cur {
  position: static;
  align-self: center;
  margin: 0;
  display: flex;
  gap: 2px;
  border: 1px solid rgba(194, 174, 125, 0.35);
  border-radius: var(--radius-pill);
  padding: 2px;
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .roi-cur { background: rgba(43, 30, 22, 0.04); }
.roi-cur__btn {
  font-family: var(--font-grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.25rem 0.7rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.roi-cur__btn:hover { color: var(--text); }
.roi-cur__btn.is-active {
  background: var(--accent);
  color: #191510;
}
.roi-gain {
  border-color: rgba(194, 174, 125, 0.4);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(194, 174, 125, 0.1), transparent 60%),
    linear-gradient(180deg, #201c18, #131009);
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.12);
}
[data-theme="light"] .roi-gain { background: #ffffff; }
.roi-gain .roi-card__head,
.roi-gain .roi-field__hint { text-align: center; }
.roi-gain__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-4);
}
.roi-gain__item { min-width: 0; text-align: center; }
.roi-gain__sub { white-space: nowrap; }
@media (max-width: 40em) { .roi-gain__grid { grid-template-columns: 1fr; } }
.roi-gain__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  color: #6fc98a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(111, 201, 138, 0.5), 0 0 60px rgba(111, 201, 138, 0.22);
}
.roi-gain__grid.is-compact .roi-gain__num { font-size: clamp(1rem, 1.5vw, 1.4rem); }
.roi-gain__num { max-width: 100%; overflow-wrap: normal; }
.roi-gain__item { min-width: 0; }
.roi-gain__grid .roi-gain__num--gold { text-shadow: 0 0 14px rgba(194, 174, 125, 0.3); }
[data-theme="light"] .roi-gain__num {
  color: #2e8b4f;
  text-shadow: 0 0 20px rgba(46, 139, 79, 0.25);
}
.roi-gain__sub { margin-top: 0.25rem; font-size: 1rem; color: var(--text-subtle); }
.roi-gain__num--gold {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi-gain__num--white {
  color: var(--text);
  text-shadow: 0 0 20px rgba(244, 241, 236, 0.3);
}
[data-theme="light"] .roi-gain__num--white { text-shadow: none; }
.roi-win__range {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.7vw, 2.95rem);
  line-height: 1.1;
  text-align: center;
  color: #6fc98a;
  text-shadow: 0 0 24px rgba(111, 201, 138, 0.5), 0 0 60px rgba(111, 201, 138, 0.22);
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .roi-win__range { color: #2e8b4f; text-shadow: none; }
.roi-win__range--sm { font-size: clamp(1.05rem, 1.8vw, 1.35rem); margin-top: 0.9rem; opacity: 0.85; color: var(--text); text-shadow: 0 0 20px rgba(244, 241, 236, 0.3); }
[data-theme="light"] .roi-win__range--sm { color: var(--text); text-shadow: none; }
.roi-win__cap { text-align: center; font-size: 1.05rem; color: var(--text-subtle); margin: 0.7rem 0 var(--space-5); }
.roi-gain__grid--two { grid-template-columns: 1fr 1fr; }
#roi-win-expl { font-size: 1.1rem; }
@media (max-width: 40em) { .roi-gain__grid--two { grid-template-columns: 1fr; } }
.roi-bar__fill--green { background: linear-gradient(90deg, rgba(111, 201, 138, 0.35), #6fc98a); }
.roi-green { color: #6fc98a; }
[data-theme="light"] .roi-green { color: #2e8b4f; }
.roi-ba > .roi-field__hint { font-size: 1.05rem; }
.roi__disclaimer {
  max-width: 72rem;
  margin: var(--space-5) auto 0;
  text-align: center;
  font-size: 0.81rem;
  color: var(--text-subtle);
  line-height: 1.7;
}
.roi-more-row { max-width: 72rem; margin: calc(var(--space-5) + 1rem) auto 0; display: flex; justify-content: center; }
.roi-wide {
  max-width: 72rem;
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-5);
}
.roi-more-btn {
  font-family: var(--font-grotesk);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.7rem 1.6rem;
  border: 1px solid rgba(194, 174, 125, 0.45);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.roi-more-btn:hover {
  background: rgba(194, 174, 125, 0.18);
  box-shadow: 0 0 18px rgba(194, 174, 125, 0.3);
}
.roi-time { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.roi-time__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.roi-time__sub { font-size: 0.95rem; color: var(--text-subtle); }
.roi-budget__text { font-size: 1rem; line-height: 1.65; color: var(--text-muted); }
.roi-gold { color: var(--accent); font-weight: 600; }
.roi-budget__left {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.roi-budget__num {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi-final {
  max-width: 72rem;
  margin: var(--space-6) auto 0;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(194, 174, 125, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(244, 241, 236, 0.04), rgba(244, 241, 236, 0.015));
  box-shadow: 0 0 34px rgba(194, 174, 125, 0.1);
}
[data-theme="light"] .roi-final { background: #ffffff; }
.roi-final .roi-card__head { margin-bottom: var(--space-3); }
.roi-final__title {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.roi-final__title span {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.roi-final__text {
  margin: var(--space-3) auto 0;
  max-width: 52ch;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.roi-final__note { margin-top: var(--space-3); font-size: 0.8rem; color: var(--text-subtle); }
/* Karten-Überschriften und Regler-Labels im ROI-Rechner in Montserrat */
.roi-card__head,
.roi-field__row label {
  font-family: "Montserrat", sans-serif;
}
.roi-card__head,
.roi-field__row label,
.roi-bar__title,
#roi-ba-head { text-transform: none !important; letter-spacing: 0.02em; }
.roi-card--inputs .roi-field__row label { color: var(--accent); font-size: 0.92rem; font-weight: 700; }
.roi-card--inputs .roi-field { margin-bottom: 2.2rem; }
.roi-card--inputs .roi-field__hint { font-size: 0.98rem; margin-top: 0.7rem; }
.roi-card--inputs .roi-field__row { margin-bottom: 0.9rem; }
.roi__note {
  margin: var(--space-6) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-subtle);
}

/* ===========================================================
   Was Sie erwarten können (Vorteile)
   =========================================================== */
.section-expect { background: var(--bg); padding-block-start: clamp(3rem, 5.5vw, 5rem); }
.section-expect .eyebrow:empty { display: none; }
/* ===========================================================
   FAQ
   =========================================================== */
.section-faq { background: var(--bg); }
.section-faq .section__header--center { margin-bottom: 0; }
.faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(194, 174, 125, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(194, 174, 125, 0.1), rgba(194, 174, 125, 0.03));
  box-shadow: 0 0 24px rgba(194, 174, 125, 0.18);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  width: fit-content;
  margin-inline: auto;
}
.faq-badge svg { width: 18px; height: 18px; flex: 0 0 auto; }
.section-faq .section__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 56rem;
  margin: var(--space-7) auto 0;
}
.faq-item {
  background: linear-gradient(180deg, #1c1813, #120f0a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.faq-item:hover { border-color: rgba(194, 174, 125, 0.45); }
.faq-item[open] { border-color: rgba(194, 174, 125, 0.55); }
[data-theme="light"] .faq-item { background: #ffffff; border-color: rgba(43, 30, 22, 0.14); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 1.6rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__chev {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item__a {
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  padding: 0 1.6rem 1.5rem;
}

.section__header--center {
  text-align: center;
  align-items: center;
  max-width: 48rem;
  margin-inline: auto;
}
.offers__title {
  text-wrap: balance;
  max-width: 52ch;
  margin-inline: auto;
}
.section-offers .section__header--center { max-width: 80rem; }
/* Team-Foto als Hintergrund — beginnt auf Höhe von „So gehen wir bei dir vor:“ */
.section-offers {
  position: relative;
  overflow: hidden;
  padding-block-end: 0;
}
.offer-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -7rem;
  width: 100vw;
  aspect-ratio: 1366 / 768;
  background-image: url("../img/team-bno.png?v=2");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
  /* weiche Kanten oben/unten direkt am Bild statt Overlay über der Sektion */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section-offers > .section__inner {
  position: relative;
  z-index: 1;
}
.offers__subline {
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
  color: var(--text);
  font-size: 1.3rem;
  font-family: var(--font-grotesk);
  font-weight: 600;
}
.offers__lead {
  margin-top: var(--space-4);
  color: var(--text-muted);
  max-width: none;
  margin-inline: auto;
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 52rem;
  text-wrap: pretty;
}
/* Mehr Luft zwischen Titel und Hexagon-Anordnung */
#angebote .section__header {
  margin-bottom: calc(var(--space-5) + 1.6rem);
}
@media (max-width: 68em) { .lead-br { display: none; } }
.section-offers .section__header--center .offers__lead {
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  max-width: none;
}
.offers__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.expect__title {
  text-wrap: balance;
  line-height: 1.12;
  font-size: calc(var(--font-h2) * 1.3);
}
.expect__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.expect__grid {
  margin-top: calc(var(--space-8) + 1.5rem);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 52em) {
  .expect__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
.expect-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #201c18, #131009);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.expect-card:hover {
  border-color: rgba(194, 174, 125, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4);
}
.expect-card__icon {
  width: 7.5rem;
  height: 7.5rem;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: calc(var(--space-2) + 1.25rem);
}
.expect-card__icon svg { width: 100%; height: 100%; }
.expect-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.expect-card__title {
  font-family: var(--font-grotesk);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--text);
}
.expect-card__text {
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.6;
  max-width: 32ch;
}

/* ===========================================================
   Story — "Es ist nicht deine Schuld"
   =========================================================== */
.section-story { background: var(--bg); padding-block-start: calc(var(--space-8) + 3rem); }
.story__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 60em) {
  .story__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-4) var(--space-8);
    align-items: start;
    justify-content: center;
    max-width: 82rem;
    margin-inline: auto;
  }
  .story__text { grid-column: 1; grid-row: 1; max-width: none; justify-self: stretch; }
  /* Button mittig unter Bild und Bildunterschrift, etwas tiefer.
     Frueher stand hier justify-self:start plus ein fester Versatz von
     calc((440px - 430px) / 2) — der ging von einem 430px breiten Button aus
     und stimmte nach jeder Groessenaenderung nicht mehr. justify-self:center
     zentriert unabhaengig von der Buttonbreite in der Bildspalte. */
  .story__cta {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    justify-self: start;
    position: relative;
    top: calc(3rem - 85px);
    /* Die Bildspalte ist breiter als das Bild (487 gegen 440px), das Bild
       sitzt am Spaltenanfang. justify-self:center wuerde den Button deshalb
       in der Spalte zentrieren und damit 23px neben der Bildmitte landen.
       Stattdessen vom Spaltenanfang aus um die halbe Differenz zwischen
       Bildbreite (27.5rem) und Buttonbreite verschieben.

       Bewusst ueber left und nicht ueber transform: .btn--primary:hover setzt
       transform: translateY(-2px) und wuerde eine Verschiebung dort komplett
       ersetzen — der Button waere beim Ueberfahren um 76px nach links
       gesprungen. left und transform stoeren sich dagegen nicht. */
    left: calc((27.5rem - var(--cta-w, 288px)) / 2);
  }
  /* Schlusssatz auf Büttonhöhe absenken (ohne Layout-Höhe zu ändern) */
  .story__final {
    position: relative;
    top: calc(3.6rem - 55px);
  }
  .story__media {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 31rem;
  }
}
.story__title {
  font-size: clamp(2.45rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.story__title em {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.story__lead {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1.5;
}
.story__p {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 1.22rem;
  line-height: 1.5;
}
.story__list {
  list-style: none;
  margin: calc(var(--space-5) + 0.6rem) 0;
  padding: 0 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Gleicher Abstand über und unter der Liste */
.story__list + .story__p { margin-top: 0; }
.story__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-muted);
  font-size: 1.22rem;
  line-height: 1.4;
}
.story__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.story__strong { color: var(--text); font-weight: 700; }
.story__final {
  color: var(--accent);
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 1.38rem;
}
.story__cta {
  margin-top: var(--space-4);
  padding: 0.7rem 1.5rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

.story__media {
  margin: 0;
  width: 100%;
  max-width: 27.5rem;
  display: flex;
  flex-direction: column;
}
.story__photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  background-color: #0a0907;
  background-image: url("../img/founder.jpg?v=3");
  background-size: cover;
  background-position: center 18%;
  aspect-ratio: 440 / 530;
}
.story__caption {
  margin: var(--space-3) 0 0;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-muted);
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Hellmodus: kräftigere Deckkraft, damit die Zeile über dem Bildschatten lesbar bleibt */
:root:not([data-theme="dark"]) .story__caption {
  color: var(--text);
}

/* ===========================================================
   Scroll-Reveal
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Light-Theme: Karten bleiben weiss (Fix nach Verlaufs-Vereinheitlichung) */
[data-theme="light"] .tm-card,
[data-theme="light"] .tm-card__media,
[data-theme="light"] .exp-card,
[data-theme="light"] .cases__strip,
[data-theme="light"] .expect-card {
  background: #ffffff;
}

/* ===========================================================
   Rechtliche Seiten (Impressum / Datenschutz)
   =========================================================== */
.legal-page { padding-block: clamp(6rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem); }
.legal-page__inner { max-width: 74rem; }
.legal-page .section__title { margin-bottom: var(--space-6); }
.legal-page__back { white-space: nowrap; }
.legal-page .legal-modal__text { color: var(--text-muted); font-size: 1.25rem; line-height: 1.7; margin: 0 0 var(--space-4); }
.legal-page .legal-modal__sub { font-family: var(--font-grotesk); font-weight: 700; font-size: 1.5rem; color: var(--text); margin: var(--space-6) 0 var(--space-3); }
.legal-page .legal-modal__title--section { font-family: var(--font-grotesk); font-weight: 800; font-size: 1.5rem; color: var(--text); margin: var(--space-7) 0 var(--space-4); }
.legal-page .legal-modal__sub--minor { font-size: 1rem; color: var(--accent); }
.legal-page .legal-modal__list { color: var(--text-muted); line-height: 1.7; padding-left: 1.4rem; margin: 0 0 var(--space-4); list-style: disc; }
.legal-page a { color: var(--accent); word-break: break-word; }

/* Impressum: Hero-Banner */
.legal-hero {
  width: 100%;
  min-height: clamp(20rem, 55vh, 34rem);
  background: #0d0b08 url("../img/impressum-hero.png") center 12% / cover no-repeat;
  background-attachment: fixed;
  position: relative;
}
.legal-hero--plain {
  background: transparent;
  min-height: clamp(12rem, 32vh, 20rem);
  display: flex;
  align-items: flex-end;
}
.legal-hero--plain .legal-hero__title { margin: 0 auto; width: 100%; max-width: 74rem; padding: 0 var(--space-5, 1.5rem); }
.legal-hero__title {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 0.782rem + 4.131vw, 4.5rem); /* 28 → 72 */
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
  margin: 0;
}
@media (hover: none), (max-width: 48em) {
  .legal-hero { background-attachment: scroll; }
}
.legal-hero:not(.legal-hero--plain)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 241, 236, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 236, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.legal-page--karo,
[data-theme="dark"] .section.legal-page--karo {
  background-color: transparent;
  background-image: none;
}
[data-theme="light"] .legal-page--karo {
  background-image:
    linear-gradient(rgba(43, 30, 22, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 30, 22, 0.06) 1px, transparent 1px);
}
.legal-page--karo { padding-top: clamp(3rem, 7vh, 5rem); }
/* Scroll-Effekt: Inhalt schiebt sich als Karte über das fixe Hero-Bild */
.legal-page--karo {
  position: relative;
  z-index: 1;
}
.legal-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.legal-reveal.is-visible { opacity: 1; transform: none; }

.legal-title--gold {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(194, 174, 125, 0.55), 0 0 60px rgba(194, 174, 125, 0.25);
}

/* Footer: mehrspaltiges Layout */
.site-footer__grid {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  grid-template-columns: minmax(10rem, auto) repeat(4, auto);
  justify-content: center;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.site-footer__grid > *:first-child { margin-right: 4rem; }
@media (max-width: 64em) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer__logo { height: 44px; width: auto; }
.site-footer__head {
  font-family: var(--font-grotesk);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text);
  margin: 0 0 0.9rem;
}
.site-footer__col { display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-base);
  transition: color 0.2s ease, transform 0.25s ease;
  transform: translateX(0);
  will-change: transform;
}
.site-footer__col a:hover { color: var(--text); transform: translateX(6px); }

/* Kontakt-CTA: Bildhintergrund mit weichem Verlauf wie bei Angebote */
.section-contact {
  position: relative;
  overflow: hidden;
}
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/contact-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section-contact > .section__inner { position: relative; z-index: 1; }

.site-footer__disclaimer {
  max-width: 90rem;
  margin: 2.5rem auto 0;
  padding: 0 var(--space-5);
  text-align: center;
  font-size: clamp(0.8125rem, 0.769rem + 0.188vw, 0.9375rem); /* 13 → 15 */
  line-height: 1.7;
  color: rgba(244, 241, 236, 0.55);
}

.site-footer__social { margin-top: 1.4rem; }
.site-footer__social-head {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.871rem + 0.282vw, 1.125rem); /* 15 → 18 */
  color: var(--gold, #c2ae7d);
  margin: 0 0 0.8rem;
}
.site-footer__social-icons { display: flex; gap: 0.9rem; margin-left: -6px; }
.site-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #c2ae7d;
  transition: color 0.2s ease, transform 0.2s ease;
}
.site-footer__social-icons a:hover { color: #e4d3a6; transform: translateY(-2px); }
.site-footer__social-icons svg { width: 32px; height: 32px; }

.site-footer__copy a { color: inherit; text-decoration: none; }
.site-footer__copy a:hover { color: #c2ae7d; }

.site-footer__legal-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin: 2rem 0 0.8rem;
  font-size: 0.95rem;
}
.site-footer__legal-links a { color: rgba(244, 241, 236, 0.75); text-decoration: none; font-size: clamp(0.9375rem, 0.871rem + 0.282vw, 1.125rem); }
.site-footer__legal-links a:hover { color: #c2ae7d; }
.site-footer__legal-links span { color: rgba(244, 241, 236, 0.35); }
[data-theme="light"] .site-footer__legal-links a { color: rgba(43, 30, 22, 0.75); }
[data-theme="light"] .site-footer__legal-links a:hover { color: #8a6d3b; }
[data-theme="light"] .site-footer__legal-links span { color: rgba(43, 30, 22, 0.35); }
.site-footer__copy { line-height: 1.7; font-size: clamp(0.875rem, 0.809rem + 0.282vw, 1.0625rem); }

.compliance__badge .badge-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }

/* Einheitliche Größe/Dicke aller Sektions-Überschriften (Referenz: .cases__title) */
.section__title,
.exp__title,
.story__title,
.convince__title,
.section-contact__title,
.compliance__title {
  font-size: clamp(1.625rem, 0.824rem + 3.418vw, 3.9rem); /* 26 → 62.4 */
  font-weight: 700;
  line-height: 1.12;
}
@media (min-width: 52em) {
  .compliance__title { white-space: normal; }
}

/* Fallstudien-Headline sicher auf 2 Zeilen */
.cases__title { max-width: none; margin-inline: auto; font-size: clamp(1.5rem, 3.75vw, 3.9rem); font-weight: 700; }
.cases__head { max-width: 96rem; }
.cases__line { display: block; white-space: nowrap; }

/* Story-Headline auf einer Zeile */
.story__title { white-space: nowrap; font-size: clamp(1.5rem, 0.866rem + 2.704vw, 3.3rem); /* 24 → 52.8 */ }

/* Expect-Headline auf 2 Zeilen */
.expect__title { max-width: none; font-size: clamp(1.625rem, 0.824rem + 3.418vw, 3.9rem); /* 26 → 62.4 */ }
.expect__title br { display: none; }

[data-theme="light"] .exp-card__title { color: var(--color-brown, #5a4426); }
[data-theme="light"] .exp-card__tags span { color: var(--color-brown, #5a4426); border-color: rgba(90, 68, 38, 0.28); }

[data-theme="light"] .roi-slider {
  background: linear-gradient(90deg, var(--color-brown, #5a4426) var(--fill, 50%), rgba(90, 68, 38, 0.18) var(--fill, 50%));
}
[data-theme="light"] .roi-slider::-webkit-slider-thumb {
  background: var(--color-brown, #5a4426);
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(90, 68, 38, 0.8), 0 0 10px rgba(90, 68, 38, 0.3);
}
[data-theme="light"] .roi-slider::-moz-range-thumb {
  background: var(--color-brown, #5a4426);
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(90, 68, 38, 0.8), 0 0 10px rgba(90, 68, 38, 0.3);
}

[data-theme="light"] .roi-more-btn {
  color: var(--color-brown, #5a4426);
  border-color: rgba(90, 68, 38, 0.45);
}

/* Hover-Effekt der Problem-Karten auch für die ROI-Karten */
[data-theme="light"] .roi-card,
[data-theme="light"] .roi-final { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); }
[data-theme="light"] .roi-bar { box-shadow: none; }

[data-theme="light"] .tm-badge {
  color: var(--color-brown, #5a4426);
  border-color: rgba(90, 68, 38, 0.4);
}
[data-theme="light"] .tm-badge svg { color: var(--color-brown, #5a4426); }

[data-theme="light"] .tm-card { background-color: #fcfbfb; }

[data-theme="light"] .tm-stat dd,
[data-theme="light"] .tm-stat--up,
[data-theme="light"] .tm-stat--blank dd { color: var(--color-brown, #5a4426); }

[data-theme="light"] .step-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); }

[data-theme="light"] .founder-card__photo { box-shadow: 0 0 22px rgba(43, 30, 22, 0.35), 0 20px 50px rgba(0, 0, 0, 0.3); }

[data-theme="light"] .tm-card,
[data-theme="light"] .tm-nav { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); }

[data-theme="light"] .story__photo { box-shadow: 0 0 22px rgba(43, 30, 22, 0.35), 0 20px 50px rgba(0, 0, 0, 0.3); }

[data-theme="light"] .compliance-card__icon { color: var(--color-brown, #5a4426); }
[data-theme="light"] .compliance-card__icon img { filter: brightness(0.55) saturate(0.85); }

[data-theme="light"] .site-footer__disclaimer { color: rgba(43, 30, 22, 0.75); }


/* ===========================================================
   Responsive-Layer — Mobile (375) → Tablet (768) → Desktop (1440+)

   Die Skalierung selbst passiert in tokens.css über clamp()-Skalen
   (Typo, Spacing, Button-/Karten-/Medien-Maße). Hier stehen nur noch
   Umbruch- und Stapel-Regeln pro Breakpoint — keine festen px mehr.
   =========================================================== */

/* --- Root-Skala: rem-Basis pro Geräteklasse (Zoom 25–200 % sicher) --- */
@media (max-width: 359px) { html { font-size: 14px; } }
@media (min-width: 360px) and (max-width: 767px) { html { font-size: 15px; } }
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 19px; } }

/* --- Textfluss: Editor-nowrap und lange Wörter umbrechen lassen --- */
@media (max-width: 1279px) {
  .section__title [style*="nowrap"] { white-space: normal !important; }
  .cases__line { display: inline; white-space: normal; }
  .tm__title { white-space: normal; text-wrap: balance; }
  .story__title { white-space: normal; }
  .roi__chips { flex-wrap: wrap; }
}
@media (max-width: 1023px) {
  .roi__title { max-width: none; }
  .site-footer a, .site-footer p { overflow-wrap: anywhere; }
  .expect-card, .exp-card, .compliance-card { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
  .expect-card__title, .exp-card__title, .compliance-card__title { overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
}

/* --- Mobil (bis 767px): alles einspaltig, nichts läuft über --- */
@media (max-width: 767px) {
  :root { --container: 100%; }

  /* Kein neuronales Netzwerk auf dem Handy. Die Glow-Verlaeufe liegen als
     background-image auf .bg-neural selbst und bleiben davon unberuehrt —
     nur der Canvas mit der Netz-Animation wird ausgeblendet. */
  .bg-neural canvas { display: none; }

  /* Integrations-Leiste: Ueberschrift naeher an den Hero ruecken. Die
     Basis-Werte (88px oben, 37px darunter) sind fuer Desktop gedacht. */
  .logo-bar { margin-top: clamp(1.75rem, 4vh, 2.75rem); }
  .logo-bar__head { margin-bottom: var(--space-7); }

  /* Kompakte Chips statt grosser Karten: nur Icon und Name, ohne die
     Zeile darunter — entspricht dem Referenz-Layout. */
  .int-card {
    min-width: 0;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
  }
  .int-card__icon {
    width: auto;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.15rem;
    font-size: 0.8rem;
    border-radius: 5px;
  }
  /* Acht Logos tragen Inline-Groessen aus der Zeit der grossen 56px-Box
     (bis 3.125rem) und sprengten die kompakte Chip-Box. Inline-Styles
     schlagen das Stylesheet, daher !important. width/height auto plus
     max-* laesst jedem Logo sein Seitenverhaeltnis, statt breite Marken
     wie AWS oder VS Code in ein Quadrat zu quetschen. */
  .int-card__icon img {
    width: auto !important;
    height: auto !important;
    max-width: 1.45rem;
    max-height: 1.05rem;
  }
  .int-card__sub { display: none; }
  .int-card__name { font-size: 0.9rem; }

  /* Glow-Akzente ueber die ganze Seitenlaenge, als EINE durchgehende Ebene
     ueber <main>. Frueher hatte jede Sektion ihren eigenen Verlauf mit
     Mittelpunkt auf der Sektionskante (at 50% 0%) — dort ist der Glow am
     hellsten und wurde von der Kante abgeschnitten, was eine harte Linie
     ergab. Auf einer durchgehenden Ebene gibt es keine Kanten mehr.
     Die Mittelpunkte wandern nach unten und wechseln dabei die Seite;
     der vertikale Radius ist in px gesetzt, damit die Glows unabhaengig
     von der Seitenlaenge gleich gross bleiben. */
  [data-theme="dark"] main { position: relative; }
  [data-theme="dark"] main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(ellipse 75% 420px at  50% 14%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 55% 420px at 100% 26%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 55% 420px at   0% 38%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 75% 420px at  50% 50%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 55% 420px at 100% 62%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 55% 420px at   0% 74%, rgba(194, 174, 125, 0.07), transparent 70%),
      radial-gradient(ellipse 75% 420px at  50% 86%, rgba(194, 174, 125, 0.07), transparent 70%);
  }

  /* Statt des Netzwerks das Karo-Raster (gleiche Werte wie auf den
     Rechtsseiten). Bewusst als ::after-Ebene, damit die fuenf
     Glow-Verlaeufe im background-image unangetastet bleiben. */
  /* Goldener Glow in die Mitte statt an den oberen Rand. Die Basis setzt ihn
     auf "50% -5%" und "50% 0%", also oberhalb bzw. genau an der Oberkante —
     dadurch leuchtete er hinter dem Header. .bg-neural ist position:fixed,
     die Mitte bezieht sich also auf den Bildschirm und bleibt beim Scrollen
     dort. Die drei dunklen Vignetten bleiben unveraendert. */
  [data-theme="dark"] .bg-neural {
    background-image:
      radial-gradient(ellipse 85% 50% at 50% 50%, rgba(194, 174, 125, 0.15) 0%, transparent 60%),
      radial-gradient(ellipse 40% 25% at 50% 50%, rgba(220, 200, 150, 0.06) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 15% 65%, rgba(43, 30, 22, 0.4) 0%, transparent 55%),
      radial-gradient(ellipse 60% 40% at 85% 65%, rgba(43, 30, 22, 0.3) 0%, transparent 55%),
      radial-gradient(ellipse 40% 30% at 50% 110%, rgba(20, 12, 4, 0.95) 0%, transparent 50%);
  }

  [data-theme="dark"] .bg-neural::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(244, 241, 236, 0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244, 241, 236, 0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
  }

  /* Abstand zu den Statistik-Boxen darueber. Der Schatten unten ist nach
     unten versetzt, dadurch reicht er nur noch 24px nach oben statt 57px
     (Rechnung: Weichzeichnung + Ausdehnung - Versatz). Deshalb genuegt hier
     rund die Haelfte des vorherigen Abstands. */
  .section-hero__mockup--photo { margin-top: clamp(2.25rem, 2rem + 1.2vw, 3rem); }

  /* Hero-Foto: der weiche Einblend-Verlauf an der Oberkante (mask-image)
     entfaellt. Radius und Schatten sind bewusst dieselben Werte wie in der
     Desktop-Regel (ab 60em) — dort war das Foto schon so gestaltet, nur
     Mobil hing noch an der Basis-Regel mit der Maske. */
  .section-hero__photo {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 18px;
    /* Nach unten versetzt statt rundum: oben nur noch 24px Reichweite
       (36 Weichzeichnung + 4 Ausdehnung - 16 Versatz), unten unveraendert
       kraeftig. So bleibt der Schatten sichtbar, ohne nach oben zu stoeren. */
    box-shadow: 0 16px 36px 4px rgba(0, 0, 0, 0.55);
  }

  /* Header fährt beim Runterscrollen weg und beim Hochscrollen zurück.
     Der Anker-Versatz kommt bereits aus .section { scroll-margin-top }. */
  .site-header {
    position: fixed;
    transition: transform 280ms var(--ease),
                border-color var(--transition),
                background var(--transition);
    will-change: transform;
  }
  .site-header.is-hidden { transform: translateY(-100%); }

  /* Grids stapeln */
  .cases__grid, .expect__grid, .compliance__grid,
  .step__cards, .roi-grid, .roi__output,
  .tm-card, .convince { grid-template-columns: minmax(0, 1fr) !important; }
  .exp__stats, .section-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }

  /* Hero-Statistiken als vier gleich hohe Boxen — Rahmen, Radius,
     Hintergrund und Innenabstand wie der "Angebote ansehen"-Balken.
     Die Trennlinie des Containers entfaellt, die Boxen gliedern selbst. */
  .section-hero__stats {
    grid-auto-rows: 1fr;
    border-top: 0;
    padding-top: 0;
  }
  .section-hero__stats .stat {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.8rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(244, 241, 236, 0.04);
  }
  [data-theme="light"] .section-hero__stats .stat { background: rgba(43, 30, 22, 0.04); }
  /* Kennzahlen und Labels kompakter. Die grosse Zeilenhoehe (36px bei
     22.5px Schrift) trieb die Boxen zusaetzlich auseinander. */
  .section-hero__stats .stat__value {
    font-size: clamp(1.05rem, 0.817rem + 1.53vw, 1.6rem);
    line-height: 1.2;
  }
  .section-hero__stats .stat__label { font-size: 0.58rem; }
  .site-footer__grid > *:first-child { margin-right: 0; grid-column: 1 / -1; }

  /* Flex-Reihen umbrechen statt überlaufen */
  .cases__strip, .roi-tutorial-row, .tm-stats,
  .site-footer__social-icons, .site-footer__legal-links { flex-wrap: wrap; }
  .case-tile { flex: 1 1 100%; }
  .roi-tutorial-row, .team-collage { justify-content: center; }

  /* --- Team-Sektion: Fotos paarweise in den Textfluss ---
     Die sechs Fotos liegen im Markup als zwei Spalten mit je drei Bildern.
     Die sichtbaren Paare entstehen erst quer ueber beide Spalten, lassen
     sich als Paar also nicht verschieben, solange die Container bestehen.
     Deshalb werden Textspalten, Fotospalte und Collage samt ihren beiden
     Unterspalten per display:contents aufgeloest: Textbloecke, Logo und alle
     sechs Bilder werden dadurch unmittelbare Elemente des .team__grid und
     einzeln per order sortierbar.

     Das Raster laeuft dafuer mobil zweispaltig. Text und Logo ueberspannen
     beide Spalten, jedes Bild belegt eine Zelle — zwei aufeinanderfolgende
     Bilder bilden damit von selbst eine Reihe.

     Bewusst ohne Aenderung am Markup, damit das dreispaltige Desktop-Layout
     unberuehrt bleibt. */
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__grid > .team__col,
  .team__grid .team-collage,
  .team__grid .team-collage__col { display: contents; }
  .team__grid .team__block,
  .team__grid .team__logo { grid-column: 1 / -1; }
  /* Bilder fuellen ihre Zelle, statt mit 91px darin zu schwimmen. */
  .team__grid .team-collage__img { width: 100%; }
  /* MA01.png und MA03.png haben eine helle Pixelzeile am unteren Rand
     eingebrannt (Helligkeit 108 bzw. 79 gegen 75 bzw. 29 in den Zeilen
     darueber) — sichtbar als weisser Strich unter dem Foto. Das Seitenver-
     haeltnis ist deshalb zwei Quellzeilen flacher als die Datei (152/163
     statt 152/165); mit object-position am oberen Rand schneidet cover genau
     unten ab. 1.2% Hoehe, praktisch nicht wahrnehmbar. */
  .team__grid .team-collage__img {
    aspect-ratio: 152 / 163;
    object-position: center top;
  }

  /* Reihenfolge. Die Bilder tragen keine eigenen Klassen, deshalb ueber ihre
     Ursprungsspalte adressiert: die erste Spalte enthaelt MA5, MA4, MA8, die
     zweite (--offset) Maneu1, MA3, MA2. */
  .team-collage__col:not(.team-collage__col--offset) > .team-collage__img:nth-child(1),
  .team-collage__col--offset > .team-collage__img:nth-child(1) {
    /* MA5 + Maneu1 bleiben oben unter der Ueberschrift */
    order: -2;
  }
  .team-collage__col--offset > .team-collage__img:nth-child(1) { order: -1; }

  .team__grid > .team__col:nth-child(1) > .team__block { order: 1; }
  /* MA4 + MA3 hinter "Deine Ansprechpartner" */
  .team-collage__col:not(.team-collage__col--offset) > .team-collage__img:nth-child(2) { order: 2; }
  .team-collage__col--offset > .team-collage__img:nth-child(2) { order: 3; }

  .team__grid > .team__col:nth-child(2) > .team__block:nth-child(1) { order: 4; }
  /* MA8 + MA2 hinter "Deine Begleitung" */
  .team-collage__col:not(.team-collage__col--offset) > .team-collage__img:nth-child(3) { order: 5; }
  .team-collage__col--offset > .team-collage__img:nth-child(3) { order: 6; }

  .team__grid > .team__col:nth-child(2) > .team__block:nth-child(2) { order: 7; }
  /* BNO-Logo mobil ausgeblendet. Nur per CSS, damit es auf dem Desktop
     erhalten bleibt — dort steht es weiterhin in der ersten Textspalte. */
  .team__grid > .team__col:nth-child(1) > .team__logo { display: none; }
  /* Ueberschrift der Sektion zentriert. */
  .team__title { text-align: center; }

  /* Abstand zwischen der Sektions-Headline und "Schritt 1" verkleinern. Die
     Basis setzt calc(var(--space-7) + 5rem) = 103.5px; die 5rem sind der
     Hauptanteil, mobil reichen 3rem. Der obere Rand des ersten .step betraegt
     36px und faellt mit diesem Rand zusammen — der groessere gewinnt. */
  .section-steps .section__header--center {
    margin-bottom: calc(var(--space-7) + 3rem);
  }
  /* "Schritt 1/2/3" von 34.5px auf die Groesse der Sektions-Headline. Bewusst
     dasselbe Token wie dort (--fs-4xl = 25.15px), damit beide zusammen
     skalieren, statt einen festen Wert zu setzen. */
  .step__title { font-size: var(--fs-4xl); }
  /* Zwischentitel der Schritte auf Sub-Headline-Groesse (war 18px). px statt
     rem, weil die Wurzel-Schriftgroesse mobil fluid skaliert. */
  .step__sub { font-size: 14px; }
  /* Einleitungstext jedes Schritts ebenfalls auf 14px (war 16.95px). Gilt
     durch den Klassenselektor automatisch fuer alle drei Schritte. */
  .step__text { font-size: 14px; }
  /* Waehrungswahl und Tutorial klebten am Lead-Text darueber (-2px), also
     Abstand nach oben und zum Rechner darunter. */
  .roi-tutorial-row { margin-block: var(--space-6) var(--space-5); gap: var(--space-4); }

  /* Erlaeuternde Texte im ROI-Rechner auf Sub-Headline-Groesse. Sie lagen
     zwischen 15 und 18px und wirkten dadurch wie eigene Zwischentitel,
     obwohl es Fliesstext ist. */
  .roi-punch__sub,
  .roi-win__cap,
  .roi-gain__sub,
  .roi-final__text { font-size: var(--fs-base); line-height: 1.55; }
  /* Diese beiden Erlaeuterungen brauchen eigene Selektoren: die Basis
     steuert sie ueber #roi-win-expl (ID) bzw. .roi-ba > .roi-field__hint,
     beide spezifischer als ein einfacher Klassenselektor. Die kleinen
     Hinweise unter den Reglern bleiben bewusst wie sie sind. */
  /* Die beiden Rechenwege-Erlaeuterungen auf glatte 10px. px statt rem,
     weil die Wurzel-Schriftgroesse mobil fluid skaliert und der Wert exakt
     getroffen werden soll. */
  #roi-win-expl,
  .roi-ba > .roi-field__hint { font-size: 10px; line-height: 1.7; }

  /* Die Blaetter-Leiste wird per top:-3.5rem in die Karte gezogen. Auf dem
     Desktop ist das gewollt, mobil ragt sie 8px ins Feld hinein. Hier steht
     sie darunter, mit eigenem Abstand nach unten zu den Kurz-Stimmen. */
  .tm-nav { top: 0; margin-bottom: var(--space-5); }

  /* Karussell ohne Hoehensprung. Bisher stand nur die aktive Karte im Fluss
     (display:none fuer die uebrigen), dadurch folgte die Liste deren Hoehe —
     1236 / 1318 / 1379px, also bis zu 143px Versatz bei jedem Wechsel; alles
     darunter rutschte mit.

     Jetzt liegen alle drei in derselben Grid-Zelle. Die Zelle ist damit immer
     so hoch wie die groesste Karte und aendert sich beim Blaettern nicht.
     Die inaktiven werden per visibility ausgeblendet statt per display, denn
     display:none wuerde sie wieder aus der Groessenberechnung nehmen.
     Bewusst die groesste und nicht die erste Karte als Mass: auf 1236px
     gezwungen wuerden den beiden anderen 143px Text fehlen. */
  .tm-list { display: grid; }
  .tm-list > .tm-card {
    grid-area: 1 / 1;
    display: grid;
    visibility: hidden;
  }
  .tm-list > .tm-card.is-active { visibility: visible; }

  /* Kennzahlen zweispaltig im Raster statt im umbrechenden Flex. Als Flex
     wurde jede Zelle so breit wie ihr Inhalt, dadurch begann die zweite
     Spalte je Reihe an anderer Stelle: 110/107px in Karte 1, 150/107px in
     Karte 2 und 123/133px in Karte 3. Zwei gleich breite Spalten setzen die
     Kante fest, unabhaengig von der Laenge der Beschriftung. */
  .tm-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Lange Beschriftungen brechen in der halben Spalte um — "KI-AUTOMATI-
     SIERUNGEN" braucht 142px bei 126px Spaltenbreite. Der Wert darunter
     rutschte dadurch eine Zeile tiefer als der des Nachbarn. Im Raster sind
     die Zellen einer Reihe gleich hoch, deshalb den Wert an die Unterkante
     heften: dann liegen beide Werte auf einer Linie, egal wie viele Zeilen
     die Beschriftung braucht. */
  .tm-stat {
    display: flex;
    flex-direction: column;
  }
  .tm-stat dd { margin-top: auto; }

  /* CTA der Kundenstimmen exakt wie der CTA der Angebote-Sektion. Er trug
     keine eigene Klasse, daher ueber den Sektions-Container adressiert.
     Dieselben Werte wie bei main .offer-stage .btn; der obere Abstand von
     2.5rem bleibt, weil der Button dort unter dem laufenden Band steht. */
  .section-testimonial__inner .btn.btn--primary {
    width: calc(100% - 2rem) !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
  }
  /* Der harte Umbruch ist global auf Mobil ausgeblendet, damit die uebrigen
     CTAs einzeilig bleiben — hier gezielt wieder einblenden. */
  .section-testimonial__inner .btn.btn--primary br { display: inline; }

  /* CTA der Kontakt-Sektion auf dieselbe Optik. Er trägt wie der der
     Kundenstimmen keine eigene Klasse, daher ueber den Sektions-Container.
     Der obere Abstand von 2.5rem bleibt. */
  .section-contact__inner .btn.btn--primary {
    width: calc(100% - 2rem) !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
  }
  .section-contact__inner .btn.btn--primary br { display: inline; }

  /* Die drei CTAs in den Schritten auf dieselbe Optik. Zwei Klassen im
     Selektor sind noetig, weil main .btn Breite und Schriftgroesse per
     !important setzt. */
  main .btn.step__cta {
    width: calc(100% - 2rem) !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
  }
  main .btn.step__cta br { display: inline; }

  /* CTA unter die letzte Karte des jeweiligen Schritts. Er liegt im Markup
     innerhalb von .step__intro, also vor den Karten; per order allein kaeme
     er nie dahinter. display:contents loest das Intro auf, sodass Titel,
     Zwischentitel, Text, Kartenraster und Button gemeinsam Elemente des
     .step sind und einzeln sortierbar werden.

     row-gap des .step wird dabei auf 0 gesetzt: die Intro-Kinder brachten
     ihre Abstaende schon als Margins mit (11.34px unter dem Titel, 11.25px
     unter dem Zwischentitel), ein zusaetzlicher Raster-Abstand von 20.85px
     wuerde obendrauf kommen statt zu verschmelzen. Die 21px zwischen Text
     und Karten reiche ich deshalb gezielt als margin-top nach. */
  .step { row-gap: 0; }
  .step > .step__intro { display: contents; }
  .step > .step__cards { order: 1; margin-top: var(--space-6); }

  /* Karten als versetzte Kaskade wie im Referenzbild: schmaler als die
     Spalte, abwechselnd links und rechts angeschlagen und nach oben
     ueberlappend. Farben, Rahmen und der farbige Balken unten
     (.step-card::after) bleiben unveraendert.

     row-gap auf 0, weil die Ueberlappung ueber einen negativen margin-top
     laeuft — ein Raster-Abstand wuerde ihn erst wieder aufheben.
     grid-auto-rows und min-height zurueckgesetzt: die Basis erzwingt gleich
     hohe Zeilen und 21.7rem Mindesthoehe, im Referenzbild richtet sich jede
     Karte nach ihrem Text.
     position: relative sorgt fuer die Stapelfolge — spaetere Karten liegen
     dadurch ueber den frueheren, ohne eigene z-index-Werte. */
  .step__cards {
    row-gap: 0;
    grid-auto-rows: auto;
  }
  .step-card {
    width: 64%;
    min-height: 0;
    position: relative;
  }
  .step-card:nth-child(odd) { justify-self: start; }
  .step-card:nth-child(even) { justify-self: end; }
  /* Ueberlappung von 26px auf 11px: bei 26px setzte die naechste Karte 1px
     ueber der Textunterkante der vorherigen an, beruehrte den Text also
     direkt. Mit 11px bleiben rund 14px Luft, die Kaskade bleibt erhalten —
     der Versatz greift dann nur noch in den Bereich des farbigen Balkens. */
  .step-card + .step-card { margin-top: -0.75rem; }
  /* Ueberschrift und Text weiter nach oben: der Abstand unter dem goldenen
     Label war mit 25.5px der groesste in der Karte. Der farbige Balken unten
     hat margin-top:auto und bleibt dadurch an der Unterkante. */
  .step-card__label { margin-bottom: 0.6rem; }

  /* FAQ kompakter: Frage von 17.25 auf 15.07px, Antwort von 15.75 auf 14px.
     Die Zeilenhoehe der Antwort geht von 1.7 auf 1.55 — denselben Wert nutzt
     der uebrige Fliesstext; sie machte die Boxen zusaetzlich hoch. Die
     Abstufung Frage/Antwort bleibt erhalten. */
  .faq-item__q { font-size: var(--fs-md); }
  .faq-item__a { font-size: 14px; line-height: 1.55; }
  /* Flachere Fragezeilen: die Polsterung lag bei 20.25px oben und unten und
     machte den Hauptteil der Bauhoehe aus. */
  .faq-item__q { padding-block: 0.8rem; }

  /* Foto unter die Ueberschrift "Ueberzeuge dich selbst...". Es ist im
     Markup ein Geschwister des Panels und stand deshalb darueber; die
     Ueberschrift liegt im Panel. display:contents loest das Panel auf,
     sodass Ueberschrift, Absaetze und Button gemeinsam mit dem Foto
     Elemente des .convince sind und per order sortierbar werden.

     Das Panel ist eine sichtbare Box — Hintergrund, Rahmen, Radius und
     Innenabstand wandern deshalb auf .convince, sonst waere sie beim
     Aufloesen verloren. Das Markup bleibt unberuehrt, weil Foto und Panel
     auf dem Desktop einander ueberlappen (padding-left: 240px am Panel).

     Der Innenabstand wird auf .convince gezogen, gleichzeitig muss die
     Sektion ihn wieder ausgleichen — sonst waere der Block schmaler als
     die uebrigen. */
  .convince {
    background: linear-gradient(180deg, #201c18, #131009);
    border: 1px solid rgba(194, 174, 125, 0.18);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    row-gap: var(--space-5);
  }
  /* Hell-Variante, die beim Uebertragen der Panel-Box zunaechst fehlte: die
     Box blieb dadurch im weissen Design dunkel, waehrend Ueberschrift und
     Text auf Braun umschalteten — beides war kaum lesbar. Werte wie zuvor
     bei [data-theme="light"] .convince__panel. */
  [data-theme="light"] .convince {
    background: #ffffff;
    border-color: rgba(43, 30, 22, 0.14);
    box-shadow: 0 10px 30px rgba(43, 30, 22, 0.08);
  }
  .convince__panel {
    display: contents;
  }
  .convince__title { order: 0; }
  .convince__photo { order: 1; }
  .convince__text { order: 2; }
  .convince .btn.convince__cta { order: 3; }
  /* Optik wie die uebrigen CTAs (Angebote, Schritte, Testimonials): 15px
     Schrift, zweizeilig, gleiche Polsterung.
     Drei Klassen im Selektor: "main .btn.convince__cta" setzt weiter unten
     im Stylesheet eine eigene Schriftgroesse und Polsterung per !important;
     bei gleicher Spezifitaet gewinnt die spaetere Regel, deshalb hier eine
     Klasse mehr statt derselben Auswahl.
     Breite 100%, weil .convince seit dem Aufloesen des Panels selbst
     20.85px Innenabstand traegt — ein zusaetzliches calc(100% - 2rem)
     wuerde den Button doppelt einziehen. */
  main .convince .btn.convince__cta {
    width: 100% !important;
    margin-inline: auto !important;
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
  }
  main .convince .btn.convince__cta br { display: inline; }

  /* Gruender-Karten nach demselben Muster: das Foto ist im Markup ein
     Geschwister des Textblocks und stand deshalb unter der Box. Name und
     Rolle liegen aber im Textblock, also muss der aufgeloest werden, damit
     das Foto dazwischen passt.

     Auch hier ist der Textblock die sichtbare Box — Hintergrund, Rahmen,
     Radius, Schatten und Innenabstand wandern auf .founder-card, inklusive
     der Variante fuer das helle Design. Markup bleibt unberuehrt, weil Foto
     und Text sich auf dem Desktop ueberlappen (padding-left: 432px). */
  .founder-card {
    background: linear-gradient(180deg, #201c18, #131009);
    border: 1px solid rgba(194, 174, 125, 0.18);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: 30px;
    row-gap: var(--space-5);
  }
  [data-theme="light"] .founder-card {
    background: #ffffff;
    border-color: rgba(43, 30, 22, 0.14);
    box-shadow: 0 16px 44px rgba(43, 30, 22, 0.1);
  }
  .founder-card__text { display: contents; }
  /* Name groesser, Rolle etwas groesser, beide dicht beieinander wie im
     Referenzbild. Die Abstaende setzen sich aus dem eigenen margin-bottom
     PLUS dem row-gap der Karte (16.08px) zusammen — Name 7.5+16=24px,
     Rolle 24.8+16=41px. Der Raster-Abstand wird daher per negativem Margin
     herausgerechnet, sonst liesse sich unter 16px nichts erreichen. */
  .founder-card__name { order: 0; }
  .founder-card__role { order: 1; }
  /* Je zwei Klassen im Selektor: den Namen setzt eine gleichnamige Regel
     weiter unten im Stylesheet auf --fs-2xl (bei Gleichstand gewinnt die
     spaetere), die Rolle die Sammelregel ".founder-card__text p" mit Klasse
     plus Element. */
  .founder-card .founder-card__name {
    font-size: 1.6rem;
    margin-bottom: calc(0.65rem - var(--space-6));
  }
  .founder-card .founder-card__role {
    font-size: var(--fs-md);
    margin-bottom: calc(1.3rem - var(--space-6));
  }
  .founder-card__photo { order: 2; }
  .founder-card__p { order: 3; }
  /* Absaetze der Gruender-Karten auf die Groesse der Absaetze in "Ueberzeuge
     dich selbst": bei 375px 15.07px statt 14px.
     Die Referenz bekommt ihre Groesse ueber einen Inline-Style
     (font-size: var(--fs-md)) und ihre Zeilenhoehe von 1.55 aus dem
     Mobile-Layer — deshalb hier genau diese Kombination und nicht 1rem/1.65
     aus der Basisregel, die der Inline-Style ohnehin ueberstimmt.
     Zwei Klassen im Selektor, weil die Sammelregel weiter oben ueber
     ".founder-card__text p" greift und mit Klasse plus Element spezifischer
     waere als eine Klasse allein. */
  .founder-card .founder-card__p { font-size: var(--fs-md); line-height: 1.55; }
  .step__intro > .btn.step__cta { order: 2; }
  /* Abstand zur letzten Karte vergroessert: 21px liessen den Button zu dicht
     darunter sitzen. */
  main .btn.step__cta { margin-top: calc(var(--space-7) + 0.5rem) !important; }

  /* Kunden-Stimmen laufen mobil senkrecht von unten nach oben statt
     waagerecht. Das Band bekommt dafuer eine feste Schauhoehe, die Maske
     dreht auf die Blockachse und die Spur wird zur Spalte. */
  .tm-quotes--marquee {
    height: clamp(24rem, 68vh, 34rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    /* Abstand nach oben zur Blaetter-Leiste vergroessert. */
    margin-top: var(--space-7);
  }
  .tm-quotes__track {
    flex-direction: column;
    width: auto;
    height: max-content;
    animation-name: tm-scroll-up;
    /* Die Spur ist senkrecht laenger als waagerecht: 5132px statt rund
       3790px, eine Runde also 2566px statt 1893px. Bei den 70s der
       waagerechten Fassung liefe das Band mit 47 statt 27 Pixel pro Sekunde,
       also fast doppelt so schnell. 95s halten das gewohnte Tempo. */
    animation-duration: 95s;
  }
  /* Muss nach den beiden animation-Zeilen stehen: die gleichnamige Regel
     weiter oben im Stylesheet setzt "animation: none", meine Einzelwerte
     haetten sie sonst ueberstimmt und das Band trotz Systemeinstellung
     wieder in Bewegung gesetzt. */
  @media (prefers-reduced-motion: reduce) {
    .tm-quotes__track { animation: none; }
  }
  /* Karten ueber die volle Breite, Hoehe aus dem Textinhalt. Waagerecht
     standen sie auf fester Breite und wurden von der Flex-Zeile alle auf
     dieselbe Hoehe gestreckt (533px); senkrecht darf jede so hoch sein,
     wie ihr Text es braucht. */
  .tm-quotes--marquee .tm-quote {
    width: auto;
    align-self: stretch;
    flex: 0 0 auto;
    height: auto;
  }

  /* Beispielrechnung: die Basis setzt die Zeilen auf nowrap mit Ellipsis
     (Notizblock-Optik mit einzeiligen Eintraegen). Auf dem Handy schneidet
     das die Formeln ab — hier umbrechen lassen. Die Zeilenhoehe von 24px
     bleibt, damit die Zeilen weiter auf dem Raster des Papiers sitzen. */
  /* Goldene Ueberschriften der ROI-Boxen von 15.75px auf 14px. Betrifft
     alle vier sichtbaren, auch die im Bereich nach "Erfahre konkret deine
     Kennzahlen" — sie teilen sich .roi-card__head. px statt rem, weil die
     Wurzel-Schriftgroesse mobil fluid skaliert.
     Die vier Boxen setzen in der Basis jeweils eigene 1.05rem — drei ueber
     zwei Klassen, eine ueber einen ID-Selektor. Alle sind spezifischer als
     eine einzelne Klasse und muessen daher einzeln aufgefuehrt werden. */
  .roi-card__head,
  .roi-gain > .roi-card__head,
  .roi-ba > .roi-card__head,
  .roi-final > .roi-card__head,
  #roi-punch-head {
    font-size: 14px;
    /* Dasselbe Grau wie "(pro Monat)" und "Einsparpotenzial pro Jahr..."
       (--text-subtle, rgba(244,241,236,0.5)). Gilt fuer alle Boxen der
       Sektion, auch die nach "Erfahre konkret mehr". */
    color: var(--text-subtle);
  }
  /* Die Fragen an den Reglern in dasselbe Grau wie die Box-Ueberschriften
     ("Das ist realistisch drin - mit BNO Agency"). Sie tragen keine eigene
     Klasse, deshalb ueber die Zeile als Elternteil adressiert. Die Basis
     setzt sie ueber .roi-card--inputs .roi-field__row label auf Gold — eine
     Klasse mehr, also muss der Selektor hier mitgenannt werden. */
  .roi-field__row label,
  .roi-card--inputs .roi-field__row label { color: var(--text-subtle); }

  /* Alle Boxen der ROI-Sektion auf denselben dunklen, weitgehend neutralen
     Verlauf — auch die im Bereich nach "Erfahre konkret mehr". Der geteilte
     Kartenverlauf #201c18 -> #131009 ist stark rotstichig und liess die
     Boxen zusammen mit den goldenen Labels insgesamt gold wirken.

     Der Verlauf ersetzt die Hintergruende vollstaendig. Bei drei Boxen lag
     darueber noch eine radiale Toenung (lachs bei "Das zahlst du heute",
     gold bei "Das ist realistisch drin" und "Und was kostet das?") — die
     entfaellt damit, denn genau diese Lagen trugen den Goldeindruck.
     Rahmenfarben und Schatten bleiben unberuehrt, die Boxen sind also
     weiterhin voneinander unterscheidbar. */
  [data-theme="dark"] .section-roi .roi-card {
    background: linear-gradient(180deg, #100e0c, #0a0908);
  }

  /* Aufklapp-Button ("Erfahre konkret deine Kennzahlen" / "Weniger
     anzeigen" — dasselbe Element in zwei Zustaenden) kompakter: Schrift von
     13.5px auf 12px, Polsterung von 0.7/1.6rem auf 0.5/1.2rem. px bei der
     Schriftgroesse, weil die Wurzel-Schriftgroesse mobil fluid skaliert. */
  .roi-more-btn {
    font-size: 12px;
    padding: 0.5rem 1.2rem;
  }

  /* Reiter des ROI-Rechners kompakter: Schrift von 15.75px auf 13px und
     Polsterung von 0.7/1.5rem auf 0.5/1.1rem. px bei der Schriftgroesse,
     weil die Wurzel-Schriftgroesse mobil fluid skaliert. */
  .roi-chip {
    font-size: 13px;
    padding: 0.5rem 1.1rem;
  }

  .roi-paper .roi-tutorial__list li {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Kein Kind darf seinen Container aufspannen */
  .section-hero__content, .section-hero__stats, .section-hero__stats .stat,
  .convince__photo, .convince__panel,
  .tm-card__media, .tm-card__body, .tm-card__media > *, .tm-card__body > *,
  .site-footer__grid > * { min-width: 0; max-width: 100%; }

  /* Textfluss */
  /* Knappere Laufweite und Groesse, damit "ENTWICKLUNGSSTUNDEN" in eine
     Zeile passt. Kein overflow-wrap: anywhere mehr — das brach mitten im
     Wort um; hyphens: auto trennt notfalls an Silbengrenzen. */
  .stat__label {
    white-space: normal;
    overflow-wrap: normal;
    hyphens: auto;
    font-size: 0.63rem;
    letter-spacing: 0.04em;
  }
  .section__title { overflow-wrap: break-word; hyphens: auto; }
  .lead-br { display: none; }

  /* Karten-Typografie auf die fluiden Tokens ziehen */
  main h3, .case-card__title, .exp-card__title,
  .expect-card__title, .compliance-card__title { font-size: var(--font-h3); }
  .exp-card p, .expect-card p, .case-card p, .step-card p, .compliance-card p,
  .tm-block__text, .founder-card__text p, .team__block p,
  .exp-card li, .expect-card li, .step-card li, .roi-card li,
  [class*="__lead"], .exp__text, .convince__panel p,
  .story__p, .story__list li,
  .exp-stat__label,
  .story__caption { font-size: var(--fs-base); line-height: 1.55; }
  /* Zwei Lead-Texte brauchen eigene Regeln, um auf dieselbe Groesse zu
     kommen: Angebote wird von einem dreiteiligen Basis-Selektor gesteuert,
     Integrationen traegt eine Inline-Groesse (var(--fs-md)). Beide
     ueberstimmen den Attribut-Selektor [class*="__lead"] oben. */
  .section-offers .section__header--center .offers__lead,
  .integrations__lead[style] {
    font-size: var(--fs-base) !important;
    line-height: 1.55;
  }
  /* Alle Sub-Headlines einheitlich auf 14px. Sie lagen vorher bei 13.17px
     (--fs-base), die Kontakt-Subline sogar bei 15.07px.
     Bewusst in px statt rem: die Wurzel-Schriftgroesse skaliert mobil
     fluid (~15px), 0.875rem ergaebe hier nur 13.13px.
     Die beiden ersten Selektoren wiederholen die spezifischeren Regeln
     von oben — unter !important entscheidet weiterhin die Spezifitaet. */
  .section-offers .section__header--center .offers__lead,
  .integrations__lead[style],
  [class*="__lead"],
  .section-contact__subline,
  .roi-punch__sub,
  .roi-punch__list li,
  .roi-gain__sub {
    font-size: 14px !important;
    line-height: 1.55;
  }
  /* Ueberschrift der Logo-Bandarolle auf Schriftart und Groesse der
     Sub-Headlines: 14px in --font-grotesk statt 12.19px in JetBrains Mono.
     px statt rem, weil die Wurzel-Schriftgroesse mobil fluid skaliert.
     Laufweite und Versalien gehoerten zur Monospace-Optik und entfallen
     mit ihr — sonst stand gesperrter Grossbuchstabensatz in einer
     Proportionalschrift. */
  /* Tempo der Bandarolle an die Integrationen angeglichen: dort laufen beide
     Reihen mobil mit 30 px/s. Die Spur ist hier 4581px lang, eine Runde also
     2290px — 76s ergeben dieselben 30 px/s. Vorher waren es 95s (24 px/s),
     die Baender liefen also merklich unterschiedlich schnell. */
  .logo-track { animation-duration: 76s; }

  /* Compliance-Icons kleiner: Rahmen von 64 auf 52px, Inhalt auf 80%.
     Der Inhalt wird ueber transform skaliert und nicht ueber width/height,
     weil jedes Icon seine Groesse als Inline-Style des Editors mitbringt
     (2.6875 / 3.25 / 2.5rem) — ein gemeinsamer Zahlenwert wuerde die
     Groessenverhaeltnisse der drei zueinander veraendern. */
  .compliance-card__icon {
    width: 52px;
    height: 52px;
  }
  .compliance-card__icon > * { transform: scale(0.8); }

  .logo-bar__head {
    font-size: 14px;
    font-family: var(--font-grotesk);
    letter-spacing: normal;
    text-transform: none;
  }
  /* Zwischentitel "So gehen wir bei dir vor:" und die 6 Angebots-Karten
     auf dieselben 14px. Die Kartentitel behalten ihr fettes Gewicht, damit
     die Hierarchie zur Beschreibung darunter erhalten bleibt.
     .offer-card__title braucht !important gegen die main-h3-Regel oben. */
  .offers__subline,
  .offer-card__title,
  .offer-card__desc {
    font-size: 14px !important;
    line-height: 1.55;
  }
  /* Bildunterschrift auch in Schriftart und Schnitt an den Text darunter
     angleichen — sie stand als einzige in der kursiven Serifenschrift. */
  .story__caption { font-family: var(--font-grotesk); font-style: normal; }
  /* Schluss-Satz vollstaendig wie die Absaetze darueber: Groesse,
     Schriftart, Schnitt und Farbe. */
  .story__p.story__final {
    font-size: var(--fs-base);
    line-height: 1.55;
    font-family: var(--font-grotesk);
    font-style: normal;
    color: var(--text-muted);
  }
  /* Tags in den Problem-Karten auf eine Zeile bringen. Die breiteste Karte
     braucht 401px bei 303px Platz — Schrift allein reicht nicht, deshalb
     zusaetzlich Innenabstand und Luecken verkleinert. nowrap verhindert,
     dass stattdessen einzelne Tags intern umbrechen. */
  /* Icons in den Problem-Karten kompakter. Box und SVG gemeinsam, sonst
     wuerde das SVG (35x32px) die kleinere Box sprengen. Seitenverhaeltnis
     des Symbols bleibt erhalten. */
  .exp-card__icon { width: 2.1rem; height: 2.1rem; }
  /* !important noetig: die SVGs tragen Inline-Groessen (2rem/1.8125rem),
     die sonst jede Stylesheet-Regel schlagen. */
  .exp-card__icon svg { width: 1.45rem !important; height: 1.33rem !important; }

  /* Balken und Quelle ans Kartenende schieben. Die Karten sind alle gleich
     hoch, aber die Beschreibungen unterschiedlich lang — dadurch endete der
     Inhalt mal frueher, mal spaeter und die Balken standen auf verschiedenen
     Hoehen. margin-top:auto im Flex-Column verteilt den Rest nach oben.
     Der gap der Karte (10.5px) bleibt als Mindestabstand erhalten. */
  .exp-stat__bar { margin-top: auto; }

  /* Schweregrad-Label ("KRITISCH") neben den Balken statt darueber. Das
     Label liegt absolut im Balken (bottom:6px), deshalb: Balken rechts
     verkuerzen und das Label in den freigehaltenen Platz schieben,
     vertikal auf Balkenmitte. */
  .exp-card__bar { margin-right: 4.6rem; }
  .exp-card__sev {
    top: 50%;
    bottom: auto;
    right: auto;
    left: calc(100% + 0.5rem);
    transform: translateY(-50%);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .exp-card__tags { gap: 0.34rem; }
  .exp-card__tags span {
    font-size: 0.68rem;
    padding: 0.22rem 0.4rem;
    white-space: nowrap;
  }

  /* Prozentzahl dominiert die Karte, Quelle tritt zurueck (Referenz-Layout).
     Beide brauchen eigene Regeln, weil die allgemeine Karten-Textregel
     darueber sonst beide auf dieselbe Groesse zieht. */
  p.case-card__stat {
    font-size: clamp(2rem, 1.767rem + 2vw, 3rem);
    line-height: 1.1;
  }
  p.case-card__source {
    font-size: clamp(0.66rem, 0.62rem + 0.24vw, 0.85rem);
    line-height: 1.45;
  }
  .founder-card__name { font-size: var(--fs-2xl); }

  /* Inhalt bestimmt die Kartenhöhe */
  .step-card, .compliance-card, .exp-card, .expect-card, .case-card { min-height: 0; }

  /* Statistik-Kacheln (Fallstudien) zweispaltig wie im Referenz-Layout.
     Die Basis schaltet erst ab 40em auf zwei Spalten, darunter blieb es
     einspaltig. Schrift entsprechend an die schmalere Spalte angepasst. */
  .cases__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .case-tile { padding: 0.7rem 0.4rem; }
  .case-tile__stat {
    font-size: clamp(1.25rem, 1.05rem + 1.15vw, 1.9rem);
    margin-bottom: var(--space-1);
    line-height: 1.1;
  }
  .case-tile__label {
    font-size: clamp(0.72rem, 0.68rem + 0.28vw, 0.88rem);
    line-height: 1.4;
  }
  .case-tile__src { font-size: 0.52rem; padding-top: 0.55rem; }

  /* Hero: kompletter Textblock mittig */
  .section-hero__content { text-align: center; }
  .section-hero__content .eyebrow { justify-content: center; }
  /* Groesser als die globale --font-display-Skala. Obergrenze ergibt sich
     aus der laengsten Typewriter-Variante ("Weniger Aufwand."), die bei
     375px ab ca. 36.5px aus der Zeile laufen wuerde — 34px lassen Puffer. */
  .section-hero__title { font-size: clamp(2.25rem, 1.374rem + 3.571vw, 3.2rem); }

  /* Alle Sektions-Badges im Pillen-Stil einheitlich kompakt — Referenz ist
     "DER MARKT WANDELT SICH". Schrift, Innenabstand, Icon und Rahmenstaerke
     zusammen, sonst bleiben sie trotz kleinerer Schrift klobig.
     .compliance__badge wird von sechs Sektionen genutzt. Die Hero-Eyebrow
     bleibt aussen vor: kein Rahmen, kein Radius, also anderer Stil. */
  .cases__badge,
  .exp__badge,
  .compliance__badge {
    font-size: 0.76rem;
    padding: 0.28rem 0.7rem;
    gap: 0.4rem;
    border-width: 1px;
  }
  /* .badge-icon mitnennen: die Basis-Regel ".compliance__badge .badge-icon"
     ist spezifischer als ein reiner svg-Selektor und wuerde sonst gewinnen. */
  .cases__badge svg,
  .exp__badge svg,
  .compliance__badge svg,
  .compliance__badge .badge-icon { width: 0.85rem; height: 0.85rem; }

  /* Fallstudien-Ueberschrift einheitlich auf 25.15px bei 375px. Der Wert
     kommt aus --fs-4xl — genau die Groesse, die der innere Editor-Span
     "verschaffen sich" schon hatte. Der Span erbt jetzt, damit die
     Ueberschrift nicht mehr aus zwei Groessen besteht. */
  /* Alle Sektions-Headlines auf denselben Token. Die meisten lagen schon bei
     25.18px, Story (23.13) und Ueberzeuge-dich (23.07) fielen heraus; die
     minimale Abweichung der uebrigen kam von leicht anderen clamp-Formeln.
     Schriftart und Gewicht sind ueberall bereits Poppins 700.
     Hero-H1 und Hero-Subline bleiben bewusst aussen vor. */
  .cases__title,
  .exp__title,
  .story__title,
  .convince__title,
  .section__title,
  .section-contact__title { font-size: var(--fs-4xl) !important; }
  /* Editor-Spans in den Headlines erben, statt eigene Groessen zu behalten */
  .cases__title [style*="font-size"],
  .section__title [style*="font-size"],
  .story__title [style*="font-size"],
  .convince__title [style*="font-size"] {
    font-size: inherit !important;
    letter-spacing: inherit !important;
  }
  .section-hero__subline {
    /* etwas groesser als die --fs-sm-Stufe: 14px statt 12.2px bei 375px */
    font-size: clamp(0.875rem, 0.742rem + 0.765vw, 1.15rem);
    line-height: 1.55;
    margin-inline: auto;
    margin-bottom: var(--space-6);
  }
  /* wrap ist zwingend: beide Kinder beanspruchen die volle Breite und
     wuerden sich sonst nebeneinander gegenseitig zusammenquetschen. */
  .section-hero__ctas { width: 100%; justify-content: center; flex-wrap: wrap; }

  /* Hero-CTA abweichend von den uebrigen Buttons zweizeilig. Der <br> wird
     hier gezielt wieder eingeblendet — global ist er auf Mobil ausgeblendet,
     damit die anderen CTAs einzeilig bleiben. Die Breite bleibt bewusst auf
     100%, damit Button und "Angebote ansehen"-Balken deckungsgleich sind. */
  .section-hero__ctas .btn,
  .section-hero__ctas .btn[style] {
    font-size: 1rem !important;
    /* Flacher ueber den Innenabstand: 2 x 20.25px Zeilenhoehe + 2 x 7.5px
       Padding + 2px Rahmen = 58px. Die Zeilenhoehe selbst bleibt bei den
       inline gesetzten 1.35 — enger wirkt sie bei zwei Zeilen gedraengt. */
    padding: 0.5rem 1.25rem !important;
    min-height: 0 !important;
  }
  .section-hero__ctas .btn br { display: inline; }
  /* Sekundaerlink als Balken unter dem CTA — Breite, Hoehe, Radius und
     Innenabstand sind bewusst identisch zum Button darueber, nur der
     Rahmen ist neutral statt orange. */
  .section-hero__ctas .link-arrow[style] {
    margin-left: 0 !important;
    /* identische Skala wie main .btn, damit beide exakt gleich hoch sind */
    font-size: clamp(0.8rem, 0.373rem + 2vw, 1.05rem) !important;
    line-height: 1.35;
    width: 100%;
    min-height: var(--btn-min-h);
    padding: 0.8rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(244, 241, 236, 0.04);
  }
  [data-theme="light"] .section-hero__ctas .link-arrow[style] {
    background: rgba(43, 30, 22, 0.04);
  }
  /* Der Link tritt mobil als Button mit Rahmen auf — der goldene
     Unterstrich aus der Desktop-Optik gehoert da nicht hinein. Gilt auch
     fuer Hybrid-Geraete, die trotz kleiner Breite einen Mauszeiger melden. */
  .link-arrow::after { display: none; }

  /* CTA-Buttons ueber die volle Breite, Text einzeilig (Referenz-Layout).
     Der harte <br /> im Markup wird ausgeblendet — das Leerzeichen davor
     sorgt dafuer, dass die beiden Haelften nicht zusammenkleben. */
  main .btn {
    width: 100% !important;
    max-width: 100%;
    margin-inline: auto;
    /* Steigung so gewaehlt, dass der Text ueber den ganzen Mobile-Bereich
       einzeilig bleibt — massgeblich ist der engste Fall bei 360px. */
    font-size: clamp(0.8rem, 0.373rem + 2vw, 1.05rem) !important;
    padding: 0.8rem 0.75rem !important;
    min-height: 3rem;
    line-height: 1.3;
    white-space: normal;
  }
  main .btn br { display: none; }
  /* Diese beiden sitzen in schmaleren Panels — etwas kleiner und mit
     knapperem Innenabstand, damit der Text auch dort einzeilig bleibt. */
  main .btn.offer-stage__cta, main .btn.convince__cta {
    font-size: clamp(0.72rem, 0.32rem + 1.8vw, 0.95rem) !important;
    padding-inline: 0.4rem !important;
  }
  /* Story-CTA wie der Hero-CTA: zweizeilig, gleiche Schrift und Polsterung.
     Der <br> ist global auf Mobil ausgeblendet (damit die uebrigen CTAs
     einzeilig bleiben) und wird hier gezielt wieder eingeblendet. */
  .story__cta { justify-self: center; }
  main .btn.story__cta {
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
  }
  main .btn.story__cta br { display: inline; }
  .offer-stage__cta { margin-top: var(--space-6) !important; }

  /* Die ROI-Sektion zieht ihre Kopfzeile per margin-top: -3.5rem nach oben.
     Das passte, solange die Angebote-Sektion unten mit Leerraum endete.
     Seit der CTA dort ganz unten steht, schnitt der Negativ-Versatz in den
     Button — deshalb mobil aufheben und normalen Abstand setzen. */
  .section-roi .section__header--center { margin-top: var(--space-5); }

  /* --- Angebote-Sektion: Reihenfolge und Aufraeumen --- */

  /* Goldene Nummernkreise entfernen (die Titel tragen die Nummer bereits) */
  .offer-card__num { display: none; }

  /* Zielreihenfolge: Angebote 1-3, Dreiecksgrafik, Angebote 4-6, CTA.
     Der CTA liegt im Markup INNERHALB der Karte "4. KI-Agenten" (auf Desktop
     sitzt er dort korrekt unter der Grafik). Per order allein kaeme er nicht
     aus seiner Karte heraus — deshalb wird genau diese Karte mobil mit
     display:contents aufgeloest, sodass ihre Teile eigene Grid-Elemente
     werden. Ihr Innenabstand wird dabei auf die Kinder uebertragen. */
  .offer-stage > .offer-card:nth-of-type(1) { order: 1; }
  .offer-stage > .offer-card:nth-of-type(2) { order: 2; }
  .offer-stage > .offer-card:nth-of-type(3) { order: 3; }
  /* Die Basis gibt der Grafik ein margin-bottom von var(--space-2) (7.5px).
     Dadurch war der Abstand nach unten zu Punkt 4 groesser als der nach
     oben zu Punkt 3, der nur aus dem row-gap besteht. Ohne den Rand liegt
     beidseitig exakt der Grid-Abstand an. */
  /* Das viewBox der Grafik ist 600x640, gezeichnet wird aber nur von
     y=-17 bis y=505. Unten stehen also 135 leere Einheiten, oben ragt der
     Kreis 17 Einheiten heraus. Beides zusammen (152/600) als negativer
     Rand abgezogen, damit der sichtbare Abstand nach unten dem nach oben
     entspricht. Prozent bezieht sich auf die Breite von .offer-tri, dem
     das SVG mit width:100% folgt — der Wert skaliert also mit.

     Der Rand sitzt bewusst auf .offer-tri und NICHT auf dem SVG: als
     Kind wuerde er die Hoehe von .offer-tri mitverkleinern (320 auf
     244px). Die Dreieck-Ebenen darin sind mit top:12.5% positioniert,
     was gegen genau diese Hoehe rechnet — die Grafik sass dadurch 9.5px
     zu hoch und die Nummern 2, 3 und 5 passten nicht mehr zu ihren
     Baendern. Auf .offer-tri schrumpft nur die Grid-Zeile, die
     Prozentwerte bleiben korrekt. */
  .offer-stage > .offer-tri { order: 4; margin-bottom: -25.33%; }
  .offer-stage > .offer-card:has(.btn) { display: contents; }
  .offer-stage > .offer-card:has(.btn) > .offer-card__title,
  .offer-stage > .offer-card:has(.btn) > .offer-card__desc {
    order: 5;
    padding-inline: 1.07rem;
  }
  /* Grid-Abstand zwischen Titel und Text auf den Karten-Abstand zurueckholen.
     margin-top zusaetzlich, weil der Kreis der Grafik bis 3px an die
     Ueberschrift heranreichte — Punkt 4 steht damit etwas tiefer. */
  .offer-stage > .offer-card:has(.btn) > .offer-card__title {
    margin-bottom: calc(0.5rem - var(--space-6));
    margin-top: var(--space-4);
  }
  /* Der aufgeloesten Karte fehlt ihr unteres Padding — nachreichen, damit der
     Abstand zum naechsten Angebot dem der uebrigen entspricht (44px). */
  .offer-stage > .offer-card:has(.btn) > .offer-card__desc {
    margin-bottom: 0.75rem;
  }
  .offer-stage > .offer-card:nth-of-type(5) { order: 6; }
  .offer-stage > .offer-card:nth-of-type(6) { order: 7; }

  /* CTA ans Ende und wie der Story-CTA gestalten (zweizeilig) */
  .offer-stage > .offer-card:has(.btn) > .btn { order: 8; }
  main .offer-stage .btn {
    /* Beidseitig 1rem schmaler als die volle Breite: der Button endet damit
       genau auf der Textkante der Angebotskarten (35px) statt 16px weiter
       aussen. auto in der Horizontalen haelt ihn mittig. */
    width: calc(100% - 2rem) !important;
    font-size: 1rem !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.35;
    min-height: 0 !important;
    margin: var(--space-6) auto 0 !important;
  }
  main .offer-stage .btn br { display: inline; }

  /* Hintergrundfoto auf die Dreiecksgrafik zentrieren. Es haengt im Original
     an der Sektion (.offer-stage::before) und wurde ueber top positioniert.
     Seit der Umsortierung stehen drei Angebote ueber der Grafik, deren Hoehe
     je nach Textumbruch schwankt — eine feste Rechnung trifft die Mitte
     dadurch nicht mehr. Deshalb haengt das Bild mobil direkt an der Grafik
     und ist damit ohne Rechnung immer mittig. */
  .offer-stage::before { display: none; }
  .offer-tri::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* Y-Versatz bewusst ueber 50 hinaus: die 8 Prozentpunkte beziehen sich
       auf die eigene Bildhoehe, verschieben das Bild also proportional
       nach oben und skalieren mit der Viewport-Breite mit. */
    transform: translate(-50%, -58%);
    width: 100vw;
    aspect-ratio: 1366 / 768;
    background-image: url("../img/team-bno.png?v=2");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }

  #story { padding-top: var(--space-7); }

  /* Bild samt Bildunterschrift direkt unter die Ueberschrift ziehen.
     Ueberschrift und Absaetze liegen zusammen in .story__text, das Bild ist
     ein Geschwister danach. display:contents loest den Wrapper auf, sodass
     seine Kinder eigene Grid-Elemente werden und per order sortierbar sind.
     Der Wrapper hat kein Padding/Hintergrund, ist also gefahrlos aufloesbar.
     row-gap muss auf 0, sonst bekaemen alle Absaetze den Grid-Abstand von
     28px statt ihrer eigenen Margins. */
  .story__inner { row-gap: 0; }
  .story__text { display: contents; }
  .story__title { order: 1; text-align: center; }
  /* unten knapper, weil der Lead-Absatz darunter eigenen Abstand mitbringt */
  .story__media { order: 2; margin-block: var(--space-6) var(--space-3); }
  .story__lead, .story__p, .story__list { order: 3; }
  /* !important noetig: der Button traegt inline "margin: 1px 0px".
     Breite und Ausrichtung wie beim CTA der Angebote-Sektion: beidseitig
     1rem schmaler als die Spalte und mittig. Nach oben ein Schritt mehr
     Luft (space-6 auf space-7), weil der Schlusssatz zu dicht sass. */
  .story__inner > .btn {
    order: 4;
    width: calc(100% - 2rem) !important;
    margin: var(--space-7) auto 0 !important;
  }
}

/* --- Smartwatch / Mini-Displays (bis 359px) --- */
@media (max-width: 359px) {
  .exp__stats, .section-hero__stats, .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .roi__chips { flex-direction: column; align-items: stretch; }
  .theme-toggle { width: 2.2rem; height: 2.2rem; }
  .hero-claim__line { white-space: normal; }
  /* Kennzahlen-Beschriftungen: die Spalte ist hier nur 110px breit,
     "KI-AUTOMATISIERUNGEN" bricht nach dem Bindestrich und der Rest ragt
     8px heraus. Genau so viel kostet die weite Laufweite — ohne sie passt
     es. hyphens: auto hilft nicht, Chrome trennt keine Versalien. */
  .tm-stat dt { letter-spacing: normal; }
  .founder-card, .founder-card__photo { max-width: 100%; min-width: 0; }
  /* Tags: unter 360px ist der Container nur 253px breit — Innenabstand und
     Luecken zusaetzlich knapper, damit auch die laengste Karte einzeilig
     bleibt, ohne die Schrift unter ~9px zu druecken. */
  .exp-card__tags { gap: 0.25rem; }
  .exp-card__tags span { font-size: 0.64rem; padding: 0.2rem 0.3rem; }

  /* Unter 360px reicht die Breite fuer den langen CTA-Text nicht mehr aus.
     Einzeilig waere hier nur mit ~10px Schrift moeglich — deshalb bewusst
     zweizeilig statt unlesbar klein. Nur der Innenabstand wird knapper. */
  main .btn { padding-inline: 0.5rem !important; }
}

/* --- Tablet (768–1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .expect__grid, .compliance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step__cards { grid-template-columns: repeat(2, minmax(0, 17rem)) !important; }
  .exp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .site-footer__grid { grid-template-columns: repeat(3, auto); }
  .site-footer__grid > *:first-child { margin-right: 0; grid-column: 1 / -1; }
}

/* --- Laptop (1024–1439px) --- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .step__cards { grid-template-columns: repeat(3, minmax(0, 15rem)); }
  .site-footer__grid > *:first-child { margin-right: var(--space-6); }
}

/* --- Große Bildschirme / TV (ab 1920px) --- */
@media (min-width: 1920px) {
  .section__inner, .site-footer__grid { max-width: 110rem; }
  .offer-stage::before { max-width: 137.5rem; }
}

/* --- Textmarkierung in der Markenfarbe ---
   Ersetzt das Standard-Blau des Browsers durch das Marken-Gold. Die
   Schrift steht dabei auf dem dunklen Braun, sonst laege helles
   Kashmire-Weiss auf hellem Gold und waere kaum lesbar. Gilt in beiden
   Designs, da --color-gold dort derselbe Ton ist.
   ::selection und ::-moz-selection brauchen getrennte Regeln: kennt ein
   Browser eines der beiden nicht, verwirft er sonst die ganze Gruppe. */
::selection {
  background: var(--color-gold);
  color: var(--color-brown);
  text-shadow: none;
}
::-moz-selection {
  background: var(--color-gold);
  color: var(--color-brown);
  text-shadow: none;
}