@charset "UTF-8";
/* ============================================================================
   AMINOLABSPRO — custom.css
   Dark Premium Scientific Lab — Designsystem, Canvas, Header, Hero,
   Sections, COA, FAQ, Newsletter, Footer.

   Aufbau
     01  Design-Tokens
     02  Reset & Basis
     03  Seamless Canvas (durchgehende Laborwelt)
     04  Typografie
     05  Layout-Utilities
     06  Buttons
     07  Header & Navigation (Flatsome)
     08  Hero
     09  Trust / Stats
     10  USP / Forschung
     11  Bestseller-Sektion
     12  Produkt-Sektion (Homepage)
     13  About / Qualität
     14  Steps
     15  COA / Laboranalysen
     16  Reviews
     17  FAQ
     18  Newsletter / CTA
     19  Rechtliches & Disclaimer
     20  Footer
     21  WhatsApp
     22  Bestehende Feature-Module (Versand, Mengenrabatt, Wünsche, …)
     23  Formulare (Contact Form 7)
     24  Animationen, Fokus, Reduced Motion

   Regeln
     - Farben, Abstände, Radien ausschließlich über Tokens.
     - !important nur dort, wo Flatsome oder Inline-Styles es erzwingen.
     - Responsive Overrides ausschließlich in responsive.css.
   ============================================================================ */


/* ============================================================
   01  DESIGN-TOKENS
   ============================================================ */

:root {

  /* --- Markenfarbe: Teal / Mint / Cyan --- */
  --alp-mint:        #6EDAB4;
  --alp-mint-light:  #8FE8CA;
  --alp-mint-dark:   #4DC49A;
  --alp-mint-deep:   #2E8B6E;

  /* --- Dunkle Laborwelt --- */
  --alp-abyss:       #050A0C;   /* tiefster Grund */
  --alp-void:        #071014;   /* Body-Basis */
  --alp-deep:        #0A171C;   /* Sektionsgrund */
  --alp-petrol:      #0B2230;   /* dunkles Petrol */
  --alp-surface:     #0E1E25;   /* Karten */
  --alp-surface-2:   #12262F;   /* gehobene Karten */
  --alp-surface-3:   #17303B;   /* Hover / aktive Fläche */

  /* --- Text --- */
  --alp-text:        #E8F2F0;
  --alp-text-strong: #F4FBF9;
  --alp-text-mid:    #9FB3B8;
  --alp-text-dim:    #6E8189;

  /* --- Linien & Glas --- */
  --alp-line:        rgba(110, 218, 180, .14);
  --alp-line-soft:   rgba(255, 255, 255, .07);
  --alp-line-strong: rgba(110, 218, 180, .32);
  --alp-glass:       rgba(18, 38, 47, .58);
  --alp-glass-2:     rgba(14, 30, 37, .74);

  /* --- Metall / Silber --- */
  --alp-silver:      #C9D6DA;
  --alp-silver-dim:  #8E9FA5;

  /* --- Typografie --- */
  --alp-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --alp-font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Radien --- */
  --alp-r-sm:  8px;
  --alp-r:     12px;
  --alp-r-lg:  18px;
  --alp-r-xl:  26px;

  /* --- Abstände --- */
  --alp-gap:        20px;
  --alp-section-y:  clamp(56px, 7vw, 104px);
  --alp-container:  1320px;
  --alp-content:    1180px;

  /* --- Schatten & Glow --- */
  --alp-shadow:       0 18px 48px rgba(0, 0, 0, .45);
  --alp-shadow-lg:    0 34px 90px rgba(0, 0, 0, .6);
  --alp-glow:         0 0 34px rgba(110, 218, 180, .28);
  --alp-glow-strong:  0 0 56px rgba(110, 218, 180, .45);
  --alp-inset-top:    inset 0 1px 0 rgba(255, 255, 255, .06);

  /* --- Bewegung --- */
  --alp-t:      .24s cubic-bezier(.2, .7, .3, 1);
  --alp-t-slow: .5s cubic-bezier(.2, .7, .3, 1);

  /* --- Kompatibilität mit bestehendem Markup ---
     Die Homepage und einige Unterseiten nutzen noch die alten Variablen.
     Sie werden hier auf die Dark-Palette umgebogen, damit kein Bereich
     aus dem visuellen System fällt. */
  --mint:      var(--alp-mint);
  --mint-dark: var(--alp-mint-dark);
  --mint-bg:   rgba(110, 218, 180, .08);
  --mint-mid:  var(--alp-line-strong);
  --ink:       var(--alp-text);
  --mid:       var(--alp-text-mid);
  --muted:     var(--alp-text-dim);
  --line:      var(--alp-line);
  --bg:        var(--alp-deep);
  --bg2:       var(--alp-surface);
  --bg3:       var(--alp-surface-2);
  --font-d:    var(--alp-font-display);
  --font-b:    var(--alp-font-body);
  --r:         var(--alp-r-sm);
  --r-lg:      var(--alp-r-lg);
  --r-xl:      var(--alp-r-xl);
  --shadow:    var(--alp-shadow);
  --shadow-lg: var(--alp-shadow-lg);
  --t:         var(--alp-t);

  /* Bildpfade werden in functions.php als Inline-Style gesetzt.
     Die Fallbacks verhindern kaputte Referenzen, falls das entfällt. */
  --alp-img-bestseller:        none;
  --alp-img-bestseller-wide:   none;
  --alp-img-bestseller-mobile: none;
  --alp-img-shop-bg:           none;
  --alp-img-hero:              none;
}


/* ============================================================
   02  RESET & BASIS
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--alp-abyss);
}

body.alp-dark {
  margin: 0;
  background-color: var(--alp-void);
  color: var(--alp-text);
  font-family: var(--alp-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.alp-dark img {
  max-width: 100%;
  height: auto;
}

body.alp-dark a {
  color: var(--alp-mint);
  text-decoration: none;
  transition: color var(--alp-t);
}

body.alp-dark a:hover { color: var(--alp-mint-light); }

body.alp-dark ::selection {
  background: rgba(110, 218, 180, .3);
  color: var(--alp-text-strong);
}

/* Scrollbar im Laborlook (WebKit + Firefox). */
body.alp-dark { scrollbar-color: var(--alp-mint-deep) var(--alp-abyss); }
body.alp-dark ::-webkit-scrollbar { width: 11px; height: 11px; }
body.alp-dark ::-webkit-scrollbar-track { background: var(--alp-abyss); }
body.alp-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--alp-mint-deep), #1E4A44);
  border-radius: 8px;
  border: 2px solid var(--alp-abyss);
}


/* ============================================================
   03  SEAMLESS CANVAS
   Eine durchgehende Laborwelt statt einzelner Sektionsflächen.
   Die Atmosphäre liegt fixiert hinter dem gesamten Dokument,
   sämtliche Flatsome-Container werden transparent geschaltet.
   ============================================================ */

body.alp-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* Teal-Rimlight oben links */
    radial-gradient(58% 42% at 12% -4%,  rgba(110, 218, 180, .17) 0%, rgba(110, 218, 180, 0) 62%),
    /* Cyan-Nebel rechts */
    radial-gradient(46% 40% at 92% 18%,  rgba(77, 196, 154, .13)  0%, rgba(77, 196, 154, 0)  66%),
    /* Petrol-Tiefe Mitte */
    radial-gradient(70% 50% at 50% 52%,  rgba(11, 34, 48, .85)    0%, rgba(11, 34, 48, 0)    70%),
    /* Glanz unten */
    radial-gradient(60% 40% at 30% 104%, rgba(110, 218, 180, .10) 0%, rgba(110, 218, 180, 0) 60%),
    linear-gradient(180deg, var(--alp-void) 0%, var(--alp-deep) 38%, var(--alp-petrol) 68%, var(--alp-abyss) 100%);
}

/* Molekülraster — sehr dezent, verbindet alle Sektionen visuell. */
body.alp-dark::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle, rgba(110, 218, 180, .13) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px, 138px 138px;
  background-position: 0 0, 23px 23px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.75) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.75) 100%);
}

/* --- Flatsome-Container transparent: keine weißen Blöcke im Verlauf. --- */
body.alp-dark #wrapper,
body.alp-dark #main,
body.alp-dark .page-wrapper,
body.alp-dark .main-container,
body.alp-dark .shop-container,
body.alp-dark #content,
body.alp-dark .content-area,
body.alp-dark .page-inner,
body.alp-dark .entry-content,
body.alp-dark .post-content,
body.alp-dark .site-main,
body.alp-dark .row,
body.alp-dark .col-inner,
body.alp-dark .section,
body.alp-dark .section-bg,
body.alp-dark .banner-inner,
body.alp-dark .dark {
  background-color: transparent;
  background-image: none;
}

/* Flatsome setzt auf einigen Seiten eine weiße Sektionsfläche per Inline-Style. */
body.alp-dark .section-bg-color,
body.alp-dark .row .col > .col-inner[style*="background-color"] {
  background-color: transparent !important;
}

body.alp-dark #wrapper { overflow: clip; }

/* Ohne Padding-Reset entsteht am Seitenende ein heller Streifen. */
body.alp-dark .page-wrapper,
body.alp-dark .main-container { padding-bottom: 0; }

body.alp-dark .site-main,
body.alp-dark .entry-content,
body.alp-dark .post-content { margin-bottom: 0; }

/* Weiche Verbindung zwischen zwei aufeinanderfolgenden Sektionen:
   statt harter Kante ein Lichtsaum. */
body.alp-dark .section + .section::before,
body.alp-dark .alp-seam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 84vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alp-line-strong), transparent);
  pointer-events: none;
}

body.alp-dark .section,
body.alp-dark .alp-seam { position: relative; }


/* ============================================================
   04  TYPOGRAFIE
   ============================================================ */

body.alp-dark h1,
body.alp-dark h2,
body.alp-dark h3,
body.alp-dark h4,
body.alp-dark h5,
body.alp-dark h6 {
  font-family: var(--alp-font-display);
  color: var(--alp-text-strong);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.4px;
  margin: 0 0 .5em;
}

body.alp-dark h1 { font-size: clamp(32px, 4.6vw, 54px); }
body.alp-dark h2 { font-size: clamp(26px, 3.6vw, 40px); }
body.alp-dark h3 { font-size: clamp(19px, 2.2vw, 25px); }
body.alp-dark h4 { font-size: 17px; }

body.alp-dark p {
  color: var(--alp-text-mid);
  margin: 0 0 1rem;
}

body.alp-dark strong,
body.alp-dark b { color: var(--alp-text-strong); font-weight: 600; }

body.alp-dark small { color: var(--alp-text-dim); }

body.alp-dark hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alp-line-strong), transparent);
  margin: 40px 0;
}

body.alp-dark blockquote {
  border-left: 2px solid var(--alp-mint);
  padding-left: 20px;
  color: var(--alp-text-mid);
  font-style: normal;
}

body.alp-dark code,
body.alp-dark kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(110, 218, 180, .1);
  color: var(--alp-mint-light);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: .9em;
}


/* ============================================================
   05  LAYOUT-UTILITIES
   ============================================================ */

body.alp-dark .container,
body.alp-dark .row {
  max-width: var(--alp-container);
  margin-left: auto;
  margin-right: auto;
}

body.alp-dark .section {
  padding-top: var(--alp-section-y);
  padding-bottom: var(--alp-section-y);
  padding-left: 24px;
  padding-right: 24px;
}

body.alp-dark .text-center { text-align: center; }

/* Eyebrow */
body.alp-dark .eyebrow,
body.alp-dark .alp-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--alp-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--alp-mint);
  margin-bottom: 16px;
}

body.alp-dark .eyebrow::before,
body.alp-dark .alp-hero-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--alp-mint));
}

body.alp-dark .text-center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--alp-mint), transparent);
}

/* Section-Titel */
body.alp-dark h2.section-title,
body.alp-dark .section-title {
  font-family: var(--alp-font-display);
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.8px;
  color: var(--alp-text-strong);
  text-align: center;
  margin: 0 auto 16px;
  max-width: 20ch;
  text-wrap: balance;
}

body.alp-dark .section-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.78;
  color: var(--alp-text-mid);
  max-width: 62ch;
  margin: 0 auto;
}

/* Divider */
body.alp-dark .divider {
  width: 62px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  margin: 22px 0;
  background: linear-gradient(90deg, transparent, var(--alp-mint), transparent);
  box-shadow: 0 0 14px rgba(110, 218, 180, .5);
}

body.alp-dark .divider-c { margin-left: auto; margin-right: auto; }

/* Glaskarte — Grundbaustein für alle Panels */
body.alp-dark .alp-glass,
body.alp-dark .alp-usp-card,
body.alp-dark .alp-rev-card,
body.alp-dark .alp-coa-card,
body.alp-dark .coa-card {
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .012) 42%, rgba(110, 218, 180, .035) 100%),
    var(--alp-glass);
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r-lg);
  box-shadow: var(--alp-shadow), var(--alp-inset-top);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
}

/* Scroll-Reveal */
body.alp-dark .fade-up {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity var(--alp-t-slow), transform var(--alp-t-slow), filter var(--alp-t-slow);
  will-change: opacity, transform;
}

body.alp-dark .fade-up.in {
  opacity: 1;
  transform: none;
  filter: none;
}


/* ============================================================
   06  BUTTONS
   ============================================================ */

body.alp-dark .btn,
body.alp-dark .button,
body.alp-dark button.button,
body.alp-dark input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--alp-r-sm);
  font-family: var(--alp-font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1.1;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--alp-t), box-shadow var(--alp-t), background var(--alp-t), color var(--alp-t), border-color var(--alp-t);
}

/* Primär — AminoLabsPro Teal */
body.alp-dark .btn-primary,
body.alp-dark .button.primary,
body.alp-dark button.button.alt,
body.alp-dark input[type="submit"] {
  background: linear-gradient(135deg, var(--alp-mint-light) 0%, var(--alp-mint) 48%, var(--alp-mint-dark) 100%);
  color: #061318;
  box-shadow: 0 10px 28px rgba(110, 218, 180, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}

body.alp-dark .btn-primary:hover,
body.alp-dark .button.primary:hover,
body.alp-dark button.button.alt:hover,
body.alp-dark input[type="submit"]:hover {
  color: #061318;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(110, 218, 180, .42), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Sekundär — Glasrand */
body.alp-dark .btn-outline,
body.alp-dark .button.is-outline {
  background: rgba(255, 255, 255, .03);
  color: var(--alp-text);
  border: 1px solid var(--alp-line-strong);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

body.alp-dark .btn-outline:hover,
body.alp-dark .button.is-outline:hover {
  color: var(--alp-mint-light);
  border-color: var(--alp-mint);
  background: rgba(110, 218, 180, .1);
  box-shadow: var(--alp-glow);
}

body.alp-dark .btn-lg {
  padding: 16px 34px;
  font-size: 14.5px;
  letter-spacing: 1.2px;
}

body.alp-dark .btn-ghost {
  background: transparent;
  color: var(--alp-text-mid);
  border: 1px solid var(--alp-line-soft);
}

body.alp-dark .btn-ghost:hover { color: var(--alp-text); border-color: var(--alp-line-strong); }

/* "Zurück zum Shop" auf der Produktseite */
body.alp-dark .alp-back-wrap { padding: 6px 0 2px; }

body.alp-dark .alp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  color: var(--alp-text-mid);
  font-size: 12.5px;
  font-weight: 600;
  transition: color var(--alp-t), border-color var(--alp-t), background var(--alp-t);
}

body.alp-dark .alp-back-link:hover {
  color: var(--alp-mint);
  border-color: var(--alp-line-strong);
  background: rgba(110, 218, 180, .08);
}


/* ============================================================
   07  HEADER & NAVIGATION (Flatsome)
   Transparent über dem Hero, beim Scrollen dezentes Glas.
   ============================================================ */

body.alp-dark .header-wrapper,
body.alp-dark #masthead,
body.alp-dark .header-main,
body.alp-dark .header-bottom,
body.alp-dark .header-top {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  transition: background var(--alp-t), box-shadow var(--alp-t), border-color var(--alp-t);
}

body.alp-dark .header-wrapper:not(.stuck) .header-main {
  background: linear-gradient(180deg, rgba(5, 10, 12, .58) 0%, rgba(5, 10, 12, 0) 100%);
}

/* Gescrollt: Glass + feine Linie, keine aggressive Animation. */
body.alp-dark .header-wrapper.stuck .header-main,
body.alp-dark .header-wrapper.stuck {
  background: rgba(7, 16, 20, .82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
          backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid var(--alp-line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

body.alp-dark .header-wrapper.stuck .nav li a,
body.alp-dark .header-wrapper.stuck .nav-top-link { color: var(--alp-text) !important; }

/* Navigation ruhig und hochwertig */
body.alp-dark .header-main .nav,
body.alp-dark .header-nav {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

body.alp-dark .header .nav > li > a,
body.alp-dark .nav-top-link {
  position: relative;
  color: var(--alp-text) !important;
  font-family: var(--alp-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  transition: color var(--alp-t);
}

body.alp-dark .header .nav > li > a:hover,
body.alp-dark .header .nav > li.active > a,
body.alp-dark .header .nav > li.current-menu-item > a { color: var(--alp-mint) !important; }

/* Unterstreichung als Lichtlinie */
body.alp-dark .header .nav > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alp-mint), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--alp-t), transform var(--alp-t);
}

body.alp-dark .header .nav > li > a:hover::after,
body.alp-dark .header .nav > li.current-menu-item > a::after { opacity: 1; transform: none; }

/* Dropdowns */
body.alp-dark .nav-dropdown {
  background: var(--alp-glass-2);
  border: 1px solid var(--alp-line);
  border-radius: var(--alp-r);
  box-shadow: var(--alp-shadow-lg);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

body.alp-dark .nav-dropdown > li > a { color: var(--alp-text-mid); }
body.alp-dark .nav-dropdown > li > a:hover { color: var(--alp-mint); background: rgba(110, 218, 180, .08); }

/* Logo */
body.alp-dark #logo img,
body.alp-dark .header-logo img { max-height: 46px; width: auto; }

/* Icons: Suche, Konto, Warenkorb */
body.alp-dark .header .icon-search,
body.alp-dark .header .icon-user,
body.alp-dark .header .icon-shopping-cart,
body.alp-dark .header .cart-icon strong,
body.alp-dark .header .account-item .header-account-title { color: var(--alp-text) !important; }

body.alp-dark .header .cart-icon strong { border-color: var(--alp-mint); }

body.alp-dark .header-cart-link:hover .cart-icon strong,
body.alp-dark .header .icon-search:hover,
body.alp-dark .header .icon-user:hover { color: var(--alp-mint) !important; }

/* Suchfeld */
body.alp-dark .searchform input[type="search"],
body.alp-dark .search-form input[type="search"] {
  background: var(--alp-glass);
  border: 1px solid var(--alp-line);
  color: var(--alp-text);
  border-radius: var(--alp-r-sm);
}

body.alp-dark .searchform input[type="search"]::placeholder { color: var(--alp-text-dim); }

/* Social-Icons in der Kopfleiste bleiben ausgeblendet (bisheriges Verhalten). */
body.alp-dark .header-top .social-icons,
body.alp-dark .nav-bar .social-icons,
body.alp-dark .top-bar .social-icons { display: none; }

/* Mobile Off-Canvas */
body.alp-dark .mfp-bg.nav-dropdown-bg { background: rgba(5, 10, 12, .82); }

body.alp-dark .off-canvas .mfp-content,
body.alp-dark .off-canvas-left .mfp-content,
body.alp-dark .off-canvas-right .mfp-content {
  background: linear-gradient(180deg, var(--alp-deep) 0%, var(--alp-abyss) 100%);
  border-right: 1px solid var(--alp-line);
}

body.alp-dark .off-canvas .nav-vertical > li > a,
body.alp-dark .off-canvas .nav-sidebar > li > a {
  color: var(--alp-text);
  border-bottom: 1px solid var(--alp-line-soft);
  font-weight: 600;
}

body.alp-dark .off-canvas .nav-vertical > li > a:hover { color: var(--alp-mint); }

/* Ankündigungsleiste bleibt im Fluss (bisheriges Verhalten). */
body.alp-dark .alp-announcement-bar {
  position: relative;
  inset: auto;
  z-index: auto;
  background: linear-gradient(90deg, rgba(110, 218, 180, .12), rgba(110, 218, 180, .04));
  border-bottom: 1px solid var(--alp-line);
  color: var(--alp-text);
}


/* ============================================================
   08  HERO
   Cinematic. Produkt bleibt der visuelle Fokus.
   ============================================================ */

body.alp-dark .alp-hero {
  position: relative;
  min-height: clamp(560px, 78vh, 860px);
  display: flex;
  align-items: center;
  padding: 0 0 clamp(40px, 6vw, 90px);
  overflow: hidden;
  isolation: isolate;
  /* Standbild als Grundlage: greift, solange das Video lädt, wenn kein
     Video im Markup steht und bei prefers-reduced-motion. */
  background-image: var(--alp-img-hero);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--alp-void);
}

body.alp-dark .alp-hero-video,
body.alp-dark .alp-hero > video,
body.alp-dark .alp-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Abdunkelung: Text links lesbar, Produkt rechts sichtbar. */
body.alp-dark .alp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Kopfbereich abdunkeln, damit die Navigation immer lesbar bleibt */
    linear-gradient(180deg, rgba(5, 10, 12, .94) 0%, rgba(5, 10, 12, .6) 16%, rgba(5, 10, 12, .18) 32%, rgba(5, 10, 12, 0) 46%),
    /* Textseite links */
    linear-gradient(100deg, rgba(5, 10, 12, .9) 0%, rgba(5, 10, 12, .62) 36%, rgba(5, 10, 12, .18) 66%, rgba(5, 10, 12, .42) 100%),
    radial-gradient(52% 62% at 74% 44%, rgba(110, 218, 180, .2) 0%, rgba(110, 218, 180, 0) 70%);
}

/* Nahtloser Übergang in die nächste Sektion — keine harte Kante. */
body.alp-dark .alp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34%;
  z-index: 2;
  pointer-events: none;
  display: block;
  background: linear-gradient(180deg, rgba(7, 16, 20, 0) 0%, rgba(7, 16, 20, .72) 58%, var(--alp-void) 100%);
}

body.alp-dark .alp-hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--alp-content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  text-align: left;
}

body.alp-dark .alp-hero-kicker {
  color: var(--alp-mint);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

body.alp-dark .alp-hero-h1 {
  font-family: var(--alp-font-display);
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -1.4px;
  color: var(--alp-text-strong);
  margin: 0 0 22px;
  text-align: left;
  text-wrap: balance;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .75);
  animation: none;
}

body.alp-dark .alp-hero-h1 .hi {
  color: var(--alp-mint);
  text-shadow: 0 0 42px rgba(110, 218, 180, .5);
}

body.alp-dark .alp-hero-p,
body.alp-dark .alp-hero-sub {
  max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.8;
  color: #C4D5D8;
  margin: 0 0 34px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .8);
}

body.alp-dark .alp-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

body.alp-dark .alp-hero-btns .btn-outline {
  background: rgba(10, 23, 28, .55);
  border-color: var(--alp-line-strong);
  color: var(--alp-text);
  box-shadow: none;
}

body.alp-dark .alp-hero-btns .btn-outline:hover {
  background: rgba(110, 218, 180, .12);
  color: var(--alp-mint-light);
}

/* Mikro-Trust unter den Buttons */
body.alp-dark .alp-hero-micro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}

body.alp-dark .alp-micro-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--alp-text-mid);
}

body.alp-dark .alp-micro-item svg { color: var(--alp-mint); flex: 0 0 auto; }

/* Rechte Hero-Spalte (Vials) — nur aktiv, wenn im Markup vorhanden. */
body.alp-dark .alp-hero-right { position: relative; }

body.alp-dark .alp-hero-img-box {
  position: relative;
  border-radius: var(--alp-r-xl);
  overflow: hidden;
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  box-shadow: var(--alp-shadow-lg), var(--alp-glow);
}

body.alp-dark .alp-hero-img-box img { width: 100%; height: 100%; object-fit: cover; }

body.alp-dark .alp-hero-float {
  position: absolute;
  left: -22px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line-strong);
  background: var(--alp-glass-2);
  box-shadow: var(--alp-shadow-lg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

body.alp-dark .alp-float-val {
  font-family: var(--alp-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--alp-mint);
  line-height: 1;
}

body.alp-dark .alp-float-lbl { font-size: 12px; color: var(--alp-text-mid); line-height: 1.4; }


/* ============================================================
   09  TRUST / STATS
   Dunkles Laborpanel statt vier flacher Kacheln.
   ============================================================ */

body.alp-dark .alp-stats {
  position: relative;
  z-index: 2;
  margin: -46px auto 0;
  padding: 0 24px;
  max-width: var(--alp-content);
  background: none;
}

body.alp-dark .alp-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--alp-r-lg);
  border: 1px solid var(--alp-line);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 50%, rgba(110, 218, 180, .05) 100%),
    var(--alp-glass-2);
  box-shadow: var(--alp-shadow-lg), var(--alp-inset-top);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
          backdrop-filter: blur(18px) saturate(125%);
  overflow: hidden;
}

body.alp-dark .alp-stat {
  position: relative;
  padding: 30px 20px;
  text-align: center;
}

body.alp-dark .alp-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 218, 180, .5), transparent);
  opacity: 0;
  transition: opacity var(--alp-t);
}

body.alp-dark .alp-stat:hover::before { opacity: 1; }

body.alp-dark .alp-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--alp-line-strong), transparent);
}

body.alp-dark .alp-stat-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: .95;
}

/* Icons als CSS-Hintergrund — keine zusätzlichen HTTP-Requests. */
body.alp-dark .alp-stat:nth-child(1) .alp-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}
body.alp-dark .alp-stat:nth-child(2) .alp-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M9 3v7L4 18a2 2 0 001.8 3h12.4a2 2 0 001.8-3l-5-8V3'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3C/svg%3E");
}
body.alp-dark .alp-stat:nth-child(3) .alp-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
body.alp-dark .alp-stat:nth-child(4) .alp-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5L7 22l5-3 5 3-2-7.5'/%3E%3C/svg%3E");
}

body.alp-dark .alp-stat-n {
  font-family: var(--alp-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--alp-mint);
  text-shadow: 0 0 26px rgba(110, 218, 180, .4);
}

body.alp-dark .alp-stats .alp-stat-l {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--alp-text-mid);
  letter-spacing: .2px;
}


/* ============================================================
   10  USP / FORSCHUNG
   ============================================================ */

body.alp-dark section:has(.alp-usp-grid),
body.alp-dark .alp-usp {
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Molekülgrafik im Hintergrund der Forschungssektion */
body.alp-dark section:has(.alp-usp-grid)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background:
    radial-gradient(38% 46% at 82% 24%, rgba(110, 218, 180, .16) 0%, rgba(110, 218, 180, 0) 70%),
    radial-gradient(30% 40% at 16% 78%, rgba(77, 196, 154, .12) 0%, rgba(77, 196, 154, 0) 72%);
}

body.alp-dark section:has(.alp-usp-grid) > .container { position: relative; z-index: 1; }

body.alp-dark .alp-usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 52px;
}

body.alp-dark .alp-usp-card {
  padding: 30px 24px;
  transition: transform var(--alp-t), border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-usp-card:hover {
  transform: translateY(-4px);
  border-color: var(--alp-line-strong);
  box-shadow: var(--alp-shadow-lg), var(--alp-glow), var(--alp-inset-top);
}

body.alp-dark .alp-usp-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid var(--alp-line-strong);
  background-color: rgba(110, 218, 180, .07);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 23px 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-mint);
  box-shadow: inset 0 0 22px rgba(110, 218, 180, .12);
}

body.alp-dark .alp-usp-icon svg { display: block; width: 22px; height: 22px; }

body.alp-dark .alp-usp-card:nth-child(1) .alp-usp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}
body.alp-dark .alp-usp-card:nth-child(2) .alp-usp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5L7 22l5-3 5 3-2-7.5'/%3E%3C/svg%3E");
}
body.alp-dark .alp-usp-card:nth-child(3) .alp-usp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M9 3v7L4 18a2 2 0 001.8 3h12.4a2 2 0 001.8-3l-5-8V3'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3C/svg%3E");
}
body.alp-dark .alp-usp-card:nth-child(4) .alp-usp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

body.alp-dark .alp-usp-title {
  font-family: var(--alp-font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--alp-text-strong);
  margin-bottom: 10px;
}

body.alp-dark .alp-usp-text {
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--alp-text-mid);
  margin: 0;
}


/* ============================================================
   11  BESTSELLER-SEKTION
   Durchgehende Produktwelt: ein Hintergrund, Karten darin integriert.
   ============================================================ */

body.alp-dark .alp-bestseller {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
}

body.alp-dark .alp-bestseller-banner {
  position: relative;
  padding: 0 0 clamp(34px, 4vw, 64px);
  background-image: var(--alp-img-bestseller);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--alp-petrol);
}

/* Auf sehr breiten Schirmen die hochauflösende Variante. */
@media (min-width: 1600px) {
  body.alp-dark .alp-bestseller-banner { background-image: var(--alp-img-bestseller-wide); }
}

/* Abdunkelung zum unteren Rand hin — der Bereich, in dem der
   Produktslider liegt. Der obere Bildteil (Headline + Vials)
   bleibt weitgehend unangetastet. */
body.alp-dark .alp-bestseller-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 10, 12, .34) 0%, rgba(5, 10, 12, .12) 22%, rgba(5, 10, 12, .42) 62%, rgba(5, 10, 12, .9) 100%);
}

/* Nahtloser Anschluss an die vorherige Sektion. */
body.alp-dark .alp-bestseller-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(180deg, var(--alp-void) 0%, rgba(7, 16, 20, 0) 100%);
}

body.alp-dark .alp-bestseller-banner > * { position: relative; z-index: 1; }

/* Platzhalter: reserviert genau den oberen Bildbereich mit der
   eingearbeiteten Headline und den Vials. Das bisherige
   Seitenverhältnis wird unverändert übernommen. */
body.alp-dark .alp-bestseller-bg {
  position: relative;
  aspect-ratio: 1672 / 748;
  height: auto;
  line-height: 0;
}

body.alp-dark .alp-bestseller-bg img { display: none; }

body.alp-dark .alp-all-products-button {
  position: absolute;
  left: 5%;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--alp-mint-light), var(--alp-mint-dark));
  color: #061318;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(110, 218, 180, .34);
  transition: transform var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-all-products-button:hover {
  color: #061318;
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(110, 218, 180, .5);
}

body.alp-dark .alp-bestseller-slider { position: relative; }

/* Flatsome-Slider im Banner: transparente Reihe, Glaskarten darin. */
body.alp-dark .alp-bestseller-banner .row-slider,
body.alp-dark .alp-bestseller-banner .row {
  background: transparent;
  background-image: none;
  max-width: var(--alp-container);
  margin: 0 auto;
}

body.alp-dark .alp-bestseller-banner .product-small.box {
  margin: 10px;
  padding: 10px;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 55%, rgba(110, 218, 180, .05) 100%),
    rgba(10, 23, 28, .62);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), var(--alp-inset-top);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: transform var(--alp-t), border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-bestseller-banner .product-small.box:hover {
  transform: translateY(-4px);
  border-color: var(--alp-line-strong);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .6), var(--alp-glow);
}

body.alp-dark .alp-bestseller-banner .box-image { height: 210px; }

body.alp-dark .alp-bestseller-banner .box-image img {
  height: 210px;
  width: 100%;
  object-fit: contain;
  border-radius: var(--alp-r-sm);
}

body.alp-dark .alp-bestseller-banner .box-text,
body.alp-dark .alp-bestseller-banner .box-text a:not(.button),
body.alp-dark .alp-bestseller-banner .product-title a {
  color: var(--alp-text-strong);
  text-shadow: none;
}

body.alp-dark .alp-bestseller-banner .product-title,
body.alp-dark .alp-bestseller-banner .product-title a {
  font-family: var(--alp-font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

body.alp-dark .alp-bestseller-banner .price,
body.alp-dark .alp-bestseller-banner .price .amount {
  color: var(--alp-mint);
  font-family: var(--alp-font-display);
  font-size: 17px;
  font-weight: 700;
}

body.alp-dark .alp-bestseller-banner .price del { opacity: .55; font-weight: 400; }
body.alp-dark .alp-bestseller-banner .price ins { text-decoration: none; }

/* Slider-Navigation */
body.alp-dark .flickity-button {
  background: var(--alp-glass-2);
  border: 1px solid var(--alp-line);
  color: var(--alp-mint);
}

body.alp-dark .flickity-button:hover { background: rgba(110, 218, 180, .16); }
body.alp-dark .flickity-page-dots .dot { background: var(--alp-text-dim); opacity: .5; }
body.alp-dark .flickity-page-dots .dot.is-selected { background: var(--alp-mint); opacity: 1; }


/* ============================================================
   12  PRODUKT-SEKTION (Homepage)
   ============================================================ */

body.alp-dark .alp-products { flex-direction: column; background: transparent; }

body.alp-dark .alp-products .container,
body.alp-dark .alp-products .row-grid,
body.alp-dark .alp-products .row-slider {
  width: 100%;
  max-width: 100%;
  flex: none;
  min-width: 0;
}

body.alp-dark .alp-prod-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}

body.alp-dark .alp-prod-head h2.section-title { text-align: left; margin-left: 0; }

/* Eigenständige Produktkarten im Homepage-Markup */
body.alp-dark .alp-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

body.alp-dark .alp-prod-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--alp-r-lg);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  box-shadow: var(--alp-shadow), var(--alp-inset-top);
  transition: transform var(--alp-t), border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-prod-card:hover {
  transform: translateY(-4px);
  border-color: var(--alp-line-strong);
  box-shadow: var(--alp-shadow-lg), var(--alp-glow);
}

body.alp-dark .alp-prod-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: radial-gradient(70% 70% at 50% 40%, rgba(110, 218, 180, .1), transparent 72%), var(--alp-surface);
}

body.alp-dark .alp-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--alp-t-slow);
}

body.alp-dark .alp-prod-card:hover .alp-prod-img img { transform: scale(1.05); }

body.alp-dark .alp-prod-purity {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--alp-line-strong);
  background: rgba(5, 10, 12, .7);
  color: var(--alp-mint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

body.alp-dark .alp-prod-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }

body.alp-dark .alp-prod-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--alp-mint);
  margin-bottom: 7px;
}

body.alp-dark .alp-prod-name {
  font-family: var(--alp-font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--alp-text-strong);
  line-height: 1.25;
  margin-bottom: 8px;
}

body.alp-dark .alp-prod-desc { flex: 1; font-size: 13px; line-height: 1.65; color: var(--alp-text-mid); }

body.alp-dark .alp-prod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--alp-line);
}

body.alp-dark .alp-prod-price {
  font-family: var(--alp-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--alp-mint);
}


/* ============================================================
   13  ABOUT / QUALITÄT
   ============================================================ */

body.alp-dark .section-alt {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(110, 218, 180, .07) 0%, rgba(110, 218, 180, 0) 70%),
    transparent;
}

body.alp-dark .alp-about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
  max-width: var(--alp-content);
  margin: 0 auto;
}

body.alp-dark .alp-about-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--alp-r-lg);
  border: 1px solid var(--alp-line);
  background: var(--alp-surface);
  box-shadow: var(--alp-shadow-lg), var(--alp-inset-top);
}

body.alp-dark .alp-about-img img { width: 100%; height: 100%; object-fit: cover; }

/* Bilder in der About-Sektion, die direkt im Text stehen. */
body.alp-dark .alp-about-inner .section-sub img {
  border-radius: var(--alp-r-lg);
  border: 1px solid var(--alp-line);
  box-shadow: var(--alp-shadow-lg);
  margin: 8px auto 0;
}

body.alp-dark .alp-about-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
}

body.alp-dark .alp-about-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--alp-text-mid);
}

body.alp-dark .alp-about-list li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid var(--alp-line-strong);
  background-color: rgba(110, 218, 180, .1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%236EDAB4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 9 7.5 12.5 14 6'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 14px rgba(110, 218, 180, .22);
}


/* ============================================================
   14  STEPS
   ============================================================ */

body.alp-dark .alp-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 52px;
}

body.alp-dark .alp-step { text-align: center; }

body.alp-dark .alp-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--alp-line-strong);
  background: rgba(110, 218, 180, .07);
  color: var(--alp-mint);
  font-family: var(--alp-font-display);
  font-size: 17px;
  font-weight: 700;
  box-shadow: inset 0 0 24px rgba(110, 218, 180, .14), 0 8px 26px rgba(0, 0, 0, .4);
}

body.alp-dark .alp-step-n svg { width: 24px; height: 24px; }

body.alp-dark .alp-step-t {
  font-family: var(--alp-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--alp-text-strong);
  margin-bottom: 8px;
}

body.alp-dark .alp-step-p { font-size: 14px; line-height: 1.68; color: var(--alp-text-mid); }


/* ============================================================
   15  COA / LABORANALYSEN
   Die COA-Seite ist im Editor gepflegt und bringt teils Inline-Styles
   in hellen Farben mit. Diese werden hier gezielt überschrieben.
   Analysewerte, Batch-Nummern und Report-IDs bleiben unverändert.
   ============================================================ */

body.alp-dark .coa-header {
  padding: clamp(44px, 6vw, 76px) 24px 36px;
  text-align: center;
  border-bottom: 1px solid var(--alp-line);
  margin-bottom: 44px;
}

body.alp-dark .coa-header .eyebrow { color: var(--alp-mint); }
body.alp-dark .coa-header .eyebrow::before { background: linear-gradient(90deg, transparent, var(--alp-mint)); }

body.alp-dark .coa-header h1 {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--alp-text-strong);
  margin-bottom: 14px;
}

body.alp-dark .coa-header p {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--alp-text-mid);
}

body.alp-dark .coa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--alp-content);
  margin: 0 auto 68px;
  padding: 0 24px;
}

body.alp-dark .coa-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--alp-t), border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .coa-card:hover {
  transform: translateY(-4px);
  border-color: var(--alp-line-strong);
  box-shadow: var(--alp-shadow-lg), var(--alp-glow);
}

/* Die Laboranalyse ist ein helles Dokumentfoto. Damit oben in der Karte
   kein harter weißer Block entsteht, wird es leicht abgedunkelt und
   unten in die Kartenfläche überblendet. Das Bild selbst bleibt
   unverändert und in voller Auflösung verlinkt. */
body.alp-dark .coa-card .coa-hero-link {
  position: relative;
  display: block;
  line-height: 0;
}

body.alp-dark .coa-card .coa-hero-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--alp-r-lg) var(--alp-r-lg) 0 0;
  background: linear-gradient(180deg, rgba(5, 10, 12, .12) 0%, rgba(5, 10, 12, 0) 38%, rgba(5, 10, 12, .5) 100%);
}

body.alp-dark .coa-card .coa-hero-img {
  border-radius: var(--alp-r-lg) var(--alp-r-lg) 0 0;
  filter: saturate(1.04) contrast(1.02) brightness(.93);
}

body.alp-dark .coa-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--alp-line) !important;
}

body.alp-dark .coa-card-header h3 {
  font-family: var(--alp-font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--alp-text-strong);
  margin: 0;
}

body.alp-dark .coa-card-header p { margin: 0; }

body.alp-dark .tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

body.alp-dark .tag-peptide {
  background: rgba(110, 218, 180, .12) !important;
  border: 1px solid var(--alp-line-strong);
  color: var(--alp-mint) !important;
}

body.alp-dark .coa-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 18px 22px;
  background: rgba(5, 10, 12, .3) !important;
}

body.alp-dark .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(110, 218, 180, .1) !important;
  border: 1px solid var(--alp-line-strong) !important;
  color: var(--alp-mint) !important;
}

body.alp-dark .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alp-mint) !important;
  box-shadow: 0 0 10px rgba(110, 218, 180, .9);
  animation: coaPulse 1.9s ease-in-out infinite;
}

@keyframes coaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

body.alp-dark .flask-icon { margin-bottom: 16px; color: var(--alp-mint); }

body.alp-dark .coa-card-body h4 {
  font-family: var(--alp-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--alp-text-strong);
  margin-bottom: 10px;
}

body.alp-dark .coa-card-body p { font-size: 13px; line-height: 1.62; color: var(--alp-text-mid); }

/* Ergebnistabelle in den COA-Karten (Inline-Styles aus dem Editor). */
body.alp-dark .coa-card-body table { width: 100%; border-collapse: collapse; }
body.alp-dark .coa-card-body table tr { border-bottom: 1px solid var(--alp-line) !important; }
body.alp-dark .coa-card-body table td { color: var(--alp-text-mid) !important; padding: 7px 0 !important; }
body.alp-dark .coa-card-body table td:last-child { color: var(--alp-text-strong) !important; font-weight: 600; }
body.alp-dark .coa-card-body table tr:last-child td:last-child { color: var(--alp-mint) !important; font-weight: 700; }

body.alp-dark .batch-number {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--alp-line-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--alp-text-strong) !important;
}

body.alp-dark .expected {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--alp-text-dim);
  margin-top: 7px;
}

body.alp-dark .coa-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px dashed var(--alp-line) !important;
  font-size: 12px;
  color: var(--alp-text-dim);
}

body.alp-dark .view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--alp-text-mid);
  text-decoration: none;
}

body.alp-dark .coa-view-btn {
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--alp-mint-light), var(--alp-mint-dark));
  color: #061318 !important;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(110, 218, 180, .34);
  transition: transform var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .coa-view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(110, 218, 180, .5);
  color: #061318 !important;
}

body.alp-dark .status-text { color: var(--alp-mint) !important; font-weight: 600; }

/* COA-Block auf der Startseite */
body.alp-dark .alp-coa-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

body.alp-dark .alp-coa-card { padding: 28px; }

body.alp-dark .alp-coa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--alp-line);
}

body.alp-dark .alp-coa-name {
  font-family: var(--alp-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--alp-text-strong);
}

body.alp-dark .alp-coa-badge {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--alp-line-strong);
  background: rgba(110, 218, 180, .1);
  color: var(--alp-mint);
  font-size: 11px;
  font-weight: 700;
}

body.alp-dark .alp-coa-rows { display: grid; gap: 12px; }

body.alp-dark .alp-coa-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

body.alp-dark .alp-coa-row-l { color: var(--alp-text-mid); }
body.alp-dark .alp-coa-row-v { color: var(--alp-text-strong); font-weight: 500; text-align: right; }
body.alp-dark .alp-coa-row-v.ok { color: var(--alp-mint); font-weight: 600; }


/* ============================================================
   16  REVIEWS
   ============================================================ */

body.alp-dark .alp-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}

body.alp-dark .alp-rev-card { padding: 26px 24px; }

body.alp-dark .alp-rev-stars { display: flex; gap: 3px; margin-bottom: 14px; }
body.alp-dark .alp-rev-stars svg { color: var(--alp-mint); }

body.alp-dark .alp-rev-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--alp-text-mid);
  margin-bottom: 18px;
}

body.alp-dark .alp-rev-author { display: flex; align-items: center; gap: 11px; }

body.alp-dark .alp-rev-ava {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--alp-line);
  background: var(--alp-surface-2);
}

body.alp-dark .alp-rev-name { font-size: 13px; font-weight: 600; color: var(--alp-text-strong); }
body.alp-dark .alp-rev-role { font-size: 12px; color: var(--alp-text-dim); }


/* ============================================================
   17  FAQ
   ============================================================ */

body.alp-dark .alp-faq-list {
  max-width: 820px;
  margin: 44px auto 0;
  display: grid;
  gap: 12px;
}

body.alp-dark .alp-faq-item {
  overflow: hidden;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: border-color var(--alp-t), background var(--alp-t);
}

body.alp-dark .alp-faq-item:hover { border-color: var(--alp-line-strong); }

body.alp-dark .alp-faq-item.open {
  border-color: var(--alp-line-strong);
  background: rgba(110, 218, 180, .05);
  box-shadow: var(--alp-glow);
}

body.alp-dark .alp-faq-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: 19px 56px 19px 22px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--alp-font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--alp-text-strong);
  cursor: pointer;
  transition: color var(--alp-t);
}

body.alp-dark .alp-faq-q:hover { color: var(--alp-mint); background: none; }

/* Plus-Zeichen als reines CSS — kein zusätzliches Markup nötig. */
body.alp-dark .alp-faq-q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: 1px solid var(--alp-line-strong);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EDAB4' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='12' y1='6' x2='12' y2='18'/%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--alp-t), background-color var(--alp-t), border-color var(--alp-t);
}

body.alp-dark .alp-faq-item.open .alp-faq-q::after {
  transform: rotate(135deg);
  background-color: rgba(110, 218, 180, .16);
  border-color: var(--alp-mint);
}

/* Eigenes Icon-Element, falls im Markup vorhanden. */
body.alp-dark .alp-faq-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--alp-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alp-mint);
  transition: transform var(--alp-t), background var(--alp-t);
}

body.alp-dark .alp-faq-item.open .alp-faq-icon {
  transform: rotate(45deg);
  background: rgba(110, 218, 180, .16);
}

body.alp-dark .alp-faq-a {
  display: none;
  padding: 0 56px 20px 22px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--alp-text-mid);
}

body.alp-dark .alp-faq-item.open .alp-faq-a { display: block; }


/* ============================================================
   18  NEWSLETTER / CTA
   Bestehendes Brevo-Formular bleibt funktionsfähig und wird
   in die Laborwelt eingebettet.
   ============================================================ */

body.alp-dark .alp-cta {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 24px;
  border-top: 1px solid var(--alp-line);
  border-bottom: 1px solid var(--alp-line);
  background:
    radial-gradient(58% 74% at 50% 0%, rgba(110, 218, 180, .14) 0%, rgba(110, 218, 180, 0) 68%),
    linear-gradient(180deg, rgba(11, 34, 48, .5) 0%, rgba(5, 10, 12, .6) 100%);
  overflow: hidden;
}

body.alp-dark .alp-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

body.alp-dark .alp-cta-inner h2.section-title { margin-bottom: 12px; }
body.alp-dark .alp-cta-inner p { color: var(--alp-text-mid); }

body.alp-dark .alp-cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

body.alp-dark .alp-cta-input,
body.alp-dark #sib-container input.input,
body.alp-dark #EMAIL {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 17px;
  border-radius: var(--alp-r-sm);
  border: 1px solid var(--alp-line) !important;
  background: rgba(5, 10, 12, .55) !important;
  color: var(--alp-text) !important;
  font-family: var(--alp-font-body) !important;
  font-size: 15px !important;
  outline: none;
  transition: border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-cta-input::placeholder,
body.alp-dark #EMAIL::placeholder { color: var(--alp-text-dim) !important; }

body.alp-dark .alp-cta-input:focus,
body.alp-dark #EMAIL:focus {
  border-color: var(--alp-mint) !important;
  box-shadow: 0 0 0 3px rgba(110, 218, 180, .16);
}

body.alp-dark .alp-cta-note { margin-top: 14px; font-size: 12px; color: var(--alp-text-dim); }

/* --- Brevo-Formular in das Dark-Design überführen --- */
body.alp-dark .sib-form {
  background-color: transparent !important;
  padding: 0 !important;
}

body.alp-dark #sib-form-container,
body.alp-dark #sib-container {
  max-width: 560px !important;
  margin: 24px auto 0 !important;
  background-color: rgba(14, 30, 37, .66) !important;
  border: 1px solid var(--alp-line) !important;
  border-radius: var(--alp-r-lg) !important;
  box-shadow: var(--alp-shadow), var(--alp-inset-top);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  text-align: left !important;
}

body.alp-dark #sib-container .sib-form-block,
body.alp-dark #sib-container .sib-text-form-block p,
body.alp-dark #sib-container .entry__label,
body.alp-dark #sib-container .entry__specification {
  color: var(--alp-text) !important;
  font-family: var(--alp-font-body) !important;
  background-color: transparent !important;
}

body.alp-dark #sib-container .sib-text-form-block p,
body.alp-dark #sib-container .entry__specification { color: var(--alp-text-mid) !important; }

body.alp-dark #sib-container .sib-form-block p { font-family: var(--alp-font-display) !important; }

body.alp-dark #sib-container .sib-form-block__button {
  width: 100%;
  justify-content: center;
  padding: 15px 24px !important;
  border-radius: var(--alp-r-sm) !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--alp-mint-light) 0%, var(--alp-mint) 48%, var(--alp-mint-dark) 100%) !important;
  color: #061318 !important;
  font-family: var(--alp-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px;
  text-align: center !important;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(110, 218, 180, .3);
  transition: transform var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark #sib-container .sib-form-block__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(110, 218, 180, .44);
}

body.alp-dark #sib-container .entry__error {
  background-color: rgba(255, 90, 90, .12) !important;
  border-color: rgba(255, 120, 120, .4) !important;
  color: #FFC9C9 !important;
}

body.alp-dark #sib-container a { color: var(--alp-mint) !important; }


/* ============================================================
   19  RECHTLICHES & DISCLAIMER
   Wortlaut unverändert — nur die Darstellung ist neu.
   ============================================================ */

body.alp-dark .alp-legal {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 18px 22px;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  border-left: 2px solid var(--alp-mint);
  background: rgba(110, 218, 180, .05);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--alp-text-mid);
}

body.alp-dark .alp-legal strong { color: var(--alp-mint); }

body.alp-dark .alp-legal--product { margin: 22px 0 0; max-width: none; }

/* Research-Use-Only-Box am Seitenende */
body.alp-dark .alp-disclaimer-bg,
body.alp-dark [style*="background-color: #e8f5f0"],
body.alp-dark [style*="background-color:#e8f5f0"] {
  background-color: rgba(110, 218, 180, .05) !important;
  border: 1px solid var(--alp-line-strong) !important;
  border-radius: var(--alp-r-lg) !important;
  color: var(--alp-text-mid) !important;
}

body.alp-dark [style*="background-color: #e8f5f0"] strong,
body.alp-dark [style*="background-color:#e8f5f0"] strong { color: var(--alp-mint) !important; }


/* ============================================================
   20  FOOTER
   ============================================================ */

body.alp-dark #footer,
body.alp-dark .footer-wrapper,
body.alp-dark .footer-widgets,
body.alp-dark .alp-footer,
body.alp-dark .alp-footer2 {
  position: relative;
  background: linear-gradient(180deg, rgba(5, 10, 12, .4) 0%, var(--alp-abyss) 62%) !important;
  color: var(--alp-text-mid);
  border-top: 1px solid var(--alp-line);
}

body.alp-dark .footer-widgets { padding: clamp(48px, 6vw, 76px) 0 32px !important; }

body.alp-dark #footer .widget-title,
body.alp-dark .alp-footer-col h4 {
  font-family: var(--alp-font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--alp-mint);
  margin-bottom: 18px;
}

body.alp-dark #footer a,
body.alp-dark .alp-footer a {
  color: var(--alp-text-mid);
  font-size: 14px;
  transition: color var(--alp-t), padding-left var(--alp-t);
}

body.alp-dark #footer a:hover,
body.alp-dark .alp-footer a:hover { color: var(--alp-mint); }

body.alp-dark #footer ul { list-style: none; padding: 0; margin: 0; }
body.alp-dark #footer ul li { margin-bottom: 10px; border: 0; }

body.alp-dark .alp-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--alp-container);
  margin: 0 auto 48px;
}

body.alp-dark .alp-footer-brand p { font-size: 14px; line-height: 1.7; color: var(--alp-text-mid); max-width: 34ch; }
body.alp-dark .alp-footer-disc { margin-top: 16px; font-size: 11px; line-height: 1.6; color: var(--alp-text-dim); max-width: 40ch; }

body.alp-dark .alp-footer-col ul { list-style: none; display: grid; gap: 11px; padding: 0; margin: 0; }

body.alp-dark .alp-footer-bot,
body.alp-dark .footer-bottom,
body.alp-dark #footer .footer-bar {
  padding: 14px 20px !important;
  min-height: auto !important;
  background: var(--alp-abyss) !important;
  border-top: 1px solid var(--alp-line-soft);
  color: var(--alp-text-dim) !important;
  font-size: 12.5px;
  line-height: 1.4;
}

body.alp-dark .footer-bottom .col,
body.alp-dark #footer .footer-bar .col { padding-top: 4px !important; padding-bottom: 4px !important; color: var(--alp-text-dim) !important; }
body.alp-dark .footer-bottom .row { margin: 0 !important; min-height: auto !important; }
body.alp-dark .footer-bottom p { margin: 0 !important; font-size: 12px !important; }

body.alp-dark .alp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
}

/* "Nach oben"-Button */
body.alp-dark .back-to-top {
  background: var(--alp-glass-2) !important;
  border: 1px solid var(--alp-line-strong) !important;
  color: var(--alp-mint) !important;
}


/* ============================================================
   21  WHATSAPP
   ============================================================ */

body.alp-dark .alp-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(37, 211, 102, .5);
  background: linear-gradient(150deg, #2BD96F 0%, #1FA855 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .32);
  transition: transform var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .alp-whatsapp:hover {
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 40px rgba(37, 211, 102, .48);
}

body.alp-dark .alp-whatsapp svg { display: block; }


/* ============================================================
   22  BESTEHENDE FEATURE-MODULE
   Die Logik dieser Bereiche liegt in eigenen Snippets/Plugins.
   Hier wird ausschließlich das Aussehen an das Dark-Design
   angepasst, damit nichts aus dem visuellen System fällt.
   ============================================================ */

/* --- Versand-Fortschrittsbalken --- */
body.alp-dark .alp-shipping-progress {
  padding: 16px 18px;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  margin-bottom: 18px;
}

body.alp-dark .alp-shipping-progress-text { font-size: 13.5px; color: var(--alp-text-mid); margin-bottom: 10px; }
body.alp-dark .alp-shipping-progress-text strong { color: var(--alp-mint); }

body.alp-dark .alp-shipping-progress-bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
}

body.alp-dark .alp-shipping-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--alp-mint-dark), var(--alp-mint-light));
  box-shadow: 0 0 16px rgba(110, 218, 180, .55);
  transition: width var(--alp-t-slow);
}

/* --- Mengenrabatt-Skala --- */
body.alp-dark .alp-mengenrabatt-skala {
  padding: 18px;
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
}

body.alp-dark .alp-mengenrabatt-text { font-size: 13.5px; color: var(--alp-text-mid); }
body.alp-dark .alp-mengenrabatt-text strong { color: var(--alp-mint); }

body.alp-dark .alp-mengenrabatt-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

body.alp-dark .alp-mengenrabatt-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--alp-mint-dark), var(--alp-mint-light));
  box-shadow: 0 0 16px rgba(110, 218, 180, .5);
}

body.alp-dark .alp-mengenrabatt-marker { background: var(--alp-mint); box-shadow: 0 0 12px rgba(110, 218, 180, .8); }

body.alp-dark .alp-mengenrabatt-stufe { color: var(--alp-text-dim); font-size: 12px; }
body.alp-dark .alp-mengenrabatt-stufe.alp-stufe-aktiv { color: var(--alp-mint); }
body.alp-dark .alp-stufe-prozent { font-weight: 700; }

/* --- Mengenbonus-Banner --- */
body.alp-dark .alp-mengenbonus-banner {
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line-strong);
  background: linear-gradient(135deg, rgba(110, 218, 180, .12), rgba(110, 218, 180, .04));
  color: var(--alp-text);
}

body.alp-dark .alp-mengenbonus-banner a { color: var(--alp-mint); font-weight: 600; }
body.alp-dark .alp-mengenbonus-arrow { color: var(--alp-mint); }

/* --- Kundenwünsche --- */
body.alp-dark .alp-wish-card,
body.alp-dark .alp-wish-form,
body.alp-dark .alp-wish-login {
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  color: var(--alp-text-mid);
}

body.alp-dark .alp-wish-card h3 { color: var(--alp-text-strong); }

body.alp-dark .alp-wish-form textarea {
  width: 100%;
  border-radius: var(--alp-r-sm);
  border: 1px solid var(--alp-line);
  background: rgba(5, 10, 12, .5);
  color: var(--alp-text);
  padding: 12px 15px;
  font-family: var(--alp-font-body);
}

body.alp-dark .alp-wish-form textarea:focus { border-color: var(--alp-mint); outline: none; }

body.alp-dark .alp-like-btn {
  border: 1px solid var(--alp-line);
  background: rgba(255, 255, 255, .04);
  color: var(--alp-text-mid);
  border-radius: 999px;
}

body.alp-dark .alp-like-btn:hover,
body.alp-dark .alp-like-btn.liked { color: var(--alp-mint); border-color: var(--alp-line-strong); }

body.alp-dark .alp-status-neu,
body.alp-dark .alp-status-in_pruefung,
body.alp-dark .alp-status-geplant,
body.alp-dark .alp-status-umgesetzt {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--alp-line-strong);
  background: rgba(110, 218, 180, .1);
  color: var(--alp-mint);
}

body.alp-dark .alp-wish-success { color: var(--alp-mint); }

/* --- Dosierungsrechner-Hinweis --- */
body.alp-dark .alp-rechner-hinweis {
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  border-left: 2px solid var(--alp-mint);
  background: rgba(110, 218, 180, .05);
}

body.alp-dark .alp-rechner-hinweis-text { color: var(--alp-text-mid); font-size: 13px; }

/* --- Early Access --- */
body.alp-dark .alp-ea-hero { position: relative; overflow: hidden; }

body.alp-dark .alp-ea-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5, 10, 12, .9) 0%, rgba(5, 10, 12, .6) 55%, rgba(5, 10, 12, .3) 100%);
}

body.alp-dark .alp-ea-hero .alp-hero-inner,
body.alp-dark .alp-ea-inner { position: relative; z-index: 2; }

body.alp-dark .alp-ea-sub { color: var(--alp-text-mid); }

body.alp-dark .alp-ea-form-wrap {
  border-radius: var(--alp-r-lg);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass-2);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

/* --- Marquee --- */
body.alp-dark .alp-marquee { width: max-content; will-change: transform; }

/* --- Eigenständig gescopte Seiten (#alp-scope) --- */
body.alp-dark #alp-scope {
  color: var(--alp-text);
  background: transparent;
}

body.alp-dark #alp-scope h1.alp-h1,
body.alp-dark #alp-scope h2.alp-h2 { color: var(--alp-text-strong); }
body.alp-dark #alp-scope p { color: var(--alp-text-mid); }
body.alp-dark #alp-scope a { color: var(--alp-mint); }

body.alp-dark #alp-scope .alp-card,
body.alp-dark #alp-scope .alp-disclaimer-box,
body.alp-dark #alp-scope .alp-tier-block,
body.alp-dark #alp-scope .alp3-chromatogram,
body.alp-dark #alp-scope .alp3-flag-col {
  border-radius: var(--alp-r);
  border: 1px solid var(--alp-line);
  background: var(--alp-glass);
  color: var(--alp-text-mid);
}


/* ============================================================
   23  FORMULARE (Contact Form 7 & Standard)
   ============================================================ */

body.alp-dark input[type="text"],
body.alp-dark input[type="email"],
body.alp-dark input[type="tel"],
body.alp-dark input[type="url"],
body.alp-dark input[type="number"],
body.alp-dark input[type="password"],
body.alp-dark input[type="search"],
body.alp-dark select,
body.alp-dark textarea,
body.alp-dark .wpcf7-text,
body.alp-dark .wpcf7-email,
body.alp-dark .wpcf7-textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--alp-r-sm);
  border: 1px solid var(--alp-line);
  background: rgba(5, 10, 12, .5);
  color: var(--alp-text);
  font-family: var(--alp-font-body);
  font-size: 15px;
  box-shadow: none;
  outline: none;
  transition: border-color var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark input::placeholder,
body.alp-dark textarea::placeholder { color: var(--alp-text-dim); }

body.alp-dark input:focus,
body.alp-dark select:focus,
body.alp-dark textarea:focus {
  border-color: var(--alp-mint);
  box-shadow: 0 0 0 3px rgba(110, 218, 180, .15);
}

body.alp-dark select option { background: var(--alp-deep); color: var(--alp-text); }

body.alp-dark label { color: var(--alp-text-mid); font-size: 14px; font-weight: 500; }

body.alp-dark .wpcf7-submit {
  width: 100%;
  border: 0;
  border-radius: var(--alp-r-sm);
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--alp-mint-light) 0%, var(--alp-mint) 48%, var(--alp-mint-dark) 100%);
  color: #061318;
  font-family: var(--alp-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--alp-t), box-shadow var(--alp-t);
}

body.alp-dark .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(110, 218, 180, .4); }

body.alp-dark .wpcf7-response-output {
  border-radius: var(--alp-r-sm);
  border: 1px solid var(--alp-line-strong) !important;
  background: rgba(110, 218, 180, .07);
  color: var(--alp-text-mid);
}

body.alp-dark input[type="checkbox"],
body.alp-dark input[type="radio"] { accent-color: var(--alp-mint); width: auto; }


/* ============================================================
   24  ANIMATIONEN, FOKUS, REDUCED MOTION
   ============================================================ */

@keyframes alpPulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes alpPulseRing {
  0%   { transform: scale(1);    opacity: .6; }
  50%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}

/* Warenkorb-Icon und Haupt-CTA behalten ihren dezenten Puls. */
body.alp-dark .header-cart-link.nav-top-link.is-small {
  position: relative;
  animation: alpPulseScale 1.6s ease-in-out infinite;
}

body.alp-dark .header-cart-link.nav-top-link.is-small::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(110, 218, 180, .65);
  border-radius: inherit;
  pointer-events: none;
  animation: alpPulseRing 1.6s ease-in-out infinite;
}

body.alp-dark .alp-hero-btns .btn-primary.btn-lg { position: relative; }

body.alp-dark .alp-hero-btns .btn-primary.btn-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(110, 218, 180, .6);
  border-radius: inherit;
  pointer-events: none;
  animation: alpPulseRing 4s ease-in-out infinite;
}

/* Sichtbarer Fokus für Tastaturbedienung. */
body.alp-dark a:focus-visible,
body.alp-dark button:focus-visible,
body.alp-dark input:focus-visible,
body.alp-dark select:focus-visible,
body.alp-dark textarea:focus-visible,
body.alp-dark [tabindex]:focus-visible {
  outline: 2px solid var(--alp-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

body.alp-dark .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body.alp-dark *,
  body.alp-dark *::before,
  body.alp-dark *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  body.alp-dark .fade-up { opacity: 1; transform: none; filter: none; }
  body.alp-dark .alp-hero-video { display: none; }
}