@font-face {
  font-family: "Prompt";
  src:
    url("../../assets/fonts/Prompt-Regular.woff2") format("woff2"),
    url("../../assets/fonts/Prompt-Regular.woff") format("woff"),
    url("../../assets/fonts/Prompt-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src:
    url("../../assets/fonts/Prompt-Medium.woff2") format("woff2"),
    url("../../assets/fonts/Prompt-Medium.woff") format("woff"),
    url("../../assets/fonts/Prompt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src:
    url("../../assets/fonts/Prompt-SemiBold.woff2") format("woff2"),
    url("../../assets/fonts/Prompt-SemiBold.woff") format("woff"),
    url("../../assets/fonts/Prompt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Prompt";
  src:
    url("../../assets/fonts/Prompt-Bold.woff2") format("woff2"),
    url("../../assets/fonts/Prompt-Bold.woff") format("woff"),
    url("../../assets/fonts/Prompt-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src:
    url("../../assets/fonts/OpenSans-Light.woff2") format("woff2"),
    url("../../assets/fonts/OpenSans-Light.woff") format("woff"),
    url("../../assets/fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src:
    url("../../assets/fonts/OpenSans-Regular.woff2") format("woff2"),
    url("../../assets/fonts/OpenSans-Regular.woff") format("woff"),
    url("../../assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src:
    url("../../assets/fonts/OpenSans-Italic.woff2") format("woff2"),
    url("../../assets/fonts/OpenSans-Italic.woff") format("woff"),
    url("../../assets/fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src:
    url("../../assets/fonts/OpenSans-Bold.woff2") format("woff2"),
    url("../../assets/fonts/OpenSans-Bold.woff") format("woff"),
    url("../../assets/fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src:
    url("../../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2"),
    url("../../assets/fonts/OpenSans-ExtraBold.woff") format("woff"),
    url("../../assets/fonts/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   HUB KI – style.css
   Layer 1: Primitive Tokens → Layer 2: Composite Tokens → Layer 3: Typografie
   ============================================================ */

/* ——————————————————————————————————————
   LAYER 1 – Primitive Tokens (Farben, Abstände, Radien)
   Rohe Werte NUR hier.
   —————————————————————————————————————— */
:root {
  /* Farben */
  --blue-main: #9adcf7;
  --blue-light: #d9eff7;
  --blue-hover: #b8ecff;
  --blue-grey: #7eaab16b;
  --yellow-main: #f2eda8;
  --yellow-light: #f7f5d4;
  --purple-main: #c7cfff;
  --purple-light: #e3e7ff;
  --purple-hover: #d2d8ff;
  --purple-grey: #9091b86b;
  --green-main: #dffee9;
  --green-light: #edfff4;
  --green-neon: #94ffb4;
  --orange-main: #fcdc9f;
  --orange-light: #fde4b5;
  --white-main: #ffffff;
  --white-transparent: rgba(255, 255, 255, 0.5);
  --black-main: #000000;
  --grey-light: #f4f5f6;
  --purple-lightest: #e0e7fe;
  --dark-grey-1: #1c1c1c;

  /* Abstände – 8pt-Basis in rem (für margin, sizing, positioning) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-30: 1.875rem;
  --space-32: 2rem;
  --space-34: 2.125rem;
  --space-36: 2.25rem;
  --space-38: 2.375rem;
  --space-40: 2.5rem;
  --space-42: 2.625rem;
  --space-44: 2.75rem;
  --space-46: 2.875rem;
  --space-48: 3rem;
  --space-50: 3.125rem;
  --space-52: 3.25rem;
  --space-54: 3.375rem;
  --space-56: 3.5rem;
  --space-58: 3.625rem;
  --space-60: 3.75rem;
  --space-62: 3.875rem;
  --space-64: 4rem;
  --space-66: 4.125rem;
  --space-68: 4.25rem;
  --space-70: 4.375rem;
  --space-72: 4.5rem;
  --space-74: 4.625rem;
  --space-76: 4.75rem;
  --space-78: 4.875rem;
  --space-80: 5rem;
  --space-100: 6.25rem;

  /* Gap-Variablen (= Space auf Desktop; reduzieren ab 699px um 1/3) */
  --gap-4: 0.25rem;
  --gap-8: 0.5rem;
  --gap-10: 0.625rem;
  --gap-12: 0.75rem;
  --gap-16: 1rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-28: 1.75rem;
  --gap-30: 1.875rem;
  --gap-32: 2rem;
  --gap-34: 2.125rem;
  --gap-36: 2.25rem;
  --gap-38: 2.375rem;
  --gap-40: 2.5rem;
  --gap-42: 2.625rem;
  --gap-44: 2.75rem;
  --gap-46: 2.875rem;
  --gap-48: 3rem;
  --gap-50: 3.125rem;
  --gap-52: 3.25rem;
  --gap-54: 3.375rem;
  --gap-56: 3.5rem;
  --gap-58: 3.625rem;
  --gap-60: 3.75rem;
  --gap-62: 3.875rem;
  --gap-64: 4rem;
  --gap-66: 4.125rem;
  --gap-68: 4.25rem;
  --gap-70: 4.375rem;
  --gap-72: 4.5rem;
  --gap-74: 4.625rem;
  --gap-76: 4.75rem;
  --gap-78: 4.875rem;
  --gap-80: 5rem;
  --gap-100: 6.25rem;

  /* Padding-Variablen (= Space auf Desktop; bleiben auf allen Breakpoints konstant) */
  --padding-4: 0.25rem;
  --padding-8: 0.5rem;
  --padding-10: 0.625rem;
  --padding-12: 0.75rem;
  --padding-16: 1rem;
  --padding-20: 1.25rem;
  --padding-24: 1.5rem;
  --padding-28: 1.75rem;
  --padding-30: 1.875rem;
  --padding-32: 2rem;
  --padding-34: 2.125rem;
  --padding-36: 2.25rem;
  --padding-38: 2.375rem;
  --padding-40: 2.5rem;
  --padding-42: 2.625rem;
  --padding-44: 2.75rem;
  --padding-46: 2.875rem;
  --padding-48: 3rem;
  --padding-50: 3.125rem;
  --padding-52: 3.25rem;
  --padding-54: 3.375rem;
  --padding-56: 3.5rem;
  --padding-58: 3.625rem;
  --padding-60: 3.75rem;
  --padding-62: 3.875rem;
  --padding-64: 4rem;
  --padding-66: 4.125rem;
  --padding-68: 4.25rem;
  --padding-70: 4.375rem;
  --padding-72: 4.5rem;
  --padding-74: 4.625rem;
  --padding-76: 4.75rem;
  --padding-78: 4.875rem;
  --padding-80: 5rem;
  --padding-100: 6.25rem;

  /* Border Radius */
  --radius-card-gradient: 1rem; /* 16px */
  --radius-card-outline: 0.5rem; /* 8px */
  --radius-btn: 0.25rem; /* 4px */
  --radius-nav-btn: 0.3125rem; /* 5px */
}

/* ——————————————————————————————————————
   LAYER 2 – Composite Tokens (Gradienten)
   Ausschließlich via var() aus Layer 1.
   —————————————————————————————————————— */
:root {
  /* CTA-Button-Gradienten – Figma: cta-gradient-* */
  --cta-gradient-blue: linear-gradient(
    119deg,
    var(--blue-main) 0%,
    var(--blue-light) 100%
  );
  --cta-gradient-purple: linear-gradient(
    119deg,
    var(--purple-main) 0%,
    var(--purple-light) 100%
  );

  /* Dekorations-Gradienten (Textmarker, Underlines) */
  --gradient-yellow-horizontal: linear-gradient(
    90deg,
    var(--yellow-main) 0%,
    var(--yellow-light) 100%
  );
  --gradient-blue-horizontal: linear-gradient(
    90deg,
    var(--blue-main) 0%,
    var(--blue-light) 100%
  );
  --gradient-purple-horizontal: linear-gradient(
    90deg,
    var(--purple-main) 0%,
    var(--purple-light) 100%
  );

  /* Karten-Gradienten (oben Farbe → unten weiß) */
  --card-gradient-blue: linear-gradient(
    180deg,
    var(--blue-main) 0%,
    var(--white-main) 100%
  );
  --card-gradient-yellow: linear-gradient(
    180deg,
    var(--yellow-main) 0%,
    var(--white-main) 100%
  );
  --card-gradient-purple: linear-gradient(
    180deg,
    var(--purple-main) 0%,
    var(--white-main) 100%
  );
  --card-gradient-green: linear-gradient(
    180deg,
    var(--green-main) 0%,
    var(--white-main) 100%
  );
  --card-gradient-orange: linear-gradient(
    180deg,
    var(--orange-main) 0%,
    var(--white-main) 100%
  );

  /* Section-Hintergrund-Gradienten (semi-transparent über Raster) */
  /* --section-bg-gradient-blue: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(224, 231, 254, 0.72) 48.56%,
    rgba(244, 245, 246, 0.68) 100%
  ); */

  --section-bg-gradient-blue: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(217, 239, 247, 0.43) 48.56%,
    rgba(236, 248, 252, 0.41) 100%
  );

  --section-bg-gradient-yellow: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(247, 245, 212, 0.43) 48.56%,
    rgba(253, 248, 239, 0.41) 100%
  );

  --section-bg-gradient-orange: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(253, 228, 181, 0.43) 48.56%,
    rgba(254, 240, 210, 0.41) 100%
  );

  --section-bg-gradient-purple: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(227, 231, 255, 0.43) 48.56%,
    rgba(240, 242, 255, 0.41) 100%
  );

  --section-bg-gradient-green: linear-gradient(
    117deg,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(223, 254, 233, 0.43) 48.56%,
    rgba(237, 255, 244, 0.41) 100%
  );

  /* Section-Gradients (repeat): gleicher Anfangs- und Endwert, vertikal → nahtloser Übergang zwischen gestapelten Sections */
  --section-bg-gradient-blue-repeat: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(217, 239, 247, 0.43) 50%,
    rgba(255, 255, 255, 0.53) 100%
  );

  --section-bg-gradient-yellow-repeat: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(247, 245, 212, 0.43) 50%,
    rgba(255, 255, 255, 0.53) 100%
  );

  --section-bg-gradient-orange-repeat: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(253, 228, 181, 0.43) 50%,
    rgba(255, 255, 255, 0.53) 100%
  );

  --section-bg-gradient-purple-repeat: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(227, 231, 255, 0.43) 50%,
    rgba(255, 255, 255, 0.53) 100%
  );

  --section-bg-gradient-green-repeat: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.53) 0%,
    rgba(223, 254, 233, 0.43) 50%,
    rgba(255, 255, 255, 0.53) 100%
  );

  /* Raster-Hintergrund-Muster */
  --bg-raster-effekt: radial-gradient(
    var(--blue-grey) 1.5px,
    var(--grey-light) 0
  );
}

/* ——————————————————————————————————————
   LAYER 3 – Typografie-Tokens
   Schriftfamilien, Größen (fluid clamp), Gewichte
   Formel: clamp(min, vw, max) → min = max×0.75, vw = max/1920×100
   —————————————————————————————————————— */
:root {
  /* Schriftfamilien */
  --font-headline: "Prompt", sans-serif;
  --font-base: "Open Sans", sans-serif;

  /* Schriftgrößen */
  /*  --fs-h1: clamp(2.625rem, 3.917vw, 4.5rem); 56px ExtraBold */
  /* --fs-h2: clamp(2.625rem, 3.5vw, 3.5rem); 56px SemiBold */

  --fs-h1: clamp(2.625rem, 3.056vw, 3.5rem);
  --fs-h2: clamp(2.625rem, 3.056vw, 3.5rem);

  --fs-h3: clamp(1.125rem, 1.25vw, 1.5rem); /* 24px – Figma H4-reg */
  --fs-h4: clamp(
    1.125rem,
    1.25vw,
    1.5rem
  ); /* 24px – identisch H3, für explizite h4-Tags */
  --fs-subtitle: clamp(
    1.03rem,
    1.146vw,
    1.375rem
  ); /* 22px – UI-Titles, FAQ-Fragen */
  --fs-body: clamp(1rem, 0.833vw, 1rem); /* 16px */
  --fs-cta: clamp(1rem, 0.833vw, 1rem); /* 16px Bold */
  --fs-nav: clamp(1rem, 0.885vw, 1.0625rem); /* 16–17px */
}

/* ——————————————————————————————————————
   BASE RESET
   —————————————————————————————————————— */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-base);
  color: var(--black-main);
  background-color: var(--white-main);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

p {
  margin: 0;
  line-height: 1.5;
  font-family: var(--font-base);
  font-size: var(--fs-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-headline);
  line-height: 1.15;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.14; /* 64px / 56px */
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.14;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.4;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
}

/* ——————————————————————————————————————
   DEKORATIVE HELPER
   —————————————————————————————————————— */
.bg-raster-effekt {
  background-image: var(--bg-raster-effekt);
  background-size: 22px 22px;
  background-repeat: repeat;
}

.bg-gradient-blue {
  background-image: var(--section-bg-gradient-blue);
}

.bg-gradient-yellow {
  background-image: var(--section-bg-gradient-yellow);
}

.bg-gradient-blue.bg-raster-effekt {
  background-image: var(--section-bg-gradient-blue), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-yellow.bg-raster-effekt {
  background-image: var(--section-bg-gradient-yellow), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-orange {
  background-image: var(--section-bg-gradient-orange);
}

.bg-gradient-orange.bg-raster-effekt {
  background-image: var(--section-bg-gradient-orange), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-purple {
  background-image: var(--section-bg-gradient-purple);
}

.bg-gradient-purple.bg-raster-effekt {
  background-image: var(--section-bg-gradient-purple), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-green {
  background-image: var(--section-bg-gradient-green);
}

.bg-gradient-green.bg-raster-effekt {
  background-image: var(--section-bg-gradient-green), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

/* Gradient-Repeat-Varianten: Gradient beginnt und endet gleich → nahtloser Übergang zwischen gestapelten Sections */
.bg-gradient-blue-repeat {
  background-image: var(--section-bg-gradient-blue-repeat);
}

.bg-gradient-blue-repeat.bg-raster-effekt {
  background-image:
    var(--section-bg-gradient-blue-repeat), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-yellow-repeat {
  background-image: var(--section-bg-gradient-yellow-repeat);
}

.bg-gradient-yellow-repeat.bg-raster-effekt {
  background-image:
    var(--section-bg-gradient-yellow-repeat), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-orange-repeat {
  background-image: var(--section-bg-gradient-orange-repeat);
}

.bg-gradient-orange-repeat.bg-raster-effekt {
  background-image:
    var(--section-bg-gradient-orange-repeat), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-purple-repeat {
  background-image: var(--section-bg-gradient-purple-repeat);
}

.bg-gradient-purple-repeat.bg-raster-effekt {
  background-image:
    var(--section-bg-gradient-purple-repeat), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

.bg-gradient-green-repeat {
  background-image: var(--section-bg-gradient-green-repeat);
}

.bg-gradient-green-repeat.bg-raster-effekt {
  background-image:
    var(--section-bg-gradient-green-repeat), var(--bg-raster-effekt);
  background-size:
    auto,
    22px 22px;
}

/* Gradient deaktiviert wenn Blobs aktiv – nur Raster bleibt */
.bg-gradient-blue.bg-animation,
.bg-gradient-yellow.bg-animation,
.bg-gradient-orange.bg-animation,
.bg-gradient-purple.bg-animation,
.bg-gradient-green.bg-animation,
.bg-gradient-blue-repeat.bg-animation,
.bg-gradient-yellow-repeat.bg-animation,
.bg-gradient-orange-repeat.bg-animation,
.bg-gradient-purple-repeat.bg-animation,
.bg-gradient-green-repeat.bg-animation {
  background-image: none;
}

.bg-gradient-blue.bg-raster-effekt.bg-animation,
.bg-gradient-yellow.bg-raster-effekt.bg-animation,
.bg-gradient-orange.bg-raster-effekt.bg-animation,
.bg-gradient-purple.bg-raster-effekt.bg-animation,
.bg-gradient-green.bg-raster-effekt.bg-animation,
.bg-gradient-blue-repeat.bg-raster-effekt.bg-animation,
.bg-gradient-yellow-repeat.bg-raster-effekt.bg-animation,
.bg-gradient-orange-repeat.bg-raster-effekt.bg-animation,
.bg-gradient-purple-repeat.bg-raster-effekt.bg-animation,
.bg-gradient-green-repeat.bg-raster-effekt.bg-animation {
  background-image: var(--bg-raster-effekt);
  background-size: 22px 22px;
}

/* ——————————————————————————————————————
   ANIMIERTE BLOB-HINTERGRÜNDE
   .bg-animation + .bg-gradient-yellow → gelbe Blobs
   .bg-animation + .bg-gradient-blue   → blaue Blobs
   beide kombiniert                   → Mix
   —————————————————————————————————————— */
.bg-animation {
  position: relative;
  overflow: hidden;
}

.bg-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  overflow: hidden;
}

.bg-animation > *:not(.bg-blobs) {
  position: relative;
  z-index: 1;
}

.bg-blob {
  position: absolute;
  width: var(--blob-size);
  height: var(--blob-size);
  background: var(--blob-color);
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Yellow blobs – links→rechts und umgekehrt, scale + opacity */
.bg-blob--y1 {
  animation: bg-drift-y1 12s ease-in-out infinite;
}
.bg-blob--y2 {
  animation: bg-drift-y2 15s ease-in-out infinite;
}
.bg-blob--y3 {
  animation: bg-drift-y3 10s ease-in-out infinite;
}

@keyframes bg-drift-y1 {
  0% {
    transform: translate(-20vw, 15%) scale(0.75);
    opacity: 0;
  }
  18% {
    opacity: 0.5;
  }
  50% {
    transform: translate(35vw, 40%) scale(1.2);
    opacity: 0.45;
  }
  82% {
    opacity: 0.4;
  }
  100% {
    transform: translate(95vw, 20%) scale(0.8);
    opacity: 0;
  }
}

@keyframes bg-drift-y2 {
  0% {
    transform: translate(110vw, 50%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.45;
  }
  50% {
    transform: translate(40vw, 20%) scale(1.25);
    opacity: 0.5;
  }
  82% {
    opacity: 0.38;
  }
  100% {
    transform: translate(-15vw, 55%) scale(0.85);
    opacity: 0;
  }
}

@keyframes bg-drift-y3 {
  0% {
    transform: translate(20vw, -15%) scale(0.7);
    opacity: 0;
  }
  22% {
    opacity: 0.42;
  }
  50% {
    transform: translate(60vw, 50%) scale(1.3);
    opacity: 0.48;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translate(35vw, 115%) scale(0.78);
    opacity: 0;
  }
}

/* Blue blobs – links→rechts und umgekehrt, scale + opacity */
.bg-blob--b1 {
  animation: bg-drift-b1 13s ease-in-out infinite;
}
.bg-blob--b2 {
  animation: bg-drift-b2 11s ease-in-out infinite;
}
.bg-blob--b3 {
  animation: bg-drift-b3 16s ease-in-out infinite;
}

@keyframes bg-drift-b1 {
  0% {
    transform: translate(-25vw, 30%) scale(0.8);
    opacity: 0;
  }
  18% {
    opacity: 0.48;
  }
  50% {
    transform: translate(40vw, 55%) scale(1.2);
    opacity: 0.5;
  }
  80% {
    opacity: 0.38;
  }
  100% {
    transform: translate(100vw, 38%) scale(0.82);
    opacity: 0;
  }
}

@keyframes bg-drift-b2 {
  0% {
    transform: translate(108vw, 18%) scale(0.75);
    opacity: 0;
  }
  22% {
    opacity: 0.5;
  }
  52% {
    transform: translate(28vw, 58%) scale(1.25);
    opacity: 0.45;
  }
  80% {
    opacity: 0.35;
  }
  100% {
    transform: translate(-22vw, 32%) scale(0.88);
    opacity: 0;
  }
}

@keyframes bg-drift-b3 {
  0% {
    transform: translate(55vw, -18%) scale(0.72);
    opacity: 0;
  }
  20% {
    opacity: 0.42;
  }
  50% {
    transform: translate(22vw, 48%) scale(1.28);
    opacity: 0.52;
  }
  82% {
    opacity: 0.3;
  }
  100% {
    transform: translate(70vw, 112%) scale(0.8);
    opacity: 0;
  }
}

/* Orange blobs – leicht diagonal, anderer Rhythmus als yellow/blue */
.bg-blob--o1 {
  animation: bg-drift-o1 14s ease-in-out infinite;
}
.bg-blob--o2 {
  animation: bg-drift-o2 11s ease-in-out infinite;
}
.bg-blob--o3 {
  animation: bg-drift-o3 17s ease-in-out infinite;
}

@keyframes bg-drift-o1 {
  0% {
    transform: translate(10vw, -20%) scale(0.78);
    opacity: 0;
  }
  20% {
    opacity: 0.48;
  }
  50% {
    transform: translate(55vw, 45%) scale(1.22);
    opacity: 0.44;
  }
  80% {
    opacity: 0.36;
  }
  100% {
    transform: translate(90vw, 10%) scale(0.82);
    opacity: 0;
  }
}

@keyframes bg-drift-o2 {
  0% {
    transform: translate(85vw, 60%) scale(0.82);
    opacity: 0;
  }
  22% {
    opacity: 0.46;
  }
  52% {
    transform: translate(20vw, 25%) scale(1.18);
    opacity: 0.5;
  }
  80% {
    opacity: 0.32;
  }
  100% {
    transform: translate(-10vw, 65%) scale(0.86);
    opacity: 0;
  }
}

@keyframes bg-drift-o3 {
  0% {
    transform: translate(40vw, 105%) scale(0.7);
    opacity: 0;
  }
  18% {
    opacity: 0.4;
  }
  50% {
    transform: translate(70vw, 35%) scale(1.3);
    opacity: 0.45;
  }
  80% {
    opacity: 0.28;
  }
  100% {
    transform: translate(15vw, -15%) scale(0.75);
    opacity: 0;
  }
}

/* Purple blobs */
.bg-blob--p1 {
  animation: bg-drift-p1 13s ease-in-out infinite;
}
.bg-blob--p2 {
  animation: bg-drift-p2 16s ease-in-out infinite;
}
.bg-blob--p3 {
  animation: bg-drift-p3 11s ease-in-out infinite;
}

@keyframes bg-drift-p1 {
  0% {
    transform: translate(5vw, -22%) scale(0.76);
    opacity: 0;
  }
  20% {
    opacity: 0.46;
  }
  50% {
    transform: translate(48vw, 42%) scale(1.24);
    opacity: 0.5;
  }
  80% {
    opacity: 0.34;
  }
  100% {
    transform: translate(88vw, 15%) scale(0.8);
    opacity: 0;
  }
}
@keyframes bg-drift-p2 {
  0% {
    transform: translate(95vw, 55%) scale(0.8);
    opacity: 0;
  }
  22% {
    opacity: 0.44;
  }
  52% {
    transform: translate(25vw, 22%) scale(1.2);
    opacity: 0.48;
  }
  80% {
    opacity: 0.32;
  }
  100% {
    transform: translate(-8vw, 60%) scale(0.84);
    opacity: 0;
  }
}
@keyframes bg-drift-p3 {
  0% {
    transform: translate(45vw, 108%) scale(0.72);
    opacity: 0;
  }
  20% {
    opacity: 0.42;
  }
  50% {
    transform: translate(68vw, 30%) scale(1.28);
    opacity: 0.46;
  }
  82% {
    opacity: 0.28;
  }
  100% {
    transform: translate(12vw, -18%) scale(0.78);
    opacity: 0;
  }
}

/* Green blobs */
.bg-blob--g1 {
  animation: bg-drift-g1 15s ease-in-out infinite;
}
.bg-blob--g2 {
  animation: bg-drift-g2 12s ease-in-out infinite;
}
.bg-blob--g3 {
  animation: bg-drift-g3 18s ease-in-out infinite;
}

@keyframes bg-drift-g1 {
  0% {
    transform: translate(-18vw, 10%) scale(0.78);
    opacity: 0;
  }
  18% {
    opacity: 0.44;
  }
  50% {
    transform: translate(42vw, 52%) scale(1.22);
    opacity: 0.48;
  }
  80% {
    opacity: 0.36;
  }
  100% {
    transform: translate(98vw, 28%) scale(0.82);
    opacity: 0;
  }
}
@keyframes bg-drift-g2 {
  0% {
    transform: translate(102vw, 40%) scale(0.82);
    opacity: 0;
  }
  20% {
    opacity: 0.46;
  }
  50% {
    transform: translate(32vw, 15%) scale(1.18);
    opacity: 0.5;
  }
  82% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-12vw, 50%) scale(0.88);
    opacity: 0;
  }
}
@keyframes bg-drift-g3 {
  0% {
    transform: translate(30vw, -20%) scale(0.7);
    opacity: 0;
  }
  22% {
    opacity: 0.38;
  }
  50% {
    transform: translate(75vw, 48%) scale(1.3);
    opacity: 0.44;
  }
  80% {
    opacity: 0.26;
  }
  100% {
    transform: translate(18vw, 110%) scale(0.76);
    opacity: 0;
  }
}

/* Gelber Textmarker – Hintergrundstreifen hinter Text */
.textmarker {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--gradient-yellow-horizontal);
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: left 80%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
}

.textmarker-blue {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--gradient-blue-horizontal);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: left 120%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
}

.textmarker-purple {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--gradient-purple-horizontal);
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: left 80%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
}

/* ——————————————————————————————————————
   NAVIGATION
   —————————————————————————————————————— */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 300;
  /* GPU-Compositing: fixes iOS Safari sticky glitch where header slides under viewport edge on scroll */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white-transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
}

.site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.7px;
  background: var(--black-main);
}

.nav-is-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.nav-is-open .site-header::after {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.75rem;
  padding: 0 2vw 0 0;
}

@media (max-width: 599px) {
  .site-nav {
    height: 2.9rem;
    padding: 0 0.5vw 0 0;
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-logo img {
  height: 100%;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.75vw, 4.5rem);
  text-transform: uppercase;
}

.nav-link {
  display: block;
  padding: 0.625rem;
  font-family: var(--font-base);
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--black-main);
  background: var(--gradient-yellow-horizontal);
  background-size: 0% 28%;
  background-repeat: no-repeat;
  background-position: left 80%;
  transition: background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover,
.nav-link--active {
  background-size: 100% 28%;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-8) var(--padding-16);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-nav-btn);
  font-family: var(--font-base);
  font-size: var(--fs-nav);
  font-weight: 400;
  color: var(--black-main);
  white-space: nowrap;
  transition: background 0.2s ease;
}

@media (max-width: 767px) {
  .nav-cta {
    display: none !important;
  }
}

.nav-cta:hover {
  background: var(--grey-light);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-20);
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--black-main);
  align-items: center;
  justify-content: center;
}

/* Hamburger → X morph */
.hamburger-menu svg line {
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.hamburger-menu.is-open line:nth-child(1) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-menu.is-open line:nth-child(2) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger-menu.is-open line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ——————————————————————————————————————
   MOBILE NAVIGATION OVERLAY
   —————————————————————————————————————— */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 200;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  padding-top: 3.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-logo,
.nav-cta {
  transition: opacity 0.18s ease;
}

.nav-is-open .nav-logo,
.nav-is-open .nav-cta {
  opacity: 0;
  pointer-events: none;
}

.mobile-nav__links {
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: var(--space-16);
}

.mobile-nav__links li {
  position: relative;
  text-align: center;
}

.mobile-nav__links li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: var(--black-main);
}

.mobile-nav__link {
  display: block;
  padding: var(--padding-20) var(--padding-32);
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--black-main);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.mobile-nav__link:hover {
  opacity: 0.6;
}

.mobile-nav__link.is-active span {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--gradient-yellow-horizontal);
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: left 80%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
}

.mobile-nav__cta-item {
  padding: var(--padding-32);
}

/* ——————————————————————————————————————
   LAYOUT-HELFER
   —————————————————————————————————————— */
section {
  padding-top: var(--padding-100);
  padding-bottom: var(--padding-100);
  position: relative;
}

@media (max-width: 599px) {
  section {
    padding-top: var(--padding-74);
    padding-bottom: var(--padding-74);
  }
}

@media (max-width: 499px) {
  section {
    padding-top: var(--padding-50);
    padding-bottom: var(--padding-50);
  }
}

@media (max-width: 539px) {
  :root {
    --fs-h1: clamp(1.75rem, calc(-0.25rem + 8.54vw), 2.625rem);
    --fs-h2: clamp(1.75rem, calc(-0.25rem + 7.5vw), 2.625rem);
  }
}

.inner {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 97rem;
  width: 100%;
  gap: var(--gap-64);
}

@media (max-width: 1699px) {
  .inner {
    max-width: unset;
    padding-left: clamp(var(--padding-24), 3.7vw, var(--padding-80));
    padding-right: clamp(var(--padding-24), 3.7vw, var(--padding-80));
  }

  .section-governance .user-card--purple {
    right: clamp(0.9rem, calc(3.4rem - 2.3vw), 1.5rem);
  }

  .section-governance .user-card--yellow {
    right: calc(25rem - 2.3vw);
  }
}

@media (max-width: 599px) {
  .inner {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
  }
}

.container {
  width: 100%;
}

.content-wrap {
  display: flex;
  flex-direction: column;
}

.text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-28);
}

.section-headlines {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  max-width: 1040px;
}

/* ——————————————————————————————————————
   BUTTON BLAU
   gradient-blue-horizontal, border, radius:4px
   —————————————————————————————————————— */
.btn-primary--blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-gradient-blue);
  color: var(--black-main);
  font-family: var(--font-base);
  font-size: var(--fs-cta);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--padding-16) var(--padding-40);
  border-radius: var(--radius-btn);
  border: 1px solid var(--black-main);
  cursor: pointer;
  text-decoration: none;
  max-width: max-content;
  white-space: nowrap;
  box-shadow: 12px 10px 13px 2px var(--blue-light);
  transition:
    box-shadow 0.45s ease-in-out,
    background 0.45s ease-in-out;
}

.btn-primary--blue:hover {
  box-shadow: 0 20px 38px var(--blue-grey);
  background: linear-gradient(
    119deg,
    var(--blue-main) 0%,
    var(--blue-hover) 100%
  );
}

.btn-primary--purple {
  background: var(--cta-gradient-purple);
  box-shadow: 12px 10px 13px 2px var(--purple-light);
  transition:
    box-shadow 0.45s ease-in-out,
    background 0.45s ease-in-out;
}

.btn-primary--purple:hover {
  box-shadow: 0 20px 38px var(--purple-grey);
  background: linear-gradient(
    119deg,
    var(--purple-main) 0%,
    var(--purple-hover) 100%
  );
}

.btn-outline-bold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white-main);
  color: var(--black-main);
  font-family: var(--font-base);
  font-size: var(--fs-cta);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--padding-16) var(--padding-40);
  border-radius: 0.625rem;
  border: 2px solid var(--black-main);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 8px 8px 0 var(--black-main);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
  white-space: nowrap;
}

.btn-outline-bold:hover {
  box-shadow: 4px 4px 0 var(--black-main);
  transform: translate(4px, 4px);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px var(--padding-16);
  border-radius: 100px;
  font-size: var(--fs-body);
  font-weight: 400;
  white-space: nowrap;
  font-family: var(--font-base);
}

.badge--yellow {
  background: var(--yellow-main);
}
.badge--blue {
  background: var(--blue-main);
}
.badge--purple {
  background: var(--purple-main);
}

/* ——————————————————————————————————————
   #HERO SECTION
   bg: grey-light + bg-raster-effekt, vertical center/center
   —————————————————————————————————————— */
.section-hero {
  .inner {
    align-items: center;
    text-align: center;
    gap: var(--gap-40);
    max-width: 75rem;
    padding-top: var(--padding-24);
  }
}

@media (max-width: 768px) {
  .section-hero {
    .inner {
      padding-top: 0;
    }
  }
}

/* Hero h2 entspricht optisch Figma H4-reg (24px/400) */
.section-hero h2 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.5;
}

/* ——————————————————————————————————————
   SUBPAGE HERO (Modelle, Agenten, weitere Unterseiten)
   —————————————————————————————————————— */
.section-hero--subpage {
  min-height: 26rem;
  display: flex;
  align-items: center;
  position: relative;
}

.section-hero--subpage .inner {
  gap: var(--gap-16);
  align-items: flex-start;
  width: 100%;
}

.section-hero--subpage .hero-headlines {
  align-self: center;
  text-align: center;
}

.section-hero--subpage h1 {
  line-height: 1.14;
}

.section-hero--subpage h2 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.5;
  /*  max-width: 42rem; */
}

.subpage-back {
  position: absolute;
  top: var(--space-40);
  left: var(--space-80);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--dark-grey-1);
  font-family: var(--font-base);
  text-decoration: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.subpage-back:hover {
  opacity: 0.6;
}
.subpage-back svg {
  transform: rotate(180deg);
}

.hero-headlines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
}

/* USP-Leiste */
.usp-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* padding: var(--space-24); */
}

.usp-item {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  font-size: var(--fs-body);
  font-weight: 400;
}

.usp-item img,
.usp-item svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Zwei Buttons nebeneinander im Hero */
.hero-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-28);
  margin-bottom: var(--space-24);
  margin-top: var(--space-24);
}

.hero-cta-wrap .btn-primary--blue {
  flex: 1 1 14rem;
  max-width: 18.75rem;
}

/* Video-Container */
.video-container {
  position: relative;
  width: 100%;
  max-width: 100rem;
  aspect-ratio: 1205 / 722;
  margin-top: var(--space-24);
  border-radius: var(--radius-card-gradient);
  overflow: hidden;
  box-shadow: 1px 1px 20px 3px rgba(124, 124, 124, 0.32);
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  will-change: transform;
}

.video-play-btn svg {
  display: block;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.video-play-btn:hover svg {
  transform: scale(1.1);
  opacity: 0.9;
}

/* Video Overlay */
.video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400; /* über header (z-index 300) – Overlay deckt die Navbar ab */
  background: rgb(244 245 246 / 59%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}

.video-overlay.is-active {
  display: flex;
}

.video-overlay__inner {
  position: relative;
  /* Breite max. 1700px, aber nie breiter als Viewport (minus Rand) */
  max-width: min(106.25rem, calc(100% - 2 * var(--padding-40)));
  /* Höhe nie höher als Viewport (Platz für Schließen-Button + Abstand oben) */
  max-height: calc(100% - 9.5rem);
}

.video-overlay__close {
  position: absolute;
  top: -3rem;
  right: -2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black-main);
  padding: var(--padding-8);
  line-height: 0;
  transition: opacity 0.2s ease;
}

.video-overlay__close:hover {
  opacity: 0.6;
}

.video-overlay__inner video {
  /* skaliert so, dass es in Breite UND Höhe passt, 16:9 bleibt erhalten */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9.5rem);
  border-radius: 0.5rem;
  display: block;
}

/* ——————————————————————————————————————
   #KUNDEN SECTION
   bg: white, vertical center/center
   —————————————————————————————————————— */
.section-kunden {
  background: var(--white-main);
  text-align: center;
}

.section-kunden .inner {
  align-items: center;
  gap: var(--gap-48);
}

/* Kunden h3 entspricht optisch Figma H4-reg */
.section-kunden h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
}

.logo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-28);
  flex-wrap: wrap;
}

.logo-item {
  width: 10rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ——————————————————————————————————————
   BLUR-ÜBERGÄNGE zwischen weißen und bg-raster-effekt Sections
   ::before auf der Section nach einer bg-raster-effekt Section → überlappt nach oben
   ::after  auf der Section vor  einer bg-raster-effekt Section → überlappt nach unten
   —————————————————————————————————————— */
.bg-raster-effekt + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--space-100);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  transform: translateY(-50%);
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
  pointer-events: none;
  z-index: 10;
}

section:has(+ .bg-raster-effekt)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--space-100);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  transform: translateY(50%);
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 75%,
    transparent
  );
  pointer-events: none;
  z-index: 10;
}

/* Kein Blur zwischen zwei direkt aufeinanderfolgenden bg-raster-effekt-Sections */
.bg-raster-effekt + .bg-raster-effekt::before,
.bg-raster-effekt:has(+ .bg-raster-effekt)::after {
  display: none;
}

@media (max-width: 499px) {
  .bg-raster-effekt:not(.section-hero):not(.section-hero--subpage) {
    padding-top: var(--padding-60);
    padding-bottom: var(--padding-80);
  }

  .bg-raster-effekt + section::before {
    height: var(--space-60);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
  }

  .bg-raster-effekt + section::after {
    height: var(--space-60);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
  }
}

/* ——————————————————————————————————————
   #WASISTHUBKI SECTION
   bg: white, headline + 3 Karten + subtext + CTA
   —————————————————————————————————————— */
.section-wasisthubki {
  background: var(--white-main);
}

.section-wasisthubki .inner {
  align-items: center;
  text-align: center;
}

/* h3 in dieser section ist Figma H4-reg */
.section-wasisthubki h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
}

/* 3er Karten-Reihe */
.card-grid-3er {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-24);
  width: 100%;
}

.card-grid-4er {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-24);
  width: 100%;
}

.card {
  border-radius: var(--radius-card-gradient);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Karten mit Farbgradient (wasisthubki + governance Übergang) */
.card--gradient-blue {
  background: var(--card-gradient-blue);
}
.card--gradient-yellow {
  background: var(--card-gradient-yellow);
}
.card--gradient-purple {
  background: var(--card-gradient-purple);
}
.card--gradient-green {
  background: var(--card-gradient-green);
}
.card--gradient-orange {
  background: var(--card-gradient-orange);
}

.card-gradient {
  padding: var(--padding-40);
  gap: var(--gap-24);
  align-items: center;
  text-align: center;
}

.card-gradient .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-gradient .text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-8);
}

.card__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.card__heading {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--black-main);
}

.card__body {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--black-main);
  line-height: 1.5;
}

/* ——————————————————————————————————————
   #GOVERNANCE SECTION
   bg: white, links Text/Checklist, rechts Cards absolut überlappend
   —————————————————————————————————————— */
.section-governance {
  background: var(--white-main);
}

.governance-inner {
  position: relative;
  min-height: 48rem;
}

.governance-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
  max-width: max-content;
}

@media (max-width: 599px) {
  .governance-left {
    margin: 0 auto;
  }
}

.section-governance h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.6;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--gap-8);
  font-size: var(--fs-body);
  font-weight: 400;
}

.checklist__item img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* display:contents → Cards werden direkt gegen .governance-inner positioniert */
.governance-cards-area {
  display: contents;
}

.user-card {
  position: absolute;
  width: 100%;
  min-width: 380px;
  max-width: max-content;
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-28);
  display: flex;
  flex-direction: column;
  gap: var(--gap-20);
  will-change: transform;
  box-shadow: -2px 6px 16px 0px #9f9f9fe0;
}

/* JANNIS: oben rechts, weiter rechts rausgeschoben */
.user-card--purple {
  top: clamp(-8rem, calc(-16vw + 9rem), -4rem);
  right: clamp(-5rem, calc(18.4rem - 20.8vw), 1.5rem);
  z-index: 4;
  background: linear-gradient(
    180deg,
    var(--purple-main) 0%,
    var(--white-main) 53%
  );
}

/* SARAH: weiter rechts, deckt Text links nicht ab */
.user-card--yellow {
  top: clamp(8rem, calc(-27vw + 36.75rem), 14rem);
  right: clamp(10rem, calc(16vw + 1rem), 18rem);
  z-index: 2;
  background:
    linear-gradient(180deg, var(--yellow-main) 0%, rgba(242, 237, 168, 0) 54%),
    var(--white-main);
}

.user-card__name {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.user-card__photo {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-card-outline);
  object-position: center -53px;
  margin-top: 0px;
}

.is-slider .user-card__photo {
  width: auto;
  height: 9rem;
}

.user-card__meta {
  display: flex;
  gap: var(--gap-40);
}

.user-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.user-card__meta-label {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  font-size: var(--fs-body);
  font-weight: 600;
}

.user-card__meta-label img {
  width: 1.125rem;
  height: 1.125rem;
}

.user-card__meta-value {
  font-size: var(--fs-body);
  font-weight: 400;
}

.agent-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.agent-list__label {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  font-size: var(--fs-body);
  font-weight: 600;
}

.agent-list__label img {
  width: 1.25rem;
  height: 1.25rem;
}

.agent-item {
  display: flex;
  flex-direction: column;
  padding-left: var(--padding-24);
  border-left: 1px solid var(--black-main);
  font-size: var(--fs-body);
}

.agent-item span {
  font-weight: 400;
}

.agent-item em {
  font-weight: 300;
  font-style: italic;
}

/* ——————————————————————————————————————
   #SICHERHEIT SECTION
   bg: grey-light + bg-raster-effekt, 3 Karten weiß/schwarz-border
   —————————————————————————————————————— */
/* Karten: weiß, schwarzer Border */
.card--outline {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  padding: var(--padding-32);
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  align-items: center;
  text-align: center;
}

.card--outline .text-wrap {
  gap: var(--gap-8);
}

/* ——————————————————————————————————————
   #VIERWEGE SECTION
   bg: white, 2×2 Karten-Grid mit farbigen Drop-Shadows
   —————————————————————————————————————— */
.section-vierwege {
  background: var(--white-main);
}

.section-vierwege .inner {
  align-items: center;
  text-align: center;
}

.card-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-32) var(--gap-24);
  width: 100%;
}

.card--shadow {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  padding: var(--padding-40);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-16);
}

.card--shadow-yellow {
  filter: drop-shadow(16px 16px 0px var(--yellow-main));
}
.card--shadow-blue {
  filter: drop-shadow(16px 16px 0px var(--blue-light));
}
.card--shadow-purple {
  filter: drop-shadow(16px 16px 0px var(--purple-light));
}
.card--shadow-green {
  filter: drop-shadow(16px 16px 0px var(--green-main));
}

.card--shadow .card__heading {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.card--shadow img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ——————————————————————————————————————
   #FAQ SECTION
   bg: grey-light + bg-raster-effekt
   —————————————————————————————————————— */
.section-faq .inner {
  padding-top: var(--padding-80);
  padding-bottom: var(--padding-80);
}

.faq-card {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.1);
  padding: var(--padding-32) var(--padding-48);
}

.faq-item {
  border-bottom: 1px solid var(--black-main);
}
.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-16);
  width: 100%;
  padding: var(--padding-24) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-question__text {
  font-family: var(--font-base);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  line-height: 1.4;
  color: var(--black-main);
}

.faq-chevron {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--purple-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer.is-open {
  grid-template-rows: 1fr;
}

.faq-answer__inner {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.faq-answer.is-open .faq-answer__inner {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.3s ease 0.1s;
}

.faq-answer__inner p {
  padding-top: var(--padding-4);
  padding-bottom: var(--padding-24);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--black-main);
}

@media (max-width: 768px) {
  .section-faq .inner {
    padding-top: 0;
    padding-bottom: 0;
  }

  .faq-card {
    padding: var(--padding-12) var(--padding-32) var(--padding-20)
      var(--padding-32);
  }
}

/* ——————————————————————————————————————
   #PRE-FOOTER
   bg: white, logo + H2 + 2 CTAs + back-to-top
   —————————————————————————————————————— */
.section-prefooter {
  background: var(--white-main);
}

.prefooter-inner {
  position: relative;
  padding-top: var(--padding-80);
  padding-bottom: var(--padding-80);
}

.back-to-top {
  position: absolute;
  top: var(--space-40);
  right: var(--space-80);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
  text-decoration: none;
  color: var(--dark-grey-1);
  font-family: var(--font-base);
  font-size: 0.75rem;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.back-to-top:hover {
  opacity: 0.6;
}

.prefooter-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-40);
}

.prefooter-logo {
  width: 13.125rem;
  height: auto;
}

.section-prefooter h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 4rem;
  color: var(--black-main);
}

.prefooter-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-24);
}

.prefooter-cta-wrap .btn-primary--blue {
  flex: 1 1 14rem;
  max-width: 18.75rem;
}

/* ——————————————————————————————————————
   FOOTER
   bg: dark-grey-1, 3 Spalten
   —————————————————————————————————————— */
.site-footer {
  background: var(--dark-grey-1);
  padding-left: var(--padding-24);
  padding-right: var(--padding-24);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap-40);
  padding-top: var(--padding-40);
  padding-bottom: var(--padding-40);
}

.footer-address {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--white-main);
  line-height: 1.5;
}

.footer-address__name {
  font-weight: 600;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
}

.footer-legal a {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--white-main);
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.footer-legal a:hover {
  opacity: 0.6;
}

.footer-contact {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
}

.footer-contact__item {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  min-height: 48px;
  padding-inline: var(--padding-4);
  text-decoration: none;
  color: var(--white-main);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.footer-contact__item img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.footer-contact__item:hover {
  opacity: 0.6;
}

/* ============================================================
   MODELLE Unterseite – seitenspezifische Styles
   ============================================================ */

.section-modelle-hub {
  background: var(--white-main);
}

.section-modelle-hub .inner {
  gap: var(--gap-40);
}

.hub-text {
  max-width: 46rem;
}

.hub-text h2 {
  margin-bottom: var(--space-24);
}

.hub-text p {
  line-height: 1.6;
}

/* ── Hub Tools Visualisierung ── */
/* .tools-hub {
  position: relative;
  width: 100%;
  max-width: 66.4375rem;
  margin-inline: auto;
  aspect-ratio: 1063 / 640;
  background: var(--white-main);
  border-radius: var(--radius-card-gradient);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07);
  overflow: hidden;
} */

.tools-hub {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 1063 / 640;
  border-radius: var(--radius-card-gradient);
  overflow: hidden;
}

.tools-hub__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  stroke: white;
  stroke-width: 14;
  stroke-linecap: round;
}

.tools-hub__bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white-main);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
}

.tools-hub.is-playing .tools-hub__bubble {
  animation: bubble-in 0.25s ease-out both;
}

.tools-hub__bubble--sm {
  width: 100px;
  height: 100px;
}
.tools-hub__bubble--lg {
  width: 140px;
  height: 140px;
}
.tools-hub__bubble--center {
  width: 218px;
  height: 218px;
}

.tools-hub__icon {
  width: 56%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

.tools-hub__bubble--center .tools-hub__icon {
  width: 100%;
  max-width: 120px;
  height: auto;
}

/* Positionen: left/top = Mittelpunkt des Kreises als % der Container-Breite/-Höhe */
.tools-hub__bubble--center {
  left: 49.95%;
  top: 50.6%;
}
.tools-hub__bubble--1 {
  left: 20.4%;
  top: 83.1%;
} /* Confluence */
.tools-hub__bubble--2 {
  left: 42.62%;
  top: 78.33%;
} /* SharePoint */
.tools-hub__bubble--3 {
  left: 58.74%;
  top: 77%;
} /* Slack */
.tools-hub__bubble--4 {
  left: 24.5%;
  top: 52.03%;
} /* GitHub */
.tools-hub__bubble--5 {
  left: 13.7%;
  top: 26.3%;
} /* GitLab */
.tools-hub__bubble--6 {
  left: 35.8%;
  top: 22.5%;
} /* Notion */
.tools-hub__bubble--7 {
  left: 60.8%;
  top: 16.6%;
} /* Teams */
.tools-hub__bubble--8 {
  left: 83.1%;
  top: 17%;
} /* Atlassian */
.tools-hub__bubble--9 {
  left: 70.8%;
  top: 42.7%;
} /* Google Drive */
.tools-hub__bubble--10 {
  left: 83.52%;
  top: 54.18%;
} /* PowerPoint */
.tools-hub__bubble--11 {
  left: 81.6%;
  top: 77.7%;
} /* Outlook */

/* ---- Tools Hub Animation ---- */

@keyframes bubble-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes line-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.tools-hub__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Bubble appearance delays – scattered order for visual variety */
.tools-hub.is-playing .tools-hub__bubble--7 {
  animation-delay: 0.12s;
}
.tools-hub.is-playing .tools-hub__bubble--5 {
  animation-delay: 0.23s;
}
.tools-hub.is-playing .tools-hub__bubble--8 {
  animation-delay: 0.32s;
}
.tools-hub.is-playing .tools-hub__bubble--6 {
  animation-delay: 0.41s;
}
.tools-hub.is-playing .tools-hub__bubble--1 {
  animation-delay: 0.49s;
}
.tools-hub.is-playing .tools-hub__bubble--11 {
  animation-delay: 0.59s;
}
.tools-hub.is-playing .tools-hub__bubble--4 {
  animation-delay: 0.67s;
}
.tools-hub.is-playing .tools-hub__bubble--3 {
  animation-delay: 0.76s;
}
.tools-hub.is-playing .tools-hub__bubble--2 {
  animation-delay: 0.85s;
}
.tools-hub.is-playing .tools-hub__bubble--10 {
  animation-delay: 0.93s;
}
.tools-hub.is-playing .tools-hub__bubble--9 {
  animation-delay: 1.01s;
}

/* Center bubble: after all tools (last tool ends ≈ 1.4s) */
.tools-hub.is-playing .tools-hub__bubble--center {
  animation-delay: 0.91s;
}

/* Connector lines: start with center bubble, order scattered */
/* Odd lines grow from center, even lines grow from outer (coords swapped in HTML) */
.tools-hub.is-playing .tools-hub__line--7 {
  animation: line-draw 0.3s ease-out 1.18s both;
}
.tools-hub.is-playing .tools-hub__line--1 {
  animation: line-draw 0.3s ease-out 1.25s both;
}
.tools-hub.is-playing .tools-hub__line--8 {
  animation: line-draw 0.3s ease-out 1.32s both;
}
.tools-hub.is-playing .tools-hub__line--3 {
  animation: line-draw 0.3s ease-out 1.39s both;
}
.tools-hub.is-playing .tools-hub__line--5 {
  animation: line-draw 0.3s ease-out 1.45s both;
}
.tools-hub.is-playing .tools-hub__line--10 {
  animation: line-draw 0.3s ease-out 1.54s both;
}
.tools-hub.is-playing .tools-hub__line--2 {
  animation: line-draw 0.3s ease-out 1.61s both;
}
.tools-hub.is-playing .tools-hub__line--11 {
  animation: line-draw 0.3s ease-out 1.68s both;
}
.tools-hub.is-playing .tools-hub__line--6 {
  animation: line-draw 0.3s ease-out 1.75s both;
}
.tools-hub.is-playing .tools-hub__line--4 {
  animation: line-draw 0.3s ease-out 1.82s both;
}
.tools-hub.is-playing .tools-hub__line--9 {
  animation: line-draw 0.3s ease-out 1.89s both;
}

.section-modelluebersicht {
  background: var(--white-main);
}

.section-modelluebersicht .inner {
  align-items: flex-start;
}

.section-modelluebersicht .btn-primary--blue {
  align-self: center;
}

.model-providers {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-24);
  width: 100%;
  flex-wrap: wrap;
}

.model-provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  flex: 1 1 8rem;
  min-width: 8rem;
  max-width: 13rem;
  justify-self: center;
}

.model-provider__name-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.model-provider__logo {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-card-outline);
}

.model-provider__name {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: center;
}

.model-provider__divider {
  width: 10rem;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
}

.model-provider__desc {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  text-align: center;
  line-height: 1.5;
}

.anwendung-cards {
  display: flex;
  align-items: stretch;
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  overflow: hidden;
  width: 100%;
}

.anwendung-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--padding-48);
  gap: var(--gap-16);
  position: relative;
}

.anwendung-card + .anwendung-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  height: 84%;
  width: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.anwendung-card__heading {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.anwendung-card__text {
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
}

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-16);
  justify-content: center;
  margin-top: auto;
  max-width: 24rem;
}

.section-modell-usecase {
  background-color: var(--grey-light);
}

.section-modell-usecase .btn-primary--blue {
  align-self: center;
}

/* ============================================================
   AGENTEN Unterseite – seitenspezifische Styles
   ============================================================ */

.section-fertige-agenten {
  background-color: var(--grey-light);
}

.fertige-agenten-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) 1fr;
  gap: var(--gap-40);
  align-items: start;
  width: 100%;
}

.fertige-agenten-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
}

.fertige-agenten-left .btn-primary--blue {
  width: 100%;
  text-align: center;
  max-width: unset !important;
}

.agent-select-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.agent-select-item {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
  padding: var(--padding-8) var(--padding-16);
  background: #fbffff;
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.agent-select-item--inactive {
  border-color: rgba(0, 0, 0, 0.1);
}

.agent-select-item__avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Avatare für fertige Agenten – Unterseite Agenten */
.agent-select-item__avatar--assistent {
  background-image: url("../../assets/hub-agenten/hub-ki-avatar-assistent.png");
}
.agent-select-item__avatar--outlook {
  background-image: url("../../assets/hub-agenten/avatar-outlook.svg");
  background-size: 34px;
}
.agent-select-item__avatar--it-support {
  background-image: url("../../assets/hub-agenten/avatar-it-support.png");
  background-size: 42px;
}
.agent-select-item__avatar--programmierer {
  background-image: url("../../assets/agenten-logos/HUB-KI-chat-Mistral_AI-1.svg");
  background-size: 34px;
}
.agent-select-item__avatar--vertragspruefer {
  background-image: url("../../assets/hub-agenten/ki-agent-vertragspruefer-icon.png");
  background-size: 38px;
  background-position: 7px center;
}
.agent-select-item__avatar--data-analyst {
  background-image: url("../../assets/hub-agenten/ki-agent-data-analyst-icon.png");
  background-size: 34px;
}
.agent-select-item__avatar--hr {
  background-image: url("../../assets/hub-agenten/ki-agent-hr-icon.jpg");
  background-size: 58px;
  border-radius: 50%;
}

.agent-select-item__name {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
}

.agent-select-item--inactive .agent-select-item__name {
  font-weight: 600;
  opacity: 0.5;
}

.agent-cards-wrap {
  position: relative;
}

.agent-detail-card {
  background: var(--white-main);
  border-radius: var(--radius-card-gradient);
  box-shadow: 3px 3px 10px 0 rgba(124, 124, 124, 0.32);
  padding: var(--padding-24);
  flex-direction: column;
  gap: var(--gap-16);
  display: none;
}

.agent-detail-card.is-active {
  display: flex;
  animation: agent-card-in 0.25s ease;
}

@keyframes agent-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-detail-desc {
  font-size: var(--fs-body);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.agent-detail-card h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.agent-detail-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 0;
}

.agent-detail-section-title {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.agent-detail-body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
}

.agent-sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.agent-sub-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-12);
  padding: var(--padding-10) var(--padding-12);
  background: var(--white-main);
  border-bottom: 1px solid var(--black-main);
  border-radius: 7px;
}

.agent-sub-item__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.agent-sub-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-sub-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-sub-item__name {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
}

.agent-sub-item__desc {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
}

.agent-model-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.agent-model-section-label {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 600;
}

.agent-model-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-12);
  padding: var(--padding-10) var(--padding-12);
  background: var(--white-main);
  border-bottom: 1px solid var(--black-main);
  border-radius: 7px;
}

.agent-model-item__icon {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  overflow: hidden;
}

.agent-model-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.agent-model-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.agent-model-item__name {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
}

.agent-model-item__desc {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
}

/* ---- Agent Mobile Slider ---- */

.agent-mobile-slider {
  display: none;
  width: 100%;
}

.agent-mobile-slider__viewport {
  overflow: hidden;
  transition: height 0.19s ease;
  width: 100%;
  padding: var(--padding-20) 0;
}

.agent-mobile-slider__track {
  position: relative;
  user-select: none;
}

.agent-mobile-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.agent-mobile-slide.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.agent-mobile-slide__label {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
  padding: var(--padding-8) var(--padding-16);
  background: #fbffff;
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
}

.agent-mobile-slide__name {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
}

.agent-mobile-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-20);
}

.agent-mobile-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.agent-mobile-slider__dot.is-active {
  background: var(--black-main);
  transform: scale(1.35);
}

.section-agenten-apps {
  background: var(--white-main);
}

.apps-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--gap-40);
  align-items: start;
  width: 100%;
}

.app-mockup-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card-gradient);
  box-shadow: 3px 3px 10px 3px rgba(124, 124, 124, 0.32);
  width: 100%;
  min-width: 0;
  max-width: 772px;
  aspect-ratio: 772 / 463;
  background-image: url("../../assets/img/hub-ki-app-meeting-transcriber-w.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app-waveform-anim {
  position: absolute;
  top: 58%;
  left: 18.5%;
  width: 50%;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

.waveform-bar {
  display: block;
  flex: none;
  width: 2px;
  height: 100%;
  background: #8b79f2;
  border-radius: 2px;
  transform: scaleY(0.15);
  transform-origin: center;
  animation: waveform-pulse 2.2s ease-in-out infinite;
}

.waveform-bar:nth-child(11n + 1) {
  animation-delay: 0s;
  animation-name: waveform-pulse;
}
.waveform-bar:nth-child(11n + 2) {
  animation-delay: 0.3s;
  animation-name: waveform-pulse-b;
}
.waveform-bar:nth-child(11n + 3) {
  animation-delay: 0.7s;
  animation-name: waveform-pulse;
}
.waveform-bar:nth-child(11n + 4) {
  animation-delay: 0.15s;
  animation-name: waveform-pulse-c;
}
.waveform-bar:nth-child(11n + 5) {
  animation-delay: 1s;
  animation-name: waveform-pulse-b;
}
.waveform-bar:nth-child(11n + 6) {
  animation-delay: 0.5s;
  animation-name: waveform-pulse;
}
.waveform-bar:nth-child(11n + 7) {
  animation-delay: 1.4s;
  animation-name: waveform-pulse-c;
}
.waveform-bar:nth-child(11n + 8) {
  animation-delay: 0.85s;
  animation-name: waveform-pulse-b;
}
.waveform-bar:nth-child(11n + 9) {
  animation-delay: 0.25s;
  animation-name: waveform-pulse;
}
.waveform-bar:nth-child(11n + 10) {
  animation-delay: 1.1s;
  animation-name: waveform-pulse-c;
}
.waveform-bar:nth-child(11n) {
  animation-delay: 0.6s;
  animation-name: waveform-pulse-b;
}

.waveform-bar:nth-child(3n) {
  animation-duration: 2.6s;
}
.waveform-bar:nth-child(5n) {
  animation-duration: 1.9s;
}
.waveform-bar:nth-child(7n) {
  animation-duration: 2.9s;
}
.waveform-bar:nth-child(13n) {
  animation-duration: 2.1s;
}

@keyframes waveform-pulse {
  0%,
  100% {
    transform: scaleY(0.12);
  }
  25% {
    transform: scaleY(0.85);
  }
  55% {
    transform: scaleY(0.28);
  }
  80% {
    transform: scaleY(0.75);
  }
}

@keyframes waveform-pulse-b {
  0%,
  100% {
    transform: scaleY(0.2);
  }
  20% {
    transform: scaleY(0.5);
  }
  45% {
    transform: scaleY(0.95);
  }
  70% {
    transform: scaleY(0.18);
  }
  88% {
    transform: scaleY(0.6);
  }
}

@keyframes waveform-pulse-c {
  0%,
  100% {
    transform: scaleY(0.08);
  }
  35% {
    transform: scaleY(0.7);
  }
  65% {
    transform: scaleY(1);
  }
  85% {
    transform: scaleY(0.35);
  }
}

@media (max-width: 768px) {
  .app-waveform-anim {
    transform: scale(0.7);
    left: 11.5%;
    top: 56%;
  }
}

@media (max-width: 599px) {
  .app-waveform-anim {
    transform: scale(0.5);
    left: 6.5%;
    top: 54%;
  }
}

.app-skeleton-bars {
  position: absolute;
  top: 74%;
  left: 18.5%;
  width: 54%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.app-skeleton-bar {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    #e0dafc 0%,
    #c5b9f7 40%,
    #d8d0f9 60%,
    #e0dafc 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

.app-skeleton-bar--100 {
  width: 100%;
}
.app-skeleton-bar--75 {
  width: 75%;
  animation-delay: 0.2s;
}
.app-skeleton-bar--55 {
  width: 55%;
  animation-delay: 0.4s;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@media (max-width: 499px) {
  .app-skeleton-bars {
    top: 77%;
  }
}

.app-mockup-logo {
  width: 3.5rem;
  height: auto;
}

.app-mockup-tabs {
  display: flex;
  gap: var(--gap-8);
  padding: var(--padding-8) var(--padding-12);
  background: var(--grey-light);
  border-radius: var(--radius-card-outline);
  width: fit-content;
}

.app-mockup-tab {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 400;
  padding: 4px var(--padding-12);
  border-radius: 4px;
  cursor: default;
}

.app-mockup-tab--active {
  background: var(--blue-main);
  font-weight: 600;
}

.app-mockup-inner-card {
  background: var(--white-main);
  border: 1px solid rgba(124, 124, 124, 0.32);
  border-radius: var(--radius-card-outline);
  box-shadow: 8px 8px 3.5px rgba(143, 158, 248, 0.25);
  padding: var(--padding-24);
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}

.app-mockup-inner-card h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.app-mockup-inner-card p {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.app-waveform {
  height: 2.5rem;
  background: var(--grey-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 var(--padding-8);
  overflow: hidden;
}

.app-waveform-bar {
  flex: 1;
  background: var(--blue-main);
  border-radius: 2px;
  min-height: 4px;
}

.app-info-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
  min-width: 0;
}

.app-info-card {
  background: var(--card-gradient-yellow);
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-24);
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.app-info-card h4 {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}

.app-info-card p {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.app-info-side .btn-primary--blue {
  max-width: unset;
}

@media (max-width: 599px) {
  .app-info-side .btn-primary--blue {
    white-space: normal;
    text-align: center;
  }
}

.section-agenten-cta {
  background: var(--white-main);
  position: relative;
}

.agenten-cta-box {
  background: var(--card-gradient-blue);
  border-radius: 1.5rem;
  padding: var(--padding-64) 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-40);
  width: 100%;
}

.cta-box h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.34rem, 2.5vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
}

.agenten-cta-box h2 {
  line-height: 1;
  color: #0a0a0a;
}

.agenten-cta-box p {
  font-size: var(--fs-h3);
  font-weight: 400;
  max-width: 56rem;
  line-height: 1.5;
  color: #101828;
}

/* ——————————————————————————————————————
   HEADLINE ANIMATION (h2 mit .textmarker)
   Zweistufig: Text opacity+slide rein → Textmarker-Strich zieht nach (ease-in-out).
   JS setzt .headline-anim-ready (initial versteckt) und .is-visible (trigger).
   —————————————————————————————————————— */

h2.headline-anim-ready {
  opacity: 0;
  will-change: transform, opacity, filter;
}

h2.headline-anim-ready .textmarker {
  background-size: 0% 28%;
}
h2.headline-anim-ready .textmarker-blue {
  background-size: 0% 50%;
}
h2.headline-anim-ready .textmarker-purple {
  background-size: 0% 28%;
}

@keyframes headline-in {
  0% {
    opacity: 0;
    transform: translateX(-60px);
    filter: blur(3px);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

h2.headline-anim-ready.is-visible {
  animation: headline-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Textmarker-Strich: slow→fast→slow (ease-in-out) */
h2.is-visible .textmarker {
  background-size: 100% 28%;
  transition-delay: 0.6s;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
h2.is-visible .textmarker-blue {
  background-size: 100% 50%;
  transition-delay: 0.6s;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
h2.is-visible .textmarker-purple {
  background-size: 100% 28%;
  transition-delay: 0.6s;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  h2.headline-anim-ready {
    opacity: 1;
    will-change: auto;
    animation: none;
  }
  h2.headline-anim-ready .textmarker,
  h2.headline-anim-ready .textmarker-blue,
  h2.headline-anim-ready .textmarker-purple {
    background-size: 100% 28%;
  }
  h2.headline-anim-ready .textmarker-blue {
    background-size: 100% 50%;
  }
  h2.is-visible .textmarker,
  h2.is-visible .textmarker-blue,
  h2.is-visible .textmarker-purple {
    transition: none;
  }
}

/* .card-gradient fade-in von unten */
.card-anim-ready {
  opacity: 0;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-anim-ready.card-visible {
  animation: card-in 0.5s ease-out both;
}

.card--shadow.card-anim-ready {
  opacity: 1;
}
.card--shadow.card-anim-ready.card-visible {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-anim-ready {
    opacity: 1;
  }
  .card-anim-ready.card-visible {
    animation: none;
  }
}

/* Checklist + USP-List: li items & check-icons */
.checklist__item.li-anim-ready,
.usp-item.li-anim-ready {
  opacity: 0;
}

.checklist__item.li-anim-ready img,
.usp-item.li-anim-ready img {
  opacity: 0;
}

@keyframes li-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checklist__item.li-anim-ready.li-visible,
.usp-item.li-anim-ready.li-visible {
  animation: li-in 0.4s ease-out both;
}

@keyframes check-bounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  55% {
    opacity: 1;
    transform: scale(1.03);
  }
  78% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.checklist__item.li-visible img,
.usp-item.li-visible img {
  animation: check-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--check-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .checklist__item.li-anim-ready,
  .usp-item.li-anim-ready,
  .checklist__item.li-anim-ready img,
  .usp-item.li-anim-ready img {
    opacity: 1;
  }
  .checklist__item.li-visible,
  .usp-item.li-visible,
  .checklist__item.li-visible img,
  .usp-item.li-visible img {
    animation: none;
  }
}

/* H3 fade-in (leicht von unten, kein blur) */
h3.h3-anim-ready {
  opacity: 0;
}

@keyframes h3-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h3.h3-anim-ready.h3-visible {
  animation: h3-in 0.55s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  h3.h3-anim-ready {
    opacity: 1;
  }
  h3.h3-anim-ready.h3-visible {
    animation: none;
  }
}

/* Logo-bar items + Buttons: shared grow-in keyframe */
@keyframes grow-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  55% {
    opacity: 1;
    transform: scale(1.04);
  }
  78% {
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.logo-item.logo-anim-ready {
  opacity: 0;
}
.btn-anim-ready {
  opacity: 0;
}

.logo-item.logo-visible,
.btn-anim-ready.btn-visible {
  animation: grow-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .logo-item.logo-anim-ready,
  .btn-anim-ready {
    opacity: 1;
  }
  .logo-item.logo-visible,
  .btn-anim-ready.btn-visible {
    animation: none;
  }
}

/* ——————————————————————————————————————
   RESPONSIVE
   —————————————————————————————————————— */
@media (max-width: 1399px) {
  .fertige-agenten-grid {
    gap: var(--gap-24);
    grid-template-columns: minmax(10rem, 16rem) 1fr;
  }
}

@media (min-width: 1200px) and (max-width: 1259px) {
  .section-governance .user-card--yellow {
    right: calc(23.7rem - 2.3vw);
  }
}

@media (max-width: 1299px) {
  .section-governance .user-card {
    min-width: unset;
  }
}

@media (max-width: 1199px) {
  .nav-links {
    display: none;
  }

  .hamburger-menu {
    display: flex;
  }

  .governance-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-48);
    min-height: unset;
  }

  .governance-cards-area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-24);
    justify-content: center;
  }

  .user-card {
    position: static;
    width: auto;
    min-width: unset;
    max-width: max-content;
    flex: 1 1 20rem;
  }

  .section-governance .user-card--yellow {
    position: relative;
    top: -23rem;
    right: clamp(-4rem, calc(-8vw + 2rem), -2rem);
  }

  .section-governance .user-card--purple {
    position: relative;
    top: 2rem;
    left: 2rem;
  }
}

@media (max-width: 1399px) {
  .model-providers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-60) var(--gap-24);
    margin-top: var(--gap-40);
  }
}

@media (max-width: 1024px) {
  .governance-grid {
    grid-template-columns: 1fr;
  }

  .card-grid-3er {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid-2x2 {
    grid-template-columns: 1fr;
  }

  .card-grid-4er {
    grid-template-columns: repeat(2, 1fr);
  }

  .model-providers {
    justify-content: center;
  }
}

@media (max-width: 699px) {
  .model-providers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-100) var(--gap-12);
  }

  .model-provider {
    justify-self: center;
  }

  .model-provider__logo {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (max-width: 499px) {
  .model-providers {
    grid-template-columns: 1fr;
  }

  .model-provider {
    max-width: max-content;
  }
}

@media (max-width: 1024px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }

  .agenten-cta-box {
    padding: var(--padding-48) var(--padding-40);
  }
}

@media (max-width: 915px) {
  .governance-inner {
    gap: var(--gap-80);
  }

  .governance-cards-area {
    flex-wrap: nowrap;
  }

  .section-governance .user-card--purple,
  .section-governance .user-card--yellow {
    position: static;
  }
}

/* Governance + Kontrolle cards – Kartenstapel-Slider (JS setzt .is-slider ab ≤799px) */
.governance-cards-area.is-slider,
.kontrolle-agents.is-slider {
  position: relative;
  overflow: hidden;
  flex-wrap: nowrap;
  padding: var(--padding-20);
  gap: var(--gap-20);
}

.governance-cards-area.is-slider .user-card,
.kontrolle-agents.is-slider .user-card {
  position: absolute;
  top: var(--padding-20);
  left: var(--padding-20);
  right: var(--padding-20);
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 2 * var(--padding-20));
  flex: none;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

.governance-cards-area.is-slider .user-card.stack-front,
.kontrolle-agents.is-slider .user-card.stack-front {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 4;
}

.governance-cards-area.is-slider .user-card.stack-back,
.kontrolle-agents.is-slider .user-card.stack-back {
  transform: translateX(10px) translateY(10px) scale(0.97);
  opacity: 1;
  z-index: 2;
}

.governance-cards-area.is-slider .user-card.stack-exiting,
.kontrolle-agents.is-slider .user-card.stack-exiting {
  transform: translateX(-110%);
  opacity: 0;
  z-index: 3;
}

@media (max-width: 767px) {
  .logo-item {
    width: clamp(6rem, 18vw, 9rem);
    height: clamp(3.5rem, 10vw, 4rem);
  }

  .card-grid-3er {
    gap: var(--gap-48);
  }

  .card-grid-2x2 {
    gap: var(--gap-48);
  }
}

@media (max-width: 1024px) {
  .agent-select-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-12);
    row-gap: var(--gap-16);
    margin: 0 auto;
    width: 100%;
  }

  .agent-select-list .agent-select-item:first-child {
    grid-column: 1 / -1;
  }

  .agent-select-item {
    padding: 0.5rem;
    gap: 0.5rem;
    width: 100%;
  }

  .agent-select-item__avatar {
    width: 1.9rem;
    height: 1.9rem;
    background-size: 1.5rem !important;
  }

  .agent-detail-card {
    padding: var(--padding-20);
  }

  .fertige-agenten-grid {
    display: none;
  }

  .agent-mobile-slider {
    display: block;
  }
}

@media (max-width: 411px) {
  .agent-select-list {
    grid-template-columns: 1fr;
    gap: var(--gap-10);
    row-gap: var(--gap-10);
  }
}

@media (max-width: 399px) {
  .app-mockup-card {
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .inner {
    max-width: unset !important;
  }

  .card-grid-3er {
    grid-template-columns: 1fr;
  }

  .usp-list {
    flex-direction: column;
    gap: var(--gap-16);
  }

  .btn-primary--blue {
    width: 100%;
    max-width: unset;
    justify-content: center;
  }

  .hero-cta-wrap .btn-primary--blue,
  .prefooter-cta-wrap .btn-primary--blue {
    flex: 1 1 100%;
    max-width: unset;
  }
}

@media (max-width: 599px) {
  .checklist + .btn-primary--blue {
    margin-top: 1.125rem;
  }

  .prefooter-cta-wrap {
    gap: var(--gap-40);
  }
}

@media (max-width: 768px) {
  .governance-grid {
    grid-template-columns: 1fr;
  }

  .user-cards {
    flex-direction: column;
  }

  .card-grid-4er {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .card-grid-4er {
    gap: var(--gap-30);
  }
}

@media (max-width: 768px) {
  .subpage-back {
    position: static;
    margin-bottom: var(--space-16);
  }

  .section-hero--subpage .inner {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 599px) {
  .section-hero--subpage {
    min-height: unset;
  }

  .section-hero--subpage h2 {
    font-size: 1rem;
  }

  .section-hero--subpage + section {
    padding-top: var(--padding-32);
  }
}

@media (max-width: 768px) {
  .anwendung-cards {
    flex-direction: column;
  }

  .anwendung-card + .anwendung-card::before {
    top: 0;
    left: 10%;
    height: 1px;
    width: 80%;
  }

  .agenten-cta-box {
    padding: var(--padding-40) var(--padding-24);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--gap-24);
  }

  .footer-contact {
    justify-self: center;
    align-items: center;
  }
}

/* ============================================================
   MEETING TRANSCRIBER Unterseite – seitenspezifische Styles
   ============================================================ */

/* Meetings erzeugen Wissen */
.section-transcriber-wissen {
  background: var(--white-main);
}

.transcriber-wissen-headlines {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  max-width: 70rem;
}

.transcriber-wissen-headlines h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
}

.transcriber-wissen-headlines h3 {
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.5;
}

.transcriber-wissen-headlines p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--black-main);
}

.transcriber-wissen-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--gap-64);
  align-items: start;
  width: 100%;
  margin-top: var(--space-48);
}

.transcriber-slider-wrap {
  border-radius: var(--radius-card-gradient);
  overflow: hidden;
  box-shadow: 1px 1px 20px 3px rgba(124, 124, 124, 0.32);
  position: relative;
}

.transcriber-slider {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
}

.transcriber-slide {
  flex: 0 0 100%;
}

.transcriber-slide--video {
  position: relative;
}

.transcriber-slide img,
.transcriber-slide video {
  width: 100%;
  height: auto;
  display: block;
}

.transcriber-slider-nav {
  position: absolute;
  bottom: var(--space-12);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--gap-8);
}

.transcriber-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.transcriber-slider-dot--active {
  background: var(--white-main);
}

.checklist__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

/* Vom Gespräch zur nutzbaren Information */
.section-transcriber-info {
  background: var(--white-main);
}

.section-transcriber-info .inner {
  gap: var(--gap-40);
}

.transcriber-cards.card-grid-2x2 {
  gap: var(--gap-24);
}

.transcriber-cards .card--outline {
  align-items: flex-start;
  text-align: left;
}

/* CTA */
.section-transcriber-cta {
  background: var(--white-main);
  position: relative;
}

.transcriber-cta-box {
  background: linear-gradient(
    180deg,
    var(--yellow-main) 0%,
    var(--white-main) 100%
  );
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-80) var(--padding-64);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-32);
  text-align: center;
  width: 100%;
}

.transcriber-cta-box p {
  max-width: 55rem;
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Transcriber Responsive */
@media (max-width: 1024px) {
  .transcriber-wissen-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-40);
  }

  .transcriber-cta-box {
    padding: var(--padding-48) var(--padding-32);
  }
}

@media (max-width: 768px) {
  .transcriber-cta-box {
    padding: var(--padding-32) var(--padding-20);
  }
}

@media (max-width: 604px) {
  .transcriber-wissen-headlines h2 br {
    display: none;
  }
}

/* ============================================================
   SICHERHEIT Unterseite – seitenspezifische Styles
   ============================================================ */

/* Section 2 – Compliance auf einen Blick */
.section-sicherheit-compliance {
  background: var(--white-main);
}

.compliance-icons-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-32);
  width: 100%;
  flex-wrap: wrap;
}

.compliance-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-12);
  flex: 1 1 9rem;
  max-width: 12rem;
  justify-self: center;
}

.compliance-icon-item svg {
  flex-shrink: 0;
}

.compliance-icon-item__title {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.compliance-icon-item__text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}

/* Section 3 – Dein Unternehmen. Deine Regeln. */
.section-sicherheit-kontrolle {
  overflow: hidden;
}

.section-sicherheit-kontrolle .inner {
  display: grid;
  grid-template-columns: 4fr 5fr;
  column-gap: var(--gap-40);
  row-gap: var(--gap-48);
  align-items: start;

  @media (max-width: 1359px) {
    grid-template-columns: 1fr;
  }
}

.section-sicherheit-kontrolle .inner .section-headlines-wrap {
  grid-column: 1 / -1;
}

@media (max-width: 599px) {
  .section-headlines {
    gap: var(--gap-30);
  }
}

.kontrolle-cards {
  gap: var(--gap-28);
}

.kontrolle-card {
  border-radius: var(--radius-card-outline);
  padding: var(--padding-20) var(--padding-24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.kontrolle-card .text-wrap {
  gap: var(--gap-16);
}

.kontrolle-card .headline-wrap {
  gap: var(--gap-4);
}

.kontrolle-card__heading {
  font-family: var(--font-headline);
  font-size: var(--fs-subtitle);
  font-weight: 600;
  display: block;
}

.kontrolle-card__subheading {
  font-size: var(--fs-body);
  font-weight: 600;
  display: block;
}

.kontrolle-card__body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}

.kontrolle-agents {
  position: relative;
  min-height: 50rem;
}

.kontrolle-agents .user-card--green {
  top: -8rem;
  right: clamp(-5rem, calc(18.4rem - 20.8vw), 1.5rem);
  z-index: 4;
}

.kontrolle-agents .user-card--orange {
  top: 8rem;
  right: 18rem;
  z-index: 2;
}

.user-card--green {
  background:
    linear-gradient(180deg, var(--green-main) 0%, rgba(223, 254, 233, 0) 54%),
    var(--white-main);
}

.user-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.subtitle-break {
  display: none;

  @media (min-width: 1025px) and (max-width: 1299px) {
    display: block;
  }
}

.user-card__subtitle {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--dark-grey-1);
  background: white;
  border-radius: var(--radius-card-outline);
  padding: 6px 14px;
}

.user-card__subtitle svg {
  flex-shrink: 0;
  color: var(--green-neon);
}

.user-card--yellow .user-card__subtitle svg {
  color: var(--yellow-main);
}

.user-card--orange {
  background:
    linear-gradient(180deg, var(--orange-main) 0%, rgba(252, 220, 159, 0) 54%),
    var(--white-main);
}

.user-card--orange .user-card__subtitle svg {
  color: var(--orange-main);
}

/* Tilt & Shine – Parallax via --parallax-y, Tilt via --tilt-x/y/z, beide auf .user-card */
.kontrolle-agents .user-card,
.governance-cards-area .user-card {
  opacity: 0;
  transition: opacity 0.7s ease;
  transform: perspective(700px)
    rotateX(calc(var(--tilt-x, 0deg) + var(--scroll-tilt-x, 0deg)))
    rotateY(calc(var(--tilt-y, 0deg) + var(--scroll-tilt-y, 0deg)))
    translateZ(var(--tilt-z, 0px)) translateX(var(--parallax-x, 0px))
    translateY(var(--parallax-y, 0px));
}

.kontrolle-agents .user-card.is-visible,
.governance-cards-area .user-card.is-visible {
  opacity: 1;
}

.kontrolle-agents .user-card::after,
.governance-cards-area .user-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 300% 300%;
  background-position: 0% 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

.kontrolle-agents .user-card.is-shine::after,
.governance-cards-area .user-card.is-shine::after {
  animation: card-shine-sweep 1.4s ease-out forwards;
}

@keyframes card-shine-sweep {
  0% {
    background-position: 0% 100%;
    opacity: 1;
  }
  100% {
    background-position: 100% 0%;
    opacity: 0;
  }
}

/* Section 4 – Wo läuft HUB.KI? */
.section-sicherheit-hosting {
  background: var(--white-main);
}

.hosting-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hosting-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--gap-40);
  align-items: center;
  padding: var(--padding-48) 0;
  border-bottom: 1px solid var(--black-main);
  max-width: 1200px;
  margin: 0 auto;
}

.hosting-row:last-child {
  border-bottom: none;
}

.hosting-option-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 600;
  display: block;
}

@media (max-width: 599px) {
  .hosting-option-card {
    padding-left: var(--padding-30);
    padding-right: var(--padding-30);
  }
}

@media (max-width: 499px) {
  .hosting-option-card {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
  }
}

.hosting-checklist {
  text-align: left;
  width: max-content;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hosting-checklist {
    width: 100%;
  }
}

.hosting-text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.hosting-text-wrap h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.hosting-text-wrap p {
  line-height: 1.6;
}

/* Section 5 – Daten die in Europa sind */
.section-sicherheit-daten {
  overflow: hidden;
}

.sicherheit-daten-card {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-outline);
  padding: var(--padding-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.sicherheit-daten-card__icon {
  flex-shrink: 0;
}

.sicherheit-daten-card__title {
  margin-top: var(--space-16);
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  display: block;
}

.sicherheit-daten-card__body {
  margin-top: var(--space-24);
  flex: 1;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.sicherheit-daten-card__checks {
  margin-top: var(--space-32);
  text-align: left;
  width: 100%;
}

.sicherheit-daten-card__checks .checklist__item {
  font-size: 0.875rem;
}

@media (max-width: 1399px) {
  .section-sicherheit-daten .card-grid-4er {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 699px) {
  .section-sicherheit-daten .card-grid-4er {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .card--shadow {
    padding: var(--padding-32);
  }

  #vierwege .card--shadow {
    padding: var(--padding-24);
  }

  .anwendung-card {
    padding: var(--padding-36);
  }

  .faq-card {
    padding: var(--padding-12) var(--padding-32) var(--padding-20)
      var(--padding-32);
  }

  .kontrolle-card {
    padding: var(--padding-32);
  }

  .card-gradient {
    padding: var(--padding-36);
  }

  .sicherheit-daten-card {
    padding: var(--padding-32);
  }

  .sicherheit-daten-card__checks {
    margin-top: var(--space-24);
  }
}

@media (max-width: 499px) {
  .card-gradient {
    padding: var(--padding-28) var(--padding-16);
  }

  .sicherheit-daten-card {
    padding: var(--padding-24);
  }

  .kontrolle-card {
    padding: var(--padding-24);
  }

  .card--outline {
    padding: var(--padding-24);
  }
}

/* Section 6 – CTA */
.section-sicherheit-cta {
  background: var(--white-main);
  position: relative;
}

@media (max-width: 1299px) {
  .back-to-top {
    top: auto;
    bottom: var(--space-40);
  }

  .section-agenten-cta,
  .section-sicherheit-cta,
  .section-transcriber-cta,
  .prefooter-inner {
    padding-bottom: 9.375rem;
  }
}

@media (max-width: 768px) {
  .back-to-top {
    right: var(--space-24);
  }
}

@media (max-width: 599px) {
  .prefooter-inner {
    padding-top: unset;
  }
}

.sicherheit-cta-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-40);
  width: 100%;
}

.sicherheit-cta-box > p {
  max-width: 50rem;
  line-height: 1.5;
}

.sicherheit-cta-checks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-28);
  max-width: max-content;
  padding-top: var(--padding-20);
  padding-bottom: var(--padding-20);
}

.sicherheit-cta-check {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
}

.sicherheit-cta-check img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .usp-item,
  .sicherheit-cta-check,
  .checklist__item {
    gap: var(--gap-16);
  }
}

/* Sicherheit Responsive */
@media (max-width: 1359px) {
  .section-sicherheit-kontrolle .inner {
    row-gap: var(--gap-100);
  }

  .kontrolle-agents {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--gap-24);
    justify-content: center;
    min-height: unset;
  }

  .section-sicherheit-kontrolle .user-card {
    position: static;
    width: auto;
    min-width: unset;
    max-width: max-content;
    flex: 1 1 20rem;
  }
}

@media (max-width: 799px) {
  .section-sicherheit-kontrolle .inner {
    row-gap: var(--gap-48);
  }
}

@media (max-width: 1399px) {
  .compliance-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-60) var(--gap-24);
  }
}

@media (max-width: 1024px) {
  .hosting-row {
    grid-template-columns: 1fr;
  }

  .hosting-row:first-of-type {
    padding-top: 0;
  }
}

@media (max-width: 699px) {
  .compliance-icons-grid {
    grid-template-columns: 1fr;
  }
  .compliance-icon-item {
    max-width: unset;
  }
}

@media (min-width: 1400px) {
  .hosting-text-wrap {
    padding-right: var(--padding-40);
  }
}

@media (max-width: 768px) {
  .sicherheit-cta-checks {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ONBOARDING Unterseite – seitenspezifische Styles
   ============================================================ */

/* ——— HERO ——— */
.section-onboarding-hero .inner {
  align-items: center;
  text-align: center;
  gap: var(--gap-40);
}

.section-onboarding-hero h2 strong {
  font-weight: 700;
}

/* ——— 5 PHASEN ——— */
.section-onboarding-phases {
  padding-top: var(--padding-100);
  padding-bottom: var(--padding-100);
}

.section-onboarding-phases .inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-72);
}

.onboarding-phases-card {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-gradient);
  box-shadow: 3px 3px 5px rgba(124, 124, 124, 0.32);
  padding: var(--padding-80);
  display: flex;
  flex-direction: column;
  max-width: 57.625rem;
  align-self: center;
  position: relative;
}

.onboarding-phase-item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
}

.onboarding-phase-header {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-24);
}

.onboarding-phase-num {
  min-width: 5rem;
  flex-shrink: 0;
  font-family: var(--font-headline);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 0.5;
  text-align: center;
}

.onboarding-phase-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-28);
  padding-left: calc(5rem + var(--gap-24));
  padding-bottom: var(--padding-100);
}

.onboarding-phase-item:last-child .onboarding-phase-content {
  padding-bottom: 0;
}

.onboarding-phase-title {
  font-family: var(--font-headline);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}

.onboarding-phase-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  padding-left: var(--padding-20);
  font-size: var(--fs-body);
  list-style: disc;
}

.onboarding-phase-bullets li {
  line-height: 1.5;
}

.onboarding-phase-ergebnis {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.onboarding-ergebnis-label {
  font-weight: 700;
  display: block;
}

.onboarding-phase-connector {
  position: absolute;
  width: 3px;
  background: var(--black-main);
  transform-origin: top center;
  /* top, height, left werden per JS gesetzt */
}

/* Phase-Animation */
.onboarding-phase-num.anim {
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onboarding-phase-num.anim.is-visible {
  opacity: 1;
  transform: scale(1);
}

.onboarding-phase-content.anim {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: top left;
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.onboarding-phase-content.anim.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.onboarding-phase-connector.anim {
  transform: scaleY(0);
  transition: transform 0.5s ease-in;
}
.onboarding-phase-connector.anim.is-visible {
  transform: scaleY(1);
}

/* ——— ERGEBNISSE ——— */
.section-onboarding-ergebnisse .inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-40);
}

.onboarding-ergebnisse-top {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: var(--gap-40);
  align-items: center;
}

.onboarding-ergebnisse-text {
  gap: var(--gap-20);
}

.onboarding-gradient-card {
  background: linear-gradient(
    to bottom,
    var(--blue-main),
    rgba(255, 255, 255, 0)
  );
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-24);
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  font-size: var(--fs-body);
}

.onboarding-gradient-card__title {
  font-weight: 700;
  line-height: 1.4;
}

.onboarding-result-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-24);
}

.onboarding-result-card {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-40) var(--padding-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-16);
  text-align: center;
}

.onboarding-result-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.onboarding-result-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
}

.onboarding-result-card__body {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dark-grey-1);
  margin-top: auto;
}

@keyframes onboarding-flow-down {
  to {
    stroke-dashoffset: -18;
  } /* dash(4) + gap(14) = 18px — eine Wiederholung */
}

.onboarding-result-arrows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-24);
  margin-top: calc(-1 * var(--space-40));
  margin-bottom: calc(-1 * var(--space-40));
}

.onboarding-result-arrow {
  display: flex;
  justify-content: center;
  color: var(--black-main);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0,
    rgba(0, 0, 0, 1) 4px,
    rgba(0, 0, 0, 1) calc(100% - 4px),
    rgba(0, 0, 0, 0.35) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0,
    rgba(0, 0, 0, 1) 4px,
    rgba(0, 0, 0, 1) calc(100% - 4px),
    rgba(0, 0, 0, 0.35) 100%
  );
}

.onboarding-result-arrow svg line {
  animation: onboarding-flow-down 0.75s linear infinite;
}

/* Stagger: jede Linie um 1/4 der Animationsdauer versetzt → Welleneffekt */
.onboarding-result-arrow:nth-child(2) svg line {
  animation-delay: -0.19s;
}
.onboarding-result-arrow:nth-child(3) svg line {
  animation-delay: -0.38s;
}
.onboarding-result-arrow:nth-child(4) svg line {
  animation-delay: -0.56s;
}

/* Mid-arrows: hidden at desktop, shown inside the 2×2 card grid at 1024px */
.onboarding-result-arrow--mid {
  display: none;
}

/* After-arrows: hidden everywhere except 768px single-col layout */
.onboarding-result-arrow--after {
  display: none;
}

@media (max-width: 1024px) {
  /* Arrows between card rows 1 and 2 */
  .onboarding-result-arrow--mid {
    display: flex;
  }

  /* Bottom arrows: switch to 2-col; hide arrows 1+2 (they belonged to card cols 3+4
     at desktop — not needed at 1024px where only 2 columns exist) */
  .onboarding-result-arrows {
    grid-template-columns: repeat(2, 1fr);
  }
  .onboarding-result-arrows .onboarding-result-arrow:nth-child(1),
  .onboarding-result-arrows .onboarding-result-arrow:nth-child(2) {
    display: none;
  }
}

/* Sequence-Animation: result-cards → arrows → report-card */
.onboarding-result-arrows {
  transition: opacity 0.35s ease;
}
.onboarding-result-arrows.arrows-hold {
  opacity: 0;
}
.onboarding-result-arrows.arrows-hold svg line {
  animation-play-state: paused;
}

.onboarding-result-card.card-anim-ready {
  opacity: 0;
}
.onboarding-result-card.card-visible {
  animation: grow-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.onboarding-report-card.card-anim-ready {
  opacity: 0;
}

.onboarding-report-card {
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-16);
}

.onboarding-report-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.onboarding-report-card__title {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
  position: relative;
}

.onboarding-report-card__body {
  font-size: var(--fs-body);
  color: var(--dark-grey-1);
}

/* ——— PREISE ——— */
.section-onboarding-preise .inner {
  display: flex;
  align-items: stretch;
}

.onboarding-preise-card {
  width: 100%;
  background: var(--white-main);
  border: 1px solid var(--black-main);
  border-radius: 1.5rem;
  box-shadow: 3px 3px 5px rgba(124, 124, 124, 0.32);
  padding: var(--padding-52);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-52);
  align-items: center;
  max-width: 81.25rem;
  padding-left: var(--padding-28);
  align-self: center;
}

.onboarding-preise-left {
  gap: var(--gap-40);
  align-items: center;
  text-align: center;
}

.onboarding-preise-price {
  font-family: var(--font-headline);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
}

.onboarding-preise-right {
  background: var(--grey-light);
  border-radius: var(--radius-card-gradient);
  padding: var(--padding-40);
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.onboarding-preise-right h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
}

.onboarding-kickstart-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  list-style: none;
  padding: 0;
}

.onboarding-kickstart-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-12);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.onboarding-check {
  color: var(--blue-main);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ——— ANSPRECHPARTNER ——— */
.section-onboarding-ansprechpartner .inner {
  width: 100%;
  padding: var(--padding-52);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-52);
  align-items: center;
  max-width: 81.25rem;
  padding-left: var(--padding-28);
  align-self: center;
}

.onboarding-ansprechpartner-text {
  gap: var(--gap-24);
  padding: var(--padding-40);
}

.onboarding-person {
  display: flex;
  align-items: center;
  gap: var(--gap-40);
}

.onboarding-person__photo-wrap {
  width: 210px;
  height: 225px;
  aspect-ratio: 14 / 15;
  border-radius: 1.125rem;
  background: linear-gradient(to bottom, var(--purple-main), var(--white-main));
  flex-shrink: 0;
  overflow: hidden;
}

.onboarding-person__photo {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/hub-ki-contact-conner-kuhlmeyer.png")
    transparent 50% / cover no-repeat;
}

.onboarding-person__info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.onboarding-person__name {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.onboarding-person__contact {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  min-height: 48px;
  font-size: var(--fs-body);
  color: var(--dark-grey-1);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.onboarding-person__contact:hover {
  opacity: 0.7;
}

.onboarding-person__contact img {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ——— KONTAKTFORMULAR ——— */
.section-onboarding-kontakt .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
}

.onboarding-kontakt-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-24);
  text-align: center;
}

.onboarding-kontakt-intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  text-align: center;
  font-size: var(--fs-body);
}

.hs-form-frame {
  width: 100%;
  max-width: 56.25rem;
}

.onboarding-form {
  width: 100%;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.onboarding-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-24);
}

.onboarding-form-row--two-col {
  grid-template-columns: 1fr 1fr;
}

.onboarding-form-row--half {
  grid-template-columns: 1fr 1fr;
}

.onboarding-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.onboarding-form-field label {
  font-size: var(--fs-body);
  font-weight: 300;
}

.onboarding-form-field input,
.onboarding-form-field textarea {
  background: #f5f8fa;
  border: 1px solid var(--black-main);
  border-radius: 3px;
  padding: var(--padding-10) var(--padding-12);
  font-size: var(--fs-body);
  font-family: var(--font-base);
  width: 100%;
}

.onboarding-form-field textarea {
  resize: vertical;
  min-height: 7.5rem;
}

.onboarding-form-check {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}

.onboarding-form-check__hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--dark-grey-1);
}

.onboarding-form-check__label {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-8);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.onboarding-form-check__label input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--black-main);
  border-radius: var(--radius-btn);
  flex-shrink: 0;
  cursor: pointer;
}

.onboarding-form-privacy {
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--dark-grey-1);
}

/* ——— RESPONSIVE ——— */
@media (max-width: 1024px) {
  .onboarding-ergebnisse-top {
    grid-template-columns: 1fr;
  }

  .onboarding-result-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--gap-24);
  }

  .section-onboarding-ansprechpartner .inner {
    grid-template-columns: 1fr;
    gap: var(--gap-48);

    max-width: max-content !important;
  }

  .onboarding-ansprechpartner-text {
    padding: 0;
  }

  .onboarding-preise-card {
    grid-template-columns: 1fr;
    padding-left: var(--padding-52);
  }
}

@media (max-width: 768px) {
  .onboarding-phases-card {
    padding: var(--padding-52);
  }

  .onboarding-phase-header {
    gap: var(--gap-40);
  }

  .onboarding-phase-num {
    min-width: 3.5rem;
    font-size: var(--fs-h2);
  }

  .onboarding-phase-content {
    padding-left: calc(3.5rem + var(--gap-24));
  }

  .onboarding-result-cards {
    grid-template-columns: 1fr;
  }

  .onboarding-result-arrows {
    display: none;
  }

  /* --mid (first) stays visible as the arrow between card 2 and card 3 */
  .onboarding-result-arrow--mid-2 {
    display: none;
  }

  /* Between-card arrows visible in single-col layout */
  .onboarding-result-arrow--after {
    display: flex;
  }

  .section-onboarding-ergebnisse .inner {
    gap: 0;
  }

  .onboarding-form-row--two-col,
  .onboarding-form-row--half {
    grid-template-columns: 1fr;
  }

  .onboarding-person {
    flex-direction: column;
    align-items: flex-start;
  }

  .onboarding-preise-price {
    font-size: 3.5rem;
  }

  .section-onboarding-kontakt .inner {
    padding-left: 2px;
    padding-right: 2px;
  }
}

@media (max-width: 599px) {
  .section-onboarding-phases .inner {
    padding: 0;
  }

  .onboarding-phases-card {
    border: none;
    border-radius: 0;
    padding: var(--padding-36) var(--padding-12);
  }

  .onboarding-phase-header {
    gap: var(--gap-28);
  }

  .section-headlines-wrap {
    padding-left: var(--padding-24);
    padding-right: var(--padding-24);
  }

  .onboarding-preise-card {
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .onboarding-preise-right {
    max-width: max-content;
    margin: 0 auto;
  }
}

@media (max-width: 499px) {
  .onboarding-preise-right {
    padding: var(--padding-28);
  }

  .onboarding-phases-card {
    padding: var(--padding-32) var(--padding-12) var(--padding-36)
      var(--padding-8);
  }

  .onboarding-phase-header {
    gap: var(--gap-20);
  }

  .onboarding-phase-content {
    padding-left: calc(3.5rem + var(--gap-16));
  }
}

/* ============================================================
   DATENSCHUTZ Unterseite – seitenspezifische Styles
   ============================================================ */

.section-datenschutz.bg-animation {
  overflow: clip; /* clip blobs without creating scroll container – needed for sticky nav */
}

.section-datenschutz .inner {
  gap: var(--gap-48);
}

.datenschutz-layout {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: var(--gap-64);
  align-items: start;
  width: 100%;
}

.datenschutz-nav {
  position: sticky;
  top: calc(3.75rem + var(--space-24));
}

.datenschutz-nav__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.datenschutz-nav__link {
  display: block;
  padding: var(--padding-12) var(--padding-16);
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--black-main);
  text-decoration: none;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  line-height: 1.4;
  opacity: 0.45;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.datenschutz-nav__link.is-active {
  opacity: 1;
  border-left-color: var(--yellow-main);
}

.datenschutz-nav__link.is-active span {
  margin: 0 -0.1em;
  padding: 0 0.1em;
  background: var(--gradient-yellow-horizontal);
  background-size: 100% 28%;
  background-repeat: no-repeat;
  background-position: left 80%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
}

.datenschutz-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-80);
}

.datenschutz-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  line-height: 1.7;
  scroll-margin-top: calc(3.75rem + var(--space-24));
}

.datenschutz-section h3 {
  margin-top: var(--space-24);
}

.datenschutz-section h3:first-child {
  margin-top: 0;
}

.datenschutz-section h4 {
  margin-top: var(--space-16);
  font-size: var(--fs-body);
}

.datenschutz-section ul {
  list-style: disc;
  padding-left: var(--padding-24);
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.datenschutz-section-title {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 600;
  padding-bottom: var(--padding-16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .datenschutz-layout {
    grid-template-columns: 14rem 1fr;
    gap: var(--gap-40);
  }
}

@media (max-width: 768px) {
  .datenschutz-layout {
    grid-template-columns: 1fr;
  }

  .datenschutz-nav {
    position: static;
    border-left: 2px solid rgba(0, 0, 0, 0.12);
    padding-left: var(--padding-4);
  }

  .datenschutz-nav__link {
    border-left: none;
  }

  .datenschutz-nav__link.is-active {
    border-left: none;
  }
}

/* ============================================================
   IMPRESSUM Unterseite – seitenspezifische Styles
   ============================================================ */

.section-impressum {
  flex: 1;
}

.section-impressum .inner {
  align-items: flex-start;
  gap: var(--gap-48);
}

.impressum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-64);
  width: 100%;
}

.impressum-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  line-height: 1.7;
}

.impressum-content h3 {
  margin-top: var(--space-24);
}

.impressum-content h3:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .impressum-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-40);
  }
}

/* ============================================================
   KONTAKT Unterseite – seitenspezifische Styles
   ============================================================ */

.section-kontakt-hero .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
}

.kontakt-hero-headlines {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.kontakt-hero-intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
  font-size: var(--fs-body);
}

.section-kontakt-jaai .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-48);
  text-align: center;
}

.kontakt-jaai-headline {
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.kontakt-jaai-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  max-width: 42rem;
  line-height: 1.6;
}

.kontakt-jaai-logo {
  max-width: 181px;
  height: auto;
}

@media (max-width: 699px) {
  :root {
    /* Gaps: um 1/3 reduziert (× 2/3 des Desktop-Werts) */
    --gap-4: 0.167rem;
    --gap-8: 0.333rem;
    --gap-10: 0.417rem;
    --gap-12: 0.5rem;
    --gap-16: 0.667rem;
    --gap-20: 0.833rem;
    --gap-24: 1rem;
    --gap-28: 1.167rem;
    --gap-30: 1.25rem;
    --gap-32: 1.333rem;
    --gap-34: 1.417rem;
    --gap-36: 1.5rem;
    --gap-38: 1.583rem;
    --gap-40: 1.667rem;
    --gap-42: 1.75rem;
    --gap-44: 1.833rem;
    --gap-46: 1.917rem;
    --gap-48: 2rem;
    --gap-50: 2.083rem;
    --gap-52: 2.167rem;
    --gap-54: 2.25rem;
    --gap-56: 2.333rem;
    --gap-58: 2.417rem;
    --gap-60: 2.5rem;
    --gap-62: 2.583rem;
    --gap-64: 2.667rem;
    --gap-66: 2.75rem;
    --gap-68: 2.833rem;
    --gap-70: 2.917rem;
    --gap-72: 3rem;
    --gap-74: 3.083rem;
    --gap-76: 3.167rem;
    --gap-78: 3.25rem;
    --gap-80: 3.333rem;
    --gap-100: 4.167rem;
    /* --padding-* bleibt unverändert (Desktop-Werte gelten weiter) */
  }
}

@media (max-width: 1199px) {
  .tools-hub__bubble--sm {
    width: 84px;
    height: 84px;
  }
  .tools-hub__bubble--lg {
    width: 114px;
    height: 114px;
  }
  .tools-hub__bubble--center {
    width: 180px;
    height: 180px;
  }
  .tools-hub__bubble--center .tools-hub__icon {
    max-width: 114px;
  }
  .tools-hub__lines {
    stroke-width: 11;
  }
}

@media (max-width: 1024px) {
  .tools-hub__bubble--sm {
    width: clamp(29px, 7.8vw, 80px);
    height: clamp(29px, 7.8vw, 80px);
  }
  .tools-hub__bubble--lg {
    width: clamp(41px, 10.9vw, 112px);
    height: clamp(41px, 10.9vw, 112px);
  }
  .tools-hub__bubble--center {
    width: clamp(64px, 17vw, 174px);
    height: clamp(64px, 17vw, 174px);
  }
  .tools-hub__icon {
    width: 63%;
  }
  .tools-hub__bubble--center .tools-hub__icon {
    max-width: clamp(40px, 10.5vw, 108px);
  }
  .tools-hub__lines {
    stroke-width: 11;
  }
}

@media (max-width: 899px) {
  .tools-hub {
    transform: scale(1.25);
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .tools-hub__lines {
    stroke-width: 7;
  }
}