/*
  Aktuellis Experience Layer
  --------------------------
  Dieses Stylesheet überlagert das Basistheme und richtet sämtliche Seiten auf ein
  konsistentes, magazinartiges Layout aus. Der neue Fokus liegt auf einem
  grau-blauen Erscheinungsbild mit klaren Weißflächen. Dank CSS-Layern
  überschreiben wir gezielt Komponenten, ohne das bestehende Fundament zu
  zerstören.
*/

@layer reset, tokens, base, layout, components, utilities;

/* -------------------------
 * Token & Design-Parameter
 * ------------------------- */
@layer tokens {
  :root {
    /* Layoutbreiten */
    --layout-max: min(1240px, 92vw);
    --layout-wide: min(1380px, 95vw);
    --layout-tight: min(960px, 90vw);

    /*
      Farb- und Akzentwerte werden zentral gesammelt, damit jede Seite lediglich
      per data-page-Attribut die gewünschte Kombination referenzieren muss.
      Dadurch sparen wir Redundanz und senken die Gefahr inkonsistenter Angaben.
    */
    --accent-default: #5569ff;
    --accent-default-rgb: 85, 105, 255;
    --accent-default-cyan: #35d2ff;
    --accent-default-cyan-rgb: 53, 210, 255;

    --accent-about: #5f7bff;
    --accent-about-rgb: 95, 123, 255;
    --accent-about-cyan: #4fd6ff;
    --accent-about-cyan-rgb: 79, 214, 255;

    --accent-contact: #4f9dff;
    --accent-contact-rgb: 79, 157, 255;
    --accent-contact-cyan: #38cbff;
    --accent-contact-cyan-rgb: 56, 203, 255;

    --accent-services: #506cff;
    --accent-services-rgb: 80, 108, 255;
    --accent-services-cyan: #3acfff;
    --accent-services-cyan-rgb: 58, 207, 255;

    --accent-services-consulting: #4f74ff;
    --accent-services-consulting-rgb: 79, 116, 255;
    --accent-services-consulting-cyan: #39cdff;
    --accent-services-consulting-cyan-rgb: 57, 205, 255;

    --accent-services-integration: #4e7cff;
    --accent-services-integration-rgb: 78, 124, 255;
    --accent-services-integration-cyan: #38ccff;
    --accent-services-integration-cyan-rgb: 56, 204, 255;

    --accent-services-support: #4d84ff;
    --accent-services-support-rgb: 77, 132, 255;
    --accent-services-support-cyan: #37caff;
    --accent-services-support-cyan-rgb: 55, 202, 255;

    --accent-calculator: #4f8bff;
    --accent-calculator-rgb: 79, 139, 255;
    --accent-calculator-cyan: #3bceff;
    --accent-calculator-cyan-rgb: 59, 206, 255;

    --accent-onliu: #5a6dff;
    --accent-onliu-rgb: 90, 109, 255;
    --accent-onliu-cyan: #45d2ff;
    --accent-onliu-cyan-rgb: 69, 210, 255;

    --accent-admin: #4d77ff;
    --accent-admin-rgb: 77, 119, 255;
    --accent-admin-cyan: #37c9ff;
    --accent-admin-cyan-rgb: 55, 201, 255;

    --accent-imprint: #5868ff;
    --accent-imprint-rgb: 88, 104, 255;
    --accent-imprint-cyan: #44d1ff;
    --accent-imprint-cyan-rgb: 68, 209, 255;

    --accent-privacy: #4f6eff;
    --accent-privacy-rgb: 79, 110, 255;
    --accent-privacy-cyan: #39ccff;
    --accent-privacy-cyan-rgb: 57, 204, 255;

    --accent-terms: #4f63ff;
    --accent-terms-rgb: 79, 99, 255;
    --accent-terms-cyan: #36caff;
    --accent-terms-cyan-rgb: 54, 202, 255;

    --accent-error: #5360ff;
    --accent-error-rgb: 83, 96, 255;
    --accent-error-cyan: #3ccfff;
    --accent-error-cyan-rgb: 60, 207, 255;

    --accent-akis: #5662ff;
    --accent-akis-rgb: 86, 98, 255;
    --accent-akis-cyan: #40d2ff;
    --accent-akis-cyan-rgb: 64, 210, 255;

    --accent-login: #4c82ff;
    --accent-login-rgb: 76, 130, 255;
    --accent-login-cyan: #36cbff;
    --accent-login-cyan-rgb: 54, 203, 255;

    --accent-pricing: #5670ff;
    --accent-pricing-rgb: 86, 112, 255;
    --accent-pricing-cyan: #3fd2ff;
    --accent-pricing-cyan-rgb: 63, 210, 255;

    --surface-solid: 255, 255, 255;
    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-strong: rgba(255, 255, 255, 0.92);

    /* Effekte */
    --shadow-elevated: 0 46px 140px -70px rgba(17, 26, 47, 0.45);
    --shadow-floating: 0 34px 90px -50px rgba(85, 105, 255, 0.32);
    --blur-surface: 26px;

    /* Ambiente-Beleuchtung für moderne Akzente */
    --cursor-x: 50%;
    --cursor-y: 38%;
    --ambient-strength: 0.6;
    --ambient-gradient-primary: rgba(73, 99, 255, 0.42);
    --ambient-gradient-secondary: rgba(50, 210, 255, 0.28);
    --ambient-gradient-tertiary: rgba(93, 80, 255, 0.32);
    --ambient-gradient-quaternary: rgba(140, 118, 255, 0.24);

    /* Animation */
    --duration-quick: 220ms;
    --duration-standard: 360ms;
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.dark-theme {
    --shadow-elevated: 0 40px 120px -65px rgba(4, 8, 18, 0.86);
    --shadow-floating: 0 32px 90px -54px rgba(85, 105, 255, 0.48);
  }

  /*
    Seitenabhängige Akzentfarben. Über das data-page-Attribut am <body>
    vergeben wir dezente Nuancen, während Layout und Typografie identisch
    bleiben. Alle Werte greifen auf die bestehenden Variablen zurück und
    beeinflussen automatisch Buttons, Linien und Glaseffekte.
  */
  body.page {
    --accent-color: var(--accent-default);
    --accent-color-rgb: var(--accent-default-rgb);
    --accent-color-cyan: var(--accent-default-cyan);
    --accent-color-cyan-rgb: var(--accent-default-cyan-rgb);
  }

  body[data-page="about"] {
    --accent-color: var(--accent-about);
    --accent-color-rgb: var(--accent-about-rgb);
    --accent-color-cyan: var(--accent-about-cyan);
    --accent-color-cyan-rgb: var(--accent-about-cyan-rgb);
  }

  body[data-page="contact"] {
    --accent-color: var(--accent-contact);
    --accent-color-rgb: var(--accent-contact-rgb);
    --accent-color-cyan: var(--accent-contact-cyan);
    --accent-color-cyan-rgb: var(--accent-contact-cyan-rgb);
  }

  body[data-page="services"] {
    --accent-color: var(--accent-services);
    --accent-color-rgb: var(--accent-services-rgb);
    --accent-color-cyan: var(--accent-services-cyan);
    --accent-color-cyan-rgb: var(--accent-services-cyan-rgb);
  }

  body[data-page="services-consulting"] {
    --accent-color: var(--accent-services-consulting);
    --accent-color-rgb: var(--accent-services-consulting-rgb);
    --accent-color-cyan: var(--accent-services-consulting-cyan);
    --accent-color-cyan-rgb: var(--accent-services-consulting-cyan-rgb);
  }

  body[data-page="services-integration"] {
    --accent-color: var(--accent-services-integration);
    --accent-color-rgb: var(--accent-services-integration-rgb);
    --accent-color-cyan: var(--accent-services-integration-cyan);
    --accent-color-cyan-rgb: var(--accent-services-integration-cyan-rgb);
  }

  body[data-page="services-support"] {
    --accent-color: var(--accent-services-support);
    --accent-color-rgb: var(--accent-services-support-rgb);
    --accent-color-cyan: var(--accent-services-support-cyan);
    --accent-color-cyan-rgb: var(--accent-services-support-cyan-rgb);
  }

  body[data-page="calculator"] {
    --accent-color: var(--accent-calculator);
    --accent-color-rgb: var(--accent-calculator-rgb);
    --accent-color-cyan: var(--accent-calculator-cyan);
    --accent-color-cyan-rgb: var(--accent-calculator-cyan-rgb);
  }

  body[data-page="onliu"] {
    --accent-color: var(--accent-onliu);
    --accent-color-rgb: var(--accent-onliu-rgb);
    --accent-color-cyan: var(--accent-onliu-cyan);
    --accent-color-cyan-rgb: var(--accent-onliu-cyan-rgb);
  }

  body[data-page="admin"] {
    --accent-color: var(--accent-admin);
    --accent-color-rgb: var(--accent-admin-rgb);
    --accent-color-cyan: var(--accent-admin-cyan);
    --accent-color-cyan-rgb: var(--accent-admin-cyan-rgb);
  }

  body[data-page="imprint"] {
    --accent-color: var(--accent-imprint);
    --accent-color-rgb: var(--accent-imprint-rgb);
    --accent-color-cyan: var(--accent-imprint-cyan);
    --accent-color-cyan-rgb: var(--accent-imprint-cyan-rgb);
  }

  body[data-page="privacy"] {
    --accent-color: var(--accent-privacy);
    --accent-color-rgb: var(--accent-privacy-rgb);
    --accent-color-cyan: var(--accent-privacy-cyan);
    --accent-color-cyan-rgb: var(--accent-privacy-cyan-rgb);
  }

  body[data-page="terms"] {
    --accent-color: var(--accent-terms);
    --accent-color-rgb: var(--accent-terms-rgb);
    --accent-color-cyan: var(--accent-terms-cyan);
    --accent-color-cyan-rgb: var(--accent-terms-cyan-rgb);
  }

  body[data-page="error"] {
    --accent-color: var(--accent-error);
    --accent-color-rgb: var(--accent-error-rgb);
    --accent-color-cyan: var(--accent-error-cyan);
    --accent-color-cyan-rgb: var(--accent-error-cyan-rgb);
  }

  body[data-page="akis"] {
    --accent-color: var(--accent-akis);
    --accent-color-rgb: var(--accent-akis-rgb);
    --accent-color-cyan: var(--accent-akis-cyan);
    --accent-color-cyan-rgb: var(--accent-akis-cyan-rgb);
  }

  body[data-page="login"] {
    --accent-color: var(--accent-login);
    --accent-color-rgb: var(--accent-login-rgb);
    --accent-color-cyan: var(--accent-login-cyan);
    --accent-color-cyan-rgb: var(--accent-login-cyan-rgb);
  }

  body[data-page="pricing"] {
    --accent-color: var(--accent-pricing);
    --accent-color-rgb: var(--accent-pricing-rgb);
    --accent-color-cyan: var(--accent-pricing-cyan);
    --accent-color-cyan-rgb: var(--accent-pricing-cyan-rgb);
  }
}

/* -------------------------
 * Baseline / Reset
 * ------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-size: 16px;
  }

  body {
    margin: 0;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
}

/* -------------------------
 * Basistypografie und Fläche
 * ------------------------- */
@layer base {
  body {
    font-family: var(--font-family-base, "Gomme Sans", system-ui, sans-serif);
    background: var(--background-gradient, var(--surface-canvas));
    color: var(--text-color, #1e293b);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  body.page {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 2rem);
  }

  /*
    Fixiertes Gradient-Licht, das vom Ambient Cursor gesteuert wird.
    Erzeugt subtile Farbakzente und reagiert ohne Performance-Einbußen
    auf Mausbewegungen. Für Touchgeräte dient die Standard-Position.
  */
  body::before {
    content: "";
    position: fixed;
    inset: -30vh -25vw auto;
    height: 140vh;
    background: radial-gradient(
        circle at var(--cursor-x) var(--cursor-y),
        var(--ambient-gradient-primary),
        transparent 52%
      ),
      radial-gradient(
        circle at calc(var(--cursor-x) + 18%) calc(var(--cursor-y) + 12%),
        var(--ambient-gradient-secondary),
        transparent 62%
      ),
      radial-gradient(
        circle at calc(var(--cursor-x) - 18%) calc(var(--cursor-y) + 24%),
        var(--ambient-gradient-quaternary),
        transparent 68%
      );
    opacity: var(--ambient-strength);
    filter: saturate(120%);
    pointer-events: none;
    z-index: -3;
    transition: opacity var(--duration-standard) var(--ease-soft);
  }

  /*
    Ein dezentes Muster sorgt für Tiefe, ohne von Inhalten abzulenken.
  */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(
        circle at 15% 20%,
        rgba(148, 163, 184, 0.08),
        transparent 45%
      ),
      radial-gradient(
        circle at 80% 10%,
        rgba(148, 163, 184, 0.05),
        transparent 55%
      ),
      radial-gradient(
        circle at 50% 90%,
        var(--ambient-gradient-tertiary),
        transparent 62%
      );
    mix-blend-mode: color-burn;
    pointer-events: none;
    z-index: -4;
  }

  main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /*
      Engere vertikale Abstände für eine kompaktere Startseite. Die Werte
      bleiben responsiv, damit mobile Geräte weiterhin ausreichend Weißraum
      erhalten.
    */
    gap: clamp(2.2rem, 4.5vw, 4.2rem);
    padding-block: clamp(1.8rem, 4vw, 3.6rem);
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--heading-color, #0f172a);
    letter-spacing: -0.015em;
  }

  h1 {
    font-size: clamp(2.75rem, 5vw, 3.8rem);
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(2.1rem, 4vw, 3rem);
    line-height: 1.1;
  }

  h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.25;
  }

  p {
    color: var(--muted-text, #64748b);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
  }

  a {
    color: var(--accent-color, #3b82f6);
    text-underline-offset: 0.25em;
    transition:
      color var(--duration-quick) var(--ease-soft),
      opacity var(--duration-quick) var(--ease-soft);
  }

  a:hover,
  a:focus-visible {
    color: color-mix(in srgb, var(--accent-color, #3b82f6) 75%, #0f172a);
  }

  body.dark-theme::before {
    opacity: 0.75;
    filter: saturate(140%);
  }

  body.dark-theme::after {
    mix-blend-mode: soft-light;
    opacity: 0.5;
  }
}

/* -------------------------
 * Layout-Hilfsklassen
 * ------------------------- */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--layout-max);
    margin-inline: auto;
    padding-inline: var(--content-padding-inline, clamp(1.35rem, 4vw, 3rem));
  }

  /*
    Die Seitenhülle nutzt Flexbox, um den Footer stets an den unteren
    Viewportrand zu drücken. So bleibt der Aufbau auch bei wenig Inhalt
    stabil und vermeidet zusätzliches JavaScript.
  */
  .page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex: 1;
  }

  /*
    Der Inhaltsbereich dehnt sich automatisch, sodass sich der Footer erst
    nach dem eigentlichen Content positioniert. Dadurch entsteht kein
    ungewollter Leerraum über dem Footer.
  */
  .page-shell__main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }

  /*
    Der Footer selbst erhält lediglich einen automatischen oberen Rand.
    Damit dockt er zuverlässig am Seitenende an, ohne das Spacing zu
    beeinflussen, wenn genügend Inhalt vorhanden ist.
  */
  .page-shell__footer {
    margin-top: auto;
  }

  .container--tight {
    max-width: var(--layout-tight);
  }

  .container--wide {
    max-width: var(--layout-wide);
  }

  .section {
    position: relative;
    isolation: isolate;
  }

  .section + .section {
    /*
      Reduzierte Übergänge zwischen Bereichen – orientiert an Magazinlayouts.
    */
    margin-top: clamp(1.5rem, 4vw, 3rem);
  }

  .section--surface {
    /*
      Glasige Paneele wie im Referenzdesign. Durch die Kombination aus
      Hintergrundverlauf und Border entsteht ein leichter Schwebe-Effekt.
    */
    margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    padding-block: clamp(2.8rem, 6vw, 4.8rem);
    border-radius: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(244, 248, 255, 0.78)
    );
    border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
    box-shadow: var(--shadow-elevated);
  }

  .section--surface.page-section {
    /*
      Entfernt gezielt Schatten und Rahmen für Inhaltsbereiche auf Unterseiten,
      damit die einzelnen Container bestehen bleiben, aber ohne schwebenden
      oder eingerahmten Effekt dargestellt werden.
    */
    box-shadow: none;
    border: none;
  }

  .section--surface > .container,
  .section--muted > .container {
    background: transparent;
    border: none;
  }

  .section--muted {
    margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    padding-block: clamp(2.6rem, 5.2vw, 4.4rem);
    border-radius: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(
      140deg,
      rgba(240, 246, 255, 0.85),
      rgba(248, 252, 255, 0.68)
    );
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 36px 90px -62px rgba(15, 23, 42, 0.32);
  }

  /*
    Zweispaltige Layouts für Inhaltsseiten. Durch die Modifier-Klasse
    "page-layout--columns" wird bei größeren Viewports ein Navigationsbereich
    neben dem Fließtext angezeigt. Auf kleineren Geräten bleibt die
    Darstellung einspaltig und damit gut lesbar.
  */
  .page-layout {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    align-items: start;
  }

  .page-layout--columns {
    gap: clamp(2rem, 5vw, 3.25rem);
  }

  @media (min-width: 960px) {
    .page-layout--columns {
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    }
  }

  .page-layout__aside {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.6rem);
    padding: clamp(1.25rem, 3vw, 1.85rem);
    border-radius: clamp(1rem, 2.4vw, 1.35rem);
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(var(--accent-color-rgb, 85, 105, 255), 0.18) 60%,
      rgba(var(--accent-color-cyan-rgb, 122, 182, 255), 0.16) 100%
    );
    border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.22);
    box-shadow: var(
      --shadow-elevated,
      0 46px 140px -70px rgba(17, 26, 47, 0.45)
    );
    backdrop-filter: blur(var(--blur-surface, 26px));
    -webkit-backdrop-filter: blur(var(--blur-surface, 26px));
  }

  @media (min-width: 960px) {
    .page-layout__aside {
      position: sticky;
      top: clamp(5.5rem, 7vw, 6.25rem);
    }
  }

  .page-layout__title {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 700;
    margin: 0;
    color: var(--heading-color, #0f172a);
  }

  .page-layout__meta {
    display: grid;
    gap: 0.6rem;
    padding: clamp(0.85rem, 2.4vw, 1.1rem);
    border-radius: clamp(0.85rem, 2vw, 1.15rem);
    background: rgba(var(--surface-solid-rgb, 255, 255, 255), 0.75);
    border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.08);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .page-layout__meta address {
    font-style: normal;
  }

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

  /*
    Subtile Beleuchtungsflächen, die jeder Section eine moderne Tiefe verleihen
    und mit den neuen grau-blauen Akzenten harmonieren.
  */
  .section::before {
    content: "";
    position: absolute;
    inset: 10% 0 auto;
    height: 100%;
    max-height: 360px;
    /*
      Hellere Lichtflächen unterstreichen den Weißanteil und lassen die
      Flächen leichter wirken.
    */
    background: radial-gradient(
        circle at 18% -12%,
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.14),
        transparent 52%
      ),
      radial-gradient(
        circle at 82% 0%,
        rgba(var(--accent-color-cyan-rgb, 153, 211, 255), 0.12),
        transparent 58%
      );
    opacity: 0.38;
    z-index: -2;
    pointer-events: none;
  }

  .section--surface::before {
    background: radial-gradient(
        circle at 20% 0%,
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.12),
        transparent 55%
      ),
      radial-gradient(
        circle at 80% 10%,
        rgba(var(--accent-color-cyan-rgb, 53, 210, 255), 0.16),
        transparent 60%
      );
    opacity: 0.32;
  }

  .section--muted::before {
    background: linear-gradient(
      180deg,
      rgba(73, 99, 255, 0.12),
      transparent 70%
    );
    opacity: 0.26;
  }

  .section--accent::before {
    background: linear-gradient(
      180deg,
      rgba(73, 99, 255, 0.28),
      transparent 65%
    );
  }

  .section-header {
    display: grid;
    gap: clamp(0.75rem, 1.8vw, 1.35rem);
    max-width: clamp(48ch, 55vw, 62ch);
  }

  .section-header--center {
    text-align: center;
    margin-inline: auto;
    max-width: clamp(52ch, 62vw, 68ch);
  }

  .section-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.7;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.6);
  }

  .section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.85rem, 2vw, 1.4rem);
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }
}

/* -------------------------
 * Komponentenbibliothek
 * -------------------------
 * Übersicht: Buttons, Navigation, Karten, Sections, Statistiken, Inhaltsmodule
 * Jede Gruppe ist durch Kommentare gekennzeichnet und nutzt gemeinsame Variablen.
 */
@layer components {

  /* -------------------------
   * Buttons & Interaktive Elemente
   * ------------------------- */
    .button {
      /*
        Greift auf die globalen Button-Variablen zu, sodass Design-Prototypen und
        Produktivseiten dieselbe Logik für Maße und Abstände nutzen.
      */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--button-gap, 0.6rem);
      min-height: var(--button-height, 3.1rem);
      padding: var(--button-padding-block, 0.85rem)
        var(--button-padding-inline, 1.8rem);
      border-radius: var(--button-radius, var(--border-radius-pill, 999px));
      background: var(--button-bg, #3b82f6);
      color: var(--button-text, #f8fafc);
      font-weight: 600;
      border: none;
      box-shadow: 0 18px 40px -28px rgba(var(--accent-color-rgb, 85, 105, 255), 0.8);
      transition:
        transform var(--duration-quick) var(--ease-soft),
        box-shadow var(--duration-quick) var(--ease-soft),
        background var(--duration-quick) var(--ease-soft);
    }
  
    .button:hover,
    .button:focus-visible {
      transform: translateY(-3px);
      background: var(--button-bg-hover, #2563eb);
      box-shadow: 0 26px 60px -34px rgba(var(--accent-color-rgb, 85, 105, 255), 0.72);
    }
  
    .button.ghost,
    .button.secondary,
    .button.tertiary,
    .button.button--inline {
      background: transparent;
      color: var(--accent-color, #3b82f6);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.4);
      box-shadow: none;
    }
  
    .button.button--logo,
    .button.button--logo-only {
      /*
        Logo-Buttons nutzen die globalen Button-Variablen und greifen nur dort
        ein, wo Markenlogos abweichende Abstände benötigen. So bleibt der
        Wartungsaufwand gering und Ladezeiten steigen nicht durch zusätzliche
        Utility-Klassen.
      */
      --button-gap: clamp(0.6rem, 1.8vw, 0.95rem);
      --button-padding-inline: clamp(1.45rem, 3.2vw, 2.2rem);
      --button-radius: clamp(1.9rem, 5vw, 2.6rem);
      --button-bg: color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 12%,
        #ffffff 88%
      );
      --button-bg-hover: color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 22%,
        #ffffff 78%
      );
      --button-text: color-mix(
        in srgb,
        #0f172a 90%,
        var(--accent-color, #3b82f6) 10%
      );
      color: var(--button-text);
      border: 1px solid color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 18%,
        transparent 82%
      );
      box-shadow: 0 18px 44px -32px
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.38);
      background-clip: padding-box;
    }

    .button.button--logo-only {
      /*
        Fallback für reine Logoverlinkungen in anderen Dokumenten. Der Block
        bleibt bewusst erhalten, obwohl auf der Startseite nur der Text-CTA
        sichtbar ist.
      */
      --button-gap: 0;
      --button-padding-inline: clamp(0.9rem, 2.4vw, 1.2rem);
      min-width: clamp(3.1rem, 6vw, 3.5rem);
      justify-content: center;
    }
  
    .button__label {
      /*
        Sichtbarer Textbereich für CTA-Beschriftungen. Der Block richtet Text
        und Logo vertikal aus und kann bei Bedarf per .sr-only unsichtbar
        geschaltet werden.
      */
      display: inline-flex;
      align-items: center;
      line-height: 1;
      font-weight: 600;
    }
  
    .button__icon {
      /*
        Der Icon-Container kapselt Logos in einer subtilen Kachel, sodass
        unterschiedlich breite Markenabbildungen nicht den Button sprengen.
        Ein leichter, performanter Verlauf sorgt für mehr Tiefe ohne weitere
        Bildressourcen.
      */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: clamp(2.3rem, 3vw, 2.7rem);
      height: clamp(2.3rem, 3vw, 2.7rem);
      padding: clamp(0.24rem, 0.8vw, 0.36rem);
      border-radius: clamp(0.68rem, 2vw, 0.92rem);
      background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(245, 248, 255, 0.78) 100%
      );
      box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb, 85, 105, 255), 0.1);
      transition:
        background var(--duration-quick) var(--ease-soft),
        box-shadow var(--duration-quick) var(--ease-soft);
    }

    .button.button--logo:hover .button__icon,
    .button.button--logo:focus-visible .button__icon,
    .button.button--logo-only:hover .button__icon,
    .button.button--logo-only:focus-visible .button__icon {
      background: rgba(255, 255, 255, 0.95);
    }
  
    .button__icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  
    .cta-group {
      /*
        Wiederverwendbare Gruppe für mehrere Call-to-Actions. Flexbox sorgt für
        eine saubere Ausrichtung, auch wenn Buttons mit und ohne Text gemischt
        werden.
      */
      display: flex;
      flex-wrap: wrap;
      gap: clamp(0.7rem, 2vw, 1.1rem);
      margin-top: clamp(1.2rem, 2.8vw, 1.8rem);
    }
  
    .button.ghost:hover,
    .button.secondary:hover,
    .button.tertiary:hover,
    .button.button--inline:hover,
    .button.ghost:focus-visible,
    .button.secondary:focus-visible,
    .button.tertiary:focus-visible,
    .button.button--inline:focus-visible {
      background: rgba(var(--accent-color-rgb, 85, 105, 255), 0.1);
    }

  /* -------------------------
   * Inhaltsnavigation & Rechtsseiten
   * ------------------------- */
    /*
      Inhaltsverzeichnisse auf langen Seiten. Die Listen werden bewusst als
      Grid aufgebaut, um unterschiedlich lange Link-Texte sauber umbrechen zu
      lassen.
    */
    .toc {
      display: grid;
      gap: clamp(0.75rem, 2vw, 1.1rem);
    }
  
    .toc__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: clamp(0.5rem, 1.6vw, 0.9rem);
    }
  
    .toc__item {
      line-height: 1.5;
    }
  
    .toc__link {
      display: inline-flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-weight: 600;
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 86%, #0f172a 14%);
      text-decoration: none;
      border-bottom: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.35);
      transition: color var(--duration-quick, 220ms) var(--ease-soft, ease);
    }
  
    .toc__link::before {
      content: "›";
      font-weight: 700;
      color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.55);
      transform: translateY(-1px);
    }
  
    .toc__link:hover,
    .toc__link:focus-visible {
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 70%, #0f172a);
      border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.55);
    }
  
    /*
      Gestaltung der rechtlichen Inhaltsblöcke. Ein leichter Verlauf sorgt für
      visuelle Abgrenzung, ohne den Lesefluss zu stören.
    */
    .legal-section {
      display: grid;
      gap: clamp(0.85rem, 2.5vw, 1.4rem);
      padding: clamp(1.5rem, 3.5vw, 2.3rem);
      border-radius: clamp(1rem, 2.8vw, 1.45rem);
      background: linear-gradient(
        175deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(var(--primary-color-rgb, 15, 23, 42), 0.05) 100%
      );
      border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.08);
      box-shadow: var(
        --shadow-elevated,
        0 36px 120px -60px rgba(15, 23, 42, 0.35)
      );
    }
  
    .legal-section:not(:last-child) {
      margin-bottom: clamp(1rem, 3vw, 1.75rem);
    }
  
    .legal-section__header {
      display: grid;
      gap: clamp(0.5rem, 2vw, 0.85rem);
    }
  
    .legal-section__intro {
      margin: 0;
      color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.65);
      font-size: clamp(0.95rem, 1.6vw, 1.05rem);
      line-height: 1.6;
    }
  
    .legal-section__body {
      display: grid;
      gap: clamp(0.65rem, 1.8vw, 1rem);
      color: var(--muted-text, #475569);
      font-size: clamp(0.95rem, 1.4vw, 1.05rem);
      line-height: 1.7;
    }
  
    .legal-section__body h3,
    .legal-section__body h4 {
      margin: 0;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      color: var(--heading-color, #0f172a);
    }
  
    .legal-section__body p {
      margin: 0;
    }
  
    .legal-section__body ul,
    .legal-section__body ol {
      margin: 0;
      padding-left: 1.2rem;
      display: grid;
      gap: 0.4rem;
    }
  
    .legal-section__body a {
      color: var(--accent-color, #3b82f6);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.4);
    }
  
    .legal-section__body a:hover,
    .legal-section__body a:focus-visible {
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 70%, #0f172a);
      border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.55);
    }

  /* -------------------------
   * Navigationsbereich
   * ------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    inset: 0 auto auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--nav-text);
    --nav-surface: rgba(255, 255, 255, 0.96);
    --nav-border: rgba(15, 23, 42, 0.14);
    --nav-shadow: 0 28px 60px -46px rgba(15, 23, 42, 0.28);
    --nav-text: #0f172a;
    --nav-muted: rgba(15, 23, 42, 0.64);
    --nav-hover-bg: rgba(47, 111, 237, 0.12);
    --nav-hover-border: rgba(47, 111, 237, 0.3);
    --nav-hover-text: #1d4ed8;
    --nav-pill-bg: rgba(255, 255, 255, 0.98);
    --nav-pill-border: rgba(148, 163, 184, 0.26);
  }

  body.dark-theme .site-header {
    --nav-surface: rgba(15, 23, 42, 0.9);
    --nav-border: rgba(148, 163, 184, 0.45);
    --nav-shadow: 0 36px 70px -48px rgba(2, 6, 23, 0.75);
    --nav-text: rgba(241, 245, 249, 0.95);
    --nav-muted: rgba(203, 213, 225, 0.72);
    --nav-hover-bg: rgba(148, 163, 184, 0.28);
    --nav-hover-border: rgba(148, 163, 184, 0.55);
    --nav-hover-text: #ffffff;
    --nav-pill-bg: rgba(30, 41, 59, 0.9);
    --nav-pill-border: rgba(148, 163, 184, 0.45);
  }


.site-header .navbar {
  width: 100%;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  color: var(--nav-text);
}

/*
 * Die Glasfläche erbt die Farbstimmung der Design-Variablen und sorgt für
 * konsistente Darstellungen über unterschiedliche Themen hinweg.
 */
.site-header .navbar__backdrop {
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
}

body.dark-theme .site-header .navbar__backdrop {
  background: var(--nav-surface);
  border-color: var(--nav-border);
  box-shadow: var(--nav-shadow);
}

/*
 * Navigation im Seitenkontext: Links bleiben gruppiert, Aktionen werden rechts
 * ausgerichtet. Die Werte orientieren sich am Basislayout aus style.css und
 * verfeinern lediglich die Abstände.
 */
.site-header .navbar__container {
  width: min(100%, var(--content-max-width-wide, 1320px));
}

.site-header .navbar__menu {
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 3rem);
}

.site-header .navbar__brand {
  color: inherit;
}

.site-header .navbar__link {
  color: color-mix(in srgb, var(--nav-text) 94%, #0f172a 6%);
}

.site-header .navbar__link:hover,
.site-header .navbar__link:focus-visible {
  color: var(--nav-hover-text);
}

.site-header .navbar__link[aria-current="page"],
.site-header .navbar__item.has-active-link > .navbar__link,
.site-header .navbar__link[data-active-child="true"] {
  color: var(--nav-hover-text);
}

body.dark-theme .site-header .navbar__link {
  color: var(--nav-text);
}

.site-header .navbar__actions {
  margin-inline-start: auto;
  gap: clamp(0.6rem, 2vw, 1.2rem);
}

.site-header .navbar__actions .button.ghost {
  background: var(--nav-pill-bg);
  border-color: var(--nav-pill-border);
  color: var(--nav-hover-text);
}

.site-header .navbar__actions .button.ghost:hover,
.site-header .navbar__actions .button.ghost:focus-visible {
  background: color-mix(in srgb, var(--nav-pill-bg) 78%, var(--nav-hover-bg));
  border-color: color-mix(in srgb, var(--nav-pill-border) 70%, var(--nav-hover-border));
  color: var(--nav-hover-text);
}

@media (max-width: 64rem) {
  .site-header .navbar__container {
    width: 100%;
    padding-inline: clamp(1rem, 4vw, 1.6rem);
  }

  .site-header .navbar__menu {
    background: var(--nav-surface);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
  }

  body.dark-theme .site-header .navbar__menu {
    background: var(--nav-surface);
  }
}

  /* -------------------------
   * Buttons & Interaktive Elemente
   * ------------------------- */
    .button {
      /*
        Greift auf die globalen Button-Variablen zu, sodass Design-Prototypen und
        Produktivseiten dieselbe Logik für Maße und Abstände nutzen.
      */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--button-gap, 0.6rem);
      min-height: var(--button-height, 3.1rem);
      padding: var(--button-padding-block, 0.85rem)
        var(--button-padding-inline, 1.8rem);
      border-radius: var(--button-radius, var(--border-radius-pill, 999px));
      background: var(--button-bg, #3b82f6);
      color: var(--button-text, #f8fafc);
      font-weight: 600;
      border: none;
      box-shadow: 0 18px 40px -28px rgba(var(--accent-color-rgb, 85, 105, 255), 0.8);
      transition:
        transform var(--duration-quick) var(--ease-soft),
        box-shadow var(--duration-quick) var(--ease-soft),
        background var(--duration-quick) var(--ease-soft);
    }
  
    .button:hover,
    .button:focus-visible {
      transform: translateY(-3px);
      background: var(--button-bg-hover, #2563eb);
      box-shadow: 0 26px 60px -34px rgba(var(--accent-color-rgb, 85, 105, 255), 0.72);
    }
  
    .button.ghost,
    .button.secondary,
    .button.tertiary,
    .button.button--inline {
      background: transparent;
      color: var(--accent-color, #3b82f6);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.4);
      box-shadow: none;
    }
  
    .button.button--logo,
    .button.button--logo-only {
      /*
        Logo-Buttons nutzen die globalen Button-Variablen und greifen nur dort
        ein, wo Markenlogos abweichende Abstände benötigen. So bleibt der
        Wartungsaufwand gering und Ladezeiten steigen nicht durch zusätzliche
        Utility-Klassen.
      */
      --button-gap: clamp(0.6rem, 1.8vw, 0.95rem);
      --button-padding-inline: clamp(1.45rem, 3.2vw, 2.2rem);
      --button-radius: clamp(1.9rem, 5vw, 2.6rem);
      --button-bg: color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 12%,
        #ffffff 88%
      );
      --button-bg-hover: color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 22%,
        #ffffff 78%
      );
      --button-text: color-mix(
        in srgb,
        #0f172a 90%,
        var(--accent-color, #3b82f6) 10%
      );
      color: var(--button-text);
      border: 1px solid color-mix(
        in srgb,
        var(--accent-color, #3b82f6) 18%,
        transparent 82%
      );
      box-shadow: 0 18px 44px -32px
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.38);
      background-clip: padding-box;
    }

    .button.button--logo-only {
      /*
        Fallback für reine Logoverlinkungen in anderen Dokumenten. Der Block
        bleibt bewusst erhalten, obwohl auf der Startseite nur der Text-CTA
        sichtbar ist.
      */
      --button-gap: 0;
      --button-padding-inline: clamp(0.9rem, 2.4vw, 1.2rem);
      min-width: clamp(3.1rem, 6vw, 3.5rem);
      justify-content: center;
    }
  
    .button__label {
      /*
        Sichtbarer Textbereich für CTA-Beschriftungen. Der Block richtet Text
        und Logo vertikal aus und kann bei Bedarf per .sr-only unsichtbar
        geschaltet werden.
      */
      display: inline-flex;
      align-items: center;
      line-height: 1;
      font-weight: 600;
    }
  
    .button__icon {
      /*
        Der Icon-Container kapselt Logos in einer subtilen Kachel, sodass
        unterschiedlich breite Markenabbildungen nicht den Button sprengen.
        Ein leichter, performanter Verlauf sorgt für mehr Tiefe ohne weitere
        Bildressourcen.
      */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: clamp(2.3rem, 3vw, 2.7rem);
      height: clamp(2.3rem, 3vw, 2.7rem);
      padding: clamp(0.24rem, 0.8vw, 0.36rem);
      border-radius: clamp(0.68rem, 2vw, 0.92rem);
      background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(245, 248, 255, 0.78) 100%
      );
      box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb, 85, 105, 255), 0.1);
      transition:
        background var(--duration-quick) var(--ease-soft),
        box-shadow var(--duration-quick) var(--ease-soft);
    }

    .button.button--logo:hover .button__icon,
    .button.button--logo:focus-visible .button__icon,
    .button.button--logo-only:hover .button__icon,
    .button.button--logo-only:focus-visible .button__icon {
      background: rgba(255, 255, 255, 0.95);
    }
  
    .button__icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  
    .cta-group {
      /*
        Wiederverwendbare Gruppe für mehrere Call-to-Actions. Flexbox sorgt für
        eine saubere Ausrichtung, auch wenn Buttons mit und ohne Text gemischt
        werden.
      */
      display: flex;
      flex-wrap: wrap;
      gap: clamp(0.7rem, 2vw, 1.1rem);
      margin-top: clamp(1.2rem, 2.8vw, 1.8rem);
    }
  
    .button.ghost:hover,
    .button.secondary:hover,
    .button.tertiary:hover,
    .button.button--inline:hover,
    .button.ghost:focus-visible,
    .button.secondary:focus-visible,
    .button.tertiary:focus-visible,
    .button.button--inline:focus-visible {
      background: rgba(var(--accent-color-rgb, 85, 105, 255), 0.1);
    }

  /* -------------------------
   * Inhaltsnavigation & Rechtsseiten
   * ------------------------- */
    /*
      Inhaltsverzeichnisse auf langen Seiten. Die Listen werden bewusst als
      Grid aufgebaut, um unterschiedlich lange Link-Texte sauber umbrechen zu
      lassen.
    */
    .toc {
      display: grid;
      gap: clamp(0.75rem, 2vw, 1.1rem);
    }
  
    .toc__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: clamp(0.5rem, 1.6vw, 0.9rem);
    }
  
    .toc__item {
      line-height: 1.5;
    }
  
    .toc__link {
      display: inline-flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-weight: 600;
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 86%, #0f172a 14%);
      text-decoration: none;
      border-bottom: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.35);
      transition: color var(--duration-quick, 220ms) var(--ease-soft, ease);
    }
  
    .toc__link::before {
      content: "›";
      font-weight: 700;
      color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.55);
      transform: translateY(-1px);
    }
  
    .toc__link:hover,
    .toc__link:focus-visible {
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 70%, #0f172a);
      border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.55);
    }
  
    /*
      Gestaltung der rechtlichen Inhaltsblöcke. Ein leichter Verlauf sorgt für
      visuelle Abgrenzung, ohne den Lesefluss zu stören.
    */
    .legal-section {
      display: grid;
      gap: clamp(0.85rem, 2.5vw, 1.4rem);
      padding: clamp(1.5rem, 3.5vw, 2.3rem);
      border-radius: clamp(1rem, 2.8vw, 1.45rem);
      background: linear-gradient(
        175deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(var(--primary-color-rgb, 15, 23, 42), 0.05) 100%
      );
      border: 1px solid rgba(var(--primary-color-rgb, 15, 23, 42), 0.08);
      box-shadow: var(
        --shadow-elevated,
        0 36px 120px -60px rgba(15, 23, 42, 0.35)
      );
    }
  
    .legal-section:not(:last-child) {
      margin-bottom: clamp(1rem, 3vw, 1.75rem);
    }
  
    .legal-section__header {
      display: grid;
      gap: clamp(0.5rem, 2vw, 0.85rem);
    }
  
    .legal-section__intro {
      margin: 0;
      color: rgba(var(--primary-color-rgb, 15, 23, 42), 0.65);
      font-size: clamp(0.95rem, 1.6vw, 1.05rem);
      line-height: 1.6;
    }
  
    .legal-section__body {
      display: grid;
      gap: clamp(0.65rem, 1.8vw, 1rem);
      color: var(--muted-text, #475569);
      font-size: clamp(0.95rem, 1.4vw, 1.05rem);
      line-height: 1.7;
    }
  
    .legal-section__body h3,
    .legal-section__body h4 {
      margin: 0;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      color: var(--heading-color, #0f172a);
    }
  
    .legal-section__body p {
      margin: 0;
    }
  
    .legal-section__body ul,
    .legal-section__body ol {
      margin: 0;
      padding-left: 1.2rem;
      display: grid;
      gap: 0.4rem;
    }
  
    .legal-section__body a {
      color: var(--accent-color, #3b82f6);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.4);
    }
  
    .legal-section__body a:hover,
    .legal-section__body a:focus-visible {
      color: color-mix(in srgb, var(--accent-color, #3b82f6) 70%, #0f172a);
      border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.55);
    }

  /* -------------------------
   * Navigationsbereich
   * ------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    inset: 0 auto auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--nav-text);
    --nav-surface: rgba(255, 255, 255, 0.96);
    --nav-border: rgba(15, 23, 42, 0.14);
    --nav-shadow: 0 28px 60px -46px rgba(15, 23, 42, 0.28);
    --nav-text: #0f172a;
    --nav-muted: rgba(15, 23, 42, 0.64);
    --nav-hover-bg: rgba(47, 111, 237, 0.12);
    --nav-hover-border: rgba(47, 111, 237, 0.3);
    --nav-hover-text: #1d4ed8;
    --nav-pill-bg: rgba(255, 255, 255, 0.98);
    --nav-pill-border: rgba(148, 163, 184, 0.26);
  }

  body.dark-theme .site-header {
    --nav-surface: rgba(15, 23, 42, 0.9);
    --nav-border: rgba(148, 163, 184, 0.45);
    --nav-shadow: 0 36px 70px -48px rgba(2, 6, 23, 0.75);
    --nav-text: rgba(241, 245, 249, 0.95);
    --nav-muted: rgba(203, 213, 225, 0.72);
    --nav-hover-bg: rgba(148, 163, 184, 0.28);
    --nav-hover-border: rgba(148, 163, 184, 0.55);
    --nav-hover-text: #ffffff;
    --nav-pill-bg: rgba(30, 41, 59, 0.9);
    --nav-pill-border: rgba(148, 163, 184, 0.45);
  }


.site-header .navbar {
  width: 100%;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  color: var(--nav-text);
}

/*
 * Die Glasfläche erbt die Farbstimmung der Design-Variablen und sorgt für
 * konsistente Darstellungen über unterschiedliche Themen hinweg.
 */
.site-header .navbar__backdrop {
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
}

body.dark-theme .site-header .navbar__backdrop {
  background: var(--nav-surface);
  border-color: var(--nav-border);
  box-shadow: var(--nav-shadow);
}

/*
 * Navigation im Seitenkontext: Links bleiben gruppiert, Aktionen werden rechts
 * ausgerichtet. Die Werte orientieren sich am Basislayout aus style.css und
 * verfeinern lediglich die Abstände.
 */
.site-header .navbar__container {
  width: min(100%, var(--content-max-width-wide, 1320px));
}

.site-header .navbar__menu {
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 3rem);
}

.site-header .navbar__brand {
  color: inherit;
}

.site-header .navbar__link {
  color: color-mix(in srgb, var(--nav-text) 94%, #0f172a 6%);
}

.site-header .navbar__link:hover,
.site-header .navbar__link:focus-visible {
  color: var(--nav-hover-text);
}

.site-header .navbar__link[aria-current="page"],
.site-header .navbar__item.has-active-link > .navbar__link,
.site-header .navbar__link[data-active-child="true"] {
  color: var(--nav-hover-text);
}

body.dark-theme .site-header .navbar__link {
  color: var(--nav-text);
}

.site-header .navbar__actions {
  margin-inline-start: auto;
  gap: clamp(0.6rem, 2vw, 1.2rem);
}

.site-header .navbar__actions .button.ghost {
  background: var(--nav-pill-bg);
  border-color: var(--nav-pill-border);
  color: var(--nav-hover-text);
}

.site-header .navbar__actions .button.ghost:hover,
.site-header .navbar__actions .button.ghost:focus-visible {
  background: color-mix(in srgb, var(--nav-pill-bg) 78%, var(--nav-hover-bg));
  border-color: color-mix(in srgb, var(--nav-pill-border) 70%, var(--nav-hover-border));
  color: var(--nav-hover-text);
}

@media (max-width: 64rem) {
  .site-header .navbar__container {
    width: 100%;
    padding-inline: clamp(1rem, 4vw, 1.6rem);
  }

  .site-header .navbar__menu {
    background: var(--nav-surface);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
  }

  body.dark-theme .site-header .navbar__menu {
    background: var(--nav-surface);
  }
}

  /* -------------------------
   * Hero-Bereich
   * ------------------------- */
    .hero {
      position: relative;
      overflow: hidden;
      padding-block: clamp(4.4rem, 9vw, 7.6rem);
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
      border-radius: clamp(2.8rem, 5.4vw, 4.4rem);
      /*
        Vereinfachte Held:innenfläche ohne Farbverläufe. Die homogene
        Hintergrundfarbe reduziert Ablenkung und spart Renderkosten.
      */
      background-color: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow-elevated);
    }
  
    .hero__background {
      /*
        Zusätzlicher Layer für Ambient-Licht. Die beiden elliptischen
        Flächen orientieren sich am Vorbild von onepage.io und schaffen
        eine futuristische Tiefe ohne zusätzliche Bilder.
      */
      position: absolute;
      inset: -14% -12% -20%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      filter: saturate(120%);
    }
  
    .hero__background::before,
    .hero__background::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      mix-blend-mode: screen;
      opacity: 0.55;
      transform: rotate(18deg);
    }
  
    .hero__background::before {
      width: clamp(32rem, 58vw, 48rem);
      height: clamp(32rem, 56vw, 44rem);
      /* Sanftes, einfarbiges Glühen statt radialem Verlauf. */
      background-color: rgba(73, 99, 255, 0.18);
      filter: blur(0.5rem);
    }
  
    .hero__background::after {
      width: clamp(26rem, 48vw, 36rem);
      height: clamp(26rem, 46vw, 34rem);
      /* Reduzierte Cyan-Fläche für dezente Tiefenwirkung. */
      background-color: rgba(53, 210, 255, 0.16);
      transform: translate(34%, -16%) rotate(-22deg);
    }
  
    .hero__layout {
      position: relative;
      z-index: 1;
      display: grid;
      gap: clamp(2.2rem, 4.5vw, 3.6rem);
      align-items: center;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
  
    body.dark-theme .hero {
      background: radial-gradient(
          circle at 12% -18%,
          rgba(85, 105, 255, 0.5),
          transparent 60%
        ),
        radial-gradient(
          circle at 88% -6%,
          rgba(53, 210, 255, 0.42),
          transparent 62%
        ),
        linear-gradient(135deg, rgba(15, 19, 33, 0.96), rgba(12, 18, 32, 0.82));
    }
  
    .hero__content {
      display: grid;
      gap: clamp(1rem, 2vw, 1.6rem);
    }
  
    .hero__lead {
      font-size: clamp(1.1rem, 1.6vw, 1.3rem);
      color: color-mix(in srgb, var(--muted-text, #64748b) 85%, #000 15%);
    }
  
    .hero__metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: clamp(1rem, 2.4vw, 1.6rem);
    }

    .hero__metric {
      /* Einheitlicher Kartenstil mit blauem Verlauf für alle Hero-Metriken */
      padding: clamp(1.2rem, 2.2vw, 1.6rem);
      border-radius: clamp(1.2rem, 2.4vw, 1.8rem);
      background: linear-gradient(
        145deg,
        rgba(58, 117, 255, 0.2),
        rgba(255, 255, 255, 0.92)
      );
      border: 1px solid rgba(58, 117, 255, 0.3);
      box-shadow: 0 22px 60px -42px rgba(15, 23, 42, 0.35);
      display: grid;
      gap: 0.45rem;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .hero__metric::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08));
      pointer-events: none;
      z-index: -1;
    }

    .hero__metric-label {
      font-size: 0.82rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(15, 23, 42, 0.55);
      margin: 0;
    }

    .hero__metric-value {
      margin: 0;
      display: grid;
      gap: 0.35rem;
      font-size: clamp(1.1rem, 2.2vw, 1.4rem);
      color: var(--heading-color, #0f172a);
      /* Stellt sicher, dass umfangreiche Beschreibungen ansprechend umbrechen können. */
      overflow-wrap: anywhere;
      hyphens: auto;
    }

    .hero__metric-number {
      display: block;
      font-weight: 700;
      /* Erlaubt flexible Zeilenumbrüche, damit selbst längere Begriffe nicht abgeschnitten werden. */
      white-space: normal;
    }

    .hero__metric-description {
      font-size: clamp(0.85rem, 1.4vw, 0.95rem);
      line-height: 1.4;
      color: rgba(15, 23, 42, 0.75);
    }

    body.dark-theme .hero__metric {
      background: linear-gradient(
        150deg,
        rgba(13, 20, 40, 0.92),
        rgba(26, 46, 92, 0.8)
      );
      border-color: rgba(58, 117, 255, 0.38);
      box-shadow: 0 28px 72px -42px rgba(0, 0, 0, 0.7);
    }
  
    .hero__media {
      position: relative;
      display: grid;
      place-items: center;
    }
  
    .hero__media-card {
      /*
        Großflächiges Aufmacherbild mit nachgelagerter Annotation. Dank Grid bleiben
        Bild und Text eng verbunden und wirken wie eine einzige visuelle Einheit.
      */
      position: relative;
      border-radius: 0;
      overflow: hidden;
      background: linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.95),
        rgba(240, 246, 255, 0.78)
      );
      box-shadow: var(--shadow-floating);
      display: grid;
      grid-template-rows: auto min-content;
      backdrop-filter: blur(calc(var(--blur-surface, 18px) * 0.65));
      -webkit-backdrop-filter: blur(calc(var(--blur-surface, 18px) * 0.65));
      width: min(100%, 35rem);
      max-width: 35rem;
    }

    .hero__media-figure {
      margin: 0;
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
    }

    .hero__media-figure img {
      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 {
      display: grid;
      gap: 0.35rem;
      border-radius: 0;
      margin: -2.6rem clamp(1.2rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem);
      padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.2rem, 3vw, 2rem);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-hover);
      position: relative;
    }
  
    .hero__media-label {
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.82);
    }
  
    @media (prefers-reduced-motion: reduce) {
      .hero::before,
      .hero::after {
        transition: none;
      }
  
    }

  /* -------------------------
   * Karten & Inhaltsraster
   * ------------------------- */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      /*
        Kleinere Lücken erzeugen ein dichteres Grid und wirken besonders auf
        großen Bildschirmen strukturierter.
      */
      gap: clamp(1.1rem, 2.6vw, 1.8rem);
    }
  
    .card {
      padding: clamp(1.5rem, 2.6vw, 2.2rem);
      border-radius: var(--radius-lg, 22px);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
      /*
        Helle Kartenflächen mit leichtem Blaustich – sorgt für den gewünschten
        Weißanteil und bleibt performant, da nur zwei Layer gerendert werden.
      */
      background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 250, 255, 0.92)
          )
          padding-box,
        linear-gradient(
            160deg,
            rgba(var(--accent-color-rgb, 85, 105, 255), 0.18),
            rgba(var(--accent-color-cyan-rgb, 153, 211, 255), 0.14)
          )
          border-box;
      box-shadow: 0 20px 54px -42px rgba(15, 23, 42, 0.32);
      display: grid;
      gap: 0.8rem;
      transition:
        transform var(--duration-standard) var(--ease-soft),
        box-shadow var(--duration-standard) var(--ease-soft);
      backdrop-filter: blur(calc(var(--blur-surface, 24px) * 0.35));
      -webkit-backdrop-filter: blur(calc(var(--blur-surface, 24px) * 0.35));
    }

    /*
      Figur und Inhalt modular aufgeteilt, damit Karten flexibel um zusätzliche
      Elemente erweitert werden können (z. B. Badges oder sekundäre Texte).
    */
    .card__figure {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .card__content {
      display: grid;
      gap: clamp(0.45rem, 1.2vw, 0.7rem);
    }

    .card--service {
      align-content: start;
    }

    .solutions .card {
      background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.94),
            rgba(242, 246, 255, 0.78)
          )
          padding-box,
        linear-gradient(
            160deg,
            rgba(85, 105, 255, 0.25),
            rgba(53, 210, 255, 0.18)
          )
          border-box;
    }
  
    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 32px 80px -40px rgba(15, 23, 42, 0.45);
    }
  
    body.dark-theme .card {
      background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82))
          padding-box,
        linear-gradient(
            160deg,
            rgba(85, 105, 255, 0.45),
            rgba(53, 210, 255, 0.28)
          )
          border-box;
      box-shadow: 0 28px 80px -48px rgba(8, 12, 22, 0.85);
    }
  
    .card img {
      width: clamp(48px, 8vw, 64px);
      height: clamp(48px, 8vw, 64px);
      object-fit: contain;
    }

    body[data-page="akis"] .akis-feature-block__grid .card > img {
      /*
        Größere Darstellungen der Modul-Icons. Auf der AKIS-Seite transportieren
        sie den Funktionsumfang – daher skalieren wir sie großzügiger und
        lassen die natürliche Proportion erhalten.
      */
      width: clamp(72px, 10vw, 112px);
      height: auto;
      margin-block-end: clamp(1.4rem, 3vw, 2.2rem);
    }

  /* -------------------------
   * AKIS Landingpage Layout
   * ------------------------- */
    .hero__brand {
      display: flex;
      align-items: center;
      gap: clamp(0.6rem, 1.8vw, 1.2rem);
      margin-block-end: clamp(0.6rem, 1.5vw, 1rem);
    }

    /* Logo erhält separate Klasse, um alternative Varianten (z. B. monochrom) austauschbar zu machen. */
    .hero__brand-logo {
      width: clamp(48px, 7vw, 72px);
      height: auto;
    }

    .akis-hero__logo {
      width: clamp(52px, 8vw, 92px);
      height: auto;
    }

    .hero__brand-caption {
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.82);
    }

    .akis-overview {
      display: grid;
      gap: clamp(1.8rem, 3.8vw, 3rem);
      align-items: start;
    }

    .akis-overview__intro {
      display: grid;
      gap: clamp(1.2rem, 3vw, 1.8rem);
    }

    .akis-overview__list {
      display: grid;
      gap: 0.65rem;
      padding-left: 1.2rem;
      color: var(--text-muted, rgba(15, 23, 42, 0.7));
    }

    .akis-overview__brand {
      display: grid;
      gap: clamp(0.8rem, 2vw, 1.2rem);
    }

    .akis-overview__facts {
      display: grid;
      gap: 0.75rem;
    }

    .akis-overview__facts div {
      display: grid;
      gap: 0.2rem;
    }

    .akis-overview__facts dt {
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.78);
    }

    .akis-overview__facts dd {
      margin: 0;
      color: var(--text-color, #1e293b);
      font-weight: 500;
    }

    .akis-feature-block {
      display: grid;
      gap: clamp(2rem, 4vw, 3.4rem);
    }

    .akis-feature-block__intro {
      gap: clamp(0.8rem, 2.6vw, 1.4rem);
    }

    .akis-feature-block__grid {
      display: grid;
      gap: clamp(1.2rem, 2.6vw, 2rem);
    }

    @supports (content-visibility: auto) {
      body[data-page="akis"] .akis-feature-block__grid {
        /*
          Performance-Optimierung: Inhalte außerhalb des Viewports werden erst
          bei Bedarf gerendert. Die intrinsische Größe verhindert sichtbare
          Layoutsprünge beim Nachladen.
        */
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
      }
    }

    .akis-feature-block__media {
      display: grid;
      gap: 0.8rem;
      /*
        Zusätzliche Innenabstände und gerundete Ecken schaffen denselben
        optischen Rahmen wie bei den übrigen Karten.
      */
      padding: clamp(1.5rem, 2.6vw, 2.2rem);
      text-align: center;
      border-radius: var(--radius-lg, 22px);
      /*
        Wir halten einen konstanten Abstand zu den Container-Rändern ein.
        Die Variable verhindert doppelte Berechnungen und bleibt leicht
        anpassbar, falls das Layout künftig enger oder weiter werden soll.
      */
      --akis-media-inset: clamp(0.9rem, 3vw, 1.6rem);
      margin-inline: var(--akis-media-inset);
      /*
        Vertikale Abstände spiegeln die seitlichen Innenräume wider, damit die
        Karte nie an die Containerober- oder -unterkante stößt. Das stärkt den
        optischen Rahmen und verhindert abgeschnittene Schatten.
      */
      margin-block: var(--akis-media-inset);
      /*
        Ohne Begrenzung würde der Kartenblock an den Container stoßen.
        Die Kombination aus max() und min() stellt sicher, dass die Breite
        niemals kleiner als 0 wird und gleichzeitig nicht über die festgelegte
        Maximalbreite hinausragt. Dadurch bleibt der Abstand performant und
        responsiv – ganz ohne zusätzliche Wrapper-Elemente.
      */
      inline-size: min(
        max(0px, calc(100% - 2 * var(--akis-media-inset))),
        clamp(28rem, 55vw, 44rem)
      );
      justify-self: center;
    }

    .akis-feature-block__media::before {
      /*
        Das Pseudoelement übernimmt die Rundung der Karte, sodass keine harten
        Kanten sichtbar bleiben.
      */
      border-radius: var(--radius-lg, 22px);
    }

    .akis-feature-block__media img {
      /*
        Mehr Bildfläche für die Tablet-Ansicht und keine Rundungen.
        Das Größenlimit hält die Darstellung innerhalb der Containerbreite.
        Ein weiches Auslaufen vermeidet abrupte Bildenden.
      */
      width: 100%;
      max-width: clamp(24rem, 52vw, 42rem);
      margin-inline: auto;
      border-radius: 0.8rem;
      box-shadow: 0 18px 60px -40px rgba(15, 23, 42, 0.48);
    }

    .akis-feature-block__media figcaption {
      font-size: 0.9rem;
      color: var(--text-muted, rgba(15, 23, 42, 0.66));
    }

    body.dark-theme .akis-feature-block__media {
      /*
        Im Dunkelmodus erhält der Mediencontainer eine geschlossene Fläche mit
        sanfter Akzentkante, damit Bildunterschriften nicht auf transparenten
        Ebenen liegen.
      */
      background: linear-gradient(
        150deg,
        rgba(10, 18, 32, 0.94),
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.28)
      );
      border: 1px solid rgba(136, 156, 206, 0.35);
      box-shadow: 0 32px 82px -46px rgba(3, 8, 18, 0.78);
      color: rgba(232, 238, 255, 0.9);
    }

    body.dark-theme .akis-feature-block__media figcaption {
      /* Leicht aufgehellter Sekundärtext für bessere Lesbarkeit. */
      color: rgba(210, 220, 245, 0.78);
    }

    body.dark-theme .akis-list li,
    body.dark-theme .akis-overview__list {
      /* Dezenter Sekundärton für Listenpunkte im Dunkelmodus. */
      color: rgba(224, 233, 255, 0.78);
    }

    body.dark-theme .akis-gallery__item {
      /* Abgedunkelte Kartenfläche für Screenshots und Beschriftungen. */
      background: linear-gradient(
        160deg,
        rgba(11, 20, 36, 0.92),
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.26)
      );
      border: 1px solid rgba(122, 146, 205, 0.32);
      box-shadow: 0 28px 78px -48px rgba(4, 10, 22, 0.74);
      color: rgba(236, 242, 255, 0.92);
    }

    body.dark-theme .akis-gallery__item::before {
      background: radial-gradient(
        circle at top,
        rgba(var(--accent-color-rgb, 85, 105, 255), 0.34),
        transparent 70%
      );
      opacity: 0.4;
    }

    body.dark-theme .akis-gallery__item figcaption {
      color: rgba(209, 220, 245, 0.8);
    }

    @media (min-width: 720px) {
      .akis-overview {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      }

      .akis-feature-block__grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }
    }

    @media (min-width: 960px) {
      .akis-feature-block {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        align-items: start;
      }

      .akis-feature-block__intro,
      .akis-feature-block__grid {
        grid-column: 1 / 2;
      }

      .akis-feature-block__media {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
        position: sticky;
        top: clamp(4rem, 8vw, 6rem);
        align-self: start;
      }
    }

    .akis,
    .onliu,
    .solutions {
      /* Harmonisiert die vertikalen Abstände der Kernbereiche. */
      padding-block: clamp(2.8rem, 5vw, 4.6rem);
    }
  
    .akis-grid,
    .onliu-grid,
    .calculator-intro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: clamp(1.6rem, 3.5vw, 2.8rem);
      align-items: center;
    }
  
    .akis-list,
    .onliu-list {
      display: grid;
      gap: 0.65rem;
      padding-left: 1.2rem;
    }

    .akis-list li,
    .onliu-list li {
      color: var(--text-color, #1e293b);
    }

    body.dark-theme .onliu-list li {
      /* Listenpunkte behalten im Dunkelmodus eine dezente Sekundärfarbe. */
      color: rgba(220, 230, 250, 0.82);
    }

    /*
      Screenshot-Galerie der AKIS-Seite.
      Setzt auf flexible Karten, damit Bilder samt Beschriftung sauber
      einrasten und im Dunkelmodus weiterhin kontrastreich bleiben.
    */
    .akis-gallery {
      display: grid;
      gap: clamp(2rem, 4vw, 3.2rem);
      align-items: start;
    }

    .akis-gallery__intro {
      display: grid;
      gap: clamp(0.9rem, 2.4vw, 1.6rem);
      max-width: min(640px, 90vw);
    }

    .akis-gallery__grid {
      display: grid;
      gap: clamp(1.4rem, 3vw, 2.4rem);
    }

    .akis-gallery__item {
      display: grid;
      gap: clamp(0.75rem, 2vw, 1.2rem);
      padding: clamp(1.2rem, 2.6vw, 1.8rem);
      text-align: center;
      border-radius: 0;
    }

    .akis-gallery__item::before {
      border-radius: 0;
    }

    .akis-gallery__item img {
      /*
        Größere Screenshots ohne abgerundete Kanten für ein technisches Erscheinungsbild.
        Die Maximalbreite wurde erhöht, damit Produktbilder auf großen Displays deutlich
        präsenter erscheinen, ohne Mobilgeräte zu benachteiligen.
      */
      width: min(100%, clamp(34rem, 68vw, 46rem));
      height: auto;
      border-radius: 0;
      box-shadow: 0 26px 80px -50px rgba(15, 23, 42, 0.38);
    }

    .akis-gallery__item figcaption {
      font-size: 0.92rem;
      color: var(--text-muted, rgba(15, 23, 42, 0.7));
    }

    @media (min-width: 720px) {
      .akis-gallery__grid {
        /* Größere Mindestbreite, damit die Galerie auf dem Desktop luftiger wirkt. */
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
      }
    }

    @media (min-width: 1120px) {
      .akis-gallery__grid {
        /*
          Auf wirklich breiten Ansichten zeigen wir größere Karten, damit die
          Screenshots nahezu in Originalgröße wirken und Texte klar lesbar bleiben.
        */
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
      }
    }

  /* -------------------------
   * Partner & Slider
   * ------------------------- */
    .partners {
      background: rgba(255, 255, 255, 0.9);
      border-radius: clamp(2rem, 4vw, 3rem);
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
      box-shadow: var(--shadow-elevated);
      padding-block: clamp(3rem, 6vw, 4.5rem);
    }
  
    .partner-slider {
      position: relative;
      overflow: hidden;
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
      padding: clamp(1.8rem, 3.2vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
      border-radius: clamp(1.8rem, 3.6vw, 2.8rem);
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.82),
        rgba(241, 248, 255, 0.74)
      );
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
      box-shadow: 0 30px 80px -58px rgba(15, 23, 42, 0.35);
    }
  
    .partner-slider::before,
    .partner-slider::after {
      content: "";
      position: absolute;
      inset: 0;
      width: clamp(60px, 10vw, 120px);
      pointer-events: none;
      z-index: 1;
    }
  
    .partner-slider::before {
      left: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), transparent);
    }
  
    .partner-slider::after {
      right: 0;
      background: linear-gradient(270deg, rgba(255, 255, 255, 0.98), transparent);
    }
  
    .logos {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: clamp(160px, 18vw, 220px);
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
      animation: marquee 24s linear infinite;
    }
  
    @keyframes marquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }
  
    @media (prefers-reduced-motion: reduce) {
      .logos {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transform: none !important;
      }
    }

  /* -------------------------
   * OnliU Produktseite
   * ------------------------- */
    /*
      Abschnitt: Kartenüberblick.
      Grid mit drei Kacheln, die die ehemalige Accordion-Struktur ersetzen.
    */
    .onliu-overview__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: clamp(1.6rem, 3vw, 2.6rem);
    }
  
    .onliu-overview__card {
      position: relative;
      display: grid;
      gap: clamp(0.9rem, 2vw, 1.4rem);
      padding: clamp(1.4rem, 3vw, 2rem);
      border-radius: clamp(1.4rem, 3vw, 2rem);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.14);
      background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.92),
            rgba(240, 245, 255, 0.78)
          )
          padding-box,
        linear-gradient(
            150deg,
            rgba(85, 105, 255, 0.25),
            rgba(53, 210, 255, 0.12)
          )
          border-box;
      box-shadow: 0 30px 80px -56px rgba(15, 23, 42, 0.55);
      overflow: hidden;
    }

    body.dark-theme .onliu-overview__card {
      /* Dunkle Kartenfläche für maximale Lesbarkeit auf der Produktseite. */
      background: linear-gradient(
        155deg,
        rgba(9, 16, 32, 0.94),
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.32)
      );
      border: 1px solid rgba(120, 148, 210, 0.36);
      box-shadow: 0 34px 88px -50px rgba(3, 8, 20, 0.8);
      color: rgba(232, 238, 255, 0.9);
    }

    body.dark-theme .onliu-overview__card img {
      box-shadow: 0 24px 70px -46px rgba(2, 6, 15, 0.7);
    }

    .onliu-overview__icon {
      width: clamp(40px, 8vw, 56px);
      height: clamp(40px, 8vw, 56px);
      border-radius: 16px;
      background: radial-gradient(
        circle at 30% 30%,
        #5569ff,
        rgba(53, 210, 255, 0.25)
      );
      box-shadow: 0 18px 48px -30px rgba(85, 105, 255, 0.65);
    }

    body.dark-theme .onliu-overview__icon {
      background: radial-gradient(
        circle at 30% 30%,
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.9),
        rgba(var(--accent-color-cyan-rgb, 69, 210, 255), 0.4)
      );
      box-shadow: 0 20px 52px -28px rgba(60, 110, 255, 0.68);
    }
  
    .onliu-overview__card img {
      width: 100%;
      height: auto;
      border-radius: clamp(1rem, 3vw, 1.6rem);
      object-fit: cover;
    }
  
    /*
      Abschnitt: Differenzierung – Layout mit Text und Bild nebeneinander.
    */
    .onliu-differentiation {
      position: relative;
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    }
  
    .onliu-differentiation::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: clamp(2rem, 4vw, 2.8rem);
      background: linear-gradient(
        150deg,
        rgba(15, 23, 42, 0.92),
        rgba(73, 99, 255, 0.78)
      );
      opacity: 0.9;
      filter: saturate(110%);
      z-index: -1;
    }
  
    .onliu-differentiation__layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(1.8rem, 4vw, 2.8rem);
      padding: clamp(2.2rem, 5vw, 3.2rem);
      border-radius: clamp(2rem, 4vw, 2.8rem);
      color: #f8fafc;
    }
  
    .onliu-differentiation__content p,
    .onliu-differentiation__content li {
      color: rgba(248, 250, 252, 0.88);
    }
  
    .onliu-differentiation__media {
      display: grid;
      place-items: end;
    }
  
    .onliu-differentiation__media img {
      width: min(100%, 460px);
      border-radius: clamp(1.6rem, 3vw, 2.4rem);
      box-shadow: 0 36px 90px -40px rgba(4, 9, 20, 0.65);
    }
  
    /*
      Abschnitt: Modulgrid mit luftigen Kacheln.
    */
    .onliu-modules__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(1.4rem, 3vw, 2.4rem);
    }
  
    .onliu-modules__card {
      display: grid;
      gap: clamp(0.9rem, 2vw, 1.4rem);
      padding: clamp(1.6rem, 3vw, 2.2rem);
      border-radius: clamp(1.6rem, 3vw, 2.4rem);
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.16);
      box-shadow: 0 28px 70px -48px rgba(15, 23, 42, 0.42);
    }

    body.dark-theme .onliu-modules__card {
      /* Dunkle Modulkarte mit klarer Kontur für Feature-Aufzählungen. */
      background: linear-gradient(
        160deg,
        rgba(11, 20, 36, 0.9),
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.26)
      );
      border: 1px solid rgba(126, 152, 214, 0.34);
      box-shadow: 0 32px 84px -50px rgba(2, 7, 18, 0.78);
      color: rgba(228, 235, 255, 0.88);
    }
  
    .onliu-modules__card h3 {
      margin: 0;
    }
  
    .onliu-modules__card ul {
      margin: 0;
    }
  
    /*
      Abschnitt: DSGVO-Highlight.
    */
    .onliu-privacy__card {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: clamp(1.2rem, 3vw, 2rem);
      padding: clamp(1.8rem, 4vw, 2.6rem);
      border-radius: clamp(1.8rem, 3.6vw, 2.6rem);
      background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.92),
            rgba(235, 245, 255, 0.78)
          )
          padding-box,
        linear-gradient(160deg, rgba(73, 99, 255, 0.35), rgba(53, 210, 255, 0.2))
          border-box;
      border: 1px solid transparent;
      box-shadow: 0 28px 90px -52px rgba(15, 23, 42, 0.48);
    }

    body.dark-theme .onliu-privacy__card {
      /* Dunkle Verlaufsfläche mit Akzentkante für die DSGVO-Hervorhebung. */
      background: linear-gradient(
        150deg,
        rgba(9, 18, 34, 0.95),
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.34)
      );
      border: 1px solid rgba(132, 160, 220, 0.38);
      box-shadow: 0 34px 92px -52px rgba(3, 7, 18, 0.82);
      color: rgba(232, 238, 255, 0.92);
    }
  
    .onliu-privacy__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      background: linear-gradient(
        140deg,
        rgba(73, 99, 255, 0.92),
        rgba(53, 210, 255, 0.82)
      );
      color: #f8fafc;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    body.dark-theme .onliu-privacy__badge {
      background: linear-gradient(
        150deg,
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.78),
        rgba(var(--accent-color-cyan-rgb, 69, 210, 255), 0.6)
      );
      color: #0a1628;
      box-shadow: 0 22px 54px -32px rgba(58, 108, 255, 0.55);
    }
  
    /*
      Abschnitt: Feature-Katalog.
    */
    .onliu-features__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: clamp(1.4rem, 3vw, 2.2rem);
    }
  
    .onliu-features__grid article {
      display: grid;
      gap: clamp(0.8rem, 2vw, 1.3rem);
      padding: clamp(1.4rem, 3vw, 2rem);
      border-radius: clamp(1.2rem, 3vw, 2rem);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
      box-shadow: 0 24px 60px -44px rgba(15, 23, 42, 0.35);
    }

    body.dark-theme .onliu-features__grid article {
      background: linear-gradient(
        150deg,
        rgba(10, 18, 32, 0.9),
        rgba(var(--accent-color-rgb, 90, 109, 255), 0.28)
      );
      border: 1px solid rgba(126, 152, 214, 0.34);
      box-shadow: 0 30px 80px -48px rgba(3, 8, 18, 0.78);
      color: rgba(228, 235, 255, 0.88);
    }

    body.dark-theme .onliu-features__grid article p {
      color: rgba(209, 220, 245, 0.82);
    }

    body.dark-theme .onliu-features__grid .button {
      border-color: rgba(var(--accent-color-rgb, 90, 109, 255), 0.5);
    }
  
    .onliu-features__grid .button {
      justify-self: start;
    }
  
    /*
      Abschnitt: Abschluss-CTA.
    */
    .onliu-cta {
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    }
  
    .onliu-cta__content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: center;
      gap: clamp(1.4rem, 3vw, 2.4rem);
      padding: clamp(2rem, 4.8vw, 3rem);
      border-radius: clamp(2rem, 4vw, 3rem);
      background: linear-gradient(
        145deg,
        rgba(15, 23, 42, 0.94),
        rgba(73, 99, 255, 0.86)
      );
      color: #f8fafc;
      box-shadow: 0 34px 92px -48px rgba(3, 7, 18, 0.76);
    }
  
    .onliu-cta__actions {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(0.75rem, 2vw, 1.2rem);
    }

  /* -------------------------
   * OnliU Produktseite
   * ------------------------- */
    /*
      Abschnitt: Kartenüberblick.
      Grid mit drei Kacheln, die die ehemalige Accordion-Struktur ersetzen.
    */
    .onliu-overview__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: clamp(1.6rem, 3vw, 2.6rem);
    }
  
    .onliu-overview__card {
      position: relative;
      display: grid;
      gap: clamp(0.9rem, 2vw, 1.4rem);
      padding: clamp(1.4rem, 3vw, 2rem);
      border-radius: clamp(1.4rem, 3vw, 2rem);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.14);
      background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.92),
            rgba(240, 245, 255, 0.78)
          )
          padding-box,
        linear-gradient(
            150deg,
            rgba(85, 105, 255, 0.25),
            rgba(53, 210, 255, 0.12)
          )
          border-box;
      box-shadow: 0 30px 80px -56px rgba(15, 23, 42, 0.55);
      overflow: hidden;
    }
  
    .onliu-overview__icon {
      width: clamp(40px, 8vw, 56px);
      height: clamp(40px, 8vw, 56px);
      border-radius: 16px;
      background: radial-gradient(
        circle at 30% 30%,
        #5569ff,
        rgba(53, 210, 255, 0.25)
      );
      box-shadow: 0 18px 48px -30px rgba(85, 105, 255, 0.65);
    }
  
    .onliu-overview__card img {
      width: 100%;
      height: auto;
      border-radius: clamp(1rem, 3vw, 1.6rem);
      object-fit: cover;
    }
  
    /*
      Abschnitt: Differenzierung – Layout mit Text und Bild nebeneinander.
    */
    .onliu-differentiation {
      position: relative;
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    }
  
    .onliu-differentiation::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: clamp(2rem, 4vw, 2.8rem);
      background: linear-gradient(
        150deg,
        rgba(15, 23, 42, 0.92),
        rgba(73, 99, 255, 0.78)
      );
      opacity: 0.9;
      filter: saturate(110%);
      z-index: -1;
    }
  
    .onliu-differentiation__layout {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(1.8rem, 4vw, 2.8rem);
      padding: clamp(2.2rem, 5vw, 3.2rem);
      border-radius: clamp(2rem, 4vw, 2.8rem);
      color: #f8fafc;
    }
  
    .onliu-differentiation__content p,
    .onliu-differentiation__content li {
      color: rgba(248, 250, 252, 0.88);
    }
  
    .onliu-differentiation__media {
      display: grid;
      place-items: end;
    }
  
    .onliu-differentiation__media img {
      width: min(100%, 460px);
      border-radius: clamp(1.6rem, 3vw, 2.4rem);
      box-shadow: 0 36px 90px -40px rgba(4, 9, 20, 0.65);
    }
  
    /*
      Abschnitt: Modulgrid mit luftigen Kacheln.
    */
    .onliu-modules__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(1.4rem, 3vw, 2.4rem);
    }
  
    .onliu-modules__card {
      display: grid;
      gap: clamp(0.9rem, 2vw, 1.4rem);
      padding: clamp(1.6rem, 3vw, 2.2rem);
      border-radius: clamp(1.6rem, 3vw, 2.4rem);
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.16);
      box-shadow: 0 28px 70px -48px rgba(15, 23, 42, 0.42);
    }
  
    .onliu-modules__card h3 {
      margin: 0;
    }
  
    .onliu-modules__card ul {
      margin: 0;
    }
  
    /*
      Abschnitt: DSGVO-Highlight.
    */
    .onliu-privacy__card {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: clamp(1.2rem, 3vw, 2rem);
      padding: clamp(1.8rem, 4vw, 2.6rem);
      border-radius: clamp(1.8rem, 3.6vw, 2.6rem);
      background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.92),
            rgba(235, 245, 255, 0.78)
          )
          padding-box,
        linear-gradient(160deg, rgba(73, 99, 255, 0.35), rgba(53, 210, 255, 0.2))
          border-box;
      border: 1px solid transparent;
      box-shadow: 0 28px 90px -52px rgba(15, 23, 42, 0.48);
    }
  
    .onliu-privacy__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      background: linear-gradient(
        140deg,
        rgba(73, 99, 255, 0.92),
        rgba(53, 210, 255, 0.82)
      );
      color: #f8fafc;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
  
    /*
      Abschnitt: Feature-Katalog.
    */
    .onliu-features__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: clamp(1.4rem, 3vw, 2.2rem);
    }
  
    .onliu-features__grid article {
      display: grid;
      gap: clamp(0.8rem, 2vw, 1.3rem);
      padding: clamp(1.4rem, 3vw, 2rem);
      border-radius: clamp(1.2rem, 3vw, 2rem);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
      box-shadow: 0 24px 60px -44px rgba(15, 23, 42, 0.35);
    }
  
    .onliu-features__grid .button {
      justify-self: start;
    }
  
    /*
      Abschnitt: Abschluss-CTA.
    */
    .onliu-cta {
      margin-inline: clamp(0.75rem, 3vw, 1.6rem);
    }
  
    .onliu-cta__content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: center;
      gap: clamp(1.4rem, 3vw, 2.4rem);
      padding: clamp(2rem, 4.8vw, 3rem);
      border-radius: clamp(2rem, 4vw, 3rem);
      background: linear-gradient(
        145deg,
        rgba(15, 23, 42, 0.94),
        rgba(73, 99, 255, 0.86)
      );
      color: #f8fafc;
      box-shadow: 0 34px 92px -48px rgba(3, 7, 18, 0.76);
    }
  
      .onliu-cta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(0.75rem, 2vw, 1.2rem);
      }
    /*
      Responsive Feinschliff für mobile Geräte.
    */
    @media (max-width: 720px) {
      .onliu-privacy__card {
        grid-template-columns: 1fr;
        justify-items: start;
      }
  
      .onliu-differentiation::before {
        inset: -10%;
      }
    }

  /* -------------------------
   * FAQ und Details Elemente
   * ------------------------- */
    details {
      border-radius: clamp(1.2rem, 2.8vw, 1.8rem);
      border: 1px solid rgba(var(--accent-color-rgb, 85, 105, 255), 0.12);
      background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.9),
        rgba(243, 248, 255, 0.78)
      );
      padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.9rem);
      transition:
        transform var(--duration-standard) var(--ease-soft),
        box-shadow var(--duration-standard) var(--ease-soft);
    }
  
    details + details {
      margin-top: 1rem;
    }
  
    details[open] {
      transform: translateY(-4px);
      box-shadow: 0 26px 70px -46px rgba(15, 23, 42, 0.38);
    }
  
    summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--text-color, #1e293b);
    }
  
    details p {
      margin-top: 0.75rem;
    }

  /* -------------------------
   * Abschluss-CTA & Footer
   * ------------------------- */
    .end-cta {
      position: sticky;
      bottom: clamp(1.25rem, 4vw, 2.5rem);
      margin-inline: auto;
      max-width: min(1100px, 92vw);
      padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.8rem, 3.2vw, 2.6rem);
      border-radius: var(--radius-xl, 28px);
      background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.92),
        rgba(73, 99, 255, 0.82)
      );
      color: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(1.2rem, 3vw, 2rem);
      box-shadow: 0 30px 90px -42px rgba(15, 23, 42, 0.68);
      transform: translateY(120%);
      opacity: 0;
      transition:
        transform var(--duration-standard) var(--ease-soft),
        opacity var(--duration-quick) var(--ease-soft);
    }
  
    .end-cta.show {
      transform: translateY(0);
      opacity: 1;
    }
  
    .end-cta.nav-offset {
      transform: translate3d(0, -90px, 0);
    }
  
    .end-cta p {
      color: inherit;
      margin: 0;
      max-width: 52ch;
    }
  
    /* Footer */
    /* ============================================ */
    /* Schlankes Layout mit klaren Clustern und wenig vertikalem Platzbedarf */
    /* ============================================ */

    .footer {
      /*
        Im hellen Modus bleibt der Footer bewusst dunkel. Sämtliche Texte werden
        konsequent auf kontraststarke Weiß- und Blautöne gesetzt, damit jede
        Schriftzeile auf der dunklen Fläche klar lesbar bleibt. Die Farbwerte
        wurden diesmal deutlich heller gewählt, damit der geforderte Effekt auch
        in produktiven Builds sichtbar ist. Durch eine zusätzliche Aufhellung
        der Grundfläche wirken Überschriften und Logos nun deutlich brillanter.
        Zusätzlich heben wir den Hintergrund leicht an, sodass die Wortmarke
        nicht mehr im Verlauf verschwindet.
      */
      --footer-surface: linear-gradient(180deg, #3a62a2 0%, #27497d 100%);
      --footer-border: rgba(198, 220, 255, 0.6);
      --footer-text: #ffffff;
      --footer-muted: rgba(255, 255, 255, 0.95);
      /*
        Titel und Navigationsüberschriften werden bewusst in reinem Weiß gesetzt,
        damit der Kunde die gewünschte maximale Helligkeit erhält und der Kontrast
        auf jedem Monitor konstant bleibt.
      */
      --footer-heading: #ffffff;
      --footer-highlight: #f9fbff;
      --footer-highlight-strong: #ffffff;
      --footer-panel: rgba(58, 94, 148, 0.58);
      --footer-meta-surface: linear-gradient(180deg, rgba(24, 44, 72, 0.86) 0%, rgba(14, 26, 44, 0.94) 100%);
      --footer-social-bg: rgba(82, 116, 170, 0.66);
      background: var(--footer-surface);
      color: var(--footer-text);
      margin-top: clamp(3rem, 6vw, 5rem);
      /*
        Reduzierte vertikale Innenabstände lassen den Grundfooter sichtbar
        schmaler wirken, ohne Inhalte zu quetschen.
      */
      padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(0.9rem, 2.2vw, 1.4rem);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .footer::before {
      /*
        Großflächiges Wasserzeichen mit dem Aktuellis-Logo. Die höhere Deckkraft
        sorgt dafür, dass das komplette Wortbild sichtbar ist. Dank zusätzlicher
        Sättigung und Helligkeit bleiben die Konturen auch auf helleren Monitoren
        klar erkennbar, ohne das restliche Layout zu überstrahlen.
      */
      content: '';
      position: absolute;
      inset: -20% -10% auto -10%;
      height: clamp(420px, 48vw, 620px);
      background: url('../../images/Aktuellis_logo_short_color.png') no-repeat center / contain;
      /*
        Erhöhte Deckkraft und Helligkeit lassen das Aktuellis-Wasserzeichen auch
        in Bereichen mit hellerem Verlauf klar durchscheinen. Der Blendmodus
        "lighten" verhindert dabei, dass dunkle Footerflächen aufgehellt werden
        müssen, was der Performance zugutekommt.
      */
      opacity: 0.78;
      filter: saturate(210%) brightness(265%) contrast(148%) drop-shadow(0 0 32px rgba(255, 255, 255, 0.32));
      mix-blend-mode: screen;
      animation: footerWatermarkFloat 24s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
      transform-origin: center;
    }

    .dark-theme .footer {
      /*
        Auch im dunklen Modus nutzen wir bewusst helle Akzentwerte, damit Texte
        und Steuer-Elemente nicht abdunkeln. Die Palette bleibt damit identisch
        kontrastreich wie in der hellen Variante und folgt ebenfalls der neuen,
        helleren Grundstimmung. Die Grundfläche wird dazu leicht aufgehellt.
      */
      --footer-surface: linear-gradient(180deg, #234f8c 0%, #2d5fa6 100%);
      --footer-border: rgba(204, 226, 255, 0.58);
      --footer-text: #ffffff;
      --footer-muted: rgba(255, 255, 255, 0.95);
      --footer-heading: #ffffff;
      --footer-highlight: #f4f7ff;
      --footer-panel: rgba(64, 96, 148, 0.58);
      --footer-meta-surface: linear-gradient(180deg, rgba(34, 54, 88, 0.82) 0%, rgba(16, 30, 52, 0.9) 100%);
      --footer-social-bg: rgba(74, 106, 156, 0.62);
    }

    .dark-theme .footer::before {
      opacity: 0.6;
      filter: saturate(190%) brightness(250%) contrast(140%) drop-shadow(0 0 28px rgba(255, 255, 255, 0.28));
      mix-blend-mode: screen;
    }

    @supports not (mix-blend-mode: screen) {
      /*
        Fallback für Browser ohne Mix-Blend-Unterstützung. Durch eine helle
        Verlaufsebene bleibt das Logo trotzdem sichtbar, ohne dass zusätzliche
        Bilder geladen werden müssen.
      */
      .footer::before,
      .dark-theme .footer::before {
        mix-blend-mode: normal;
        opacity: 0.82;
        filter: saturate(180%) brightness(240%) contrast(142%);
      }
    }

    /*
      Die folgenden Varianten koppeln die Schriftfarben im Footer direkt an die
      gewählte Oberflächenklasse. So bleibt die Lesbarkeit erhalten, egal ob
      eine dunkle oder helle Hintergrundfläche eingesetzt wird.
    */
    .footer.surface-dark {
      /*
        Jede dunkle Oberfläche erhält eine definierte Farbpalette mit heller
        Schrift und leicht getönten Akzenten. So bleibt der Kontrast auch bei
        wiederverwendeten Footer-Instanzen zuverlässig erhalten. Für maximale
        Lesbarkeit orientieren sich die Farbwerte an der aufgehellten Basis.
      */
      --footer-text: #ffffff;
      --footer-muted: rgba(244, 248, 255, 0.9);
      --footer-heading: #ffffff;
      --footer-highlight: #f2f6ff;
      --footer-highlight-strong: #ffffff;
      --footer-border: rgba(144, 176, 230, 0.38);
      --footer-panel: rgba(32, 55, 96, 0.52);
      --footer-meta-surface: linear-gradient(180deg, rgba(9, 20, 40, 0.9) 0%, rgba(5, 12, 24, 0.95) 100%);
      --footer-social-bg: rgba(43, 72, 118, 0.62);
      color-scheme: dark;
      color: var(--footer-text);
    }

    .footer.surface-light {
      /*
        Helle Oberflächen wechseln konsequent auf dunkle Schriftfarben, damit
        Inhalte auch im Light- oder Dark-Mode klar lesbar bleiben.
      */
      --footer-text: var(--text-on-light);
      --footer-muted: var(--muted-on-light);
      --footer-heading: var(--text-on-light);
      --footer-highlight: var(--accent-color);
      --footer-highlight-strong: var(--accent-color-strong);
      --footer-panel: rgba(255, 255, 255, 0.78);
      --footer-border: rgba(16, 24, 39, 0.12);
      --footer-meta-surface: linear-gradient(180deg, rgba(236, 242, 255, 0.86) 0%, rgba(215, 225, 244, 0.94) 100%);
      --footer-social-bg: rgba(16, 24, 39, 0.08);
      color-scheme: light;
      color: var(--footer-text);
    }

    .footer__body {
      position: relative;
      display: grid;
      /*
        Weniger vertikale Polsterung reduziert die Höhe sichtbar, während die
        Spaltenbreiten gleichmäßiger verteilt werden.
      */
      gap: clamp(1.4rem, 3vw, 2.4rem);
      grid-template-columns: minmax(260px, 1.2fr) minmax(210px, 1fr) minmax(220px, 1fr);
      /*
        Zusätzliche Reduktion der Innenabstände macht den Footer spürbar
        schmaler, ohne die Lesbarkeit der Inhalte zu beeinträchtigen.
      */
      padding-block: clamp(0.85rem, 2vw, 1.25rem);
      border-bottom: 1px solid var(--footer-border);
      isolation: isolate;
      z-index: 1;
    }

    /*
      Footer-Container etwas breiter ziehen, damit die Inhalte entspannter wirken
      und sich die drei Spalten nicht gegenseitig bedrängen.
    */
    .footer .container {
      /*
        Der Container darf etwas breiter werden, damit die drei Spalten atmen können.
      */
      max-width: min(1440px, 97vw);
    }

    .footer__body::before {
      /*
        Ein sanfter Glanz unterstützt die helle Gestaltung. Der Blendmodus bleibt
        neutral, damit der Effekt auch im hellen Theme nicht abdunkelt.
      */
      content: '';
      position: absolute;
      inset: 0;
      border-radius: clamp(1.4rem, 3vw, 2.2rem);
      background: radial-gradient(circle at top right, rgba(173, 210, 255, 0.28), transparent 62%);
      opacity: 0.35;
      pointer-events: none;
    }

    .dark-theme .footer__body::before {
      background: radial-gradient(circle at top right, rgba(173, 210, 255, 0.22), transparent 60%);
      opacity: 0.45;
      mix-blend-mode: screen;
    }

    .footer__brand {
      display: grid;
      gap: 1.05rem;
      align-content: start;
    }

    .footer__logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /*
        Das Logo wird spürbar größer dargestellt, bleibt aber responsiv.
      */
      width: clamp(140px, 16vw, 200px);
      padding: 0.9rem;
      border-radius: 1.2rem;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(109, 144, 201, 0.28);
      transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .dark-theme .footer__logo {
      background: rgba(18, 38, 66, 0.68);
      border-color: rgba(122, 182, 255, 0.38);
    }

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

    .footer__logo:hover,
    .footer__logo:focus-visible {
      transform: translateY(-2px);
      border-color: var(--footer-highlight);
    }

    .footer__title {
      margin: 0;
      font-size: clamp(1.32rem, 2.2vw, 1.75rem);
      font-weight: 500;
      line-height: 1.3;
      color: var(--footer-heading);
      /*
        Ein sanfter Leuchtsaum erhöht den lokalen Kontrast ohne die Leistung zu
        beeinträchtigen, da lediglich ein einzelner Shadow gerendert wird.
      */
      text-shadow: 0 0 22px rgba(255, 255, 255, 0.45);
    }

    .footer__description {
      margin: 0;
      color: var(--footer-muted);
      font-size: 0.95rem;
      line-height: 1.55;
      max-width: 48ch;
    }

    .footer__actions {
      display: flex;
      flex-wrap: wrap;
      /*
        Kompaktere Abstände halten die Button-Gruppe schlank und verringern
        den Gesamteindruck der Höhe.
      */
      gap: 0.6rem;
    }

    .footer__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem 1.1rem;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 500;
      font-size: 0.88rem;
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    }

    .footer__action:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.5);
      outline-offset: 3px;
    }

    .footer__action--primary {
      /*
        Die Primäraktion nutzt nun ebenfalls den dunklen Verlauf und bleibt so
        klar lesbar, obwohl der Footer im hellen Modus Weiß als Schriftfarbe
        verwendet.
      */
      background: linear-gradient(135deg, #2f70e6 0%, #1b4f9f 100%);
      color: #f6f9ff;
      box-shadow: 0 16px 28px -18px rgba(15, 40, 88, 0.58);
    }

    .footer__action--primary:hover,
    .footer__action--primary:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 22px 38px -22px rgba(27, 66, 138, 0.52);
    }

    .footer__action--ghost {
      background: var(--footer-panel);
      color: var(--footer-text);
      border-color: rgba(148, 182, 238, 0.46);
    }

    .footer__action--ghost:hover,
    .footer__action--ghost:focus-visible {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(172, 204, 255, 0.55);
      transform: translateY(-2px);
    }

    .footer__navigation {
      display: grid;
      gap: clamp(1.2rem, 2.4vw, 2rem);
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .footer__nav-column {
      display: grid;
      gap: 0.75rem;
      align-content: start;
    }

    /*
      Gruppentitel im Footer bewusst kontrastreich gestalten, damit sie sich klar von
      der Linkliste unterscheiden. Weißer, kräftiger Text unterstützt die Lesbarkeit
      auf dem dunklen Hintergrund.
    */
    .footer__nav-title {
      margin: 0;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--footer-heading);
      font-weight: 700;
      /*
        Auch die Navigations-Titel erhalten denselben Leuchteffekt, damit alle
        Überschriften konsistent heller wahrgenommen werden.
      */
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.36);
    }

    .footer__nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      /*
        Geringere vertikale Abstände verkürzen die Spalte sichtbar, ohne die
        Klickflächen der Links zu beeinträchtigen.
      */
      gap: 0.55rem;
      font-size: 0.95rem;
    }

    .footer__nav-list a {
      color: var(--footer-highlight);
      text-decoration: none;
      font-weight: 400;
      line-height: 1.45;
      transition: color 0.2s ease;
    }

    .footer__nav-list a:hover,
    .footer__nav-list a:focus-visible {
      color: var(--footer-highlight-strong);
    }

    .footer__contact {
      display: grid;
      gap: 0.85rem;
      align-content: start;
    }

    .footer__address {
      margin: 0;
      font-style: normal;
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--footer-text);
    }

    .footer__contact-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.55rem;
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .footer__contact-list a {
      color: var(--footer-highlight);
      text-decoration: none;
      display: inline-flex;
      gap: 0.35rem;
      align-items: center;
      line-height: 1.45;
      transition: color 0.2s ease;
    }

    .footer__contact-list a span {
      color: var(--footer-muted);
      font-weight: 400;
    }

    .footer__contact-list a:hover,
    .footer__contact-list a:focus-visible {
      color: var(--footer-highlight-strong);
    }

    .footer__social {
      display: flex;
      /*
        Die Icon-Leiste rückt durch den kleineren Abstand näher zusammen und
        reduziert so ungenutzten Raum.
      */
      gap: 0.6rem;
    }

    .footer__social a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--footer-social-bg);
      border: 1px solid rgba(132, 166, 221, 0.42);
      color: var(--footer-highlight-strong);
      transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .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(162, 196, 255, 0.68);
      background: rgba(255, 255, 255, 0.88);
    }

    .dark-theme .footer__social a:hover,
    .dark-theme .footer__social a:focus-visible {
      border-color: rgba(196, 218, 255, 0.76);
      background: rgba(58, 92, 144, 0.58);
    }

    .footer__meta {
      /*
        Schlankere Abschlussleiste mit leicht aufgehellter Fläche für bessere
        Abgrenzung und weniger vertikalen Platzbedarf.
      */
      padding-block: clamp(0.6rem, 1.8vw, 0.95rem);
      background: var(--footer-meta-surface);
      position: relative;
      z-index: 1;
    }

    .footer__meta-inner {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(0.6rem, 1.6vw, 1.2rem);
      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;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(0.75rem, 1.8vw, 1.3rem);
      font-size: 0.9rem;
    }

    .footer__legal-list a {
      color: var(--footer-highlight);
      text-decoration: none;
      font-weight: 400;
      transition: color 0.2s ease;
    }

    .footer__legal-list a:hover,
    .footer__legal-list a:focus-visible {
      color: var(--footer-highlight-strong);
    }

    .footer__meta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      align-items: center;
    }

    .footer__scroll,
    .footer__meta-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      /*
        Schlankere Buttons sparen Fläche, bleiben aber über die großzügige
        Breite weiterhin gut klickbar.
      */
      padding: 0.4rem 1.05rem;
      border-radius: 999px;
      border: 1px solid var(--footer-border);
      background: rgba(255, 255, 255, 0.34);
      color: var(--footer-highlight-strong);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .dark-theme .footer__scroll,
    .dark-theme .footer__meta-button {
      /*
        In der dunklen Variante nutzen die Steuer-Buttons nun ebenfalls Weiß als
        Grundfarbe. Dadurch wirken sie ruhiger und erfüllen die gewünschte hohe
        Lesbarkeit.
      */
      background: rgba(255, 255, 255, 0.1);
      color: var(--footer-text);
    }

    .footer__scroll:hover,
    .footer__scroll:focus-visible,
    .footer__meta-button:hover,
    .footer__meta-button:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(109, 144, 201, 0.55);
      background: rgba(255, 255, 255, 0.5);
      color: var(--footer-text);
    }

    .dark-theme .footer__scroll:hover,
    .dark-theme .footer__scroll:focus-visible,
    .dark-theme .footer__meta-button:hover,
    .dark-theme .footer__meta-button:focus-visible {
      background: rgba(255, 255, 255, 0.22);
      color: var(--footer-text);
    }

    .footer__meta-button {
      text-decoration: none;
    }

    .footer__meta-button.theme-toggle {
      min-width: 0;
    }

    .footer__meta-icon {
      width: 1.1rem;
      height: 1.1rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .footer__meta-label {
      font-size: 0.82rem;
      letter-spacing: 0.02em;
      color: var(--footer-muted);
    }

    /*
      Langsame Schwebebewegung für das Wasserzeichen. Die Animation bleibt sehr
      dezent, damit keine Ablenkung entsteht und dennoch Dynamik spürbar ist.
    */
    @keyframes footerWatermarkFloat {
      0% {
        transform: translate3d(-4%, -2%, 0) scale(1);
      }

      50% {
        transform: translate3d(4%, 3%, 0) scale(1.03);
      }

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

    /* Sanfte Einblend-Animation für Footer-Inhalte */
    @keyframes footerFadeIn {
      0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .footer__body > * {
      opacity: 0;
      animation: footerFadeIn 0.8s ease forwards;
    }

    .footer__body > *:nth-child(2) {
      animation-delay: 0.08s;
    }

    .footer__body > *:nth-child(3) {
      animation-delay: 0.16s;
    }

    .footer__meta-inner {
      opacity: 0;
      animation: footerFadeIn 0.8s ease forwards 0.24s;
    }

    @media (prefers-reduced-motion: reduce) {
      .footer__body > *,
      .footer__meta-inner {
        animation: none;
        opacity: 1;
      }
    }

    @media (max-width: 1080px) {
      .footer__body {
        grid-template-columns: minmax(240px, 1.1fr) minmax(200px, 1fr);
      }
    }

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

      .footer__body > * {
        animation-delay: 0s;
      }
    }

    @media (max-width: 720px) {
      .footer__actions {
        width: 100%;
        justify-content: center;
        /*
          Auch auf schmalen Displays bleiben die Abstände moderat, damit die
          Buttons als Gruppe wahrgenommen werden.
        */
        gap: 0.5rem;
      }

      .footer__action {
        flex: 1 1 auto;
        min-width: 150px;
      }

      .footer__meta-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer__meta-actions {
        width: 100%;
        justify-content: center;
      }
    }

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

      .footer__action {
        width: 100%;
        min-width: 0;
      }

      .footer__meta-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .footer__scroll,
      .footer__meta-button {
        width: 100%;
      }
    }

  }

/* -------------------------
 * Animationen bei Sichtbarkeit
 * ------------------------- */
@layer utilities {
  .js-enabled [data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--duration-standard) var(--ease-soft),
      transform var(--duration-standard) var(--ease-soft);
  }

  .js-enabled [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

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

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

  @media (prefers-reduced-motion: reduce) {
    .hero,
    .cards,
    .logos,
    .js-enabled [data-animate],
    .js-enabled [data-animate][data-animate-stagger] > * {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
  }
}

@layer utilities {
  body.dark-theme .page-layout__aside {
    background: linear-gradient(
      165deg,
      rgba(15, 23, 42, 0.92) 0%,
      rgba(var(--primary-color-rgb, 17, 26, 47), 0.22) 100%
    );
    border-color: rgba(var(--primary-color-rgb, 17, 26, 47), 0.25);
    box-shadow: var(
      --shadow-floating,
      0 30px 70px -40px rgba(85, 105, 255, 0.32)
    );
  }

  body.dark-theme .page-layout__meta {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(var(--primary-color-rgb, 17, 26, 47), 0.32);
  }

  body.dark-theme .toc__link {
    color: rgba(148, 163, 184, 0.9);
    border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.45);
  }

  body.dark-theme .toc__link::before {
    color: rgba(148, 163, 184, 0.65);
  }

  body.dark-theme .legal-section {
    background: linear-gradient(
      170deg,
      rgba(15, 23, 42, 0.94) 0%,
      rgba(var(--primary-color-rgb, 17, 26, 47), 0.28) 100%
    );
    border-color: rgba(var(--primary-color-rgb, 17, 26, 47), 0.32);
    box-shadow: var(
      --shadow-floating,
      0 30px 70px -40px rgba(85, 105, 255),
      0.32
    );
  }

  body.dark-theme .legal-section__body a {
    border-bottom-color: rgba(var(--accent-color-rgb, 85, 105, 255), 0.55);
  }
}

/* Kompakter Footer (Design-Layer) */
.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);
}

.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;
  }
}