/*
  ==========================================================================
  Aktuellis – Globales Stylesheet
  ==========================================================================
  Aufbau:
    1. Schriftfamilien (lokale Einbettung der CI-Schrift)
    2. Design-Tokens (:root Variablen inkl. Dark Mode)
    3. Animationen für dekorative Overlays
    4. Grundlayout & Hilfsklassen
    5. Komponenten- und Seitenspezifische Module
  Alle Kommentare bleiben bewusst auf Deutsch, damit sich neue Kolleg:innen
  schnell in Struktur und Verantwortlichkeiten einarbeiten können.
*/
@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gomme Sans';
  src: url('../../fonts/Gomme Sans W04 ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Farb- & Textebene ================================================= */
  --primary-color: var(--brand-900, #102a43);
  --primary-color-rgb: var(--brand-900-rgb, 16, 42, 67);
  --secondary-color: var(--brand-800, #1c3a5b);
  --secondary-color-rgb: var(--brand-800-rgb, 28, 58, 91);
  --accent-color: var(--accent-500, #2f6fed);
  --accent-color-rgb: var(--accent-500-rgb, 47, 111, 237);
  --accent-color-strong: var(--accent-600, #1f56c3);
  --accent-color-cyan: #7ab6ff;
  --accent-color-cyan-rgb: 122, 182, 255;
  --text-on-light: #101827;
  --text-on-dark: #f7f9ff;
  --muted-on-light: #506079;
  --muted-on-dark: #b4c2da;
  --text-color: var(--text-on-light);
  --text-color-rgb: 16, 24, 39;
  --muted-text: var(--muted-on-light);
  --primary-rgb: var(--accent-500-rgb, 13, 110, 253);
  --text-rgb: 17, 24, 39;

  /* === Flächen, Rahmen & Schatten ======================================== */
  --background-color: var(--surface-canvas, #f6f8fc);
  --background-color-rgb: var(--brand-50-rgb, 246, 248, 252);
  --surface-glass: rgba(var(--surface-solid-rgb, 255, 255, 255), 0.9);
  /*
    RGB-Variante für sämtliche Karten- und Containerflächen.
    Damit können wir transparente Layer sowohl im hellen als auch im dunklen Modus
    konsistent ansteuern, ohne redundante Farbdefinitionen zu pflegen.
  */
  --surface-solid-rgb: 255, 255, 255;
  --surface-solid: rgba(var(--surface-solid-rgb, 255, 255, 255), 0.98);
  --surface-border: rgba(var(--brand-900-rgb, 16, 42, 67), 0.08);
  --surface-blur: 24px;
  --surface-rgb: 255, 255, 255;
  --surface-alpha: 0.9;
  --section-alt-bg: rgba(var(--brand-200-rgb, 214, 222, 235), 0.68);
  --shadow-soft: 0 30px 80px -38px rgba(var(--secondary-color-rgb), 0.26);
  --shadow-hover: 0 40px 110px -48px rgba(var(--accent-color-rgb), 0.32);
  --shadow-focus: 0 0 0 4px rgba(var(--accent-color-rgb), 0.25);
  --border-rgb: 0, 0, 0;
  --border-alpha: 0.06;

  /* === Komponentenflächen ================================================= */
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(var(--primary-color-rgb), 0.08);
  --card-radius: calc(var(--border-radius-lg) - 6px);
  --card-padding: clamp(1.6rem, 3.4vw, 2.6rem);
  --card-gap: clamp(0.95rem, 2.3vw, 1.4rem);
  --section-surface: rgba(255, 255, 255, 0.95);
  --service-block-padding: clamp(1.6rem, 4vw, 2.2rem);
  --service-block-gap: clamp(0.85rem, 2.5vw, 1.15rem);
  --service-card-bg: rgba(255, 255, 255, 0.95);
  --service-card-border: rgba(var(--primary-color-rgb), 0.12);
  --service-card-shadow: var(--shadow-soft);

  /* === Buttons & Interaktionen =========================================== */
  --button-bg: var(--accent-500, #2f6fed);
  --button-bg-hover: var(--accent-600, #1f56c3);
  --button-text: var(--text-on-dark);
  --button-height: clamp(2.85rem, 3.4vw, 3.3rem);
  --button-padding-block: clamp(0.75rem, 1.6vw, 0.95rem);
  --button-padding-inline: clamp(1.35rem, 2.8vw, 2rem);
  --button-gap: clamp(0.45rem, 1.8vw, 0.7rem);
  --button-radius: var(--border-radius-pill, 999px);
  --button-stack-gap: clamp(0.65rem, 2vw, 0.95rem);
  --hover-lift-xs: -2px;
  --hover-lift-sm: -4px;
  --hover-lift-md: -7px;
  --hover-scale: 1.03;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-emphasis: 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  --danger-color: #dc2626;
  --success-color: #16a34a;

  /* === Typografie & Layoutmetriken ======================================= */
  --font-family-base: 'Gomme Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-headings: 'Gomme Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --heading-color: #0f1c2e;
  --heading-color-rgb: 15, 28, 46;
  --content-max-width: 1200px;
  --content-max-width-wide: 1480px;
  --container-max: 1280px;
  --text-max-width: 68ch;
  --space-2xs: clamp(0.35rem, 0.65vw, 0.55rem);
  --space-xs: clamp(0.55rem, 0.95vw, 0.85rem);
  --space-sm: clamp(0.85rem, 1.5vw, 1.25rem);
  --space-md: clamp(1.15rem, 2.3vw, 1.75rem);
  --space-lg: clamp(1.9rem, 3.4vw, 2.75rem);
  --space-xl: clamp(2.6rem, 4.6vw, 3.5rem);
  --space-2xl: clamp(3.4rem, 5.8vw, 4.85rem);
  --content-padding-inline: clamp(1.35rem, 4.6vw, 3.1rem);
  --content-padding-inline-tight: clamp(1.05rem, 3.4vw, 2.2rem);
  --section-padding-y: clamp(3.1rem, 7vw, 5.4rem);
  --section-gap: clamp(1.35rem, 3.6vw, 2.75rem);
  --layout-flow-gap: clamp(1.1rem, 2.6vw, 1.9rem);

  /* === Radien & Höhen ===================================================== */
  --border-radius-lg: 26px;
  --border-radius-md: 20px;
  --border-radius-sm: 14px;
  --border-radius-pill: 999px;
  --border-radius-xl: 32px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --card-radius: calc(var(--border-radius-lg) - 6px);

  /* === Navigation & Seitenhülle ========================================== */
  --nav-surface-bg: rgba(248, 249, 252, 0.94);
  --nav-surface-border: rgba(var(--accent-color-rgb), 0.2);
  --nav-border-dark: rgba(148, 163, 184, 0.28);
  --nav-shadow: 0 22px 60px -38px rgba(var(--secondary-color-rgb), 0.42);
  --nav-shadow-dark: 0 28px 72px -44px rgba(2, 6, 23, 0.7);
  --nav-transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --navbar-height: 108px;
  --navbar-blur: 20px;
  --navbar-toggle-color: var(--text-color);
  --navbar-z: 1080;
  --navbar-overlay-z: 1040;
  --navbar-content-z: 1090;

  /* === Formularflächen & Footer ========================================= */
  --field-bg: #ffffff;
  --field-border: rgba(var(--primary-color-rgb), 0.12);
  --footer-height: 56px;
  --divider-color: rgba(var(--primary-color-rgb), 0.08);

  /* === Container-Overlays ================================================= */
  --container-overlay-inset: clamp(0.55rem, 1.8vw, 1.15rem);
  --container-overlay-radius-offset: clamp(0.4rem, 1.5vw, 0.85rem);
  --container-overlay-opacity: 0.6;
  --container-overlay-blend: soft-light;
  --container-overlay-border: 0 solid transparent;
  --container-overlay-shadow: none;
  --container-overlay-backdrop: none;
  --container-overlay-z-index: -1;
  --container-overlay-animation-duration: 18s;
  --container-overlay-animation-offset: 6s;
  --container-overlay-bg:
    linear-gradient(160deg,
      rgba(var(--accent-color-rgb), 0.12) 0%,
      rgba(var(--accent-color-rgb), 0.05) 40%,
      rgba(var(--accent-color-rgb), 0) 100%);
  --container-glow-width: clamp(260px, 46vw, 420px);
  --container-glow-height: clamp(180px, 48vw, 320px);
  --container-glow-bottom: -42%;
  --container-glow-right: -30%;
  --container-glow-opacity: 0.42;
  --container-glow-blur: 90px;
  --container-glow-translate-x: 0;
  --container-glow-translate-y: 0;
  --container-glow-z-index: -2;
  --container-glow-bg:
    radial-gradient(circle,
      rgba(var(--accent-color-rgb), 0.2),
      transparent 70%);
  --cursor-x: 50%;
  --cursor-y: 38%;
}

@supports (color: color-mix(in srgb, #000 0%, #fff 100%)) {
  :root {
    /*
      Moderne Browser erzeugen den Cyan-Akzent dynamisch aus der Primärfarbe.
      Für ältere Engines greift automatisch der Fallback aus der :root-Definition.
    */
    --accent-color-cyan: color-mix(in srgb, var(--accent-color) 68%, #ffffff 32%);
  }
}
/*
  Vereinheitlichte Bewegungsmuster für die Container-Overlays.
  Die Animationen nutzen ausschließlich transform- und opacity-Eigenschaften,
  wodurch sie von der GPU berechnet werden und keine Neuberechnung des Layouts
  auslösen.
*/
@keyframes containerOverlayDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2%, -1%, 0) scale(1.015);
  }

  100% {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
}

@keyframes containerGlowPulse {
  0% {
    transform:
      translate3d(var(--container-glow-translate-x), var(--container-glow-translate-y), 0)
      scale(0.98);
    opacity: calc(var(--container-glow-opacity) * 0.85);
  }

  50% {
    transform:
      translate3d(calc(var(--container-glow-translate-x) * 0.6),
        calc(var(--container-glow-translate-y) * 0.6), 0)
      scale(1.04);
    opacity: var(--container-glow-opacity);
  }

  100% {
    transform:
      translate3d(calc(var(--container-glow-translate-x) * -0.4),
        calc(var(--container-glow-translate-y) * -0.4), 0)
      scale(1);
    opacity: calc(var(--container-glow-opacity) * 0.92);
  }
}

body {
  font-family: var(--font-family-base);
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  /*
    Flächiger Seitenhintergrund ohne Farbverlauf.
    So reduzieren wir GPU-lastige Layer und erzielen ein klareres Erscheinungsbild.
  */
  background-color: var(--background-color);
  color: var(--text-color);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  font-feature-settings: 'liga' 1, 'kern' 1;
  color-scheme: light;
}

/*
  Hilfsklassen zur Kontraststeuerung
  ----------------------------------
  Markiert Bereiche explizit als helle oder dunkle Oberflächen. So kann der
  Textfarbensatz zentral angepasst werden, ohne in jedem Modul individuelle
  Hex-Werte zu hinterlegen. Beide Klassen aktualisieren zusätzlich die
  RGB-Varianten, damit auch halbtransparente Farbberechnungen konsistent bleiben.
*/
.surface-light {
  color: var(--text-on-light);
  --text-color: var(--text-on-light);
  --text-color-rgb: 16, 24, 39;
  --muted-text: var(--muted-on-light);
}

.surface-dark {
  color: var(--text-on-dark);
  --text-color: var(--text-on-dark);
  --text-color-rgb: 247, 249, 255;
  --muted-text: var(--muted-on-dark);
  color-scheme: dark;
}

body.page {
  /*
    Der Body besitzt keinen zusätzlichen oberen Innenabstand; der Header schließt
    direkt mit dem Viewportrand ab, weil keine Top-Bar mehr ausgespielt wird.
  */
  padding-top: 0;
  padding-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

body.page .page-shell__main {
  /*
    Der Hauptinhalt bleibt weiterhin unterhalb des fixierten Headers. Die
    dynamische Höhe wird von `initHeaderOffset` gepflegt.
  */
  padding-top: var(
    --header-offset,
    var(--navbar-height)
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.page::before,
body.page::after {
  content: "";
  position: fixed;
  width: clamp(260px, 36vw, 420px);
  height: clamp(260px, 36vw, 420px);
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.18;
  z-index: -2;
  pointer-events: none;
  transition: opacity 0.6s ease;
  animation: auraDrift 22s ease-in-out infinite alternate;
}

body.page::before {
  /* Hervorgehobener Farbteppich für den modernen Pastell-Look. */
  top: clamp(-220px, -12vw, -120px);
  left: clamp(-180px, -10vw, -60px);
  /* Einfarbige Fläche statt radialem Verlauf. */
  background-color: rgba(var(--accent-color-rgb), 0.16);
}

body.page::after {
  /* Zweiter Lichtkegel unterstützt das neue Cyan-Akzentspiel. */
  bottom: clamp(-220px, -16vw, -120px);
  right: clamp(-140px, -10vw, -60px);
  /* Gleichmäßige Farbfläche für harmonische Übergänge. */
  background-color: rgba(var(--accent-color-cyan-rgb, 122, 182, 255), 0.14);
}

@keyframes auraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate3d(8px, -10px, 0) scale(1.05);
    opacity: 0.27;
  }
  100% {
    transform: translate3d(-6px, 12px, 0) scale(1.02);
    opacity: 0.2;
  }
}

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

.page__main {
  flex: 1;
  display: grid;
  gap: var(--section-gap);
  align-content: start;
}

.page__main > :where(section, article, div) {
  margin: 0;
}

/* Ensure media like images scale down on smaller screens */
img {
  max-width: 100%;
  height: auto;
}

/* Vereinheitlichte Grundgestaltung für Karten-Elemente */
:where(
    .card,
    .contact-card,
    .team-list li,
    .pricing-card,
    .pricing-accordion__item,
    .page-content__section,
    details
  ) {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

/* Skip-Link for keyboard navigation */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: var(--border-radius-pill);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transform: translateY(-150%);
  transition: transform var(--transition-base), opacity var(--transition-base);
  z-index: 1000;
  opacity: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

.service-sections .page-content {
  display: grid;
  gap: var(--space-xl);
}

.service-section {
  display: grid;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.service-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 6px solid var(--accent-color);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
}

.service-section > * {
  position: relative;
  z-index: 1;
}

.service-section__header {
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}

@media (min-width: 640px) {
  .service-section__header {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.service-section__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.14);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.2);
}

.service-section__headline {
  display: grid;
  gap: 0.85rem;
  max-width: 68ch;
}

.service-section__summary {
  margin: 0;
  color: var(--muted-text);
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
  line-height: 1.7;
}

.service-section__body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .service-section__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-section__body.service-section__body--with-aside {
    grid-template-columns: minmax(0, 2.15fr) minmax(260px, 320px);
  }
}

.service-section__content {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.25rem);
}

.service-section__details {
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.75rem);
}

@media (min-width: 640px) {
  .service-section__details {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.service-detail-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.15rem, 3.5vw, 1.8rem);
  border-radius: var(--border-radius-md);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.service-detail-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.service-detail-card p {
  margin: 0;
  color: var(--muted-text);
}

.service-section__highlights {
  /*
    Begleitende Leistungen im Seitenbereich: kompakte Kachel ohne
    Glas-Effekt, die wichtige Services bündelt.
  */
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.6rem, 3.8vw, 2.2rem);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--surface-border);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  isolation: isolate;
}

.service-section__highlights::before {
  /* Farbverläufe entfallen – es bleibt nur ein dezenter Innenabstand. */
  content: none;
}

.service-section__highlights h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.service-section__highlights ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  color: var(--muted-text);
}

.service-section__highlights li {
  line-height: 1.65;
}

.service-section__advantage {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.5rem, 4vw, 2.1rem);
  border-radius: var(--border-radius-md);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.service-section__advantage::before {
  /* Zusätzliche Überlagerungen werden entfernt. */
  content: none;
}

.service-section__advantage > * {
  position: relative;
  z-index: 1;
}

.service-section__advantage h3 {
  margin: 0;
}

.service-section__advantage p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.inpage-nav {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--border-radius-lg);
  background: rgba(var(--surface-solid-rgb), 0.9);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
}

.inpage-nav__title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.inpage-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inpage-nav__footer {
  display: grid;
  gap: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--heading-color-rgb), 0.55);
}

.inpage-nav__progress {
  position: relative;
  height: 4px;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.2);
  overflow: hidden;
}

.inpage-nav__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-color);
  transform: translateX(-40%);
  animation: nav-progress 2.8s ease-in-out infinite;
}

.inpage-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.inpage-nav__link::before {
  content: '\2192';
  font-size: 0.9rem;
  line-height: 1;
}

.inpage-nav__link:hover,
.inpage-nav__link:focus {
  transform: translateY(var(--hover-lift-xs));
  box-shadow: 0 10px 20px -12px rgba(var(--primary-color-rgb), 0.4);
}

.inpage-nav--floating {
  position: relative;
  background: rgba(var(--surface-solid-rgb), 0.92);
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.inpage-nav--floating .inpage-nav__list {
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .inpage-nav--floating {
    position: sticky;
    top: calc(var(--navbar-height) + 1.5rem);
    max-width: 260px;
  }

  .inpage-nav--floating .inpage-nav__list {
    flex-direction: column;
  }

  .inpage-nav--floating .inpage-nav__link {
    justify-content: space-between;
    width: 100%;
  }
}

.page-intro-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 960px) {
  .page-intro-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
}

.quick-facts {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--border-radius-lg);
  background: rgba(var(--primary-color-rgb), 0.08);
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
  box-shadow: var(--shadow-soft);
}

.quick-facts__title {
  margin: 0;
  font-size: 1.1rem;
}

.quick-facts__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.quick-facts__item {
  display: grid;
  gap: 0.35rem;
}

.quick-facts__item dt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
}

.quick-facts__item dd {
  margin: 0;
  color: var(--muted-text);
}

.quick-facts__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.2rem;
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(var(--primary-color-rgb), 0.3);
  background: rgba(var(--surface-solid-rgb), 0.92);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition-base);
  margin-top: 0.5rem;
}

.quick-facts__cta:hover,
.quick-facts__cta:focus {
  background: var(--primary-color);
  color: #fff;
  box-shadow: var(--shadow-hover);
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.checklist li {
  position: relative;
  padding-left: 1.6rem;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.3rem;
  border: 2px solid rgba(var(--primary-color-rgb), 0.6);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px #fff;
}

.checklist li::after {
  content: '';
  position: absolute;
  left: 0.23rem;
  top: 0.55rem;
  width: 0.35rem;
  height: 0.7rem;
  border-right: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  transform: rotate(45deg);
}

.checklist--dense {
  gap: 0.35rem;
}

@media (min-width: 768px) {
  .service-section__body {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: start;
  }
}

.service-section__list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.55rem;
  color: var(--muted-text);
}

.service-section__list li {
  line-height: 1.7;
}

.service-section__advantage {
  padding: clamp(1.5rem, 4vw, 2.1rem);
  display: grid;
  gap: 0.85rem;
  color: var(--text-color);
}

.service-section__advantage h3 {
  margin: 0;
  color: var(--heading-color);
}

.service-section__advantage p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}


.service-summary__grid {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2rem);
  margin-top: clamp(1.35rem, 3.6vw, 2.1rem);
}

.service-summary__grid:not(.service-summary__grid--detail) {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.service-summary__grid--detail {
  gap: clamp(1.35rem, 3.6vw, 2.4rem);
}

@media (min-width: 960px) {
  .service-summary__grid--detail {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.service-summary__card {
  /*
    Einheitliche Karte für Service-Zusammenfassungen – nutzt die globalen
    Service-Variablen für konsistente Abstände und Flächen.
  */
  background: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  box-shadow: var(--service-card-shadow);
}

.service-summary__card h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
}

.service-summary__card p {
  margin: 0;
  color: var(--muted-text);
}

.service-summary__list {
  margin: 0;
  padding: 0;
}

.service-summary__content {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.service-summary__content p {
  margin: 0;
  color: var(--muted-text);
}

.service-summary__stats {
  display: grid;
  gap: clamp(0.9rem, 3vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.service-summary__stat {
  background: rgba(var(--primary-color-rgb), 0.08);
  border: 1px solid rgba(var(--primary-color-rgb), 0.16);
  border-radius: var(--border-radius-md);
  padding: clamp(0.9rem, 2.5vw, 1.2rem);
  display: grid;
  gap: 0.45rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.service-summary__stat strong {
  font-size: 0.95rem;
  color: var(--heading-color);
}

.service-summary__stat span {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.service-card-grid {
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(1.2rem, 3.4vw, 2rem);
}

.service-card {
  /* Service-Karte für Leistungsbausteine */
  background: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  align-content: start;
  box-shadow: var(--service-card-shadow);
  height: 100%;
}

.service-card__content {
  display: grid;
  gap: clamp(0.75rem, 2.4vw, 1.05rem);
}

.service-card__header {
  display: grid;
  gap: 0.5rem;
}

.service-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--secondary-color-rgb), 0.12);
  color: var(--secondary-color);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}

.service-card h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
}

.service-card__lead {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.service-card__list {
  margin: 0;
  padding: 0;
}

.service-card__footer {
  margin-top: auto;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-base), transform var(--transition-base);
}

.service-card__link::after {
  content: '\2192';
  font-size: 0.95rem;
  line-height: 1;
}

.service-card__link:hover,
.service-card__link:focus {
  color: var(--secondary-color);
  transform: translateX(2px);
}

.service-deliverables__grid {
  display: grid;
  gap: clamp(1.1rem, 3.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: clamp(1.1rem, 3.2vw, 1.9rem);
}

.service-deliverables__card {
  /* Liefert modulare Service-Bausteine mit identischen Abständen */
  background: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  box-shadow: var(--service-card-shadow);
}

.service-deliverables__card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}

.service-deliverables__list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted-text);
  display: grid;
  gap: 0.45rem;
}

.service-proof__grid {
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.7rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: clamp(1.1rem, 3vw, 1.8rem);
}

.service-proof__card {
  /* Referenzen und Nachweise erscheinen im gleichen Layout-Raster */
  background: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  box-shadow: var(--service-card-shadow);
}

.service-proof__card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
}

.service-proof__card p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.service-proof__meta {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(var(--secondary-color-rgb), 0.9);
}
.service-sections__cta {
  margin-top: clamp(2.25rem, 5vw, 3.4rem);
  position: relative;
  padding: clamp(2.25rem, 5.8vw, 3.25rem);
  border-radius: var(--border-radius-xl, calc(var(--border-radius-lg) + 4px));
  border: 1px solid rgba(var(--primary-color-rgb), 0.16);
  background: rgba(var(--surface-solid-rgb), 0.96);
  box-shadow: 0 42px 110px -56px rgba(var(--secondary-color-rgb), 0.58);
  backdrop-filter: blur(calc(var(--surface-blur) - 6px));
  -webkit-backdrop-filter: blur(calc(var(--surface-blur) - 6px));
  overflow: hidden;
  isolation: isolate;
}

.service-sections__cta::before,
.service-sections__cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: opacity var(--transition-base);
}

.service-sections__cta::before {
  inset: -26% auto 26% -18%;
  width: clamp(240px, 32vw, 420px);
  background: rgba(var(--accent-color-rgb), 0.18);
  opacity: 0.55;
  filter: blur(32px);
}

.service-sections__cta::after {
  inset: auto -22% -48% 32%;
  width: clamp(260px, 36vw, 460px);
  height: clamp(180px, 26vw, 320px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0.7;
}

body.services-page .service-sections__cta {
  background: rgba(var(--surface-solid-rgb), 0.97);
  border-color: rgba(var(--primary-color-rgb), 0.2);
  box-shadow: 0 48px 120px -60px rgba(var(--secondary-color-rgb), 0.62);
}

body.services-page .service-sections__cta::before {
  inset: -32% -16% 32% auto;
  width: clamp(260px, 38vw, 520px);
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.42) 0%, transparent 70%);
  opacity: 0.5;
}

body.services-page .service-sections__cta::after {
  inset: auto 10% -26% 14%;
  width: clamp(220px, 28vw, 420px);
  height: clamp(160px, 22vw, 260px);
  background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.36) 0%, transparent 72%);
  opacity: 0.55;
}

.service-sections__cta-inner {
  display: grid;
  gap: clamp(1.1rem, 3.2vw, 1.85rem);
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}

.service-sections__cta-inner > * {
  margin: 0;
  position: relative;
  z-index: 1;
}

.service-sections__cta-inner p {
  color: rgba(var(--text-color-rgb), 0.72);
  font-size: clamp(1.05rem, 2.6vw, 1.2rem);
}


.service-section__description {
  margin: 0;
  color: var(--muted-text);
  font-size: clamp(1.05rem, 2.6vw, 1.15rem);
  line-height: 1.75;
  max-width: 62ch;
}

.service-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.service-section__tag {
  padding: 0.4rem 0.9rem;
  background: rgba(var(--primary-color-rgb), 0.1);
  border-radius: var(--border-radius-pill);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.service-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.service-section__actions .button.secondary {
  background: transparent;
}


.service-timeline {
  /*
    Zeitachse für die Leistungsabschnitte: ein gläserner Hintergrund mit
    subtiler Farbfläche, der die einzelnen Schritte in Szene setzt.
  */
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3.6vw, 2.2rem);
  padding: clamp(2rem, 4.8vw, 2.9rem);
  border-radius: var(--border-radius-xl, calc(var(--border-radius-lg) + 6px));
  background: linear-gradient(135deg, var(--surface-solid) 0%, rgba(var(--primary-color-rgb), 0.08) 100%);
  border: 1px solid rgba(var(--primary-color-rgb), 0.14);
  box-shadow: 0 32px 70px -42px rgba(var(--primary-color-rgb), 0.55);
  overflow: hidden;
  isolation: isolate;
}

.service-timeline::before {
  /* Farbverlauf im Hintergrund, der dem Block mehr Tiefe verleiht. */
  content: "";
  position: absolute;
  inset: -45% 32% 55% -28%;
  background: radial-gradient(
    circle at top left,
    rgba(var(--accent-color-rgb), 0.28),
    transparent 68%
  );
  opacity: 0.9;
  z-index: -1;
}

@media (min-width: 960px) {
  .service-timeline::before {
    inset: -42% 42% 48% -28%;
  }
}

.service-timeline__step {
  /*
    Jede Karte beschreibt eine Projektphase. Hover-Effekte sorgen für
    ein lebendiges Feedback ohne unnötige Animationen.
  */
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.3rem, 3.4vw, 1.8rem);
  padding-left: clamp(3.35rem, 6.5vw, 3.9rem);
  border-radius: calc(var(--border-radius-lg) - 2px);
  background: linear-gradient(145deg, var(--surface-solid) 0%, rgba(var(--accent-color-rgb), 0.12) 120%);
  border: 1px solid rgba(var(--primary-color-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.service-timeline__step::before {
  /* Verbindungslinie zwischen den Karten, wirkt wie eine vertikale Timeline. */
  content: "";
  position: absolute;
  left: clamp(1.55rem, 3.5vw, 1.85rem);
  top: clamp(1.65rem, 3.4vw, 2rem);
  bottom: clamp(-1.35rem, -3vw, -1.6rem);
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-color-rgb), 0.35),
    rgba(var(--accent-color-rgb), 0)
  );
}

.service-timeline__step:last-child::before {
  bottom: clamp(1.8rem, 3.8vw, 2.2rem);
}

.service-timeline__step:hover {
  transform: translateY(var(--hover-lift-sm));
  border-color: rgba(var(--accent-color-rgb), 0.28);
  box-shadow: 0 26px 60px -38px rgba(var(--accent-color-rgb), 0.35);
}

.service-timeline__icon {
  /* Icon-Badge visualisiert die aktuelle Projektphase. */
  position: absolute;
  left: clamp(0.55rem, 2.2vw, 0.95rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.45rem, 3.8vw, 2.9rem);
  height: clamp(2.45rem, 3.8vw, 2.9rem);
  border-radius: var(--border-radius-pill, 999px);
  color: var(--primary-color);
  background: linear-gradient(145deg, rgba(var(--accent-color-rgb), 0.25), rgba(var(--primary-color-rgb), 0.1));
  box-shadow: 0 24px 40px -26px rgba(var(--accent-color-rgb), 0.6);
  isolation: isolate;
}

.service-timeline__icon-graphic {
  /* Einheitliche Icon-Größe für klare Lesbarkeit. */
  width: clamp(1.3rem, 2.2vw, 1.6rem);
  height: clamp(1.3rem, 2.2vw, 1.6rem);
}

.service-timeline__icon-graphic path,
.service-timeline__icon-graphic circle {
  transition: stroke var(--transition-base), fill var(--transition-base);
}

.service-timeline__icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(
    circle,
    rgba(var(--accent-color-rgb), 0.38),
    transparent 65%
  );
  opacity: 0.65;
  z-index: -1;
  transition: opacity var(--transition-base);
}

.service-timeline__step:hover .service-timeline__icon::after {
  opacity: 0.95;
}

.service-timeline__step:hover .service-timeline__icon {
  color: var(--accent-color);
}

.service-timeline__content {
  display: grid;
  gap: 0.45rem;
}

.service-timeline__title {
  margin: 0;
  font-size: clamp(1.08rem, 2.6vw, 1.28rem);
  color: var(--heading-color);
}

.service-timeline__text {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.7;
}

.service-highlight-grid {
  display: grid;
  gap: clamp(1.15rem, 3.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.service-highlight-card {
  /* Highlight-Kacheln erhalten dieselbe Struktur wie andere Servicekarten */
  background: var(--service-card-bg);
  border: 1px solid var(--service-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  box-shadow: var(--service-card-shadow);
}

.service-highlight-card h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
}

.service-highlight-card p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.service-highlight-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted-text);
  display: grid;
  gap: 0.5rem;
}

.detail-section {
  background: rgba(var(--surface-solid-rgb), 0.9);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}

.detail-section + .detail-section {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.detail-section__grid {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2rem);
}

@media (min-width: 900px) {
  .detail-section__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.detail-section__content {
  display: grid;
  gap: 0.75rem;
}

.detail-section__content p {
  margin: 0;
  color: var(--muted-text);
}

.detail-section__list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
  color: var(--muted-text);
}

.detail-section__list.checklist {
  padding: 0;
}

.detail-section__note {
  background: rgba(var(--secondary-color-rgb), 0.12);
  border: 1px solid rgba(var(--secondary-color-rgb), 0.18);
  border-radius: var(--border-radius-md);
  padding: clamp(1rem, 3vw, 1.5rem);
  display: grid;
  gap: 0.5rem;
}

.detail-section__note h3 {
  margin: 0;
  color: var(--heading-color);
}

.detail-section__note p {
  margin: 0;
  color: var(--muted-text);
}

.service-step-list {
  display: grid;
  gap: clamp(1.2rem, 3.4vw, 1.85rem);
}

.service-step {
  /* Prozess-Schritte nutzen das gleiche Grundlayout wie alle Service-Bausteine */
  display: grid;
  gap: var(--service-block-gap);
  padding: var(--service-block-padding);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--service-card-border);
  background: var(--service-card-bg);
  box-shadow: var(--service-card-shadow);
}

.service-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 1rem;
}

.service-step h3 {
  margin: 0;
}

.service-step p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.service-step ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted-text);
  display: grid;
  gap: 0.5rem;
}

.service-benefit-grid {
  display: grid;
  gap: clamp(1.1rem, 3.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.service-benefit-card {
  /* Nutzenargumente erscheinen visuell deckungsgleich mit den übrigen Karten */
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--service-card-border);
  background: var(--service-card-bg);
  padding: var(--service-block-padding);
  display: grid;
  gap: var(--service-block-gap);
  box-shadow: var(--service-card-shadow);
}

.service-benefit-card h3 {
  margin: 0;
}

.service-benefit-card p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.service-benefit-card ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
  color: var(--muted-text);
}

.service-proof {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
}

.service-proof__item {
  background: rgba(var(--primary-color-rgb), 0.1);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(var(--primary-color-rgb), 0.18);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 0.45rem;
}

.service-proof__item h3 {
  margin: 0;
}

.service-proof__item p {
  margin: 0;
  color: var(--muted-text);
}

.service-sections__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .service-sections__cta-inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    text-align: left;
  }

  .service-sections__cta-inner h2,
  .service-sections__cta-inner p {
    text-align: left;
  }

  .service-sections__cta-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .service-sections__cta {
    padding: clamp(2.6rem, 5vw, 3.6rem) clamp(2.8rem, 6vw, 4.2rem);
  }

  .service-sections__cta-inner {
    gap: clamp(1.35rem, 2.8vw, 2.1rem);
  }
}

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

/*
 * Der Zustand des Body-Elements wird inzwischen über die Klasse
 * `.no-scroll` gesteuert (siehe script.js). Der frühere Helfer
 * `.nav-open` wird daher nicht mehr benötigt.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  color: var(--heading-color, var(--text-color));
  text-align: left;
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  color: var(--muted-text);
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

:where(.page__main, .section, .page-content) p:not([class*='hero__']):not(.no-measure) {
  max-inline-size: var(--text-max-width);
}

:where(p, li, dd, dt, blockquote, figcaption, .section-lead, .hero__lead, .hero__support,
    .card__summary, .card__body, .card__teaser) {
  overflow-wrap: break-word;
  hyphens: auto;
}

ul,
ol {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: var(--space-xs);
  color: var(--muted-text);
}

:where(.page__main, .section, .page-content) :where(ul, ol) {
  max-inline-size: var(--text-max-width);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover,
a:focus-visible {
  color: rgba(var(--secondary-color-rgb), 0.92);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  max-width: 720px;
}

.section-header h2 {
  margin: 0;
}

.section-header--center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header--center .eyebrow {
  justify-content: center;
}

.section-lead {
  color: var(--muted-text);
  font-size: 1.05rem;
  max-width: 62ch;
}

.section-header--center .section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* Reveal-Animationen werden erst aktiviert, sobald JavaScript lauffähig ist.
   Ohne die Klasse .js-enabled bleiben sämtliche Inhalte sichtbar. */
.js-enabled [data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition-base), transform var(--transition-emphasis);
}

.js-enabled [data-animate].will-animate {
  will-change: opacity, transform;
}

.js-enabled [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

.js-enabled [data-animate][data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-base), transform var(--transition-emphasis);
}

.js-enabled [data-animate][data-animate-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(1) {
  transition-delay: 0.05s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(2) {
  transition-delay: 0.1s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(3) {
  transition-delay: 0.15s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(4) {
  transition-delay: 0.2s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(5) {
  transition-delay: 0.25s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(6) {
  transition-delay: 0.3s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(7) {
  transition-delay: 0.35s;
}

.js-enabled [data-animate][data-animate-stagger] > *:nth-child(8) {
  transition-delay: 0.4s;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Seiten-Sektionen & Container */
.section,
.hero,
body.services-page .page-section {
  /*
    Die Container erhalten per Default eine neue Overlay-Konfiguration.
    Durch das Setzen der Variablen an den Elternelementen können wir Effekte
    je Kontext feinjustieren, ohne die Basisklasse zu duplizieren.
  */
  --container-overlay-radius-base: var(--card-radius);
}

/*
  Basiseinstellungen für alle dekorierten Container-Pseudo-Elemente.
  Einheitliche Animationen, Abstände und z-Indices sorgen für ein ruhiges,
  modernes Erscheinungsbild.
*/
:is(.section > .container, .hero > .container, body.services-page .page-section > .container)::before,
:is(.section > .container, .hero > .container, body.services-page .page-section > .container)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

:is(.section > .container, .hero > .container, body.services-page .page-section > .container)::before {
  inset: var(--container-overlay-inset);
  border-radius:
    calc(var(--container-overlay-radius-base, var(--card-radius)) -
      var(--container-overlay-radius-offset));
  background: var(--container-overlay-bg);
  mix-blend-mode: var(--container-overlay-blend);
  opacity: var(--container-overlay-opacity);
  border: var(--container-overlay-border);
  box-shadow: var(--container-overlay-shadow);
  backdrop-filter: var(--container-overlay-backdrop);
  -webkit-backdrop-filter: var(--container-overlay-backdrop);
  z-index: var(--container-overlay-z-index);
  animation:
    containerOverlayDrift var(--container-overlay-animation-duration)
    ease-in-out infinite alternate;
  animation-delay: calc(var(--container-overlay-animation-offset) * -1);
}

:is(.section > .container, .hero > .container, body.services-page .page-section > .container)::after {
  inset: auto;
  top: var(--container-glow-top, auto);
  right: var(--container-glow-right);
  bottom: var(--container-glow-bottom);
  left: var(--container-glow-left, auto);
  width: var(--container-glow-width);
  height: var(--container-glow-height);
  border-radius: var(--container-glow-radius, 999px);
  background: var(--container-glow-bg);
  filter: blur(var(--container-glow-blur));
  opacity: var(--container-glow-opacity);
  z-index: var(--container-glow-z-index);
  animation:
    containerGlowPulse calc(var(--container-overlay-animation-duration) * 1.1)
    ease-in-out infinite alternate;
  animation-delay: calc(var(--container-overlay-animation-offset) * -0.6);
}

.section {
  padding-block: var(--section-padding-y);
  position: relative;
  z-index: 1;
  scroll-margin-top: calc(var(--navbar-height) + 1.5rem);
}

.section + .section {
  margin-top: calc(var(--section-gap) * -0.35);
}

.section > .container {
  position: relative;
  z-index: 1;
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding-inline: var(--content-padding-inline);
  display: grid;
  gap: var(--layout-flow-gap);
  /* Grundfläche in ruhigem Flat-Design. */
  background-color: var(--section-surface);
  border-radius: var(--card-radius);
  border: 1px solid rgba(var(--accent-color-rgb), 0.12);
  box-shadow: var(--shadow-soft);
  padding: clamp(var(--card-padding), 4vw, calc(var(--card-padding) + 0.5rem));
  overflow: hidden;
  /*
    Einheitliche Overlay-Steuerung für alle regulären Abschnitte.
    Die Werte sorgen für einen dezenten Lichtschimmer und einen Glow im
    rechten unteren Quadranten.
  */
  --container-overlay-inset: clamp(0.45rem, 1.6vw, 0.9rem);
  --container-overlay-radius-base: var(--card-radius);
  --container-overlay-radius-offset: clamp(0.35rem, 1.2vw, 0.75rem);
  --container-overlay-opacity: 0.58;
  --container-overlay-bg:
    linear-gradient(135deg,
      rgba(var(--accent-color-rgb), 0.14) 0%,
      rgba(var(--accent-color-rgb), 0.06) 45%,
      rgba(var(--accent-color-rgb), 0) 100%);
  --container-glow-width: clamp(280px, 45vw, 400px);
  --container-glow-height: clamp(200px, 52vw, 340px);
  --container-glow-bottom: -38%;
  --container-glow-right: -28%;
  --container-glow-opacity: 0.38;
}

.section.section--surface > .container {
  /* Gleichmäßige Kartenfläche ohne vertikalen Verlauf. */
  background-color: rgba(255, 255, 255, 0.96);
  --container-overlay-opacity: 0.42;
  --container-overlay-bg:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(var(--accent-color-rgb), 0.08) 55%,
      rgba(var(--accent-color-rgb), 0) 100%);
  --container-glow-opacity: 0.3;
  --container-glow-bg:
    radial-gradient(circle, rgba(var(--accent-color-rgb), 0.16), transparent 70%);
}

.section.section--accent > .container {
  /* Dezente Akzentfläche ohne Verlauf. */
  background-color: rgba(var(--accent-color-rgb), 0.08);
  border-color: rgba(var(--accent-color-rgb), 0.2);
  --container-overlay-opacity: 0.68;
  --container-overlay-bg:
    linear-gradient(140deg,
      rgba(var(--accent-color-rgb), 0.3) 0%,
      rgba(var(--accent-color-rgb), 0.16) 45%,
      rgba(var(--accent-color-rgb), 0.05) 100%);
  --container-glow-opacity: 0.5;
  --container-glow-bg:
    radial-gradient(circle, rgba(var(--accent-color-rgb), 0.28), transparent 75%);
}

.section.section--muted > .container {
  /* Zurückhaltende neutrale Fläche für abgesetzte Abschnitte. */
  background-color: rgba(237, 242, 255, 0.92);
  border-color: rgba(var(--primary-color-rgb), 0.08);
  --container-overlay-opacity: 0.48;
  --container-overlay-bg:
    linear-gradient(145deg,
      rgba(var(--accent-color-cyan-rgb), 0.18) 0%,
      rgba(var(--accent-color-cyan-rgb), 0.08) 55%,
      rgba(var(--accent-color-cyan-rgb), 0) 100%);
  --container-glow-opacity: 0.32;
  --container-glow-bg:
    radial-gradient(circle, rgba(var(--accent-color-cyan-rgb), 0.22), transparent 72%);
}

.section.section--plain > .container,
.section.page-section--plain > .container,
.section.section--flush > .container {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-block: 0;
  --container-overlay-opacity: 0;
  --container-overlay-bg: transparent;
  --container-overlay-border: 0 solid transparent;
  --container-overlay-shadow: none;
  --container-glow-opacity: 0;
  --container-glow-bg: transparent;
}

body.dark-theme .section > .container {
  /*
    Im Dunkelmodus setzen wir auf satte Blautöne mit klaren Rändern, sodass
    auch in tiefen Bereichen jeder Text ausreichend Kontrast besitzt.
  */
  background-color: var(--section-surface);
  border-color: rgba(118, 140, 189, 0.34);
  box-shadow: 0 42px 120px -54px rgba(3, 8, 20, 0.9);
  --container-overlay-opacity: 0.34;
  --container-overlay-bg:
    linear-gradient(150deg,
      rgba(var(--accent-color-rgb), 0.32) 0%,
      rgba(var(--accent-color-rgb), 0.18) 45%,
      rgba(var(--accent-color-rgb), 0) 100%);
  --container-glow-opacity: 0.26;
  --container-glow-bg:
    radial-gradient(circle,
      rgba(var(--accent-color-rgb), 0.32),
      transparent 72%);
}

body.dark-theme .section.section--surface > .container {
  /*
    Für „Surface“-Sektionen wählen wir eine leicht aufgehellte Fläche, die sich
    vom Standard-Container unterscheidet, ohne den Kontrast zum Text zu mindern.
  */
  background-color: rgba(18, 30, 48, 0.88);
  border-color: rgba(138, 160, 206, 0.32);
  --container-overlay-opacity: 0.28;
  --container-overlay-bg:
    linear-gradient(150deg,
      rgba(180, 199, 237, 0.24) 0%,
      rgba(105, 145, 226, 0.12) 55%,
      rgba(105, 145, 226, 0) 100%);
  --container-glow-opacity: 0.2;
  --container-glow-bg:
    radial-gradient(circle,
      rgba(153, 185, 255, 0.28),
      transparent 74%);
}

body.dark-theme .section.section--accent > .container {
  /*
    Akzentbereiche erscheinen als satter Blauton mit betonter Leuchtkante.
    Dadurch bleiben Buttons und Text klar wahrnehmbar.
  */
  background-color: rgba(36, 78, 160, 0.48);
  border-color: rgba(112, 157, 255, 0.42);
  --container-overlay-opacity: 0.52;
  --container-overlay-bg:
    linear-gradient(160deg,
      rgba(133, 176, 255, 0.5) 0%,
      rgba(96, 143, 232, 0.3) 45%,
      rgba(80, 122, 217, 0.14) 100%);
  --container-glow-opacity: 0.34;
  --container-glow-bg:
    radial-gradient(circle,
      rgba(154, 189, 255, 0.42),
      transparent 78%);
}

body.dark-theme .section.section--muted > .container {
  /*
    Die „Muted“-Variante wird zu einer ruhigen Graublau-Fläche gewandelt,
    damit erklärende Texte ohne Blendwirkung lesbar bleiben.
  */
  background-color: rgba(26, 41, 68, 0.82);
  border-color: rgba(120, 142, 189, 0.32);
  --container-overlay-opacity: 0.38;
  --container-overlay-bg:
    linear-gradient(155deg,
      rgba(110, 159, 229, 0.34) 0%,
      rgba(97, 142, 212, 0.18) 55%,
      rgba(89, 134, 204, 0.08) 100%);
  --container-glow-opacity: 0.24;
  --container-glow-bg:
    radial-gradient(circle,
      rgba(140, 182, 240, 0.32),
      transparent 76%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section:not(.section--plain):not(.section--flush):not(.page-section--plain) > .container {
    backdrop-filter: blur(var(--surface-blur));
    -webkit-backdrop-filter: blur(var(--surface-blur));
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: clamp(2.4rem, 10vw, 3.2rem);
  }

  .section > .container {
    padding-inline: var(--content-padding-inline-tight);
    padding-block: clamp(var(--card-padding), 6vw, calc(var(--card-padding) + 0.75rem));
  }

  .section.section--plain > .container,
  .section.page-section--plain > .container,
  .section.section--flush > .container {
    padding-block: 0;
  }
}

.page__main > .section:nth-of-type(even):not(.section--plain):not(.section--flush):not(.page-section--plain) > .container {
  background: rgba(255, 255, 255, 0.92);
}

body.dark-theme .page__main > .section:nth-of-type(even):not(.section--plain):not(.section--flush):not(.page-section--plain) > .container {
  /* Gleichmäßige Flächenfolge auch im Dunkelmodus, ohne helle Zwischentöne. */
  background: var(--section-surface);
}

.container {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding-inline: var(--content-padding-inline);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.hero.section::before,
.page-hero.section::before {
  display: none;
}

body.services-page .page-hero {
  /*
    Leistungen-Seiten greifen nun auf dieselbe, klare Held:innenfläche wie die
    übrigen Seiten zu. Dadurch verschwinden mehrlagige Glasflächen und die
    Performance verbessert sich, weil weniger Filter gerendert werden müssen.
  */
  margin: clamp(2rem, 6vw, 3.5rem) auto 0;
  padding-block: clamp(3.5rem, 7vw, 5.2rem);
  background: var(--section-surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  overflow: visible;
}

body.services-page .page-hero::before,
body.services-page .page-hero::after {
  /* Gradientenpunkte werden deaktiviert, damit die Fläche ruhiger wirkt. */
  content: none;
}

body.services-page .page-hero__inner {
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 960px) {
  body.services-page .page-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

body.services-page .page-hero__intro {
  /*
    Inhalte stehen frei ohne zusätzliche Kartenebene. So bleiben Abstände
    identisch zu anderen Seiten und der HTML-Aufbau wird entschlackt.
  */
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}

body.services-page .page-hero__intro p {
  color: rgba(var(--text-color-rgb), 0.82);
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
}

body.services-page .page-hero__meta {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-content: start;
}

body.services-page .page-hero__visual {
  display: grid;
  gap: 0.6rem;
}

body.services-page .page-hero__visual picture,
body.services-page .page-hero__visual img {
  display: block;
  width: 100%;
}

body.services-page .page-hero__visual img {
  border-radius: calc(var(--border-radius-lg) - 10px);
  box-shadow: var(--shadow-soft);
}

body.services-page .page-hero__visual-caption {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: rgba(var(--text-color-rgb), 0.65);
}

body.services-page .page-hero__media {
  /* Medienkarte steht frei und nutzt nur noch den Bild-Schatten. */
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
}

body.services-page .page-hero__media img {
  border-radius: calc(var(--border-radius-lg) - 10px);
  box-shadow: var(--shadow-soft);
}

body.services-page .page-section > .container::before,
body.services-page .page-section > .container::after {
  /* Leistungen-Bereiche erhalten keine zusätzlichen Overlays. */
  content: none;
}

body.services-page .page-hero__meta-list {
  display: grid;
  gap: clamp(0.85rem, 2.4vw, 1.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.services-page .page-hero__meta-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.65rem, 2vw, 1rem);
  align-items: start;
  padding: clamp(0.85rem, 2.6vw, 1.1rem);
  border-radius: var(--border-radius-md);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: none;
}

body.services-page .page-hero__meta-item svg {
  width: clamp(2rem, 3vw, 2.4rem);
  height: clamp(2rem, 3vw, 2.4rem);
  color: var(--primary-color);
}

body.services-page .page-hero__meta-copy {
  display: grid;
  gap: 0.25rem;
}

body.services-page .page-hero__meta-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--text-color-rgb), 0.65);
}

body.services-page .page-hero__meta-title {
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  font-weight: 600;
  color: rgba(var(--text-color-rgb), 0.88);
}

body.services-page .page-hero__meta-text {
  margin: 0;
  color: rgba(var(--text-color-rgb), 0.72);
  line-height: 1.6;
}

body.services-page .page-hero__stats {
  /*
    Abschlusskennzahlen werden als schlichte Karte dargestellt, die sich an den
    Standard-Komponenten orientiert und ohne Blur-Effekte auskommt.
  */
  display: grid;
  gap: clamp(0.9rem, 2.6vw, 1.35rem);
  padding: clamp(1.35rem, 3.6vw, 1.8rem);
  border-radius: var(--border-radius-md);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.section.section--muted > .container {
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(var(--primary-color-rgb), 0.12);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
}

.section.section--muted {
  background: transparent;
}

@media (max-width: 768px) {
  .section {
    padding: 2.4rem 0;
  }
  .section > .container {
    padding-block: calc(var(--card-padding) + var(--space-xs));
  }
}

.page__main .section:nth-of-type(even)::before {
  background: rgba(var(--accent-color-rgb), 0.12);
}

.page__main .section:nth-of-type(even)::after {
  background: rgba(var(--primary-color-rgb), 0.08);
}

.page__main .section:nth-of-type(even) > .container {
  background: rgba(255, 255, 255, 0.9);
}

.container {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  padding-inline: var(--content-padding-inline);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* ===============================
   HEADER / NAV – schlank & klar
   =============================== */

/* Token-Anpassungen erfolgen zentral im :root-Block am Dokumentanfang. */

/* ---- Navigation (neu) ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--navbar-z, 1080);
}

.navbar {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 1.6vw, 1.4rem) clamp(1rem, 4vw, 2.4rem);
  isolation: isolate;
  transition: transform var(--nav-transition, var(--transition-base)),
    box-shadow var(--nav-transition, var(--transition-base));
}

.navbar.glass {
  background: transparent;
}

.navbar__backdrop {
  position: absolute;
  inset: clamp(0.35rem, 1.4vw, 0.9rem);
  border-radius: clamp(1rem, 3vw, 1.8rem);
  border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  box-shadow: 0 24px 60px -34px rgba(var(--secondary-color-rgb, 17, 39, 75), 0.4);
  backdrop-filter: blur(var(--navbar-blur, 18px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--navbar-blur, 18px)) saturate(135%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.985);
  transition: opacity 400ms ease, transform 400ms ease, box-shadow 400ms ease;
  will-change: opacity, transform;
}

@media (max-width: 960px) {
  .navbar__backdrop {
    inset: clamp(0.25rem, 1.6vw, 0.7rem);
    border-radius: clamp(0.9rem, 4vw, 1.4rem);
  }
}

@media (max-width: 640px) {
  .navbar__backdrop {
    inset: 0.35rem 0.75rem;
    border-radius: 1rem;
  }
}

.navbar.glass.scrolled .navbar__backdrop {
  box-shadow: 0 30px 86px -40px rgba(var(--secondary-color-rgb, 17, 39, 75), 0.55);
  border-color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.18);
}

.navbar.is-ready .navbar__backdrop,
.navbar.glass .navbar__backdrop {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.navbar.scrolled {
  box-shadow: 0 18px 44px -28px rgba(var(--primary-color-rgb, 15, 23, 42), 0.26);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__backdrop {
    transition: none;
    transform: none;
  }
}

body.dark-theme .navbar.glass .navbar__backdrop {
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.76));
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 32px 96px -46px rgba(8, 15, 31, 0.68);
}

.navbar__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*
    Die Containerzeile darf nicht umbrechen, damit Branding, Navigation und
    Aktionen stets nebeneinander bleiben.
  */
  flex-wrap: nowrap;
  /*
    Ermöglicht flexiblen Schrumpf des Inhalts ohne, dass Flexbox künstlich
    einen Zeilenumbruch erzwingt.
  */
  min-width: 0;
  gap: clamp(0.9rem, 3vw, 2.6rem);
  width: min(100%, 1180px);
  margin-inline: auto;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
  /* Logo stets in voller Breite anzeigen, damit es nicht zusammenschrumpft */
  flex-shrink: 0;
}

.navbar__brand img {
  display: block;
  /*
    Bewusst keine Rundungen und eine feste Mindestbreite, damit das Markenzeichen
    klar und ohne Verzerrung dargestellt wird.
  */
  width: clamp(160px, 16vw, 200px);
  height: auto;
  max-height: 46px;
  border-radius: 0;
}

.navbar__toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.12);
  background: rgba(255, 255, 255, 0.6);
  color: rgb(var(--text-rgb, 16, 24, 39));
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.navbar__toggle:hover,
.navbar__toggle:focus-visible {
  border-color: rgba(var(--accent-color-rgb, 59, 130, 246), 0.45);
  background: rgba(var(--accent-color-rgb, 59, 130, 246), 0.12);
  outline: none;
}

body.dark-theme .navbar__toggle {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(51, 65, 85, 0.65);
  color: rgba(226, 232, 240, 0.94);
}

body.dark-theme .navbar__toggle:hover,
body.dark-theme .navbar__toggle:focus-visible {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(99, 102, 241, 0.28);
}

.navbar__toggle-line {
  position: absolute;
  left: 12px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.navbar__toggle-line:nth-child(1) {
  top: 14px;
}

.navbar__toggle-line:nth-child(2) {
  top: 22px;
}

.navbar__toggle-line:nth-child(3) {
  top: 30px;
}

.navbar.is-open .navbar__toggle-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar.is-open .navbar__toggle-line:nth-child(2) {
  opacity: 0;
}

.navbar.is-open .navbar__toggle-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.navbar__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3.2rem);
  width: 100%;
  color: inherit;
}

.navbar__menu[hidden] {
  display: none !important;
}

.navbar__main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*
    Flexible Basis verhindert, dass die Aktionsbuttons die Hauptnavigation
    nach unten drücken. "min-width: 0" erlaubt Flexbox ein korrektes
    Schrumpfen ohne unerwünschte Zeilenumbrüche.
  */
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.navbar__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /*
    Verhindert Zeilenumbrüche innerhalb der Primärnavigation und sorgt dafür,
    dass alle Hauptelemente in einer Zeile bleiben.
  */
  white-space: nowrap;
  /* Mehr Luft zwischen Menüpunkten für bessere Lesbarkeit am Desktop */
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

@keyframes navbar-item-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar.is-ready .navbar__list > .navbar__item {
  animation: navbar-item-in 420ms ease forwards;
}

.navbar.is-ready .navbar__list > .navbar__item:nth-child(1) { animation-delay: 40ms; }
.navbar.is-ready .navbar__list > .navbar__item:nth-child(2) { animation-delay: 80ms; }
.navbar.is-ready .navbar__list > .navbar__item:nth-child(3) { animation-delay: 120ms; }
.navbar.is-ready .navbar__list > .navbar__item:nth-child(4) { animation-delay: 160ms; }
.navbar.is-ready .navbar__list > .navbar__item:nth-child(5) { animation-delay: 200ms; }
.navbar.is-ready .navbar__list > .navbar__item:nth-child(6) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .navbar.is-ready .navbar__list > .navbar__item {
    animation: none;
  }
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
  /*
    Keine automatischen Zeilenumbrüche innerhalb einzelner Links: wichtig,
    damit Desktop-Layouts stabil bleiben.
  */
  white-space: nowrap;
  transition: color var(--transition-base);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-color-rgb, 47, 111, 237), 0.9), rgba(var(--accent-color-cyan-rgb, 122, 182, 255), 0.9));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-emphasis, 0.4s cubic-bezier(0.34, 1.56, 0.64, 1));
}

.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--accent-color, #2f6fed);
  outline: none;
}

.navbar__link:hover::after,
.navbar__link:focus-visible::after,
.navbar__link[aria-current="page"]::after,
.navbar__item.has-active-link > .navbar__link::after,
.navbar__link[data-active-child="true"]::after {
  transform: scaleX(1);
}

.navbar__link[aria-current="page"],
.navbar__item.has-active-link > .navbar__link,
.navbar__link[data-active-child="true"] {
  color: var(--accent-color, #2f6fed);
}

.navbar__link--button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

.navbar__caret {
  position: relative;
  display: inline-flex;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.16);
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base), background var(--transition-base);
}

.navbar__caret::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.navbar__item.is-submenu-open > .navbar__link .navbar__caret,
.navbar__link[data-active-child="true"] .navbar__caret {
  transform: rotate(180deg);
  background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.32);
}

.navbar__submenu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 0;
  min-width: clamp(16rem, 18vw, 20rem);
  padding: 1.1rem;
  border-radius: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 64px -36px rgba(var(--secondary-color-rgb, 17, 39, 75), 0.35);
  display: grid;
  gap: 0.65rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.navbar__item.is-submenu-open > .navbar__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .navbar__item:hover > .navbar__submenu,
  .navbar__item:focus-within > .navbar__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .navbar__item:hover > .navbar__link .navbar__caret,
  .navbar__item:focus-within > .navbar__link .navbar__caret {
    transform: rotate(180deg);
    background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.32);
  }
}

.navbar__submenu-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--text-rgb, 16, 24, 39), 0.68);
}

.navbar__submenu-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__submenu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.35rem;
  border-radius: 0.75rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base), background var(--transition-base);
}

.navbar__submenu-link::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.18);
  transition: transform var(--transition-base), background var(--transition-base);
  transform: scale(0.6);
}

.navbar__submenu-link:hover,
.navbar__submenu-link:focus-visible {
  color: var(--accent-color, #2f6fed);
  background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.08);
  outline: none;
}

.navbar__submenu-link:hover::before,
.navbar__submenu-link:focus-visible::before,
.navbar__submenu-link[aria-current="page"]::before {
  transform: scale(1);
  background: rgba(var(--accent-color-rgb, 47, 111, 237), 0.4);
}

.navbar__submenu-link[aria-current="page"] {
  color: var(--accent-color, #2f6fed);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1rem);
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.navbar__actions .button {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.navbar__actions .button:hover,
.navbar__actions .button:focus-visible {
  transform: translateY(var(--hover-lift-xs, -2px));
}

body.dark-theme .navbar__link {
  color: rgba(226, 232, 240, 0.92);
}

body.dark-theme .navbar__link::after {
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.9), rgba(59, 130, 246, 0.9));
}

body.dark-theme .navbar__submenu {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 32px 88px -44px rgba(2, 6, 23, 0.7);
}

body.dark-theme .navbar__submenu-title {
  color: rgba(226, 232, 240, 0.74);
}

body.dark-theme .navbar__submenu-link {
  color: rgba(226, 232, 240, 0.86);
}

body.dark-theme .navbar__submenu-link:hover,
body.dark-theme .navbar__submenu-link:focus-visible {
  background: rgba(129, 140, 248, 0.18);
  color: rgba(226, 232, 240, 0.94);
}

body.dark-theme .navbar__submenu-link::before {
  background: rgba(129, 140, 248, 0.26);
}

@media (max-width: 1024px) {
  .navbar {
    padding: clamp(0.55rem, 2.4vw, 1rem) clamp(0.9rem, 4vw, 1.6rem);
  }

  .navbar__toggle {
    display: inline-flex;
  }

  .navbar__menu {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(1.2rem, 3vw, 1.8rem);
    padding: clamp(1.8rem, 6vw, 3rem);
    background: rgba(var(--surface-rgb, 255, 255, 255), 0.96);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: var(--navbar-overlay-z, 1040);
  }

  body.dark-theme .navbar__menu {
    background: rgba(15, 23, 42, 0.96);
  }

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

  .navbar__main {
    width: 100%;
  }

  .navbar__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .navbar__item {
    width: 100%;
  }

  .navbar__link {
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    /* Auf mobilen Geräten sind Zeilenumbrüche in Ordnung, um Überlauf zu
       vermeiden. */
    white-space: normal;
  }

  .navbar__link::after {
    bottom: 0;
    height: 3px;
    transform-origin: center;
  }

  .navbar__submenu {
    position: static;
    min-width: unset;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    pointer-events: none;
    transition: max-height 260ms ease, opacity 260ms ease, visibility 260ms ease;
  }

  .navbar__item.is-submenu-open > .navbar__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 520px;
    margin-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .navbar__submenu-title {
    font-size: 0.78rem;
    letter-spacing: 0.07em;
  }

  .navbar__submenu-list {
    gap: 0.2rem;
  }

  .navbar__submenu-link {
    padding: 0.55rem 0.1rem;
    border-radius: 0.65rem;
  }

  .navbar__submenu-link::before {
    display: none;
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-inline-start: 0;
  }

  .navbar__actions .button {
    width: 100%;
  }

  .navbar__actions .button.button--icon {
    width: auto;
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .navbar__menu {
    padding: clamp(1.4rem, 8vw, 2.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar__menu,
  .navbar__link,
  .navbar__submenu,
  .navbar__actions .button {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
.site-header .nav-command {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: rgba(var(--primary-color-rgb), 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.site-header .nav-command.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-header .nav-command__backdrop {
  position: absolute;
  inset: 0;
}

.site-header .nav-command__dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(var(--border-radius-lg) - 6px);
  box-shadow: 0 38px 88px -42px rgba(var(--secondary-color-rgb), 0.55);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.35rem);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: transform var(--transition-emphasis), opacity var(--transition-base);
}

.site-header .nav-command.is-open .nav-command__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-header .nav-command__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header .nav-command__header h2 {
  font-size: 1.1rem;
  margin: 0;
}

.site-header .nav-command__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-color-rgb), 0.26);
  background: rgba(248, 250, 255, 0.86);
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.site-header .nav-command__close:hover,
.site-header .nav-command__close:focus-visible {
  transform: translateY(var(--hover-lift-xs));
  border-color: rgba(var(--accent-color-rgb), 0.46);
}

.site-header .nav-command__form {
  display: grid;
}

.site-header .nav-command__form input {
  width: 100%;
  border-radius: calc(var(--border-radius-pill) - 18px);
  border: 1px solid rgba(var(--accent-color-rgb), 0.24);
  padding: 0.75rem 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  background: rgba(249, 250, 255, 0.9);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header .nav-command__form input:focus {
  outline: none;
  border-color: rgba(var(--accent-color-rgb), 0.45);
  box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15);
}

.site-header .nav-command__results {
  display: grid;
  gap: 0.45rem;
  max-height: min(55vh, 420px);
  overflow-y: auto;
  padding-right: 0.2rem;
}

.site-header .nav-command__result {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: calc(var(--border-radius-md) - 4px);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.site-header .nav-command__result:hover,
.site-header .nav-command__result:focus-visible,
.site-header .nav-command__result[aria-selected="true"],
.site-header .nav-command__result.is-active {
  background: rgba(var(--accent-color-rgb), 0.12);
  border-color: rgba(var(--accent-color-rgb), 0.28);
  transform: translateX(4px);
}

.site-header .nav-command__result-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.site-header .nav-command__result-description {
  font-size: 0.82rem;
  color: rgba(var(--text-color-rgb), 0.68);
}

body.dark-theme .site-header .nav-command__result-description {
  color: rgba(203, 213, 225, 0.75);
}

.site-header .nav-command__empty {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(var(--text-color-rgb), 0.68);
  display: none;
}

.site-header .nav-command__empty.is-visible {
  display: block;
}

.site-header .nav-command__shortcuts {
  font-size: 0.78rem;
  color: rgba(var(--text-color-rgb), 0.6);
}

.site-header .nav-command__shortcuts kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: rgba(var(--accent-color-rgb), 0.16);
  color: rgba(var(--accent-color-rgb), 0.85);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  /*
    Reduzierter Abstand nach oben sorgt dafür, dass die Hero-Sektion optisch
    näher an die Navigation rückt, ohne die großzügige Wirkung nach unten zu
    verlieren.
  */
  padding-top: clamp(1.65rem, 5vw, 3.25rem);
  padding-bottom: clamp(3.25rem, 8vw, 6.25rem);
  background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.12), rgba(var(--primary-color-rgb), 0.05));
  overflow: hidden;
}

.hero > .container {
  width: min(100% - clamp(1.2rem, 3vw, 3rem), calc(var(--content-max-width) + 220px));
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.8rem) clamp(2.25rem, 5.4vw, 4.25rem);
  /*
    Der Startabstand wird separat reduziert, damit der Content schneller in
    den sichtbaren Bereich rückt, während der untere Bereich weiterhin Raum
    für Inhalte bietet.
  */
  padding-block-start: clamp(1.75rem, 4.8vw, 3.4rem);
  border-radius: calc(var(--border-radius-lg) * 1.05);
  background: var(--section-surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  display: grid;
  box-sizing: border-box;
  /*
    Hero-Spezifische Overlay-Einstellungen: Die gesamte Fläche wird überlagert,
    deshalb setzen wir Inset und Radius auf 0 und nutzen eine helle Mischung
    ohne Blend-Modus. Der Glow erhält etwas mehr Deckkraft.
  */
  --container-overlay-inset: 0;
  --container-overlay-radius-base: calc(var(--border-radius-lg) * 1.05);
  --container-overlay-radius-offset: 0;
  --container-overlay-opacity: 0.9;
  --container-overlay-blend: normal;
  --container-overlay-bg:
    radial-gradient(circle at 18% 16%, rgba(var(--primary-color-rgb), 0.14), transparent 58%),
    radial-gradient(circle at 82% 78%, rgba(var(--accent-color-rgb), 0.18), transparent 55%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.35));
  --container-overlay-z-index: 0;
  --container-overlay-animation-offset: 3s;
  --container-glow-width: clamp(280px, 38vw, 460px);
  --container-glow-height: clamp(280px, 38vw, 460px);
  --container-glow-bottom: -32%;
  --container-glow-right: -20%;
  --container-glow-opacity: 0.45;
  --container-glow-blur: 85px;
  --container-glow-radius: 50%;
  --container-glow-bg: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.22), transparent 70%);
  --container-glow-z-index: 0;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  opacity: 0.32;
}

.hero::before {
  width: clamp(220px, 36vw, 380px);
  height: clamp(220px, 36vw, 380px);
  top: -18%;
  left: -12%;
  background: rgba(var(--secondary-color-rgb), 0.18);
}

.hero::after {
  width: clamp(200px, 32vw, 320px);
  height: clamp(200px, 32vw, 320px);
  right: -6%;
  bottom: -22%;
  background: rgba(var(--accent-color-rgb), 0.14);
}

.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.hero__content {
  display: grid;
  gap: clamp(1.1rem, 2.8vw, 1.75rem);
  max-width: 640px;
}

  .hero__lead {
    font-size: clamp(1.05rem, 2.6vw, 1.2rem);
    color: rgba(var(--text-color-rgb), 0.82);
  }

  .hero__support {
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    color: rgba(var(--text-color-rgb), 0.72);
    max-width: 65ch;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    /*
      Verhindert das leichte Anheben der Buttons beim Hover, sodass die CTA-Reihe
      immer bündig bleibt und kein Versatz entsteht.
    */
    --hover-lift-xs: 0;
  }

  .hero__actions .button {
    border-radius: var(--border-radius-pill);
    padding-inline: clamp(1.4rem, 3.8vw, 1.9rem);
  }

  .hero__actions .button.ghost {
    background: transparent;
    border: 1px solid rgba(var(--primary-color-rgb), 0.22);
    color: var(--primary-color);
    box-shadow: none;
  }

  .hero__actions .button.ghost:hover {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-color: rgba(var(--primary-color-rgb), 0.35);
  }

  .hero__metrics {
    display: grid;
    gap: clamp(1rem, 2.6vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0;
  }

  .hero__metric {
    /* Glas-Effekt mit blauem Verlauf für bessere Wahrnehmung der Kennzahlen */
    position: relative;
    display: grid;
    gap: 0.35rem;
    padding: 1.05rem 1.3rem;
    border-radius: calc(var(--border-radius-md) + 4px);
    background: linear-gradient(
      145deg,
      rgba(58, 117, 255, 0.18),
      rgba(255, 255, 255, 0.92)
    );
    border: 1px solid rgba(58, 117, 255, 0.28);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__metric::after {
    /* Dezente Lichtkante sorgt für Tiefenwirkung ohne die Performance zu belasten */
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08));
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
  }

  body.dark-theme .hero__metric {
    /* Dunkler Farbverlauf für Night-Mode, damit der Kontrast gewahrt bleibt */
    background: linear-gradient(
      150deg,
      rgba(18, 30, 61, 0.88),
      rgba(25, 44, 92, 0.78)
    );
    border-color: rgba(98, 143, 255, 0.4);
  }

  .hero__metric-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--text-color-rgb), 0.68);
    margin: 0;
  }

  .hero__metric-value {
    margin: 0;
    display: grid;
    gap: 0.25rem;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    color: var(--heading-color);
    /* Verhindert, dass lange Begriffe in den Rand laufen und blendet sie stattdessen elegant um. */
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .hero__metric-number {
    font-weight: 700;
    /* Bewahrt die Lesbarkeit langer Werte, indem ein natürlicher Zeilenumbruch erlaubt wird. */
    white-space: normal;
  }

  .hero__metric-description {
    font-size: 0.85rem;
    color: rgba(var(--text-color-rgb), 0.65);
    font-weight: 500;
  }

  .hero__metric-description a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--text-color-rgb), 0.2);
    transition: border-color var(--transition-base);
  }

  .hero__metric-description a:hover,
  .hero__metric-description a:focus {
    border-bottom-color: rgba(var(--text-color-rgb), 0.5);
  }

  .hero__list {
    margin: clamp(1.1rem, 3vw, 1.8rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(0.8rem, 2.4vw, 1.2rem);
  }

  .hero__list-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 0.95rem 1.15rem;
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  }

  .hero__list-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: rgba(var(--accent-color-rgb), 0.9);
  }

  .hero__list-icon svg {
    width: 22px;
    height: 22px;
  }

  .hero__list-item strong {
    font-size: 1rem;
    color: var(--heading-color);
    display: block;
  }

  .hero__list-item span {
    font-size: 0.9rem;
    color: rgba(var(--text-color-rgb), 0.68);
  }

  @media (max-width: 960px) {
    .hero__list {
      justify-items: stretch;
    }

    .hero__list-item {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .hero__list-icon {
      margin: 0 auto;
    }
  }

  .hero__trust {
    display: grid;
    gap: 0.5rem;
    color: rgba(var(--text-color-rgb), 0.68);
    font-size: 0.9rem;
  }

  .hero__trust ul {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3.2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hero__trust img {
    max-height: 42px;
    filter: saturate(0) brightness(0.2);
    opacity: 0.75;
  }

  .hero__media {
    position: relative;
    display: grid;
    gap: 1.5rem;
    justify-items: center;
  }

  .hero__media-card {
    position: relative;
    width: min(100%, 520px);
    border-radius: calc(var(--border-radius-lg) - 4px);
    overflow: hidden;
    box-shadow: 0 48px 120px -60px rgba(var(--secondary-color-rgb), 0.55);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    border: 1px solid rgba(var(--accent-color-rgb), 0.18);
    animation: cardGlow 16s ease-in-out infinite;
    display: grid;
    grid-template-rows: auto min-content;
  }

  body.dark-theme .hero__media-card {
    /*
      Im Dunkelmodus setzen wir auf satte Blaunuancen statt heller Glasflächen,
      damit Texte und Aufzählungen selbst auf Overlay-Bereichen klar lesbar
      bleiben.
    */
    background: linear-gradient(160deg, rgba(10, 22, 42, 0.94), rgba(6, 13, 26, 0.92));
    border-color: rgba(122, 149, 205, 0.38);
    box-shadow: 0 48px 120px -54px rgba(2, 6, 14, 0.88);
  }

  .hero__media-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(var(--accent-color-rgb), 0.24), rgba(var(--primary-color-rgb), 0.12));
    opacity: 0.18;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  body.dark-theme .hero__media-card::before {
    /*
      Reduzierte Deckkraft vermeidet, dass helle Blendmodi den Hintergrund
      aufhellen und damit Kontraste verringern.
    */
    background: linear-gradient(160deg, rgba(114, 159, 244, 0.32), rgba(54, 102, 205, 0.18));
    opacity: 0.26;
    mix-blend-mode: normal;
  }

  .hero__media-figure {
    /*
      Vergrößerter Bildbereich mit festem Seitenverhältnis – das gewährleistet
      ruhigere Layoutsprünge und sorgt für konsistente Höhen auf allen Geräten.
    */
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .hero__media-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 320ms ease;
  }

  .hero__media-card:hover .hero__media-figure img {
    transform: scale(1.06);
  }

  .hero__media-annotation {
    position: relative;
    margin: -2.4rem 1.4rem 1.4rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 50px -30px rgba(var(--secondary-color-rgb), 0.5);
    border: 1px solid rgba(var(--primary-color-rgb), 0.12);
    display: grid;
    gap: 0.4rem;
  }

  body.dark-theme .hero__media-annotation {
    /*
      Dunklere Grundfläche für die Notiz-Box, damit auch sekundäre Texte
      (z. B. Ablaufhinweise) ausreichend Kontrast besitzen.
    */
    background: rgba(12, 23, 42, 0.94);
    border-color: rgba(122, 149, 205, 0.32);
    box-shadow: 0 36px 80px -48px rgba(2, 6, 12, 0.8);
  }

  .hero__media-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--text-color-rgb), 0.65);
  }

  body.dark-theme .hero__media-label {
    /*
      Labels werden leicht aufgehellt, sodass sie sich vom dunklen Grund klar
      absetzen, aber optisch im Sekundärspektrum bleiben.
    */
    color: rgba(var(--text-color-rgb), 0.74);
  }

  .hero__media-annotation p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(var(--text-color-rgb), 0.82);
  }

  body.dark-theme .hero__media-annotation p {
    color: rgba(var(--text-color-rgb), 0.88);
  }

  @media (max-width: 720px) {
    .hero__media-annotation {
      margin: -2.1rem 1.2rem 1.2rem;
      padding: 1.1rem 1.25rem;
    }
  }

  @media (max-width: 540px) {
    .hero__media-card {
      width: min(100%, 460px);
    }

    .hero__media-annotation {
      margin: -1.6rem 1rem 1rem;
      padding: 1rem 1.1rem;
    }

    /*
      Auf sehr kleinen Bildschirmen stellen wir die CTA-Buttons untereinander dar,
      damit die Interaktionsziele leichter zu treffen sind und keine Zeilenumbrüche
      innerhalb eines Buttons entstehen.
    */
    .hero__actions {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }

    .hero__actions .button {
      width: 100%;
      justify-content: center;
    }

    /*
      Zur Verbesserung der Lesbarkeit richten wir Inhalte wieder linksbündig aus.
      Die vorangegangene Zentrierung für Tablets bleibt damit erhalten, wird auf
      Smartphones aber bewusst zurückgenommen.
    */
    .hero__layout,
    .hero__content,
    .hero__metrics {
      text-align: left;
      justify-items: stretch;
    }

    /*
      Kennzahlen erscheinen untereinander, damit Zahlen- und Fließtextgrößen auf
      schmalen Screens nicht gequetscht werden.
    */
    .hero__metrics {
      grid-template-columns: 1fr;
      width: 100%;
    }

    .hero__metric {
      padding: 0.95rem 1rem;
    }
  }

  @media (max-width: 480px) {
    /*
      Auf sehr kleinen Displays deaktivieren wir die großflächigen Deko-Verläufe,
      um Rechenaufwand zu reduzieren und den Fokus auf den Inhalt zu legen.
    */
    .hero::before,
    .hero::after {
      display: none;
    }
  }

  @keyframes cardGlow {
    0% {
      filter: hue-rotate(-4deg) brightness(1);
    }
    50% {
      filter: hue-rotate(6deg) brightness(1.05);
    }
    100% {
      filter: hue-rotate(-4deg) brightness(1);
    }
  }

  @media (max-width: 960px) {
    .hero__layout {
      text-align: center;
    }

    .hero__content {
      justify-items: center;
    }

    .hero__metrics {
      justify-items: center;
    }

    .hero__trust ul {
      justify-content: center;
      flex-wrap: wrap;
    }

    .hero__trust img {
      max-height: 36px;
    }
  }

  @media (max-width: 640px) {
    .hero__metrics {
      grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
  }
.page-hero {
  position: relative;
  isolation: isolate;
  margin: clamp(1.5rem, 5vw, 3rem) auto clamp(2rem, 5vw, 3.5rem);
  padding: clamp(3rem, 7vw, 4.75rem) 0;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.16), rgba(var(--secondary-color-rgb), 0.08));
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.5;
  z-index: -1;
}

.page-hero::before {
  width: clamp(200px, 38vw, 360px);
  height: clamp(200px, 38vw, 360px);
  top: -18%;
  left: -12%;
  background: rgba(var(--secondary-color-rgb), 0.28);
}

.page-hero::after {
  width: clamp(180px, 32vw, 300px);
  height: clamp(180px, 32vw, 300px);
  right: -10%;
  bottom: -22%;
  background: rgba(var(--accent-color-rgb), 0.18);
}

.page-hero__inner {
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  padding-inline: var(--content-padding-inline);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.page-hero__intro {
  display: grid;
  gap: 1rem;
  max-width: 60ch;
}

.page-hero__intro h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.page-hero__intro p {
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  color: var(--muted-text);
}

.page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.85rem;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.page-hero__tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.page-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(var(--primary-color-rgb), 0.28);
  background: rgba(var(--surface-solid-rgb), 0.9);
  font-size: 0.85rem;
  color: var(--muted-text);
}

.page-hero__pill svg {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

.page-hero__meta {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.page-hero__meta-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius-md);
  background: rgba(var(--surface-solid-rgb), 0.88);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
}

.page-hero__meta-item svg {
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}

.page-hero--split .page-hero__inner {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center;
}

.page-hero--center .page-hero__inner {
  justify-items: center;
  text-align: center;
}

.page-hero--center .page-hero__intro {
  align-items: center;
  text-align: center;
}

.page-hero--center .page-hero__actions {
  justify-content: center;
}

.page-hero--center .page-hero__meta {
  justify-items: center;
}

.page-hero--center .page-hero__meta-list {
  width: min(100%, 540px);
}

.page-hero--center .page-hero__meta-item {
  justify-content: center;
}

.page-hero__media {
  justify-self: center;
  text-align: center;
}

.page-hero__media img {
  max-width: min(420px, 100%);
  border-radius: calc(var(--border-radius-lg) - 8px);
  box-shadow: var(--shadow-soft);
}

.page-hero__media img.page-hero__logo {
  max-width: min(280px, 70%);
  border-radius: 0;
  box-shadow: none;
}

.page-hero__description {
  color: var(--muted-text);
  font-size: 1rem;
}

.page-hero.section::before {
  display: none;
}

.product-links {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.4rem);
  padding: clamp(1.25rem, 4vw, 1.9rem);
  border-radius: var(--border-radius-lg);
  background: linear-gradient(155deg, rgba(var(--surface-solid-rgb), 0.95), rgba(var(--primary-color-rgb), 0.08));
  border: 1px solid rgba(var(--primary-color-rgb), 0.16);
  box-shadow: 0 20px 45px -30px rgba(var(--primary-color-rgb), 0.6);
  max-width: 520px;
}

.product-links--compact {
  gap: clamp(0.75rem, 2vw, 1.1rem);
  padding: clamp(1rem, 3vw, 1.35rem);
  max-width: min(420px, 100%);
  border-radius: calc(var(--border-radius-lg) - 4px);
  background: rgba(var(--surface-solid-rgb), 0.96);
  border: 1px solid rgba(var(--primary-color-rgb), 0.14);
  box-shadow: 0 16px 36px -28px rgba(var(--primary-color-rgb), 0.55);
}

.product-links__header {
  display: grid;
  gap: 0.35rem;
}

.product-links__label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--heading-color-rgb), 0.7);
}

.product-links__intro {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.product-links--compact .product-links__intro {
  font-size: 0.84rem;
  line-height: 1.45;
}

.product-links__items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1rem);
}

.product-links--compact .product-links__items {
  gap: clamp(0.65rem, 2vw, 0.9rem);
}

@media (min-width: 640px) {
  .product-links__items {
    flex-direction: row;
    align-items: stretch;
  }
}

.product-links__item {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 3vw, 1.4rem);
  border-radius: var(--border-radius-lg);
  background: rgba(var(--surface-solid-rgb), 0.96);
  border: 1px solid rgba(var(--primary-color-rgb), 0.14);
  text-decoration: none;
  color: var(--text-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.product-links--compact .product-links__item {
  gap: 0.6rem;
  padding: clamp(0.85rem, 2.4vw, 1.05rem);
  border-radius: calc(var(--border-radius-lg) - 6px);
  box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.12);
}

.product-links__item:hover,
.product-links__item:focus {
  transform: translateY(var(--hover-lift-xs));
  border-color: rgba(var(--primary-color-rgb), 0.32);
  box-shadow: 0 18px 40px -26px rgba(var(--primary-color-rgb), 0.65);
}

.product-links__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.2rem 0.65rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-links__body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.product-links--compact .product-links__body {
  gap: 0.75rem;
}

.product-links__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.18);
}

/*
  Dunkelmodus-Anpassung: Die Icon-Kacheln erhalten eine dunkle Fläche und
  bleiben dadurch klar vom Hintergrund abgegrenzt. Zusätzlich nutzen wir einen
  dezenten Schlagschatten statt des hellen Inset-Borders.
*/
body.dark-theme .product-links__icon {
  background: var(--surface-solid);
  border-radius: var(--border-radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 16px 32px rgba(2, 6, 18, 0.42);
}

.product-links--compact .product-links__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.22);
}

.product-links__icon img {
  display: block;
  max-width: 100%;
  max-height: 30px;
}

.product-links--compact .product-links__icon img {
  max-height: 34px;
}

.product-links__text {
  display: grid;
  gap: 0.2rem;
}

.product-links__description {
  font-size: 0.78rem;
  color: rgba(var(--heading-color-rgb), 0.68);
  line-height: 1.45;
}

.product-links__text > strong {
  font-size: 1.05rem;
  color: var(--heading-color);
}

.product-links__text > span {
  font-size: 0.85rem;
  color: var(--muted-text);
}

.product-links__divider {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-pill);
  border: 1px dashed rgba(var(--primary-color-rgb), 0.28);
  background: rgba(var(--surface-solid-rgb), 0.7);
  color: rgba(var(--heading-color-rgb), 0.6);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  align-self: center;
  flex: 0 0 auto;
}

.product-links--compact .product-links__divider {
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(var(--heading-color-rgb), 0.45);
  border-color: rgba(var(--primary-color-rgb), 0.18);
}

.product-links__divider-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .product-links__divider {
    padding: 0;
    width: 54px;
    height: auto;
    min-height: 64px;
    background: transparent;
    border-style: solid;
    border-width: 0 1px 0 1px;
    border-radius: var(--border-radius-sm);
    border-color: rgba(var(--primary-color-rgb), 0.18);
  }

  .product-links__divider-inner {
    transform: rotate(-90deg);
    display: inline-flex;
    padding: 0.2rem 0.35rem;
    background: rgba(var(--surface-solid-rgb), 0.9);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-soft);
  }
}

@media (min-width: 640px) {
  body.dark-theme .product-links__divider {
    background: rgba(21, 32, 56, 0.74);
    border-color: rgba(118, 140, 189, 0.42);
  }

  body.dark-theme .product-links__divider-inner {
    background: rgba(13, 23, 43, 0.94);
    box-shadow: 0 20px 48px -30px rgba(5, 12, 28, 0.78);
  }
}

body.services-page .page-section {
  padding: clamp(2.1rem, 6vw, 3.4rem) 0;
}

body.services-page {
  /*
    Flächiger Seitenhintergrund ohne Farbverlauf.
    So reduzieren wir GPU-lastige Layer und erzielen ein klareres Erscheinungsbild.
  */
  background-color: var(--background-color);
  --service-card-bg: rgba(255, 255, 255, 0.95);
  --service-card-border: rgba(var(--primary-color-rgb), 0.12);
  --service-card-shadow: var(--shadow-soft);
}

body.dark-theme.services-page {
  /*
    Setzt die Service-spezifischen Token auf dunkle Varianten, damit alle
    Karten, Listen und Callouts automatisch kontrastreiche Flächen beziehen.
  */
  --service-card-bg: var(--surface-solid);
  --service-card-border: rgba(118, 140, 189, 0.35);
  --service-card-shadow: 0 28px 72px -40px rgba(4, 12, 28, 0.75);
}

body.services-page .page__main {
  display: grid;
  gap: var(--section-gap);
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
  max-width: calc(var(--content-max-width) + (2 * var(--content-padding-inline)));
  margin: 0 auto;
  padding-inline: var(--content-padding-inline);
}

body.services-page .product-links--compact {
  margin-top: clamp(1.4rem, 3.6vw, 2.2rem);
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow-soft);
}

body.services-page .product-links--compact .product-links__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(0.9rem, 2.6vw, 1.4rem);
}

body.services-page .product-links__item {
  align-content: start;
  gap: 0.7rem;
  min-height: 100%;
}

body.services-page .product-links__body {
  align-items: flex-start;
}

body.services-page .product-links__badge {
  /* Ruhige Badge ohne Verlauf – sorgt für mehr Klarheit. */
  background: rgba(var(--accent-color-rgb), 0.14);
  color: var(--accent-color);
  box-shadow: none;
}

body.services-page .product-links__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--border-radius-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}

body.services-page .product-links__text > span {
  color: rgba(var(--heading-color-rgb), 0.68);
}

body.services-page .product-links__description {
  margin-top: 0.15rem;
}

body.services-page .product-links__divider {
  display: none;
}

body.services-page .page__main > .section {
  --section-padding-y: clamp(1.85rem, 5vw, 3.2rem);
}

body.services-page .section > .container {
  /* Klare Flächen für alle Service-Sektionen. */
  background-color: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  --container-overlay-opacity: 0;
  --container-overlay-bg: none;
  --container-glow-opacity: 0;
}

body.services-page .section.section--muted > .container {
  padding: clamp(1.45rem, 4.2vw, 2.25rem);
}

body.services-page .page-section + .page-section {
  margin-top: clamp(1.5rem, 4.5vw, 2.4rem);
}

body.services-page .product-links__items {
  gap: clamp(1rem, 3vw, 1.5rem);
}

body.services-page .product-links {
  /* Produktliste erhält eine flache Fläche ohne Glas-Effekt. */
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item) {
  /* Einheitliche Kartenoptik ohne Unschärfe-Filter. */
  position: relative;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform var(--transition-emphasis), box-shadow var(--transition-base),
    border-color var(--transition-base);
  z-index: 0;
  padding: var(--service-block-padding);
  gap: var(--service-block-gap);
}

body.services-page :is(
    .service-summary__card,
    .service-card,
    .service-deliverables__card,
    .service-proof__card,
    .service-step,
    .service-highlight-card,
    .quick-facts
  ) :is(h3, h4, p, li, span) {
  overflow-wrap: break-word;
  hyphens: auto;
}

body.services-page :is(.service-card, .service-highlight-card, .service-step, .service-deliverables__card, .service-proof__card)
  > * {
  margin-block: 0;
}

body.services-page :is(
    .service-highlight-card p,
    .service-card__lead,
    .service-card__list li,
    .service-proof__card p,
    .service-summary__stat span,
    .hero-stat span,
    .quick-facts__item span,
    .service-step p
  ) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item)::after {
  /* Gradientenlayer wird entfernt, damit die Oberfläche neutral bleibt. */
  content: none;
}

body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item):hover,
body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item):focus-within {
  transform: translateY(var(--hover-lift-xs));
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--primary-color-rgb), 0.2);
}

body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item):hover::after,
body.services-page :is(.service-summary__card, .service-card, .service-deliverables__card, .service-proof__card, .service-step,
    .service-highlight-card, .quick-facts, .product-links__item):focus-within::after {
  content: none;
}

body.services-page .service-summary__stat {
  position: relative;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.services-page .service-summary__stat::after {
  content: none;
}

body.services-page .service-summary__stats {
  position: relative;
  z-index: 0;
  gap: clamp(1rem, 3vw, 1.4rem);
}

body.services-page .service-summary__stats::before {
  content: none;
}

body.services-page .checklist li::before {
  border: none;
  border-radius: 0.35rem;
  background: rgba(var(--accent-color-rgb), 0.18);
  box-shadow: none;
}

body.services-page .checklist li::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

body.services-page .quick-facts {
  gap: clamp(1.1rem, 3vw, 1.6rem);
  padding: clamp(1.45rem, 4vw, 2.25rem);
}

body.services-page .quick-facts__list {
  gap: clamp(0.7rem, 2vw, 1rem);
}

body.services-page .quick-facts__title {
  letter-spacing: -0.01em;
}

body.services-page .quick-facts__cta {
  border-radius: var(--border-radius-pill);
  padding-inline: clamp(1.15rem, 3.5vw, 1.6rem);
  box-shadow: 0 18px 40px -32px rgba(var(--primary-color-rgb), 0.55);
}

body.services-page .section-header h2 {
  text-wrap: balance;
}

body.services-page .service-step__number {
  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
  background: rgba(var(--accent-color-rgb), 0.16);
  color: var(--secondary-color);
  box-shadow: none;
}

body.services-page .eyebrow {
  background: linear-gradient(120deg, rgba(var(--accent-color-rgb), 0.28), rgba(var(--primary-color-rgb), 0.22));
  color: var(--secondary-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

body.services-page .quick-facts:hover,
body.services-page .quick-facts:focus-within {
  transform: none;
  box-shadow: var(--service-card-shadow);
}

body.services-page .quick-facts:hover::after,
body.services-page .quick-facts:focus-within::after {
  opacity: 0.45;
}

body.services-page .services-hero .container {
  width: min(100%, 1320px);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

body.services-page .hero-text h1 {
  letter-spacing: -0.015em;
  text-wrap: balance;
}

body.services-page .hero-badge {
  background: linear-gradient(120deg, rgba(var(--accent-color-rgb), 0.24), rgba(var(--primary-color-rgb), 0.22));
  color: var(--secondary-color);
  border: 1px solid rgba(var(--primary-color-rgb), 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 22px -18px rgba(var(--primary-color-rgb), 0.55);
}

body.services-page .hero-buttons .button {
  border-radius: var(--border-radius-pill);
  padding-inline: clamp(1.4rem, 4vw, 1.8rem);
}

body.services-page .hero-grid {
  gap: clamp(1.5rem, 4vw, 2.6rem);
  align-items: center;
}

body.services-page .hero-text {
  max-width: 560px;
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
}

body.services-page .services-hero.hero {
  padding-top: clamp(1.2rem, 3.6vw, 2.6rem);
  padding-bottom: clamp(1.85rem, 5vw, 3.4rem);
}

body.services-page .hero-text p {
  max-width: 60ch;
}

body.services-page .hero-visual {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  align-self: flex-start;
  transform: translateY(clamp(-32px, -5vw, -12px));
}

body.services-page .hero-visual .hero-image {
  width: min(100%, 480px);
  transform: translateY(clamp(-18px, -3vw, -8px));
}

body.services-page .service-overview-section .section-header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  gap: clamp(0.6rem, 2vw, 0.85rem);
}

body.services-page .hero-stats--service {
  max-width: 900px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
}

body.services-page .cards--service-overview {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 1080px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.1rem, 3vw, 1.75rem);
}

body.services-page .cards--service-overview .card {
  padding: clamp(1.5rem, 3.5vw, 2.15rem);
  gap: clamp(0.75rem, 2.5vw, 1.15rem);
}

body.services-page .card__visual {
  margin: 0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

body.services-page .card__visual picture,
body.services-page .card__visual img {
  display: block;
  width: 100%;
}

body.services-page .card__visual img {
  border-radius: inherit;
  box-shadow: var(--shadow-soft);
}

body.services-page .cards--service-overview .card__header {
  align-items: flex-start;
}

body.services-page .page-content {
  width: min(100%, 820px);
}

body.services-page .service-layout {
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
}

@media (min-width: 1024px) {
  body.services-page .service-layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }
}

body.services-page .service-layout__content {
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

body.services-page .service-layout__meta {
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-self: start;
}

@media (min-width: 1024px) {
  body.services-page .service-layout__meta {
    position: sticky;
    top: 6.25rem;
  }
}

body.services-page .service-section__body {
  gap: clamp(1.25rem, 3vw, 2rem);
}

body.services-page .service-section {
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 960px) {
  body.services-page .service-section__body {
    grid-template-columns: minmax(0, 1fr);
  }

  body.services-page .service-section__body.service-section__body--with-aside {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

body.services-page .service-section__aside {
  display: grid;
  gap: clamp(0.75rem, 2.5vw, 1.1rem);
  align-content: start;
  min-width: 0;
}

body.services-page .service-section__body.service-section__body--with-aside {
  align-items: stretch;
}

body.services-page .service-section__content {
  gap: clamp(1.25rem, 3.5vw, 2rem);
}

body.services-page .service-section__visual {
  margin: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

body.services-page .service-section__content > .service-section__visual {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

body.services-page .service-section__visual picture,
body.services-page .service-section__visual img {
  display: block;
  width: 100%;
}

body.services-page .service-section__visual img {
  border-radius: inherit;
  box-shadow: var(--shadow-soft);
}

body.services-page .service-section__visual--compact {
  max-width: clamp(220px, 32vw, 280px);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

body.services-page .service-section__summary-group,
body.services-page .service-section__detail-group {
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-content: start;
}

@media (min-width: 1080px) {
  body.services-page .service-section__content {
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
  }
}

body.services-page .service-section__detail-group {
  padding: clamp(1rem, 3vw, 1.25rem);
  border-radius: var(--border-radius-lg);
  background: rgba(var(--surface-solid-rgb), 0.92);
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.services-page .service-section__detail-group .service-detail-card {
  height: 100%;
}

@media (min-width: 640px) {
  body.services-page .service-section__detail-group {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

body.services-page .service-section__highlights {
  border-style: solid;
  border-color: var(--surface-border);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
}

body.services-page .service-section__highlights-list {
  gap: 0.5rem;
}

body.services-page .service-section__advantage {
  min-width: 0;
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.page-section {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.section.page-section {
  padding: var(--section-padding-y) 0;
}

.page-content {
  width: min(100%, 880px);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.service-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .service-layout {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
  }
}

.service-layout__content {
  display: grid;
  gap: var(--space-lg);
}

.service-layout__meta {
  display: grid;
  gap: var(--space-md);
  align-self: stretch;
}

.service-layout__content .page-content {
  width: 100%;
}

body.services-page .service-layout__content .page-content {
  width: min(100%, 820px);
  margin-inline: 0;
}

.page-content__section {
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  display: grid;
  gap: var(--card-gap);
}

.page-content__section h2,
.page-content__section h3,
.page-content__section h4 {
  margin: 0;
  color: var(--heading-color);
}

.page-content__section h3,
.page-content__section h4 {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 600;
}

.page-content__section p {
  margin: 0;
  color: var(--muted-text);
  font-size: 1rem;
}

.page-content__section strong {
  color: var(--text-color);
}

body.services-page .page-section > .container {
  position: relative;
  padding-block: clamp(1.25rem, 4.5vw, 2.1rem);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  /*
    Service-Seiten nutzen eine stärker gläserne Karte. Wir übernehmen die
    bisherigen Farbverläufe vollständig in die Variablen, damit auch hier das
    neue Overlay-System greift.
  */
  --container-overlay-inset: 0;
  --container-overlay-radius-base: var(--border-radius-lg);
  --container-overlay-radius-offset: 0;
  --container-overlay-opacity: 1;
  --container-overlay-blend: normal;
  --container-overlay-bg:
    linear-gradient(155deg, rgba(var(--surface-solid-rgb), 0.94), rgba(var(--primary-color-rgb), 0.12) 55%,
      rgba(var(--secondary-color-rgb), 0.1) 100%);
  --container-overlay-border: 1px solid rgba(var(--primary-color-rgb), 0.18);
  --container-overlay-shadow: var(--service-card-shadow);
  --container-overlay-backdrop: blur(var(--surface-blur));
  --container-overlay-z-index: -1;
  --container-overlay-animation-duration: 22s;
  --container-overlay-animation-offset: 4s;
  --container-glow-width: 100%;
  --container-glow-height: 100%;
  --container-glow-top: 0;
  --container-glow-left: 0;
  --container-glow-right: 0;
  --container-glow-bottom: 0;
  --container-glow-radius: inherit;
  --container-glow-opacity: 0.45;
  --container-glow-blur: 0px;
  --container-glow-bg:
    radial-gradient(circle at 20% -10%, rgba(var(--accent-color-rgb), 0.35), transparent 60%),
    radial-gradient(circle at 80% 110%, rgba(var(--primary-color-rgb), 0.18), transparent 55%);
  --container-glow-z-index: -2;
}

body.services-page .page-section.page-section--plain {
  padding: clamp(1.9rem, 5vw, 2.8rem) 0;
}

body.services-page .page-section.page-section--plain > .container {
  padding-block: 0;
}

body.services-page .page-section.page-section--plain > .container::before,
body.services-page .page-section.page-section--plain > .container::after {
  display: none;
}

.page-content__section ul,
.page-content__section ol {
  margin: 0;
  padding-left: 1.5rem;
  display: grid;
  gap: 0.5rem;
  color: var(--muted-text);
}

.page-content__section a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.4);
  font-weight: 600;
}

.page-content__section a:hover,
.page-content__section a:focus {
  color: var(--secondary-color);
  border-bottom-color: rgba(var(--secondary-color-rgb), 0.5);
}

body.dark-theme .page-hero {
  background: linear-gradient(135deg, rgba(var(--secondary-color-rgb), 0.3), rgba(var(--primary-color-rgb), 0.18));
  box-shadow: var(--shadow-soft);
}

body.dark-theme .page-hero__meta-item {
  background: rgba(15, 23, 42, 0.84);
}

body.dark-theme .page-content__section {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(var(--text-color-rgb), 0.16);
  box-shadow: var(--shadow-soft);
}

body.dark-theme .page-content__section a {
  border-bottom-color: rgba(var(--primary-color-rgb), 0.35);
}

body.dark-theme .service-section {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88) 0%, rgba(var(--primary-color-rgb), 0.24) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.32);
}

body.dark-theme .service-detail-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(var(--primary-color-rgb), 0.22));
  border-color: rgba(var(--primary-color-rgb), 0.32);
  box-shadow: var(--shadow-soft);
}

body.dark-theme .service-section__advantage {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.35), rgba(var(--secondary-color-rgb), 0.28));
  border-color: rgba(var(--primary-color-rgb), 0.42);
}

body.dark-theme .service-section__advantage::before {
  background: radial-gradient(circle, rgba(148, 163, 184, 0.25) 0%, transparent 70%);
  opacity: 0.85;
}

body.dark-theme .service-highlight-card,
body.dark-theme .service-step,
body.dark-theme .service-benefit-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.88) 0%, rgba(var(--primary-color-rgb), 0.22) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.35);
}

body.dark-theme .service-sections__cta {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.32), rgba(var(--secondary-color-rgb), 0.22));
  border-color: rgba(var(--text-color-rgb), 0.18);
}

body.dark-theme .service-section__highlights {
  /* dunkles Pendant zur Highlight-Kachel */
  border-color: rgba(var(--accent-color-rgb), 0.45);
  background: linear-gradient(
    155deg,
    rgba(16, 27, 46, 0.9) 0%,
    rgba(var(--accent-color-rgb), 0.22) 100%
  );
  box-shadow: 0 32px 70px -42px rgba(3, 8, 18, 0.75);
  color: rgba(226, 232, 240, 0.85);
}

body.dark-theme .service-section__highlights::before {
  background: radial-gradient(
    circle at top left,
    rgba(var(--accent-color-rgb), 0.38),
    transparent 65%
  );
  opacity: 0.65;
}

body.dark-theme .service-section__highlights h3 {
  color: rgba(191, 219, 254, 0.95);
}

/*
  Globale Dark-Mode-Abdeckung für modulare Karten- und Link-Container.
  Viele Unterseiten teilen sich diese Bausteine – durch zentrale Regeln müssen
  wir nicht jede HTML-Datei separat pflegen und stellen konsistenten Kontrast
  sicher.
*/
body.dark-theme .cards--service-overview .card,
body.dark-theme .service-section__grid .service-detail-card,
body.dark-theme .product-links__item {
  background: var(--surface-solid);
  border-color: rgba(118, 140, 189, 0.35);
  box-shadow: 0 28px 72px -40px rgba(4, 12, 28, 0.75);
  color: var(--text-on-dark);
}

body.dark-theme .cards--service-overview .card:hover,
body.dark-theme .cards--service-overview .card:focus-within,
body.dark-theme .product-links__item:hover,
body.dark-theme .product-links__item:focus {
  border-color: rgba(var(--accent-color-rgb), 0.52);
  box-shadow: 0 36px 88px -44px rgba(6, 16, 34, 0.82);
}

body.dark-theme .service-section__grid .service-detail-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 52px -36px rgba(5, 12, 28, 0.68);
}

body.dark-theme .service-section__grid .service-detail-card p,
body.dark-theme .cards--service-overview .card__teaser,
body.dark-theme .cards--service-overview .card__summary,
body.dark-theme .cards--service-overview p {
  color: rgba(222, 231, 249, 0.78);
}

body.dark-theme .cards--service-overview .card__index {
  background: rgba(118, 140, 189, 0.32);
  color: #f5f8ff;
  border: 1px solid rgba(148, 167, 204, 0.45);
  box-shadow: 0 12px 26px -16px rgba(4, 10, 22, 0.65);
}

body.dark-theme .cards--service-overview .pill-list li {
  background: rgba(118, 140, 189, 0.28);
  color: rgba(236, 242, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(148, 167, 204, 0.4);
}

body.dark-theme .card__link {
  color: rgba(178, 201, 255, 0.9);
  border-color: rgba(178, 201, 255, 0.45);
}

body.dark-theme .card__link:hover,
body.dark-theme .card__link:focus {
  color: #e0e9ff;
  border-color: rgba(195, 214, 255, 0.75);
}

body.dark-theme .product-links__badge {
  background: rgba(118, 140, 189, 0.35);
  color: rgba(236, 242, 255, 0.95);
}

body.dark-theme .product-links__description,
body.dark-theme .product-links__text > span {
  color: rgba(214, 224, 241, 0.75);
}

body.dark-theme .product-links__text > strong {
  color: rgba(243, 247, 255, 0.95);
}

body.dark-theme .product-links__divider {
  border-color: rgba(118, 140, 189, 0.42);
  background: rgba(29, 41, 65, 0.78);
  color: rgba(214, 224, 241, 0.72);
}

body.dark-theme .product-links__divider-inner {
  background: rgba(17, 28, 48, 0.94);
  box-shadow: 0 18px 44px -26px rgba(5, 12, 28, 0.75);
  color: rgba(214, 224, 241, 0.75);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.4rem, 5vw, 5rem);
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.hero-image {
  flex: 1 1 300px;
  max-width: none;
}
.hero-text {
  position: relative;
  display: grid;
  gap: 1.05rem;
  align-content: start;
  max-width: clamp(420px, 60vw, 780px);
}
.hero-text h1 {
  font-size: clamp(2.4rem, 5.8vw, 3.6rem);
  line-height: 1.02;
  margin: 1rem 0 0.5rem;
  letter-spacing: -0.035em;
}
.hero-text p {
  font-size: clamp(1.15rem, 2.9vw, 1.28rem);
  max-width: 60ch;
}
.hero-buttons {
  margin-top: 1.45rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-badge {
  margin-bottom: 1.2rem;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  margin-top: clamp(1.35rem, 3.5vw, 2.1rem);
}

.hero-stats--service {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  gap: clamp(1rem, 3vw, 1.5rem);
}

.hero-stat {
  background: var(--section-alt-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--border-radius-md);
  padding: 1.2rem 1.35rem;
  box-shadow: var(--shadow-soft);
}

.hero-stat strong {
  display: block;
  font-size: 1.35rem;
  color: var(--primary-color);
}

.hero-stat span {
  color: var(--muted-text);
  font-size: 0.95rem;
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(0.65rem, 2vw, 1.4rem);
  justify-self: end;
  border-radius: calc(var(--border-radius-lg) * 1.3);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: 0 30px 80px -48px rgba(var(--primary-color-rgb), 0.35);
  overflow: hidden;
  width: min(100%, clamp(420px, 50vw, 720px));
  transform: translate3d(0, 0, 0);
}

.hero-visual img {
  position: relative;
  z-index: 3;
  display: block;
  width: min(90%, clamp(360px, 44vw, 640px));
  height: auto;
  border-radius: calc(var(--border-radius-lg) * 1.15);
  box-shadow: 0 22px 70px -50px rgba(var(--primary-color-rgb), 0.35);
  transform: translateY(-1%);
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    margin: 0 auto;
    max-width: min(100%, 620px);
    justify-items: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-items: center;
  }

  .hero-visual {
    justify-self: center;
    max-width: clamp(260px, 70vw, 520px);
  }
}

.hero-visual__frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: calc(var(--border-radius-lg) * 1.2);
  background: var(--section-alt-bg);
  border: 1px solid rgba(var(--primary-color-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
}

.hero-visual__frame::before,
.hero-visual__frame::after {
  content: none;
}

.hero-visual__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  z-index: 0;
}

.hero-visual__orb--primary {
  width: clamp(140px, 22vw, 220px);
  height: clamp(140px, 22vw, 220px);
  top: -12%;
  left: 12%;
  background: rgba(var(--primary-color-rgb), 0.35);
}

.hero-visual__orb--accent {
  width: clamp(180px, 26vw, 280px);
  height: clamp(180px, 26vw, 280px);
  right: -8%;
  bottom: -18%;
  background: rgba(var(--accent-color-rgb), 0.4);
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: calc(var(--card-gap) * 1.35);
  margin-top: calc(var(--card-gap) * 1.75);
  align-items: stretch;
}

#leistungen-details .cards {
  display: flex;
  flex-direction: column;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--card-gap) * 1.1);
  padding: var(--card-padding);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform var(--transition-emphasis), box-shadow var(--transition-emphasis),
    border-color var(--transition-base);
  overflow: hidden;
  isolation: isolate;
  min-height: 100%;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(var(--accent-color-rgb), 0.16), rgba(var(--primary-color-rgb), 0.12));
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.card:hover,
.card:focus-within {
  transform: translateY(var(--hover-lift-md)) scale(var(--hover-scale));
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--accent-color-rgb), 0.35);
}

.card:hover::before,
.card:focus-within::before {
  opacity: 0.35;
}
.card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 14px 18px rgba(var(--accent-color-rgb), 0.22));
}
.card > * {
  position: relative;
  z-index: 1;
}

.card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}

.cards--service-overview {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  gap: clamp(1.5rem, 4vw, 2rem);
}

.cards--service-overview .card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 4vw, 2.25rem);
}

.card__headline {
  display: grid;
  gap: 0.4rem;
}

.card__teaser {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted-text);
}

.card__body {
  display: grid;
  gap: clamp(0.85rem, 2.4vw, 1.25rem);
}

.card__summary {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.card__footer {
  margin-top: auto;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.card__link::after {
  content: '→';
  font-size: 1rem;
  line-height: 1;
}

.card__link:hover,
.card__link:focus {
  color: var(--primary-color-dark, var(--primary-color));
  border-color: currentColor;
}

.cards--service-overview .card__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cards--service-overview .card__header h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
}

.cards--service-overview .card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
  font-weight: 600;
}

.cards--service-overview p {
  margin: 0;
  color: var(--muted-text);
  line-height: 1.65;
}

.cards--service-overview .pill-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cards--service-overview .pill-list li {
  padding: 0.35rem 0.75rem;
  border-radius: var(--border-radius-pill);
  background: rgba(var(--secondary-color-rgb), 0.12);
  color: var(--secondary-color);
  font-size: 0.85rem;
  font-weight: 600;
}

.service-section__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 960px) {
  .service-section__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.service-section__grid .service-detail-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1.4rem;
  background: rgba(var(--surface-solid-rgb), 0.92);
  border: 1px solid rgba(var(--primary-color-rgb), 0.12);
  border-radius: var(--border-radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.service-section__grid .service-detail-card h3 {
  font-size: 1.05rem;
}

.service-section__grid .service-detail-card p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}

.service-section__highlights-list {
  /* Listenlayout mit maßgeschneiderten Bullet-Points */
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.service-section__highlights-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted-text);
}

.service-section__highlights-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.9), rgba(var(--accent-color-rgb), 0.45));
  box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15);
}

.card p {
  color: var(--muted-text);
}
/* Intro Bereich */
.intro-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.intro-text {
  flex: 1 1 300px;
}
.intro-image {
  flex: 1 1 300px;
  max-width: 600px;
}


/* AKIS */
.akis-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
  position: relative;
  isolation: isolate;
}
.akis-text {
  flex: 1 1 300px;
}
.akis-text ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
}
.akis-text li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0;
}
.akis-text li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--primary-color);
  font-weight: 600;
}
.akis-grid::after {
  content: "";
  position: absolute;
  width: clamp(260px, 38vw, 420px);
  height: clamp(260px, 38vw, 420px);
  right: clamp(0rem, 6vw, 2rem);
  top: 55%;
  transform: translateY(-50%);
  border-radius: 48% 52% 58% 46%;
  background: rgba(var(--accent-color-rgb), 0.24);
  filter: blur(32px);
  opacity: 0.3;
  z-index: 0;
}

.akis-grid img {
  flex: 1 1 320px;
  max-width: 440px;
  position: relative;
  z-index: 1;
  border-radius: calc(var(--border-radius-lg) * 0.9);
  border: 1px solid rgba(var(--primary-color-rgb), 0.14);
  box-shadow: 0 40px 90px -52px rgba(var(--secondary-color-rgb), 0.55);
}

.section.onliu {
  background: var(--section-alt-bg);
}

.section.onliu::before {
  background: rgba(var(--accent-color-rgb), 0.16);
}

.onliu-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
}

.onliu-text {
  flex: 1 1 320px;
}

.onliu-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1.75rem;
  display: grid;
  gap: 0.85rem;
}

.onliu-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0;
  line-height: 1.6;
}

.onliu-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.6rem;
  background: var(--accent-color);
  box-shadow: 0 6px 16px rgba(var(--accent-color-rgb), 0.25);
}


.onliu-text .button {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.onliu-visual {
  flex: 1 1 340px;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  isolation: isolate;
}

.onliu-visual::before {
  content: "";
  position: absolute;
  inset: clamp(0.25rem, 1vw, 0.75rem) clamp(0.75rem, 3vw, 2rem) clamp(0.75rem, 3vw, 2.75rem) clamp(-1rem, -4vw, -2.5rem);
  border-radius: calc(var(--border-radius-lg) * 1.1);
  background: rgba(var(--accent-color-rgb), 0.22);
  filter: blur(25px);
  opacity: 0.35;
  z-index: 0;
}

.onliu-visual img {
  max-width: min(460px, 100%);
  width: 100%;
  border-radius: calc(var(--border-radius-lg) * 0.95);
  border: 1px solid rgba(var(--primary-color-rgb), 0.16);
  box-shadow: 0 42px 96px -54px rgba(var(--primary-color-rgb), 0.45);
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .akis-grid {
    justify-content: center;
    text-align: center;
    gap: 1.75rem;
  }

  .akis-text {
    max-width: 620px;
  }

  .akis-grid::after,
  .onliu-visual::before {
    display: none;
  }

  .akis-grid img {
    max-width: min(420px, 100%);
  }

  .onliu-grid {
    flex-direction: column;
    text-align: center;
  }

  .onliu-text {
    max-width: 620px;
  }

  .onliu-list {
    text-align: left;
  }

  .onliu-visual {
    max-width: min(420px, 100%);
  }
}

/* Neue AKIS Features */
.akis-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.akis-feature img {
  flex: 1 1 300px;
  max-width: 400px;
}
.feature-text {
  flex: 1 1 300px;
}

.feature-text ul {
  list-style: none;
  padding-left: 1.5rem;
}

.feature-text li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}
.feature-text li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-color);
}

/* Accordion for AKIS features */
.accordion.section {
  padding: 1.5rem 0;
}

/* Ensure consistent spacing above the footer on pages using accordions */
.accordion.section:last-of-type {
  padding-bottom: 3rem;
}
.accordion details {
  margin: 0.75rem auto;
  width: min(100%, var(--content-max-width));
  overflow: hidden;
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.5rem;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary::after {
  content: "✔";
  position: absolute;
  right: 1.25rem;
  font-size: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion details[open] summary::after {
  transform: rotate(90deg);
}
.accordion-content {
  padding: 0 1.5rem;
  border-top: 1px solid var(--divider-color);
  background: var(--card-bg);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
}
.accordion details[open] .accordion-content {
  padding: 1rem 1.5rem;
  opacity: 1;
}

.feature-menu {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 1000;
}

.feature-menu .feature-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.feature-menu .feature-toggle:hover {
  background: var(--secondary-color);
  box-shadow: var(--shadow-hover);
}

.feature-menu.open .feature-toggle {
  transform: rotate(45deg);
}

.feature-menu .feature-nav {
  position: absolute;
  top: 0;
  right: 60px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: linear-gradient(140deg, rgba(var(--secondary-color-rgb), 0.95), rgba(var(--primary-color-rgb), 0.88));
  color: #fff;
  backdrop-filter: blur(6px);
  max-height: 70vh;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.feature-menu.open .feature-nav {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.feature-menu .feature-nav a,
.feature-menu .feature-nav button {
  display: block;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: none;
  background: none;
  color: inherit;
  text-align: right;
  font: inherit;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.feature-menu .feature-nav a:hover,
.feature-menu .feature-nav a.active,
.feature-menu .feature-nav button:hover {
  background: var(--secondary-color);
  color: #fff;
  transform: translateX(-4px);
}

/* Kontakt */
.contact-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.contact-form {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--card-border);
  width: 100%;
}
.contact-form form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-base);
  color: var(--text-color);
  background: var(--field-bg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.contact-form textarea,
.contact-form button {
  grid-column: 1 / -1;
}
.contact-form textarea {
  resize: vertical;
}
.map {
  width: 100%;
  min-height: clamp(260px, 45vw, 420px);
  overflow: hidden;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Neues Kontaktformular */
.contact-hero {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.contact-wrapper {
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: min(100%, 960px);
}

.contact-header {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-header {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.contact-heading {
  max-width: 48ch;
  display: grid;
  gap: 0.85rem;
}

.contact-heading .lead {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: rgba(var(--text-color-rgb), 0.8);
  line-height: 1.6;
}

.contact-meta {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: var(--border-radius-md);
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.12), rgba(var(--secondary-color-rgb), 0.1));
  border: 1px solid rgba(var(--primary-color-rgb), 0.18);
  margin: 0;
}

@media (min-width: 600px) {
  .contact-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
  }
}

.contact-meta .meta-item {
  display: grid;
  gap: 0.35rem;
}

.contact-meta .meta-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--text-color-rgb), 0.6);
  margin: 0;
}

.contact-meta dd {
  margin: 0;
}

.contact-meta strong {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--text-color);
}

.contact-main {
  padding-top: var(--space-md);
}

.contact-card {
  padding: var(--card-padding);
  display: grid;
  gap: var(--card-gap);
}

.contact-content {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .contact-content {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

form.contact-card,
.contact-card form {
  display: grid;
  gap: var(--card-gap);
}

@media (min-width: 640px) {
  form.contact-card.form-grid,
  .contact-card form.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 900px) {
  .contact-wrapper {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
  }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field-group.full-width,
form.contact-card .field-group.full-width,
.contact-card form .field-group.full-width {
  grid-column: 1 / -1;
}

.contact-card input,
.contact-card textarea,
.contact-card select {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--field-border);
  border-radius: var(--border-radius-sm);
  background: var(--field-bg);
  font-family: var(--font-family-base);
  box-sizing: border-box;
  margin: 0;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  color: var(--text-color);
}

.contact-card input::placeholder,
.contact-card textarea::placeholder,
.contact-card select::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select::placeholder {
  color: rgba(var(--text-color-rgb), 0.45);
}

.contact-card input:focus,
.contact-card textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-focus);
}

.contact-card textarea {
  resize: none;
  overflow: hidden;
}

.contact-card h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  margin: 0;
}

.contact-card .button {
  justify-self: start;
  margin-top: 0.75rem;
}

form.contact-card .button.full-width,
.contact-card form .button.full-width {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
}

form.contact-card .success,
form.contact-card .error,
.contact-card form .success,
.contact-card form .error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--primary-color-rgb), 0.08);
  color: var(--primary-color);
}

form.contact-card .error,
.contact-card form .error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.contact-info {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-content: start;
}

.contact-info p {
  margin: 0;
  color: rgba(var(--text-color-rgb), 0.78);
  line-height: 1.6;
}

.contact-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.contact-channels li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
}

.channel-icon svg {
  width: 24px;
  height: 24px;
}

.channel-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contact-info a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.contact-info a:hover,
.contact-info a:focus {
  text-decoration: underline;
}

.contact-info address {
  font-style: normal;
  color: rgba(var(--text-color-rgb), 0.78);
  line-height: 1.5;
}

.contact-highlights {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--secondary-color-rgb), 0.1);
  border: 1px solid rgba(var(--secondary-color-rgb), 0.16);
}

.contact-highlights strong {
  display: block;
  color: var(--text-color);
}

.contact-highlights span {
  color: rgba(var(--text-color-rgb), 0.7);
  font-size: 0.95rem;
}

.contact-cta {
  padding: 1.25rem;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--primary-color-rgb), 0.08);
  display: grid;
  gap: 0.85rem;
}

.contact-cta p {
  margin: 0;
}

.contact-cta .button {
  justify-self: start;
  margin-top: 0;
}

.contact-map {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .contact-map {
    grid-column: 1 / -1;
  }
}

.contact-map .map {
  min-height: clamp(280px, 45vw, 420px);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
}

.contact-map .map iframe {
  height: 100%;
  width: 100%;
}

.map-caption {
  display: grid;
  gap: 0.5rem;
  color: rgba(var(--text-color-rgb), 0.78);
}

.map-caption h3 {
  margin: 0;
  color: var(--text-color);
}

/* Footer */
/* ============================================ */
/* CTA-Zone plus klar strukturierter Linkbereich */
/* ============================================ */

.footer {
  /*
    Helle, leicht getönte Typografie für den dunklen Footer-Hintergrund, damit
    alle Texte unabhängig von ihrer Ebene den geforderten Kontrast liefern.
  */
  --footer-text: #f6f9ff;
  --footer-muted: rgba(236, 241, 255, 0.82);
  --footer-highlight: #dfe7ff;
  --footer-highlight-strong: #ffffff;
  --footer-border: rgba(144, 176, 230, 0.38);
  --footer-surface: #040d1a;
  background: linear-gradient(180deg, #030912 0%, #071427 52%, #030b18 100%);
  color: var(--footer-text);
  margin-top: clamp(3rem, 6vw, 5.2rem);
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}

.footer__hero {
  background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.98) 0%, rgba(12, 154, 241, 0.85) 55%, #2f6fed 100%);
  border-radius: clamp(1.4rem, 3vw, 1.9rem);
  margin-inline: clamp(0.75rem, 4vw, 2rem);
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
  position: relative;
  isolation: isolate;
  box-shadow: 0 35px 55px rgba(18, 52, 98, 0.28);
}

.footer__hero::after {
  /* Dezente Textur für mehr Tiefe. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 35%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2), transparent 60%);
  opacity: 0.65;
  pointer-events: none;
}

.footer__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.8rem, 5vw, 3.2rem);
  color: #ffffff;
}

.footer__hero-copy {
  max-width: 48ch;
  display: grid;
  gap: 0.75rem;
}

.footer__hero-eyebrow {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #ffffff;
}

.footer__hero-title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}

.footer__hero-text {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: #ffffff;
}

.footer__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  border: 1px solid transparent;
  color: #0a1424;
  background: #fff;
}

.footer__button:hover,
.footer__button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 28px rgba(6, 32, 76, 0.22);
}

.footer__button--primary {
  background: #fff;
  color: #0b1629;
}

.footer__button--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.footer__button--ghost:hover,
.footer__button--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

/*
  Auch im globalen Stylesheet sorgen wir für ausreichend Kontrast der
  Footer-Schaltflächen im Dunkelmodus.
*/
body.dark-theme .footer__button {
  background: rgba(var(--text-color-rgb), 0.12);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-on-dark);
  box-shadow: 0 18px 40px rgba(2, 6, 18, 0.5);
}

body.dark-theme .footer__button--primary {
  background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.85) 0%, rgba(123, 164, 255, 0.9) 100%);
  color: var(--text-on-dark);
}

body.dark-theme .footer__button--ghost {
  background: rgba(var(--text-color-rgb), 0.08);
  border-color: rgba(148, 163, 184, 0.42);
  color: rgba(var(--text-color-rgb), 0.88);
}

body.dark-theme .footer__button--ghost:hover,
body.dark-theme .footer__button--ghost:focus-visible {
  background: rgba(var(--text-color-rgb), 0.16);
}

.footer__main {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-block: clamp(2.4rem, 5vw, 3.4rem) clamp(2rem, 4vw, 3rem);
}

.footer__main-inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.footer__column {
  display: grid;
  gap: 1rem;
  color: var(--footer-text);
}

.footer__column--brand {
  gap: 1.2rem;
}

.footer__logo {
  display: inline-flex;
  width: clamp(64px, 10vw, 84px);
  padding: 0.65rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(122, 182, 255, 0.32);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.footer__logo img {
  max-width: 100%;
  height: auto;
}

.footer__logo:hover,
.footer__logo:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(122, 182, 255, 0.6);
}

.footer__brand-text {
  margin: 0;
  color: var(--footer-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.9rem;
  margin: 0;
}

.footer__stat {
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: rgba(8, 22, 41, 0.7);
  border: 1px solid rgba(122, 182, 255, 0.18);
}

.footer__stat dt {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  color: #ffffff;
}

.footer__stat dd {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--footer-muted);
}

.footer__quote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 3px solid rgba(122, 182, 255, 0.4);
  color: var(--footer-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer__quote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--footer-muted);
}

.footer__column-title {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
}

.footer__linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.footer__linklist a {
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-base);
}

.footer__linklist a:hover,
.footer__linklist a:focus-visible {
  color: var(--footer-highlight);
}

.footer__address {
  margin: 0;
  font-style: normal;
  color: var(--footer-text);
  line-height: 1.6;
}

.footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.footer__contact-list a {
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-base);
}

.footer__contact-list a span {
  font-weight: 400;
  color: var(--footer-muted);
  margin-right: 0.3rem;
}

.footer__contact-list a:hover,
.footer__contact-list a:focus-visible {
  color: var(--footer-highlight);
}

.footer__meta {
  border-top: 1px solid rgba(102, 126, 177, 0.24);
  padding-block: clamp(1.8rem, 4vw, 2.4rem);
  background: rgba(4, 8, 16, 0.65);
}

.footer__meta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.footer__copyright {
  margin: 0;
  font-size: 0.9rem;
  color: var(--footer-muted);
}

.footer__legal-list {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}

.footer__legal-list a {
  color: var(--footer-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer__legal-list a:hover,
.footer__legal-list a:focus-visible {
  color: var(--footer-highlight-strong);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(122, 182, 255, 0.32);
  color: #ffffff;
  transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.footer__social a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__social a:hover,
.footer__social a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(122, 182, 255, 0.6);
  background: rgba(122, 182, 255, 0.16);
}

.footer__scroll {
  background: transparent;
  border: 1px solid rgba(122, 182, 255, 0.35);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.footer__scroll:hover,
.footer__scroll:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(122, 182, 255, 0.55);
  color: #ffffff;
}

@media (min-width: 960px) {
  .footer__column--brand {
    grid-column: span 2;
  }
}

@media (max-width: 960px) {
  .footer__hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__hero-actions {
    width: 100%;
  }

  .footer__hero-actions .footer__button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .footer__hero {
    margin-inline: 0;
    border-radius: 0;
  }

  .footer__meta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__legal-list {
    flex-direction: column;
    gap: 0.65rem;
  }
}

@media (max-width: 520px) {
  .footer__hero-inner {
    padding: clamp(1.6rem, 8vw, 2.2rem) clamp(1.2rem, 6vw, 1.8rem);
  }

  .footer__button {
    width: 100%;
  }
}


@media (max-width: 480px) {
  :root {
    --navbar-height: 64px;
    --footer-height: 82px;
  }
  .container {
    padding-inline: var(--content-padding-inline-tight);
  }
  .menu {
    width: 100%;
  }
  .nav-wrapper {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
  }
  .menu a {
    padding: 1rem 1.25rem;
  }
  .hero-stats {
    grid-template-columns: 1fr;
  }
  .hero-stat {
    text-align: center;
  }
  .footer-flex {
    flex-direction: column;
    text-align: center;
  }
  .footer nav {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer nav a:not(:first-child)::before {
    display: none;
  }
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.dark-theme .theme-toggle {
  color: #fff;
}
.theme-toggle:hover {
  /* Gleiche Hover-Animation wie die übrigen Buttons */
}


/*
  Schnellzugriffsleiste: ersetzt das alte Kreis-Menü durch eine modernere,
  klar strukturierte Variante. Die Buttons stehen untereinander, behalten aber
  großzügige Klickflächen und reagieren flüssig auf Gerätewechsel.
*/
.action-nav {
  /* Kompaktere Grundwerte sorgen für ein schmaleres Schnellzugriffsmenü. */
  --action-nav-gap: clamp(0.28rem, 1vw, 0.48rem);
  --action-nav-radius: clamp(0.75rem, 2.4vw, 0.95rem);
  --action-nav-button-size: clamp(2.6rem, 5vw, 3.1rem);
  --action-nav-icon-size: clamp(1.15rem, 2.6vw, 1.55rem);
  --action-nav-surface: rgba(var(--background-color-rgb), 0.9);
  --action-nav-surface-strong: rgba(255, 255, 255, 0.96);
  --action-nav-border: rgba(var(--text-color-rgb), 0.14);
  --action-nav-shadow: 0 14px 28px rgba(var(--primary-color-rgb), 0.16);
  --action-nav-link-shadow: 0 12px 26px rgba(var(--primary-color-rgb), 0.22);
  --action-nav-link-shadow-hover: 0 18px 38px rgba(var(--primary-color-rgb), 0.28);
  --action-nav-icon-bg: linear-gradient(
    145deg,
    rgba(var(--primary-color-rgb), 0.22),
    rgba(255, 255, 255, 0.92)
  );
  --action-nav-icon-color: rgba(var(--primary-color-rgb), 0.92);
  --action-nav-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --action-nav-text: var(--text-color);
  --action-nav-animation-duration: 0.45s;
  --action-nav-animation-stagger: 0.05s;
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--footer-height) + clamp(1.2rem, 4vw, 2.3rem));
  right: clamp(1rem, 3vw, 2.3rem);
  z-index: var(--action-nav-layer, 2000);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--action-nav-gap);
  color: var(--action-nav-text);
}

/*
  Wird per Script gesetzt, sobald der Nutzer die Leiste verschiebt. So bleiben
  die Standardkoordinaten erhalten, solange keine individuelle Position
  existiert.
*/
.action-nav.has-custom-position {
  bottom: auto;
  right: auto;
}

/*
  Sobald die Leiste in die linke Bildschirmhälfte gezogen wird, richten wir
  Panel und Toggle automatisch linksbündig aus.
*/
.action-nav.is-left-aligned {
  align-items: flex-start;
}

/*
  Während des Verschiebens deaktivieren wir Übergänge, damit die Bewegung ohne
  Nachlauf erfolgt und die Performance stabil bleibt.
*/
.action-nav.is-dragging,
.action-nav.is-dragging .action-nav__toggle,
.action-nav.is-dragging .action-nav__items {
  transition: none !important;
}

.action-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 0.5rem);
  padding: clamp(0.5rem, 1.4vw, 0.65rem) clamp(0.75rem, 2vw, 0.9rem);
  border-radius: var(--action-nav-radius);
  border: 1px solid var(--action-nav-border);
  background: var(--action-nav-surface);
  color: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(0.65rem, 1.4vw, 0.8rem);
  box-shadow: var(--action-nav-shadow);
  backdrop-filter: blur(14px) saturate(140%);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
  cursor: grab;
  /* Touch-Aktionen deaktivieren, damit Pointer-Events das Dragging steuern. */
  touch-action: none;
}

.action-nav__toggle:hover,
.action-nav__toggle:focus-visible {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: 0 20px 42px rgba(var(--primary-color-rgb), 0.3);
  border-color: rgba(var(--primary-color-rgb), 0.28);
}

.action-nav.is-dragging .action-nav__toggle {
  cursor: grabbing;
}

.action-nav__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.22),
    0 26px 54px rgba(var(--primary-color-rgb), 0.34);
}

.action-nav__toggle-icon {
  position: relative;
  width: 1.25rem;
  height: 0.14rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.action-nav__toggle-icon::before,
.action-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.action-nav__toggle-icon::before {
  transform: translateY(-0.36rem);
}

.action-nav__toggle-icon::after {
  transform: translateY(0.36rem);
}

.action-nav.is-open .action-nav__toggle-icon {
  background: transparent;
}

.action-nav.is-open .action-nav__toggle-icon::before {
  transform: rotate(45deg);
}

.action-nav.is-open .action-nav__toggle-icon::after {
  transform: rotate(-45deg);
}


/*
  Panel der Schnellzugriffsleiste: nutzt einen weichen Glas-Effekt und
  strukturierte Inhalte für schnell erfassbare Aktionen.
*/
.action-nav__items {
  list-style: none;
  margin: 0;
  padding: clamp(0.45rem, 1.4vw, 0.75rem);
  display: grid;
  gap: clamp(0.35rem, 1vw, 0.55rem);
  width: min(88vw, clamp(220px, 32vw, 320px));
  border-radius: calc(var(--action-nav-radius) * 1.35);
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(160deg, var(--action-nav-surface) 0%, rgba(241, 245, 249, 0.78) 100%);
  border: 1px solid var(--action-nav-border);
  box-shadow: var(--action-nav-shadow);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  /* Startet leicht oberhalb und fährt nach unten ein (Top-Animation). */
  transform: translateY(-0.85rem);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base),
    visibility var(--transition-base);
}

.action-nav__items::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at top, rgba(var(--primary-color-rgb), 0.12), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.action-nav.is-open .action-nav__items {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  animation: action-nav-reveal var(--action-nav-animation-duration)
    cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.action-nav:not(.is-collapsible) .action-nav__items {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: none;
}

/*
  Einleitender Text im Panel unterstreicht den Nutzen der Schnellzugriffe und
  wird aus Gründen der Barrierefreiheit nur visuell dargestellt.
*/
.action-nav__intro {
  display: grid;
  gap: 0.2rem;
  padding-inline: clamp(0.15rem, 0.8vw, 0.3rem);
}

.action-nav__title {
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(var(--text-color-rgb), 0.88);
}

.action-nav__subtitle {
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  color: rgba(var(--text-color-rgb), 0.66);
}

/*
  Schlanke Trennlinie zwischen Kopfbereich und den einzelnen Aktionen.
*/
.action-nav__divider {
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--text-color-rgb), 0.18), transparent);
  margin-block: 0.1rem 0.25rem;
}

.action-nav__divider,
.action-nav__intro {
  grid-column: 1 / -1;
}

/*
  Die Aktionsreihe zeigt nur noch Icons. Dadurch bleibt genug Platz für
  zusätzliche Elemente und der Scrollbereich wirkt deutlich leichter.
*/
.action-nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.3rem, 1.1vw, 0.5rem);
  padding-inline: clamp(0.15rem, 0.9vw, 0.35rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.action-nav__actions::-webkit-scrollbar {
  display: none;
}

/* Kompakte Flex-Items verhindern, dass die Buttons in der Breite wachsen. */
.action-nav__item {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
}

/*
  Jede Aktion ist ein quadratischer Icon-Button. Die Fläche bleibt groß genug
  für Touch-Geräte, gleichzeitig wirkt das Menü insgesamt filigraner.
*/
.action-nav__link {
  display: inline-grid;
  place-items: center;
  width: var(--action-nav-button-size);
  height: var(--action-nav-button-size);
  padding: clamp(0.3rem, 1vw, 0.45rem);
  border-radius: clamp(0.75rem, 2.4vw, 0.95rem);
  border: 1px solid var(--action-nav-border);
  background: var(--action-nav-surface-strong);
  color: var(--action-nav-text);
  text-decoration: none;
  box-shadow: var(--action-nav-link-shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background var(--transition-base),
    color var(--transition-base);
}

.action-nav__link:hover,
.action-nav__link:focus-visible {
  transform: translateY(var(--hover-lift-xs));
  box-shadow: var(--action-nav-link-shadow-hover);
  border-color: rgba(var(--primary-color-rgb), 0.26);
  background: rgba(255, 255, 255, 0.98);
}

.action-nav__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18),
    var(--action-nav-link-shadow-hover);
}

.action-nav__icon {
  width: var(--action-nav-icon-size);
  height: var(--action-nav-icon-size);
  display: grid;
  place-items: center;
  border-radius: clamp(0.45rem, 1.8vw, 0.65rem);
  background: var(--action-nav-icon-bg);
  color: var(--action-nav-icon-color);
  box-shadow: var(--action-nav-icon-shadow);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.action-nav__icon svg {
  width: 100%;
  height: 100%;
}

.action-nav__link:hover .action-nav__icon,
.action-nav__link:focus-visible .action-nav__icon {
  transform: scale(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 20px rgba(var(--primary-color-rgb), 0.22);
}

/*
  Dezente Eintrittsanimation für die Buttons, damit der Wechsel von/zu
  mobilen Geräten lebendiger wirkt, ohne die Performance zu belasten.
*/
.action-nav.is-open .action-nav__item {
  animation: action-nav-item var(--action-nav-animation-duration)
    cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.action-nav.is-open .action-nav__item:nth-of-type(3) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 0);
}

.action-nav.is-open .action-nav__item:nth-of-type(4) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 1);
}

.action-nav.is-open .action-nav__item:nth-of-type(5) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 2);
}

.action-nav.is-open .action-nav__item:nth-of-type(6) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 3);
}

.action-nav.is-open .action-nav__item:nth-of-type(7) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 4);
}

.action-nav.is-open .action-nav__item:nth-of-type(8) {
  animation-delay: calc(var(--action-nav-animation-stagger) * 5);
}

.action-nav:not(.is-open) .action-nav__item {
  animation: none;
  opacity: 1;
}

@keyframes action-nav-reveal {
  0% {
    opacity: 0;
    transform: translateY(-1.1rem) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes action-nav-item {
  0% {
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .action-nav {
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, 4vw, 1.8rem));
    right: clamp(0.85rem, 4vw, 1.6rem);
  }

  .action-nav.is-collapsible .action-nav__items {
    box-shadow: 0 22px 44px rgba(var(--primary-color-rgb), 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-nav__toggle,
  .action-nav__items,
  .action-nav__link {
    transition-duration: 0.18s;
  }

  .action-nav.is-open .action-nav__items,
  .action-nav.is-open .action-nav__item {
    animation: none !important;
  }
}
/* Scroll-to-Top nutzt innerhalb der Schnellzugriffsleiste dieselbe Geometrie wie die übrigen Buttons. */
.scroll-top {
  display: none;
}

.scroll-top.show {
  display: grid;
}

/* Section headings */
.section h2 {
  margin-bottom: 1.25rem;
  letter-spacing: 0.4px;
}

.section h2 strong {
  color: var(--primary-color);
}

/* Partner logos */
.partners .container {
  text-align: center;
}

.partner-slider {
  text-align: center;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--border-radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.partner-slider::before,
.partner-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  z-index: 1;
}

.partner-slider::before {
  left: 0;
  background: rgba(var(--background-color-rgb), 0.75);
}

.partner-slider::after {
  right: 0;
  background: rgba(var(--background-color-rgb), 0.75);
}

.partner-slider .logos {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  will-change: transform;
}

/*
  Logos im Partner-Slider großzügiger dimensionieren, damit Marken besser zur Geltung
  kommen. Die Klammerwerte bleiben responsiv, erhöhen aber Mindest- und Maximalgröße.
*/
.partner-slider .logos > * {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(190px, 18vw, 260px);
  height: clamp(100px, 12vw, 150px);
}

.partner-slider img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: grayscale(0) brightness(0.95);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-slider img:hover {
  transform: translateY(var(--hover-lift-md));
  filter: none;
}

@media (max-width: 720px) {
  /*
    Auf Mobilgeräten reduzieren wir Abstände und Logo-Größen, damit der Slider
    ruhiger wirkt und weniger Duplikate aufgebaut werden müssen.
  */
  .partner-slider {
    padding: clamp(1.4rem, 6vw, 2rem);
  }

  .partner-slider::before,
  .partner-slider::after {
    width: 48px;
  }

  .partner-slider .logos {
    gap: clamp(1.1rem, 4vw, 1.6rem);
  }

  .partner-slider .logos > * {
    width: clamp(150px, 40vw, 210px);
    height: clamp(80px, 24vw, 120px);
  }
}

@media (max-width: 480px) {
  /*
    Auf sehr kleinen Viewports blenden wir die Randüberlagerungen aus, damit die
    Logos nicht verdeckt werden und der DOM-Baum schlank bleibt.
  */
  .partner-slider::before,
  .partner-slider::after {
    display: none;
  }

  .partner-slider .logos > * {
    width: clamp(130px, 60vw, 180px);
    height: clamp(70px, 32vw, 110px);
  }
}

/* Team list */
.hidden {
  display: none !important;
}
.team-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.team-list li {
  padding: 1.5rem;
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.team-list li:hover {
  transform: translateY(var(--hover-lift-md));
  box-shadow: var(--shadow-hover);
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--font-family-base);
}
.team-member .profile {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}
.team-member .info {
  margin-top: 0.75rem;
}

.team-member .info strong,
.team-member .info span,
.team-member .info .linkedin {
  display: block;
}
.team-member .linkedin {
  margin-top: 0.5rem;
  background: none;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.team-member .linkedin img,
.team-member .linkedin i {
  width: 24px;
  height: 24px;
  color: #fff;
}
.team-member .linkedin:hover {
  transform: scale(1.1);
}

/* FAQ */
details {
  padding: var(--card-padding);
  margin: var(--space-sm) 0;
  display: grid;
  gap: var(--card-gap);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

details:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-hover);
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "+";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb), 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--primary-color);
  font-weight: 700;
}

summary::after {
  content: "\25BC";
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--primary-color);
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: rotate(180deg);
}

details[open] summary::before {
  content: "–";
}

details p {
  margin: 0;
}

details p + p {
  margin-top: var(--space-xs);
}

.akis-logo {
  max-width: 300px;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 10px rgba(0, 102, 255, 0.3));
}

.onliu-logo {
  max-width: 300px;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 0 10px rgba(255, 153, 0, 0.3));
}

.calculator-logo {
  max-width: 300px;
  margin: 0 auto 1rem;
  display: block;
}

/* Einsparungsrechner Teaser */
.calculator-intro-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  text-align: left;
}

.calculator-illustration {
  flex: 0 0 200px;
  max-width: 250px;
  width: 100%;
}

.calculator-text {
  flex: 1 1 300px;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

#einsparungsrechner .calculator-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: flex-start;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
}

#einsparungsrechner .title-text {
  font-size: inherit;
}

.logo-highlight {
  animation: logo-glow 3s ease-in-out infinite;
}

@keyframes nav-progress {
  0% {
    transform: translateX(-60%);
  }
  50% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(60%);
  }
}

@keyframes logo-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(0, 102, 255, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(0, 102, 255, 0.8));
    transform: scale(1.05);
  }
}

/* Reusable animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes section-bg-motion {
  0% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-50%, -12px, 0) scale(1.018);
  }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes moveOrb {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, 20px);
  }
}

@keyframes moveOrbReverse {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, -20px);
  }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Intro-Bereich: Abstand nach oben f\u00fcr besseres Layout */
#intro {
  padding-top: 3rem;
  text-align: center;
  position: relative;
}

#leistungen-intro {
  text-align: left;
}

/* Vollbild-Vorschau f\u00fcr Bilder */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 2000;
}
.image-modal.open {
  opacity: 1;
  visibility: visible;
}
.image-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}
.image-modal .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  background: none;
  border: 0;
  line-height: 1;
  padding: 0.25rem;
}

/*
  Bottom CTA
  -----------
  Die Sticky-CTA wird auf allen Seiten identisch dargestellt und greift jetzt konsequent
  die Primärfarben des Corporate Designs auf. Dank der moderaten Schatten und der weichen
  Farbverläufe fügt sich der Baustein optisch besser in die restlichen Glasflächen ein und
  belastet das Rendering durch weniger, aber gezielt eingesetzte Layer.
*/
.end-cta {
  position: fixed;
  bottom: calc(var(--footer-height) + 2.25rem);
  right: clamp(1rem, 3vw, 2.75rem);
  margin: 0;
  transform: translate3d(0, 48px, 0) scale(0.96);
  color: var(--button-text);
  padding: 1.45rem 1.6rem 1.6rem;
  border-radius: calc(var(--border-radius-lg) - 2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(var(--primary-color-rgb), 0.96), rgba(var(--secondary-color-rgb), 0.94));
  box-shadow:
    0 28px 64px -38px rgba(var(--secondary-color-rgb), 0.46),
    0 16px 32px -22px rgba(12, 24, 42, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 340px;
  text-align: left;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
  overflow: hidden;
  isolation: isolate;
}
.end-cta::before,
.end-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.end-cta::before {
  inset: -45% 15% 42% -10%;
  background: radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.18), transparent 68%);
  opacity: 0.55;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.end-cta::after {
  width: 180px;
  height: 180px;
  top: -68px;
  right: -68px;
  background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), 0.3), transparent 70%);
  opacity: 0.58;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.end-cta p {
  margin: 0;
  color: rgba(245, 249, 255, 0.88);
  font-size: 0.95rem;
}
.end-cta strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.2rem;
}
.end-cta__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(224, 235, 255, 0.76);
}
.end-cta__button {
  margin-top: 0.35rem;
}
.end-cta.show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  animation: endCtaFloat 15s ease-in-out infinite;
}
.end-cta.show::before {
  opacity: 0.82;
  transform: translate3d(6px, 0, 0);
}
.end-cta.show::after {
  animation: endCtaPulse 10s ease-in-out infinite;
}
.end-cta.show:hover,
.end-cta.show:focus-within {
  box-shadow:
    0 32px 70px -34px rgba(var(--secondary-color-rgb), 0.58),
    0 24px 38px -20px rgba(8, 17, 32, 0.32);
}
.end-cta.show:hover::before,
.end-cta.show:focus-within::before {
  transform: translate3d(12px, -6px, 0);
  opacity: 1;
}
.end-cta.show:hover::after,
.end-cta.show:focus-within::after {
  opacity: 0.82;
  transform: scale(1.08);
}
.end-cta.nav-offset {
  right: calc(64px + 10rem);
}
.end-cta a.button {
  /* Fallback-Hintergrund für Browser ohne color-mix-Unterstützung. */
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 88%, #0b1d33 12%), var(--accent-color));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 26px -16px rgba(var(--accent-color-rgb), 0.55);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.end-cta a.button:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -18px rgba(var(--accent-color-rgb), 0.62);
}
body.dark-theme .end-cta {
  color: #fff;
  background: linear-gradient(145deg, rgba(8, 18, 32, 0.96), rgba(var(--primary-color-rgb), 0.94));
  box-shadow:
    0 32px 54px -30px rgba(2, 6, 23, 0.85),
    0 20px 36px -24px rgba(var(--primary-color-rgb), 0.45);
}
body.dark-theme .end-cta::before {
  background: radial-gradient(circle at 12% 16%, rgba(var(--accent-color-rgb), 0.26), transparent 70%);
}
body.dark-theme .end-cta::after {
  background: radial-gradient(circle at center, rgba(var(--accent-color-rgb), 0.45), transparent 72%);
}
body.dark-theme .end-cta p {
  color: rgba(232, 239, 255, 0.85);
}
body.dark-theme .end-cta__eyebrow {
  color: rgba(205, 220, 255, 0.82);
}

@keyframes endCtaFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -6px, 0) scale(1.01);
  }
}

@keyframes endCtaPulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .end-cta.show,
  .end-cta.show::after {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .end-cta {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
  .end-cta.nav-offset {
    right: 1rem;
  }
  /*
    Hinweis: Auf Mobilgeräten blenden wir die End-CTA vollständig aus,
    um Überschneidungen mit Navigation und Footer zu vermeiden und die
    Performance durch weniger fixe Elemente zu verbessern.
  */
  .end-cta,
  .end-cta.show {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    animation: none;
  }
}


/* Cookie consent overlay */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}
.cookie-overlay.show {
  display: flex;
}
/* Dialog-Karte des Consent-Banners */
.cookie-banner {
  background: var(--surface-solid);
  color: var(--text-color);
  padding: 1.5rem 1.75rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(var(--text-color-rgb), 0.08);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  max-width: 520px;
  width: min(92%, 520px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Kopfzeile bündelt Icon und Überschrift */
.cookie-banner__header {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.cookie-banner__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  font-size: 1.65rem;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), rgba(var(--accent-color-rgb), 0.2));
  color: var(--primary-color);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), inset 0 -6px 16px rgba(15, 23, 42, 0.08);
}

.cookie-banner__headline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cookie-banner__subtitle {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
}
.cookie-banner__intro {
  margin: 0;
  font-size: 0.98rem;
  color: rgba(var(--text-color-rgb), 0.78);
}
/* Formular-Layout für Cookie-Optionen */
.cookie-banner__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cookie-options {
  margin: 0;
  padding: 0;
  border: none;
}

.cookie-options__legend {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.75rem;
}

.cookie-options__list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cookie-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(var(--text-color-rgb), 0.08);
  background: rgba(var(--background-color-rgb), 0.65);
}

.cookie-option__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cookie-option__title {
  font-weight: 600;
  color: var(--text-color);
}

.cookie-option__description {
  font-size: 0.9rem;
  color: rgba(var(--text-color-rgb), 0.68);
}

.cookie-option__toggle {
  display: grid;
  gap: 0.4rem;
  justify-items: end;
}

.cookie-option__status {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--text-color-rgb), 0.55);
}
.cookie-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cookie-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-switch__slider {
  width: 3rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(var(--text-color-rgb), 0.2);
  position: relative;
  transition: all var(--transition-base);
  box-shadow: inset 0 1px 3px rgba(9, 25, 42, 0.1);
}
.cookie-switch__slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18);
  transition: all var(--transition-base);
}
.cookie-switch input:checked + .cookie-switch__slider {
  background: rgba(var(--primary-color-rgb), 0.65);
}
.cookie-switch input:checked + .cookie-switch__slider::after {
  transform: translateX(1.5rem);
  background: #fff;
}
.cookie-switch input:focus-visible + .cookie-switch__slider {
  outline: 3px solid rgba(var(--primary-color-rgb), 0.35);
  outline-offset: 2px;
}
.cookie-switch input:disabled + .cookie-switch__slider {
  background: rgba(var(--text-color-rgb), 0.12);
  cursor: not-allowed;
}
.cookie-switch input:disabled + .cookie-switch__slider::after {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: none;
}
.cookie-banner__actions {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cookie-banner__actions .button {
  width: 100%;
}

.cookie-banner__actions .button--outline {
  border: 1px solid rgba(var(--text-color-rgb), 0.2);
  background: transparent;
  color: var(--text-color);
}

.cookie-banner__actions .button--outline:hover,
.cookie-banner__actions .button--outline:focus-visible {
  border-color: rgba(var(--primary-color-rgb), 0.45);
  color: var(--primary-color);
}
.cookie-banner__link {
  font-size: 0.9rem;
  color: var(--primary-color);
  text-decoration: none;
  align-self: flex-start;
}
.cookie-banner__link:hover,
.cookie-banner__link:focus {
  text-decoration: underline;
}
@media (max-width: 540px) {
  .cookie-banner {
    padding: 1.35rem 1.25rem;
    gap: 1rem;
  }
  .cookie-options__list {
    gap: 0.75rem;
  }
  .cookie-option {
    grid-template-columns: 1fr;
  }
  .cookie-option__toggle {
    justify-items: start;
  }
  .cookie-switch__slider {
    width: 2.75rem;
  }
  .cookie-switch input:checked + .cookie-switch__slider::after {
    transform: translateX(1.25rem);
  }
  .cookie-banner__actions {
    grid-template-columns: 1fr;
  }
}
body.dark-theme .cookie-banner {
  background: var(--surface-solid);
  color: #fff;
}
body.dark-theme .cookie-option {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.25);
}
body.dark-theme .cookie-option__description {
  color: rgba(226, 232, 240, 0.7);
}
body.dark-theme .cookie-option__status {
  color: rgba(226, 232, 240, 0.6);
}

body.dark-theme .cookie-switch__slider {
  background: rgba(226, 232, 240, 0.3);
}

body.dark-theme .cookie-banner__actions .button--outline {
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.92);
}

body.dark-theme .cookie-banner__actions .button--outline:hover,
body.dark-theme .cookie-banner__actions .button--outline:focus-visible {
  border-color: rgba(var(--primary-color-rgb), 0.65);
  color: #fff;
}

/* Buchungssektion für Beratungstermine */
.consultation-booking {
  padding: var(--space-2xl) 0;
  background: var(--section-surface);
}

.consultation-booking__inner {
  margin: 0 auto;
  max-width: var(--content-max-width-wide);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}

.consultation-booking__header {
  max-width: min(640px, var(--text-max-width));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.consultation-booking__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(var(--primary-color-rgb), 0.7);
  margin: 0;
}

.consultation-booking__header h2 {
  margin: 0;
}

.consultation-booking__header p {
  margin: 0;
  color: rgba(var(--primary-color-rgb), 0.78);
}


.consultation-booking__frame {
  position: relative;
  border-radius: var(--border-radius-xl, 28px);
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.consultation-booking__frame-content {
  display: grid;
  width: 100%;
  max-width: 900px;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
}

.consultation-booking__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: var(--border-radius-lg, 20px);
  background: rgba(var(--primary-color-rgb), 0.08);
  min-height: 180px;
}

.consultation-booking__illustration svg {
  width: min(160px, 100%);
  height: auto;
}

.consultation-booking__fallback-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.consultation-booking__fallback-content h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.consultation-booking__fallback-content p {
  margin: 0;
  color: rgba(var(--primary-color-rgb), 0.75);
}

.consultation-booking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.consultation-booking__support-hint {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(var(--primary-color-rgb), 0.65);
}

body.dark-theme .consultation-booking {
  background: rgba(15, 23, 42, 0.85);
}

body.dark-theme .consultation-booking__header p {
  color: rgba(226, 232, 240, 0.82);
}

body.dark-theme .consultation-booking__frame {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 40px 110px -48px rgba(15, 23, 42, 0.5);
}

body.dark-theme .consultation-booking__fallback-content p,
body.dark-theme .consultation-booking__support-hint {
  color: rgba(226, 232, 240, 0.8);
}

body.dark-theme .consultation-booking__illustration {
  background: rgba(148, 163, 184, 0.14);
}

@media (max-width: 768px) {
  .consultation-booking__inner {
    padding-inline: clamp(1rem, 6vw, 1.75rem);
  }

  .consultation-booking__frame {
    border-radius: var(--border-radius-lg, 20px);
  }

  .consultation-booking__frame-content {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .consultation-booking__illustration {
    justify-content: flex-start;
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-booking__frame {
    transition: none;
  }
}
/* Navigation dropdown enhanced */
.nav-dropdown {
  position: relative;
}

.nav-dropdown .submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  transform: scale(0.95);
  transform-origin: top left;
  background: var(--card-bg);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 1000;
  border: 1px solid var(--card-border);
}

.nav-dropdown:hover .submenu,
.nav-dropdown.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.nav-dropdown .submenu a {
  padding: 0.5rem 1.25rem;
  color: var(--text-color);
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown .submenu a:hover {
  background: var(--section-alt-bg);
}

body.dark-theme .nav-dropdown .submenu {
  background: var(--card-bg);
}

.nav-dropdown .nav-dropdown .submenu {
  top: calc(100% + 0.5rem);
  left: 0;
  transform: scale(0.95);
}

.nav-dropdown .nav-dropdown:hover .submenu,
.nav-dropdown .nav-dropdown.open .submenu {
  transform: scale(1);
}

@media (max-width: 768px) {
  .nav-dropdown .nav-dropdown .submenu {
    position: static;
    padding-left: 1rem;
  }
}

@media (max-width: 768px) {
  .nav-dropdown .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding-left: 1rem;
    border: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
  }
  .nav-dropdown.open > .submenu {
    max-height: 500px;
  }
}


/* Scrollsperre, wenn das Mobilmenü geöffnet ist */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

/* Pricing page */
.container--narrow {
  max-width: 760px;
}

.text-center {
  text-align: center;
}

.section-actions--center {
  justify-content: center;
}

.pricing-hero .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.pricing-overview {
  position: relative;
  overflow: hidden;
  background: var(--section-alt-bg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
}

.pricing-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.12), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(var(--accent-color-rgb), 0.1), transparent 60%);
  opacity: 0.6;
  pointer-events: none;
}

.pricing-overview .container {
  position: relative;
  z-index: 1;
}

.pricing-overview-grid {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  align-items: center;
}

.pricing-overview-image {
  display: flex;
  justify-content: center;
}

.pricing-overview-image img {
  max-width: 420px;
  filter: drop-shadow(0 30px 40px rgba(var(--primary-color-rgb), 0.2));
}

.pricing-overview-content h2 {
  margin-bottom: 1rem;
}

.pricing-overview-content p {
  margin-bottom: 1rem;
}

.pricing-overview-content p:last-child {
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .pricing-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .pricing-overview-image {
    justify-content: flex-start;
  }
}

.pricing-cards {
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pricing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  color: var(--muted-text);
}

.pricing-list li {
  position: relative;
  padding-left: 1.5rem;
}

.pricing-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.85rem;
  color: var(--primary-color);
}

.pricing-card__price {
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--primary-color-rgb), 0.08);
  border: 1px solid rgba(var(--primary-color-rgb), 0.12);
  display: grid;
  gap: 0.75rem;
}

body.dark-theme .pricing-card__price {
  background: rgba(var(--primary-color-rgb), 0.16);
  border-color: rgba(var(--primary-color-rgb), 0.28);
}

.pricing-card__price .price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--heading-color);
}

.pricing-card__price .price-row span {
  color: var(--muted-text);
  font-weight: 500;
}

.pricing-card__price strong {
  font-size: 1.05rem;
}

.pricing-card__hint {
  font-size: 0.9rem;
  color: var(--muted-text);
}

.pricing-accordion {
  display: grid;
  gap: 1rem;
}

.pricing-accordion__item {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-emphasis), transform var(--transition-emphasis);
}

.pricing-accordion__item[open] {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-hover);
}

.pricing-accordion__item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--heading-color);
}

.pricing-accordion__item summary::-webkit-details-marker {
  display: none;
}

.pricing-accordion__item summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--primary-color);
  transition: transform var(--transition-base);
}

.pricing-accordion__item[open] summary::after {
  transform: rotate(45deg);
}

.pricing-accordion__item .pricing-list {
  margin-top: 1rem;
}

.pricing-note {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius-sm);
  background: rgba(var(--accent-color-rgb), 0.12);
  color: var(--muted-text);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .pricing-card__price .price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* --------------------------------------------------------------
   Minimaler Auftritt: klare Flächen ohne dominante Farbverläufe
   -------------------------------------------------------------- */
body.page {
  /*
    Flächiger Seitenhintergrund ohne Farbverlauf.
    So reduzieren wir GPU-lastige Layer und erzielen ein klareres Erscheinungsbild.
  */
  background-color: var(--background-color);
}

body.page .hero,
body.page .section,
body.page .cards .card,
body.page .service-highlight-card,
body.page .service-timeline,
body.page .service-timeline__step,
body.page .service-sections__cta,
body.page .callout,
body.page #faq details,
body.page .calculator-intro-grid,
body.page .onliu .onliu-text,
body.page .akis .akis-text {
  background-image: none !important;
}

body.page .hero {
  background: transparent;
}

body.page .hero > .container {
  background: var(--section-surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
}

body.page .hero > .container::before,
body.page .hero > .container::after,
body.page .hero::before,
body.page .hero::after {
  display: none;
}

body.page .section > .container {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(240, 245, 255, 0.92) 100%
  );
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(var(--accent-color-rgb), 0.14);
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page .section.section--plain > .container,
body.page .section.section--flush > .container,
body.page .section.page-section--plain > .container {
  background: transparent;
  border: none;
  box-shadow: none;
}

body.page .section:nth-of-type(even)::before,
body.page .section:nth-of-type(even)::after,
body.page .section:nth-of-type(even) > .container::before,
body.page .section:nth-of-type(even) > .container::after {
  display: none;
}

body.page .cards .card,
body.page .service-highlight-card,
body.page .service-timeline,
body.page .service-timeline__step,
body.page .section.section--muted > .container,
body.page .section.section--surface > .container {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(242, 246, 255, 0.9) 100%
  );
  border: 1px solid rgba(var(--accent-color-rgb), 0.12);
  box-shadow: var(--shadow-soft);
}

body.page #faq details {
  padding: 1.25rem 1.5rem;
  border-radius: var(--border-radius-md);
}

body.page .cards .card img,
body.page .service-highlight-card img,
body.page .calculator-intro-grid img {
  filter: none;
}

body.page .section.section--muted {
  background: var(--section-alt-bg);
}

body.page .end-cta {
  background: var(--primary-color);
  color: #f8fafc;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-hover);
}

body.page .end-cta p {
  color: rgba(248, 250, 252, 0.9);
}

body.page .end-cta strong {
  color: #ffffff;
}

/*
  Kompakter Footer: überschreibt ältere Layout-Regeln und komprimiert den Aufbau.
  Das Grid sorgt dafür, dass Inhalte auf größeren Displays nebeneinander stehen.
*/
.footer {
  --footer-text: rgba(231, 239, 255, 0.95);
  --footer-muted: rgba(199, 213, 232, 0.78);
  --footer-border: rgba(102, 126, 177, 0.28);
  --footer-surface: #040d1a;
  background: radial-gradient(circle at top, rgba(33, 56, 108, 0.25), transparent 55%), var(--footer-surface);
  color: var(--footer-text);
  padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.95rem;
}

.footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible {
  color: #a2c4ff;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.footer__brand-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.footer__logo img {
  width: clamp(96px, 14vw, 140px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(5, 16, 32, 0.45));
}

.footer__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footer__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.footer__cta-button--primary {
  background: linear-gradient(135deg, #3a7bff 0%, #6fa3ff 100%);
  color: #0a1628;
  box-shadow: 0 12px 30px rgba(38, 91, 200, 0.35);
}

.footer__cta-button--ghost {
  border-color: var(--footer-border);
  color: var(--footer-text);
  background: rgba(10, 24, 46, 0.65);
}

.footer__cta-button:hover,
.footer__cta-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(38, 91, 200, 0.45);
}

.footer__cta-button--ghost:hover,
.footer__cta-button--ghost:focus-visible {
  border-color: rgba(162, 196, 255, 0.85);
}

body.dark-theme .footer__cta-button--primary {
  color: var(--text-on-dark);
}

body.dark-theme .footer__cta-button--ghost {
  background: rgba(17, 36, 66, 0.85);
  border-color: rgba(148, 174, 225, 0.45);
  color: rgba(var(--text-color-rgb), 0.88);
}

.footer__brand-text {
  margin: 1.25rem 0 1.5rem;
  color: var(--footer-muted);
  max-width: 34ch;
  line-height: 1.6;
}

.footer__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.footer__stat {
  padding: 0.75rem 1rem;
  border-radius: 0.85rem;
  background: rgba(17, 39, 70, 0.6);
  border: 1px solid rgba(74, 110, 168, 0.3);
  text-align: center;
}

.footer__stat dt {
  font-size: 1.1rem;
  font-weight: 700;
}

.footer__stat dd {
  margin: 0.25rem 0 0;
  color: var(--footer-muted);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.footer__group-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.footer__linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__address {
  font-style: normal;
  line-height: 1.6;
  color: var(--footer-text);
}

.footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.footer__contact-list span {
  color: var(--footer-muted);
  margin-right: 0.4rem;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(91, 124, 187, 0.45);
  background: rgba(9, 22, 39, 0.65);
}

.footer__social a svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer__bottom {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--footer-border);
}

.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__legal-list {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--footer-muted);
  font-size: 0.9rem;
}

.footer__scroll {
  border: 1px solid rgba(91, 124, 187, 0.4);
  background: rgba(11, 26, 46, 0.65);
  color: var(--footer-text);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__scroll:hover,
.footer__scroll:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(26, 60, 120, 0.35);
}

@media (max-width: 1024px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer__links {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .footer {
    padding-block: 2rem 1.5rem;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__brand-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__cta {
    width: 100%;
  }

  .footer__cta-button {
    flex: 1 1 auto;
  }

  .footer__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .footer__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__legal-list {
    flex-direction: column;
    gap: 0.6rem;
  }
}