/* ---- 00-fonts.css ---- */
/* =========================================================
   Poppins – lokal ausgeliefert

   Bewusst nicht über fonts.googleapis.com: Die Einbindung dort
   überträgt die IP-Adresse jedes Besuchers an Google, und zwar
   vor jeder Einwilligung. Lokal ausgeliefert entfällt das ganz
   und die Schriften laden eine Verbindung früher.

   Dateien stammen unverändert von Google Fonts (Poppins, SIL OFL 1.1).
   ========================================================= */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 01-tokens.css ---- */
/* =========================================================
   Design Tokens
   ========================================================= */
:root {
  /* Farben */
  --color-background: #0e0d0f;
  --color-surface: #211d24;
  --color-element: #332b38;
  --color-white: #fff;
  --color-black: #000;
  --color-grey-100: #c3c2c3;
  --color-grey-400: #7e7f88;
  --color-grey-600: #454756;
  --color-grey-800: #161418;

  /* Akzente */
  --color-accent: #a167e4;
  --color-launch-from: #8324b9;
  --color-launch-to: #a23edb;
  --color-launch-border: #b47ed3;
  --color-danger: red;

  /* Farbnebel (blurred gradient blobs) */
  --glow-magenta: #693069;
  --glow-blue: #183567;
  --glow-violet: #251a4b;
  --glow-plum: #532153;
  --glow-navy: #082453;
  --glow-purple: #310e44;
  --glow-indigo: #001c4d;
  --glow-deep-blue: #061b3f;
  --glow-mauve: #422342;

  /* Typografie */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radien */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 99rem;

  /* Layout */
  --container-max: 80rem;
  --gutter: 2.5rem;

  /* Motion */
  --transition: 0.2s;
}

/* ---- 02-base.css ---- */
/* =========================================================
   Reset & Basis
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: #333;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
}

body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
h1 { font-size: 38px; line-height: 44px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }

p { margin-top: 0; margin-bottom: 0; }

a { color: inherit; }

img, svg { max-width: 100%; vertical-align: middle; display: inline-block; }
img { border: 0; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}



/* ---- 03-typography.css ---- */
/* =========================================================
   Typografie-Utilities
   ========================================================= */
.heading-h1 { font-size: 3.5rem; font-weight: 500; line-height: 1.1; }
/* Variante mit eigener Verkleinerungs-Kurve (Vertriebsstrecken-Hero) */
.heading-h2 { font-size: 3rem;   font-weight: 600; line-height: 1.2; }
.heading-h3 { font-size: 2rem;   font-weight: 600; line-height: 1.2; }
.heading-h4 { font-size: 1.5rem; font-weight: 700; line-height: 1.4; }
.heading-h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.heading-h6 { font-size: 1rem;    font-weight: 600; line-height: 1.5; }

.text-regular { font-size: 1rem; line-height: 145%; }
.text-small   { font-size: 0.875rem; }
.text-semibold { font-weight: 600; }
.text-center  { text-align: center; }

.text-white     { color: var(--color-white); }
.text-secondary { color: var(--color-grey-100); }
.text-grey      { color: gray; }

/* Sekundärtext in Fließtextgröße läuft eine Spur kleiner (wie im Original) */
.text-secondary.text-regular { font-size: 0.9rem; }

@media (max-width: 991px) {
  .heading-h2 { font-size: 2.5rem; }
}
@media (max-width: 767px) {
  .heading-h1 { font-size: 2rem; }
  .heading-h2 { font-size: 2rem; }
  .heading-h3 { font-size: 1.5rem; }
  .heading-h4 { font-size: 1rem; }
  .heading-h5 { font-size: 0.875rem; }
  .heading-h6 { font-size: 0.75rem; }
}
@media (max-width: 479px) {
  .heading-h2 { font-size: 1.5rem; }
  .heading-h6 { color: var(--color-white); font-size: 1rem; font-weight: 600; }
  .text-regular { font-size: 0.85rem; }
  .text-white.heading-h4 { line-height: 1.2; }
}

/* ---- 04-layout.css ---- */
/* =========================================================
   Layout-Primitive
   ========================================================= */
.page-wrapper { background-color: var(--color-background); }
.page-wrapper.is-locked { overflow: hidden; height: 100vh; }
.main-wrapper { overflow: hidden; }

.padding-global {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.section-padding        { padding-top: 8rem; padding-bottom: 8rem; }
.section-padding--md    { padding-top: 5rem; padding-bottom: 5rem; }
.section-padding.section-padding--top-6 { padding-top: 6rem; }
.section-padding.section-padding--top-4 { padding-top: 4rem; }
.section-padding.section-padding--top-7 { padding-top: 7rem; }
.section-padding.section-padding--pricing { padding-top: 8rem; }

.padding-medium { padding: 2rem; }
.padding-large  { padding: 3rem; }

@media (max-width: 991px) {
  .section-padding     { padding-top: 6rem; padding-bottom: 6rem; }
  .section-padding.section-padding--pricing { padding-top: 4rem; }
  .section-padding--md { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-medium { padding: 1.5rem; }
  .padding-large  { padding: 2.5rem; }
}
@media (max-width: 767px) {
  :root { --gutter: 1.25rem; }
  .section-padding     { padding-top: 4rem; padding-bottom: 4rem; }
  .section-padding--md { padding-top: 3rem; padding-bottom: 3rem; }
  .padding-medium { padding: 1.25rem; }
  .padding-large  { padding: 2rem; }
}
@media (max-width: 479px) {
  .section-padding.section-padding--top-7,
  .section-padding.section-padding--pricing { padding-top: 2rem; }
  .page-wrapper { overflow: hidden; }
}

/* ---- 05-components.css ---- */
/* =========================================================
   Wiederverwendbare Komponenten
   ========================================================= */

/* --- Buttons --------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 1rem 1.75rem;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: all var(--transition);
}
.btn--primary { background-color: var(--color-white); color: var(--color-black); }
.btn--primary:hover { background-color: var(--color-grey-100); }
.btn--primary:active { transform: scale(0.95); }

.btn--secondary { border: 1px solid var(--color-white); color: var(--color-white); }
.btn--secondary:hover { background-color: var(--color-white); color: var(--color-black); }
.btn--secondary:active { transform: scale(0.95); }

.btn--full { width: 100%; max-width: none; }

@media (max-width: 991px) {
  /* Auf Touch-Geräten kein Hover-Zustand, nur Active-Feedback */
  .btn--primary:hover { background-color: var(--color-white); }
  .btn--primary:active { background-color: var(--color-grey-100); }
  .btn--secondary:hover { background-color: transparent; color: var(--color-white); }
  .btn--secondary:active { background-color: var(--color-white); color: var(--color-black); }
}
@media (max-width: 479px) {
  .btn { width: 100%; }
}

/* --- Icons ----------------------------------------------------------- */
.icon-sm { flex: none; width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }

@media (max-width: 479px) {
  .icon-md { width: 1.25rem; height: 1.25rem; }
}

/* --- Eyebrow / Pre-Headline ------------------------------------------ */
.eyebrow {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 64px #4d3c64;
}
.eyebrow__text { color: var(--color-white); font-size: 0.8rem; }

@media (max-width: 479px) {
  .eyebrow { padding: 0.5rem 1rem; }
}

/* --- Pills ----------------------------------------------------------- */
.pill {
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.8rem;
}
.pill--round { border-radius: var(--radius-pill); }
.pill__text { display: block; color: var(--color-white); font-size: 0.75rem; font-weight: 500; }

/* --- Bullet-Listen --------------------------------------------------- */
.bullet-list {
  z-index: 3;
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}
.bullet-item {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  text-decoration: none;
}
.bullet-item--link { transition: all var(--transition); }
.bullet-item--link:hover { opacity: 0.5; }

/* Aufzählung mit Punkt (Problem-Sektion) */
.dot-list { display: flex; flex-flow: column; gap: 1rem; }
.dot-item { display: flex; flex: none; gap: 0.75rem; }
.dot-item::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-grey-100);
}

/* --- Floating Badge (Hero / Problem) --------------------------------- */
.badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  background-color: #0e0d0fdb;
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem);
}
.badge__text { color: var(--color-white); }

@media (max-width: 479px) {
  .badge { gap: 0.75rem; border-radius: var(--radius-sm); padding: 0.5rem 1rem; }
  .badge__text { font-size: 0.7rem; }
}

/* --- Farbnebel ------------------------------------------------------- */
.glow {
  position: absolute;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* --- Scroll-Reveal --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

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

/* ---- 06-navigation.css ---- */
/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: relative;
  z-index: 1000;
  background-color: transparent;
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__brand { transition: opacity var(--transition); }
.nav__brand:hover { opacity: 0.5; }
.nav__logo { height: 2.5rem; width: auto; }

.nav__menu { display: flex; }

.nav__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__link {
  display: block;
  padding: 20px;
  white-space: nowrap;
  color: var(--color-white);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--transition);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-grey-400); }

.nav__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.nav__social { display: none; }
.nav__social-link { width: 1.5rem; height: 1.5rem; }
.nav__social-icon { width: 100%; height: 100%; }

/* --- Burger ---------------------------------------------------------- */
.nav__toggle {
  display: none;
  order: 9999;
  padding: 18px;
  background: transparent;
}
.nav__burger {
  display: block;
  position: relative;
  width: 2rem;
  height: 2rem;
}
.nav__burger span {
  position: absolute;
  left: 7.5px;
  right: 7.5px;
  height: 1px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.nav__burger span:nth-child(1) { top: 9.5px; }
.nav__burger span:nth-child(2) { top: 15.5px; }
.nav__burger span:nth-child(3) { top: 21.5px; }

.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { top: 15.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(3) { top: 15.5px; transform: rotate(-45deg); }

/* --- Mobile-Menü ------------------------------------------------------ */
@media (max-width: 991px) {
  .nav__toggle { display: block; }

  /* Original setzt die Marke auf schmalen Screens 10px ein */
  .nav__brand { padding-left: 10px; }

  .nav__menu {
    position: fixed;
    top: var(--nav-height, 80px);
    left: 0;
    right: 0;
    height: 100vh;
    padding: 1.5rem 4rem;
    background-color: var(--color-background);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .nav__menu.is-open { visibility: visible; opacity: 1; }

  .nav__content {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: 80vh;
    width: 100%;
  }

  .nav__top {
    flex-flow: column;
    width: 100%;
    max-width: 24rem;
  }

  .nav__links {
    flex-flow: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .nav__link { font-size: 1rem; }

  .nav__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 4rem;
  }
}

@media (max-width: 479px) {
  .nav__toggle { padding: 0.5rem; }
  .nav__logo { height: 2.25rem; }
  .nav__link { font-weight: 500; }
  .nav__links { gap: 1.5rem; margin-top: 2rem; }
  .nav__content { justify-content: space-between; align-items: center; padding-bottom: 10rem; }
  .nav__social { gap: 3rem; }
}

/* ---- 07-footer.css ---- */
/* =========================================================
   Footer
   ========================================================= */
.footer__wrapper { display: flex; flex-flow: column; gap: 3rem; }

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__logo { width: 6rem; }

.footer__nav-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
}

.footer__nav { display: flex; flex-flow: column; gap: 0.5rem; }
.footer__nav-title { color: var(--color-white); }

.footer__link {
  color: var(--color-grey-400);
  text-decoration: none;
  transition: all var(--transition);
}
.footer__link:hover { color: var(--color-white); }
.footer__link--small { font-size: 12px; }

.footer__separator {
  width: 100%;
  height: 1px;
  background-color: var(--color-surface);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  color: var(--color-grey-400);
  font-size: 12px;
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Sieht aus wie die Nachbarlinks, ist aber ein Knopf */
.footer__consent {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 991px) {
  .footer__link:hover { color: var(--color-grey-600); }
  .footer__link:active { color: var(--color-white); }
}

@media (max-width: 479px) {
  .footer__logo { width: 5rem; }
  .footer__content { flex-flow: column; gap: 3rem; }
  .footer__bottom {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }
  .footer__copyright { order: 9999; }
}

/* ---- sections/comparison.css ---- */
/* =========================================================
   Vergleich Agentur vs. sofort sichtbar
   ========================================================= */
.comparison__wrapper {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.comparison__header {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 42rem;
}
.comparison__text { display: flex; flex-flow: column; gap: 0.5rem; }

.comparison__container {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 100%;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.comparison__row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.comparison__label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8rem;
}
.comparison__logo { width: 4rem; }

.comparison__timeline {
  position: relative;
  display: flex;
  gap: 0.5rem;
  width: 100%;
  height: 6rem;
  padding: 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
}
.comparison__timeline--outline { border: 1px solid var(--color-grey-600); }

.comparison__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: var(--color-grey-800);
  border-radius: var(--radius-md);
}
.comparison__step--ours { max-width: 12rem; }

.comparison__step-text { color: var(--color-white); }

.comparison__launch {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 5rem;
  min-width: 5.25rem;
  height: 100%;
  background-color: var(--color-launch-to);
  background-image: linear-gradient(172deg, var(--color-launch-from), var(--color-launch-to));
  border: 1.5px solid var(--color-launch-border);
  border-radius: var(--radius-md);
}

.comparison__bonus {
  position: relative;
  z-index: 4;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

/* Vertikale Rasterlinien im Hintergrund der Timeline */
.comparison__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.125rem 2rem;
}
.comparison__line {
  width: 1.5px;
  height: 100%;
  background-image: linear-gradient(#45475600, #1c1c20 32% 71%, #45475600);
}

.comparison__glow {
  z-index: 0;
  inset: 0 auto 0 -4rem;
  width: 22rem;
  height: 100%;
  background-color: var(--glow-purple);
  filter: blur(8rem);
}

@media (max-width: 479px) {
  .comparison__container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0.75rem;
    border-radius: var(--radius-xl);
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
  .comparison__row { flex-flow: column; justify-content: space-between; align-items: center; }
  .comparison__timeline { flex-flow: column; height: 16rem; padding: 0.5rem; }
  .comparison__step { border-radius: var(--radius-sm); height: 100%; max-height: 2.5rem; }
  .comparison__step--ours { max-width: none; max-height: 2rem; }
  .comparison__step-text { text-align: center; font-size: 0.6rem; line-height: 1.1; }
  .comparison__launch { border-radius: var(--radius-sm); width: 100%; min-width: 100%; max-height: 3rem; }
  .comparison__launch .icon-lg { width: 1.25rem; height: 1.25rem; }
  .comparison__bonus { flex-flow: column; height: 100%; }
  .comparison__lines { display: none; }
  .comparison__glow { filter: blur(8rem); width: 100%; inset: auto 0 0; }
}

/* ---- sections/contact-hero.css ---- */
/* =========================================================
   Kontakt-Hero (Seite /kontakt)
   ========================================================= */
.contact-hero {
  position: relative;
  background-color: var(--color-background);
}

.container-medium {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.contact-hero__box {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 2rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.contact-hero__header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

.contact-hero__portrait {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 22rem;
  height: 14rem;
  background-color: var(--color-element);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.contact-hero__image { position: relative; bottom: 0; }

.contact-hero__content { display: flex; flex-flow: column; gap: 2rem; }
.contact-hero__text { display: flex; flex-flow: column; gap: 0.5rem; max-width: 22rem; }

.contact-hero__links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

.contact-hero__glow {
  inset: -2rem -4rem auto auto;
  width: 42rem;
  height: 18rem;
  background-color: #461f46;
  filter: blur(10rem);
}

.cal-embed { position: relative; z-index: 1; width: 100%; }

/* Hinweis, solange die Einwilligung für den Kalender fehlt */
.cal-notice {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
}
.cal-notice[hidden] { display: none; }
.cal-notice p { max-width: 34rem; }
.cal-notice__link { color: var(--color-white); }

@media (max-width: 479px) {
  .cal-notice { padding: 1.5rem; }
}

@media (max-width: 479px) {
  .contact-hero__box { border-radius: var(--radius-xl); }
  .contact-hero__header,
  .contact-hero__links { flex-flow: column; justify-content: flex-start; align-items: flex-start; }
  .contact-hero__portrait { width: 100%; height: auto; }
  .contact-hero__image { width: 100%; max-width: none; }
  .contact-hero__glow { z-index: 0; }
}

/* ---- sections/contact.css ---- */
/* =========================================================
   Kontakt-CTA
   ========================================================= */
.contact__container {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 1rem;
  height: 32rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.contact__glow-1 {
  z-index: 2;
  bottom: -7.8rem;
  left: -16.3rem;
  width: 38rem;
  height: 16rem;
  background-color: var(--glow-deep-blue);
  filter: blur(8rem);
}
.contact__glow-2 {
  bottom: 2rem;
  right: 6rem;
  width: 32rem;
  height: 32rem;
  background-color: var(--glow-mauve);
  filter: blur(8rem);
}

/* Abdunklung unter dem Teamfoto */
.contact__scrim,
.contact__scrim-2 {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  width: 100%;
  height: 22rem;
}
.contact__scrim {
  background-color: #211d248f;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
.contact__scrim-2 { background-image: linear-gradient(#17121b00, #17121be6 63%); }

.contact__content {
  position: relative;
  z-index: 2;
  grid-column: span 2;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.contact__text { display: flex; flex-flow: column; gap: 2rem; }

.contact__container--person { padding: 4rem; }
@media (max-width: 479px) { .contact__container--person { padding: 2rem; } }

.contact__person {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.contact__quote {
  position: relative;
  z-index: 4;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 29rem;
}
.contact__quote-text {
  position: relative;
  color: var(--color-white);
  text-align: right;
  font-size: 0.9rem;
}
.contact__quote-author { font-size: 0.75rem; font-weight: 500; }

.contact__image {
  position: absolute;
  inset: auto 10rem -2.6rem auto;
  max-width: 120%;
  height: 100%;
  width: auto;
}
.contact__image--team { right: 0.1rem; }

@media (max-width: 991px) {
  .contact__container { grid-template-rows: auto auto; grid-template-columns: 1fr; height: auto; }
  .contact__content { grid-column: auto; }
  .contact__person { justify-self: end; width: 90%; height: 28rem; }
  .contact__image { width: 70%; max-width: 80%; height: auto; left: auto; right: 2rem; }
  .contact__image--team { width: 100%; max-width: 48rem; height: auto; left: auto; right: auto; }
  .contact__scrim, .contact__scrim-2 { height: 50%; }
}

@media (max-width: 767px) {
  .contact__image--team { max-width: 100%; height: auto; bottom: 4rem; left: 0; right: 0; }
}

@media (max-width: 479px) {
  .contact__person { width: 100%; height: 26rem; }
  .contact__image { width: 100%; max-width: 100%; right: 0; }
  .contact__image--team { max-width: 100%; height: auto; bottom: 8rem; right: 0; }
  .contact__scrim { height: 35%; }
  .contact__quote { width: 100%; }
  .contact__quote-text { text-align: left; }
}

/* ---- sections/faq.css ---- */
/* =========================================================
   Häufige Fragen
   ========================================================= */
.faq__wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: start stretch;
  gap: 8rem;
}

.faq__header {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
}

.faq__items {
  grid-column: span 2;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 100%;
}

.faq__item {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition);
}
.faq__item:hover { background-color: var(--color-element); }

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  text-align: left;
  color: var(--color-white);
  font-weight: 600;
  cursor: pointer;
}

.faq__icon-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-pill);
}
.faq__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-white);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(0deg); }

/* Auf-/Zuklappen ohne feste Höhen */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 36rem;
  transition: grid-template-rows 0.35s ease;
}
.faq__question[aria-expanded="true"] + .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; min-height: 0; }
/* Abstand zur Frage sitzt im geclippten Inhalt – eingeklappt verschwindet er mit */
.faq__answer-inner > :first-child { margin-top: 1rem; }

.faq__answer-inner p {
  color: var(--color-white);
  font-size: 0.875rem;
  line-height: 20px;
}
.faq__answer-inner strong { font-weight: 600; }

@media (max-width: 991px) {
  .faq__wrapper { display: flex; flex-flow: column; gap: 2rem; }
  .faq__items { grid-column: auto; }
}

@media (max-width: 479px) {
  .faq__item { padding: 1.5rem; }
  .faq__question { gap: 1rem; }
}

/* ---- sections/hero.css ---- */
/* =========================================================
   Hero
   ========================================================= */
.hero {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-columns: 1fr;
  gap: 4rem;
  place-items: center start;
  width: 100%;
  padding-right: 4rem;
}

.hero__content {
  position: relative;
  grid-column: span 3;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 40rem;
}

.hero__header { display: flex; flex-flow: column; gap: 1rem; }

.hero__headline {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.75rem;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-white);
}
.hero__headline strong { font-weight: 700; }

.hero__icon-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 0.15rem solid var(--color-grey-600);
  background-color: var(--color-background);
  border-radius: var(--radius-lg);
}
.hero__icon { width: 4rem; }

.hero__visual { position: relative; z-index: 2; grid-column: span 2; }
.hero__image { width: 100%; }
.hero__image-mobile { display: none; }

.hero__badge-1 { position: absolute; top: 6rem; right: -6rem; }
.hero__badge-2 { position: absolute; bottom: 3rem; right: -2rem; }
.hero__badge-3 { position: absolute; bottom: 2rem; left: -1rem; }

.hero__glow-1 {
  left: 6rem;
  width: 34rem;
  height: 18rem;
  background-color: var(--glow-magenta);
  filter: blur(12rem);
}
.hero__glow-2 {
  top: 6rem;
  right: 2rem;
  width: 42rem;
  height: 18rem;
  background-color: var(--glow-blue);
  filter: blur(12rem);
}

.hero__cta-mobile { display: none; }

@media (max-width: 991px) {
  .hero { height: auto; }

  .hero__grid {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 2rem;
    padding-right: 0;
  }

  .hero__content { width: 90%; max-width: none; }

  .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .hero__image { display: none; }

  .hero__image-mobile {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 90%;
    max-width: 90%;
    height: 24rem;
    border: 1.5px solid var(--color-grey-600);
    background-color: #0d0c0e;
    border-radius: var(--radius-2xl);
  }
  .hero__couple { max-width: none; height: 110%; width: auto; }

  .hero__badge-1 { right: -1.4rem; }
  .hero__badge-2 { right: 3rem; }
  .hero__badge-3 { left: 0.2rem; }
}

@media (max-width: 767px) {
  .hero__headline { font-size: 2rem; }
  .hero__icon-wrapper { border-radius: var(--radius-sm); height: 2rem; }
  .hero__icon { width: 2rem; }
}

@media (max-width: 479px) {
  .hero { margin-bottom: 2rem; }

  .hero__grid {
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 4rem;
    padding-right: 0;
  }

  .hero__visual { flex-flow: column; gap: 3rem; }

  .hero__headline { column-gap: 0.5rem; row-gap: 0.5rem; }
  .hero__icon-wrapper {
    border-radius: var(--radius-sm);
    height: 2.2rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .hero__icon { width: 2.5rem; }

  .hero__image-mobile {
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 100%;
    height: 14rem;
  }

  .hero__badge-1 { top: auto; bottom: 9.1rem; right: -0.5rem; }
  .hero__badge-2 { bottom: 5.7rem; left: -0.5rem; right: auto; }
  .hero__badge-3 { display: none; }

  .hero__glow-1 {
    top: 23.7rem;
    left: -1.1rem;
    width: 14rem;
    height: 14rem;
    filter: blur(8rem);
  }
  .hero__glow-2 {
    top: 15rem;
    right: -1.9rem;
    width: 16rem;
    filter: blur(8rem);
  }

  .hero__cta-desktop { display: none; }
  .hero__cta-mobile { display: block; width: 100%; }
}

/* ---- sections/legal.css ---- */
/* =========================================================
   Rechtstexte (Impressum, Datenschutz)
   Bildet die Standard-Typografie des Original-Rich-Texts nach.
   ========================================================= */
.container-small {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
/* Linksbündig am Raster von Logo und Navigation statt mittig */
.container-small--left { margin-left: 0; margin-right: 0; }

.rich-text { color: var(--color-white); }

.rich-text h1 { margin: 0; font-size: 38px; line-height: 44px; }
.rich-text h2 { margin: 0; font-size: 32px; line-height: 36px; }
.rich-text h3 { margin: 0; font-size: 24px; line-height: 30px; }
.rich-text h4 { margin: 10px 0; font-size: 18px; line-height: 24px; }
.rich-text h5 { margin: 10px 0; font-size: 14px; line-height: 20px; }
.rich-text h6 { margin: 10px 0; font-size: 12px; line-height: 18px; }

.rich-text p { margin: 0; }
.rich-text ul,
.rich-text ol { margin: 0 0 10px; padding-left: 40px; overflow: hidden; }
.rich-text a { color: var(--color-white); }
.rich-text strong { font-weight: 700; }

/* Von Cookiebot erzeugte Cookie-Tabelle in die Seitenfarben bringen */
.cookie-declaration { margin-top: 2rem; color: var(--color-white); }
.cookie-declaration a { color: var(--color-white); }

/* ---- sections/notfound.css ---- */
/* =========================================================
   404
   ========================================================= */
.notfound__inner {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  min-height: 40vh;
  max-width: 36rem;
}

/* ---- sections/overview.css ---- */
/* =========================================================
   Technischer Vergleich (Seite /pricing)
   ========================================================= */
.overview__padding { padding-top: 0; padding-bottom: 8rem; }

.overview__inner { display: flex; flex-flow: column; gap: 3rem; }
.overview__groups { display: flex; flex-flow: column; gap: 6rem; }
.overview__group { display: flex; flex-flow: column; gap: 1rem; }

.overview__row {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.5fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  gap: 1rem;
  height: 3.5rem;
}

.overview__cells {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  gap: 1rem;
  height: 100%;
}

.overview__cell {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.overview__separator { height: 1.5px; background-color: #252525; }

.overview__icon--yes { width: 1rem; height: 1rem; color: #37ff00; }
.overview__icon--no  { width: 1.25rem; height: 1.25rem; color: red; }

@media (max-width: 991px) {
  .overview__padding { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (max-width: 767px) {
  .overview__padding { padding-top: 4rem; padding-bottom: 4rem; }
  .overview__value { font-size: 0.7rem; }
}
@media (max-width: 479px) {
  .overview__row { height: auto; }
  .overview__label { font-size: 0.7rem; }
}

/* ---- sections/pricing.css ---- */
/* =========================================================
   Pricing
   ========================================================= */
.pricing__grid {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.pricing__headline { position: relative; z-index: 2; }

.pricing__hero {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4rem 4rem 12rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.pricing__glow-1 {
  inset: 0 auto 0 -6rem;
  width: 22rem;
  height: 100%;
  background-color: var(--glow-purple);
  filter: blur(10rem);
}
.pricing__glow-2 {
  inset: 0 -6rem 0 auto;
  width: 22rem;
  height: 100%;
  background-color: var(--glow-indigo);
  filter: blur(10rem);
}

/* --- Tabs ------------------------------------------------------------ */
.pricing__tabs {
  /* liegt durch den negativen Rand über dem Pricing-Hero – muss darum
     eine eigene Ebene bekommen, sonst sind Switch und Karten nicht klickbar */
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: -10rem;
  /* 1rem oben/unten: hält den Abstand zum Panel identisch zum Original */
  padding: 1rem 4rem;
}

.pricing__switch {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--color-background);
  border-radius: var(--radius-pill);
}

.pricing__switch-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 9px 30px;
  color: var(--color-white);
  background-color: transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}
.pricing__switch-button[aria-selected="true"] {
  color: var(--color-background);
  background-color: var(--color-white);
}
.pricing__switch-button--sale { padding: 9px 12px 9px 16px; }
.pricing__switch-text { font-weight: 600; }

.pricing__panels { margin-top: 1rem; }
.pricing__panel[hidden] { display: none; }

/* --- Karten ---------------------------------------------------------- */
.pricing__cards {
  display: grid;
  /* Drei Zeilen: die beiden leeren erzeugen – wie im Original – 2rem Luft unter den Karten */
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 1rem;
}

.pricing__tier { padding-top: 1rem; padding-bottom: 1rem; position: relative; }
.pricing__tier--featured {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.pricing__card { height: 100%; min-height: 100%; }

.pricing__option {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  height: 100%;
  padding: 2rem;
  border: 2px solid var(--color-element);
  background-color: var(--color-black);
  border-radius: var(--radius-xl);
}

.pricing__option-inner {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 28rem;
}

.pricing__content {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
}

.pricing__header-box {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
}

.pricing__header {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  width: 100%;
}
.pricing__name { color: var(--color-white); font-size: 1.5rem; line-height: 120%; font-weight: 700; }

.pricing__price-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.5rem;
}
.pricing__price { color: var(--color-white); font-size: 1.5rem; font-weight: 600; line-height: 100%; }
.pricing__price--original { color: var(--color-grey-400); text-decoration: line-through; }
.pricing__price-unit { color: var(--color-white); font-size: 0.75rem; font-weight: 600; line-height: 120%; }

.pricing__separator { width: 100%; height: 1.5px; background-color: var(--color-grey-600); }

.pricing__benefits { display: flex; flex-flow: column; gap: 0.5rem; }
.pricing__benefit { display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; }
.pricing__check { flex: none; width: 1rem; height: 1rem; color: var(--color-white); }

@media (max-width: 991px) {
  .pricing__headline { position: relative; z-index: 2; }

.pricing__hero { padding-left: 6rem; padding-right: 6rem; }
  .pricing__cards { grid-template-columns: 1fr; height: auto; }
  .pricing__tier { padding-top: 0; padding-bottom: 0; }
  .pricing__option-inner { gap: 2rem; max-height: none; }
}

@media (max-width: 767px) {
  .pricing__tabs { padding: 1rem 2rem; }
}

@media (max-width: 479px) {
  .pricing__headline { position: relative; z-index: 2; }

.pricing__hero { border-radius: var(--radius-xl); padding: 2rem 2rem 12rem; }
  .pricing__tabs { margin-top: -11rem; padding: 1rem; }
  .pricing__option { padding: 1.5rem; }
  .pricing__glow-1 { filter: blur(8rem); width: 14rem; }
  .pricing__glow-2 { filter: blur(8rem); width: 12rem; }
  .pricing__switch-text { font-size: 0.75rem; }
}

/* ---- sections/problem.css ---- */
/* =========================================================
   Problem
   ========================================================= */
.problem {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.problem__grid {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 4rem;
  place-items: center;
}

.problem__visual { position: relative; z-index: 2; }

.problem__image {
  position: relative;
  border: 1px solid var(--color-grey-600);
  border-radius: var(--radius-2xl);
}

.problem__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.problem__glow {
  position: absolute;
  inset: auto auto 0 0;
  width: 34rem;
  height: 22rem;
  background-color: var(--glow-magenta);
  filter: blur(8rem);
  border-radius: 0;
}

/* Schwebende Badges auf dem Bild */
.problem__badge--mail {
  position: absolute;
  top: 3rem;
  left: -1rem;
  width: 5rem;
  height: 5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.problem__badge--delivered { position: absolute; bottom: 2rem; left: -2rem; }
.problem__badge--call { position: absolute; bottom: -1rem; right: 2rem; }

.problem__gmail-icon { width: 3rem; }

.problem__notification {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-danger);
  border-radius: var(--radius-pill);
}
.problem__notification-text { color: var(--color-white); font-size: 0.75rem; font-weight: 500; }

.problem__missed-call-icon { width: 2.5rem; }
.problem__missed-call-text { display: flex; flex-flow: column; }
.problem__bullet { color: var(--color-white); }

@media (max-width: 991px) {
  .problem__grid {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .problem__visual { display: flex; justify-content: center; align-items: center; width: 100%; }
  .problem__content, .problem__content .dot-list { gap: 1.5rem; }
  .problem__content { max-width: 80%; }
  .problem__glow { z-index: 0; width: 90%; height: 50%; }

  .problem__badge--mail { left: 1.1rem; }
  .problem__badge--delivered { left: 2.4rem; }
  .problem__badge--call { bottom: 1rem; right: 1.6rem; }
}

@media (max-width: 479px) {
  .problem__grid { gap: 3rem; }
  .problem__content { max-width: 100%; }
  .problem__image { border-radius: var(--radius-xl); max-width: 100%; }
  .problem__glow { filter: blur(4rem); width: 100%; }

  .problem__badge--mail {
    border-radius: var(--radius-md);
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
    top: 1rem;
    left: 1rem;
  }
  .problem__badge--delivered { border-radius: var(--radius-md); padding: 0.75rem; left: -0.5rem; }
  .problem__badge--call { border-radius: var(--radius-md); bottom: 0.5rem; right: -0.5rem; }

  .problem__missed-call-icon { width: 1.75rem; }
  .problem__bullet { font-size: 0.7rem; }
  .problem__delivered-text { display: none; }
}

/* ---- sections/solution.css ---- */
/* =========================================================
   Lösung
   ========================================================= */
.solution__container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 4rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.solution__glow-1 {
  z-index: 0;
  inset: -4rem auto auto;
  width: 70%;
  height: 24rem;
  background-color: var(--glow-violet);
  filter: blur(12rem);
}
.solution__glow-2 {
  z-index: 0;
  inset: auto 14rem -4rem auto;
  width: 34rem;
  height: 20rem;
  background-color: var(--glow-plum);
  filter: blur(10rem);
  border-radius: 0;
}

.solution__vertrieb-image {
  position: absolute;
  inset: auto 0 0 auto;
  max-width: 70%;
}

.solution__wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  width: 100%;
}

.solution__header {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.solution__header-text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 32rem;
}

/* --- Karten ---------------------------------------------------------- */
.solution__items {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  gap: 1rem;
  width: 100%;
}

.solution__item {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 26rem;
  padding: 2.5rem;
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.solution__item--wide { grid-column: span 2; }

.solution__item-content {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
}
.solution__item-header {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.solution__preview {
  position: absolute;
  top: auto;
  bottom: -1rem;
  left: auto;
  min-width: 85%;
  max-width: none;
  min-height: 14rem;
  max-height: 15rem;
}

/* Hover: nur das Vorschaubild bewegt sich, die Karte bleibt stehen.
   Im Original 16px in rund 200ms – am Live-Stand nachgemessen. */
@media (hover: hover) {
  .solution__preview { transition: transform 200ms linear; }
  .solution__item:hover .solution__preview { transform: translate3d(0, -1rem, 0); }
}

.solution__preview--wide {
  width: 42rem;
  min-width: auto;
  max-width: none;
  min-height: auto;
  max-height: none;
  left: 29rem;
  right: auto;
}
.solution__preview--mobile { display: none; }

.solution__preview-gradient {
  z-index: 2;
  position: absolute;
  inset: auto 0 0;
  height: 12rem;
  background-image: linear-gradient(#0e0d0f00, #0e0d0fbf);
  pointer-events: none;
}

/* --- Ergebnis -------------------------------------------------------- */
.solution__result {
  position: relative;
  display: flex;
  flex-flow: column;
  align-self: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 24rem;
  padding-top: 8rem;
  padding-bottom: 6rem;
}
.solution__result-headline {
  color: var(--color-white);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.solution__arrow {
  position: absolute;
  inset: 2rem -2rem auto auto;
  opacity: 0.5;
}

@media (max-width: 991px) {
  .solution__items { grid-template-rows: auto auto auto; grid-template-columns: 1fr; }
  .solution__item { height: 20rem; min-height: 25rem; }
  .solution__item--wide {
    grid-column: span 1;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    height: 38em;
  }
  .solution__result { padding-top: 4rem; padding-bottom: 12rem; }
  .solution__arrow { height: 3rem; inset: -3% auto auto 0; transform: rotate(42deg); }

  .solution__preview { max-width: 32rem; min-height: auto; max-height: none; bottom: -2rem; }
  .solution__preview--wide { width: 90%; display: none; right: auto; }
  .solution__preview--mobile { width: 85%; display: block; bottom: -3rem; left: auto; }
}

@media (max-width: 479px) {
  .solution__container { border-radius: var(--radius-xl); padding: 1rem; }
  .solution__glow-2 { width: 18rem; height: 16rem; right: 2rem; }
  .solution__vertrieb-image { max-width: 110%; left: 0; }

  .solution__wrapper { gap: 2rem; }
  .solution__header { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; }
  .solution__header-text { gap: 0.5rem; }

  .solution__items { row-gap: 1rem; }
  .solution__item { gap: 2rem; border-radius: var(--radius-lg); height: 21rem; padding: 2rem; }
  .solution__item--wide { justify-content: flex-start; align-items: flex-start; height: 30rem; }
  .solution__item-header { gap: 0.75rem; }
  .solution__item-content { width: 100%; max-width: 100%; }

  .solution__preview { width: 100%; bottom: 0; left: 0; }
  .solution__preview--wide { max-width: 95%; }
  .solution__preview--mobile { width: 100%; min-width: 100%; bottom: 0; }

  .solution__result { padding: 2rem 1rem 13rem; }
  .solution__result-headline { max-width: 12rem; font-size: 1.5rem; }
  .solution__arrow { height: 2.5rem; left: auto; right: 2rem; transform: rotateY(180deg) rotate(28deg); }
}

/* ---- sections/styleguide.css ---- */
/* =========================================================
   Styleguide (interne Referenzseite)
   ========================================================= */
.sg__header { display: flex; flex-flow: column; align-items: flex-start; gap: 1rem; max-width: 42rem; }

.sg__block {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--color-grey-600);
}

.sg__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}
.sg__swatch { display: flex; flex-flow: column; gap: 0.5rem; }
.sg__chip {
  height: 4rem;
  border: 1px solid var(--color-grey-600);
  border-radius: var(--radius-md);
}

.sg__stack { display: flex; flex-flow: column; gap: 1rem; }
.sg__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.sg__row--top { align-items: flex-start; }

.sg__bar {
  padding: 1rem 1.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-grey-100);
}
.sg__bar span { color: var(--color-white); font-weight: 600; margin-right: 0.5rem; }
.sg__bar--medium { max-width: 64rem; }
.sg__bar--small { max-width: 48rem; }

.sg__list { margin: 0; padding-left: 1.25rem; display: flex; flex-flow: column; gap: 0.5rem; }

.sg code {
  padding: 0.15rem 0.4rem;
  background-color: var(--color-element);
  border-radius: 0.35rem;
  font-size: 0.85em;
}

/* ---- sections/support.css ---- */
/* =========================================================
   Support / Entscheidungshilfe
   ========================================================= */
.support__container {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 1rem;
  height: 28rem;
  padding: 4rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.support__glow {
  inset: auto auto -6rem -4rem;
  width: 28rem;
  height: 18rem;
  background-color: var(--glow-magenta);
  filter: blur(10rem);
}

.support__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 24rem;
}
.support__text { display: flex; flex-flow: column; gap: 0.5rem; }

.support__call {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  padding: 2rem;
  background-color: var(--color-black);
  border-radius: var(--radius-xl);
}
.support__call-content { display: flex; flex-flow: column; gap: 1rem; }
.support__call-header { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; }

.support__call-icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-element);
  border-radius: var(--radius-md);
  flex: none;
}

@media (max-width: 991px) {
  .support__container { grid-template-columns: 1fr; gap: 2rem; height: auto; padding: 3rem; }
  .support__content { gap: 2rem; max-width: none; }
}

@media (max-width: 479px) {
  .support__container { gap: 1rem; border-radius: var(--radius-xl); padding: 1rem; }
  .support__content { padding: 1rem; }
  .support__glow { z-index: 0; }
  .support__call-content { gap: 0.5rem; }
  .support__call-header {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ---- sections/themes-page.css ---- */
/* =========================================================
   Seite /vertriebsstrecken – Hero und Themen-Auswahl
   ========================================================= */

/* --- Hero ------------------------------------------------------------ */
.themes-hero {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 42rem;
  padding-top: 6rem;
}

.themes-hero__content { max-width: 37rem; }

.heading-h1--small { z-index: 2; position: relative; }
.heading-h1--small strong { font-weight: 700; }

.themes-hero__glow-1 {
  bottom: 4rem;
  width: 50%;
  height: 24rem;
  margin-right: 12rem;
  background-color: #6b2c6b;
  filter: blur(10rem);
}
.themes-hero__glow-2 {
  z-index: 0;
  bottom: 4rem;
  width: 50%;
  height: 18rem;
  margin-left: 16rem;
  background-color: var(--glow-blue);
  filter: blur(12rem);
}

.themes-hero__preview { position: absolute; inset: auto auto 0; }
.themes-hero__image { height: 26rem; width: auto; }
.themes-hero__image--mobile { display: none; }

.themes-hero__badge-1 { position: absolute; bottom: 4rem; }
.themes-hero__badge-2 { position: absolute; bottom: 17.5rem; right: 15.3rem; }
.themes-hero__badge-3 { position: absolute; bottom: 4.9rem; right: -4rem; }

@media (max-width: 991px) {
  .themes-hero { height: 40rem; }
  .heading-h1--small { font-size: 3rem; }
  .themes-hero__preview { display: flex; flex-flow: column; justify-content: center; align-items: center; }
  .themes-hero__image { min-width: 48rem; max-width: 90%; height: auto; display: none; }
  .themes-hero__image--mobile { display: block; }
  .themes-hero__badge-1 { left: 2rem; }
  .themes-hero__badge-3 { right: 0.5rem; }
}
@media (max-width: 767px) {
  .themes-hero { height: 34rem; }
  .themes-hero__image { width: 100%; min-width: 40rem; max-width: 44rem; }
  .themes-hero__badge-1 { bottom: 3.6rem; }
  .themes-hero__badge-2 { bottom: 15rem; right: 9.2rem; }
  .themes-hero__badge-3 { bottom: 3.6rem; right: 3.5rem; }
}
@media (max-width: 479px) {
  .themes-hero { height: 24rem; padding-top: 3rem; }
  .themes-hero__content { max-width: 20rem; }
  .heading-h1--small { font-size: 2rem; }
  .themes-hero__preview {
    display: flex; flex-flow: column; justify-content: flex-start; align-items: center;
    left: 0; right: 0;
  }
  .themes-hero__image { height: 12rem; display: none; }
  .themes-hero__image--mobile { width: 100%; min-width: 28rem; height: auto; display: block; }
  .themes-hero__badge-1 { bottom: 2rem; left: 0.9rem; }
  .themes-hero__badge-2 { bottom: 10rem; right: 1.8rem; }
  .themes-hero__badge-3 { bottom: 2rem; right: 0.7rem; }
}

/* --- Auswahl --------------------------------------------------------- */
.themes-selection { position: relative; background-color: var(--color-background); }
.themes-selection__padding { padding-top: 6rem; padding-bottom: 8rem; }
.themes-selection__inner { display: flex; flex-flow: column; gap: 2rem; }
.themes-selection__nav { display: flex; flex-flow: column; }

.themes-selection__filters { display: flex; flex-flow: row; gap: 0.5rem; }

.themes-selection__filter {
  position: relative;
  padding: 0 1rem 0.5rem;
  /* nicht gewählt: gedämpft, wie im Original */
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--transition);
}
.themes-selection__filter.is-active { color: var(--color-white); }
.themes-selection__filter-text { font-weight: 400; }
.themes-selection__filter.is-active .themes-selection__filter-text { font-weight: 600; }

/* Unterstreichung des aktiven Filters */
.themes-selection__filter-line {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background-color: transparent;
  transition: height var(--transition), background-color var(--transition);
}
.themes-selection__filter.is-active .themes-selection__filter-line {
  height: 3px;
  background-color: var(--color-white);
}

.themes-selection__separator { height: 1px; background-color: var(--color-grey-600); }

.themes-selection__lists { display: flex; flex-flow: column; gap: 0.75rem; }
.themes-selection__list[hidden] { display: none; }

.themes-selection__grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0.75rem;
}

.theme-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  height: 11rem;
  padding: 2rem;
  background-color: var(--color-surface);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition);
}
.theme-card:hover { background-color: var(--color-element); }
.theme-card:active { transform: scale(0.95); }
.theme-card[hidden] { display: none; }

.theme-card__icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
}

.theme-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.theme-card__label { color: var(--color-white); }

@media (max-width: 991px) {
  .themes-selection__padding { padding-top: 6rem; padding-bottom: 6rem; }
  .themes-selection__grid { gap: 0.5rem; }
  .theme-card:hover { background-color: var(--color-surface); }
  .theme-card:active { background-color: var(--color-element); transform: scale(0.95); }
}
@media (max-width: 767px) {
  .themes-selection__padding { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (max-width: 479px) {
  .themes-selection__filters { gap: 0; justify-content: center; align-items: center; }
  .themes-selection__filter {
    display: flex; justify-content: center; align-items: center;
    padding-left: 0.75rem; padding-right: 0.75rem;
    font-size: 0.85rem;
  }
  .themes-selection__grid { grid-template-columns: 1fr; }
  .theme-card { height: 10rem; padding: 1.5rem; }
}

/* ---- sections/themes.css ---- */
/* =========================================================
   Themen / Pakete
   ========================================================= */
.themes__container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  width: 100%;
  padding: 4rem 4rem 32rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.themes__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  max-width: 46rem;
}

.themes__text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  max-width: 42rem;
}

.themes__bullets {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
}
.themes__bullet { display: flex; flex: none; gap: 0.75rem; align-items: center; }

.themes__glow {
  z-index: 0;
  bottom: -4rem;
  left: auto;
  right: auto;
  width: 56rem;
  height: 18rem;
  background-color: var(--glow-navy);
  filter: blur(12rem);
}

/* --- Marquee --------------------------------------------------------- */
.themes__slider-wrapper {
  position: absolute;
  inset: auto 0 8rem;
  z-index: 3;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  overflow: hidden;
}

.themes__slider {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1rem;
  width: 100%;
  will-change: transform;
}

.themes__slide {
  width: 18rem;
  min-width: 18rem;
  height: 10rem;
  background-color: var(--color-grey-100);
  border-radius: 0.25rem;
  object-fit: cover;
}
.themes__slide--small { width: 15rem; min-width: 15rem; height: 8.5rem; }

@media (max-width: 991px) {
  .themes__bullets {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }
}

@media (max-width: 479px) {
  .themes__container { border-radius: var(--radius-xl); padding: 2rem 2rem 23.6rem; }
  .themes__bullets { gap: 1.5rem; }
  .themes__glow { filter: blur(8rem); width: 24rem; height: 28rem; }
  .themes__slider-wrapper { bottom: 4rem; }
  .themes__slide { width: 14rem; min-width: 14rem; height: 8rem; }
  .themes__slide--small { width: 11rem; min-width: 11rem; height: 6rem; }
}

/* ---- sections/vertriebsleiter.css ---- */
/* =========================================================
   Seite /vetriebsleiter – eigene Sektionen
   ========================================================= */

/* Der erste Hero-Badge sitzt hier etwas weiter außen */
.hero__badge--wide { top: 12rem; right: -8rem; }
@media (max-width: 991px) { .hero__badge--wide { right: -0.1rem; } }
@media (max-width: 479px) { .hero__badge--wide { top: 10rem; } }

/* --- Lösung ---------------------------------------------------------- */
.vl-solution__container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  width: 100%;
  padding: 4rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.vl-solution__headline { max-width: 32rem; }

.vl-solution__items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: end center;
  gap: 1rem;
  width: 100%;
}

.vl-solution__item {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 24rem;
  padding: 2rem;
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.vl-solution__preview {
  position: absolute;
  inset: auto auto 0;
  width: 90%;
  max-width: 90%;
}
.vl-solution__preview--wide { width: 42rem; right: 2rem; }

.vl-solution__buttons { display: flex; gap: 1.5rem; }

.vl-solution__glow {
  z-index: 0;
  inset: auto;
  width: 56rem;
  height: 18rem;
  background-color: var(--glow-navy);
  filter: blur(12rem);
}

@media (max-width: 991px) {
  .vl-solution__items {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
  }
  /* Original-Eigenheit: feste Breite, die von min-width überschrieben wird */
  .vl-solution__item { flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100px; min-width: 100%; }
  .vl-solution__preview { min-width: 85%; max-width: 28rem; bottom: -2.5rem; }
}
@media (max-width: 767px) {
  .vl-solution__item { height: 22rem; }
  .vl-solution__preview { bottom: 0; }
}
@media (max-width: 479px) {
  .vl-solution__container { border-radius: var(--radius-xl); padding: 2rem 2rem 3rem; }
  .vl-solution__preview { width: auto; min-width: auto; max-width: 20rem; min-height: 40%; bottom: 0; left: 0; }
  .vl-solution__preview--wide { max-width: 95%; }
  .vl-solution__buttons { flex-flow: column; }
  .vl-solution__glow { filter: blur(8rem); width: 24rem; height: 28rem; }
}

/* --- Info ------------------------------------------------------------ */
.vl-info { position: relative; background-color: var(--color-background); }

.vl-info__container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  width: 100%;
  padding: 5rem 4rem 4rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.vl-info__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}
.vl-info__header { display: flex; flex-flow: column; gap: 1rem; max-width: 42rem; }

.vl-info__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}

.vl-info__item {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--color-grey-600);
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
}

.vl-info__icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
}

.vl-info__item-content { display: flex; flex-flow: column; gap: 0.75rem; }

.vl-info__glow-1 {
  z-index: 0;
  inset: auto -6rem -6rem auto;
  width: 32rem;
  height: 80%;
  background-color: var(--glow-blue);
  filter: blur(12rem);
}
.vl-info__glow-2 {
  z-index: 0;
  inset: -6rem auto auto -6rem;
  width: 32rem;
  height: 80%;
  background-color: var(--glow-magenta);
  filter: blur(12rem);
}

@media (max-width: 991px) {
  .vl-info__container { gap: 2rem; padding: 3rem; }
  .vl-info__grid { grid-template-rows: auto auto auto; grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .vl-info__container { border-radius: var(--radius-xl); padding-left: 1rem; padding-right: 1rem; }
  .vl-info__item { border-radius: 1.25rem; padding: 1.5rem; }
}

/* ---- sections/zielgruppe.css ---- */
/* =========================================================
   Zielgruppen-Detailseiten (/zielgruppen/*)
   ========================================================= */

/* --- Hero ------------------------------------------------------------ */
.zg-hero {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 42rem;
  padding-top: 4rem;
}

.zg-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 42rem;
}
.zg-hero__title { font-weight: 600; }

@media (max-width: 479px) { .zg-hero { height: 32rem; } }

/* --- Styles ---------------------------------------------------------- */
.zg-styles { position: relative; background-color: var(--color-background); }

.zg-styles__container {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.zg-styles__header {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
}

.zg-styles__color {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-grey-600);
  border-radius: var(--radius-md);
}

.zg-styles__grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

.zg-style {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 15rem;
  padding: 1.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  overflow: hidden;
}
.zg-style:hover { background-color: var(--color-element); }

.zg-style__image { position: absolute; inset: auto auto 0 1rem; width: 90%; }

@media (max-width: 991px) { .zg-style { height: 10rem; } }
@media (max-width: 767px) {
  .zg-styles__grid { grid-template-rows: auto auto auto; grid-template-columns: 1fr; }
  .zg-style { height: 18rem; }
}
@media (max-width: 479px) {
  .zg-style { height: 13rem; }
  .zg-style__image { width: 100%; left: 0; }
}

/* --- Weitere Themen -------------------------------------------------- */
.zg-other__container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 24rem;
  padding: 4rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.zg-other__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 24rem;
}

.zg-other__glow {
  inset: auto auto -6rem;
  width: 28rem;
  height: 12rem;
  background-color: #2f1c97;
  filter: blur(12rem);
}

.zg-other__badge { position: absolute; }
.zg-other__badge-1  { inset: 2rem auto auto 1rem;    transform: scale(0.7); }
.zg-other__badge-2  { inset: 6rem auto auto 12rem;   transform: scale(0.9); }
.zg-other__badge-3  { inset: auto auto auto 2rem;    transform: scale(0.9); }
.zg-other__badge-4  { inset: auto auto 7rem 11rem;   transform: scale(0.8); }
.zg-other__badge-5  { inset: auto auto 2rem 3rem;    transform: scale(0.6); }
.zg-other__badge-6  { top: 2rem; left: auto; right: 5rem;      transform: scale(0.6); }
.zg-other__badge-7  { top: 6rem; left: auto; right: 11rem;     transform: scale(0.7); }
.zg-other__badge-8  { bottom: 7rem; left: auto; right: 14rem;  transform: scale(0.7); }
.zg-other__badge-9  { bottom: 10.6rem; left: auto; right: 4rem; transform: scale(0.9); }
.zg-other__badge-10 { bottom: 3rem; left: auto; right: 1rem;   transform: scale(0.8); }

@media (max-width: 991px) {
  .zg-other__badge-1  { top: 1rem; left: 0.5rem; }
  .zg-other__badge-2  { left: 2rem; }
  .zg-other__badge-3  { left: -1rem; }
  .zg-other__badge-4  { bottom: 5rem; left: 1rem; }
  .zg-other__badge-5  { bottom: 1rem; left: 1rem; }
  .zg-other__badge-6  { top: 1rem; right: 1rem; }
  .zg-other__badge-7  { right: -2rem; }
  .zg-other__badge-8  { right: 2rem; }
  .zg-other__badge-9  { right: 1rem; transform: scale(0.8); }
  .zg-other__badge-10 { bottom: 1rem; right: 0; }
}
@media (max-width: 479px) {
  .zg-other__container { height: 28rem; padding: 3rem; }
  .zg-other__badge-1  { left: 3rem; }
  .zg-other__badge-2  { top: 3.5rem; left: 1rem; }
  .zg-other__badge-3  { display: none; }
  .zg-other__badge-4  { left: -2rem; }
  .zg-other__badge-5  { bottom: 2rem; left: 0; }
  .zg-other__badge-7  { top: 5rem; right: 1rem; }
  .zg-other__badge-8  { bottom: 4rem; right: 0; }
  .zg-other__badge-9  { display: none; }
  .zg-other__badge-10 { right: 2rem; }
}

/* --- Über die Zielgruppe: Listen im Rich-Text ------------------------ */
.zg-info__list ul { margin: 0 0 10px; padding-left: 40px; overflow: hidden; }
.zg-info__list { color: gray; }