/*
Theme Name: NEROX Peptides
Author: NEROX Peptides
Description: WooCommerce-Theme für NEROX Peptides – Forschungspeptide mit Laborbericht je Charge.
Version: 5.2.5
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: peptide-lab
*/

/* =========================================================
   1. TOKENS
   ======================================================= */
:root {
  --ink:     #0a0c10;   /* NEROX-Schwarz (Logo) */
  --muted:   #5b6270;   /* NEROX-Grau (PEPTIDES) */
  --paper:   #ffffff;
  --surface: #f3f4f6;   /* neutrales helles Grau, alterniert mit Weiß */
  --line:    #e2e5ea;   /* sehr helle Trennlinie */
  --dark:    #050608;
  --dark-surface: #0e1116;   /* Graphit fast Schwarz */

  --brand:      #087c99;  /* NEROX-Cyan, dunkel genug für Text auf Weiß */
  --brand-dark: #06647c;  /* Hover */
  --accent:     #19c2e5;  /* NEROX-Cyan (Akzentpunkt im Logo), für dunkle Flächen */
  --btn:        #0a0c10;  /* Hauptknöpfe */
  --btn-hover:  #232832;
  --flag:       #1d7a4c;
  --flag-bg:    #e6f4ec;

  --r: 18px;
  --r-sm: 12px;
  --r-btn: 10px;
  --pill: 980px;
  --max: 1200px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", Consolas, Menlo, monospace;
}

/* =========================================================
   2. BASIS
   ======================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.47059 var(--font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

h1, h2, h3 { font-weight: 600; line-height: 1.07; letter-spacing: -0.015em; margin: 0 0 0.4em; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); text-align: center; }
h3 { font-size: 1.4rem; font-weight: 600; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.section { padding: 96px 0; }
.section__head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.section__head p { color: var(--muted); font-size: 1.2rem; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; max-width: none; text-align: left; }
.section__head--row > div { max-width: 640px; }
.section__head--row h2 { text-align: left; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================
   3. BUTTONS — Pill-Form
   ======================================================= */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--pill);
  padding: 0.75em 1.6em;
  font: 500 1.0625rem/1.2 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--brand); padding: 0.75em 0.2em; gap: 0.25em;
}
.btn--ghost::after { content: "›"; font-weight: 600; transition: transform 0.15s; }
.btn--ghost:hover { background: transparent; color: var(--brand-dark); }
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--sm { padding: 0.5em 1.1em; font-size: 0.9rem; }

/* =========================================================
   4. HINWEISLEISTE + HEADER — schmal, transluzent
   ======================================================= */
.notice { background: var(--dark-surface); color: rgba(255,255,255,0.86); font-size: 0.8rem; text-align: center; padding: 8px 20px; }
.notice .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.notice strong { font-weight: 600; color: #fff; }

.site-header {
  background: rgba(255,255,255,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: sticky; top: 0; z-index: 50;
}
.site-header__row { display: flex; align-items: center; gap: 28px; min-height: 52px; }

.brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; --lg-n: #151b2b; --lg-g: #5a6175; --lg-a: #0e64dd; }
.brand svg { display: block; width: auto; flex: none; }
.brand__full { height: 36px; aspect-ratio: 1752.9 / 523; }
.brand__compact { height: 20px; aspect-ratio: 1465.9 / 261.5; display: none !important; }
@media (max-width: 560px) { .brand__full { display: none !important; } .brand__compact { display: block !important; } }
@media (max-width: 360px) { .brand__compact { height: 18px; } }
.custom-logo { max-height: 36px; width: auto; }

.primary-nav { flex: 1; }
.primary-nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.primary-nav a { color: var(--ink); text-decoration: none; font-weight: 400; font-size: 0.83rem; padding: 6px 0; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav a.is-current { color: var(--muted); }

.site-header__tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.site-header .search-form { display: flex; }
.site-header input[type="search"] { border: none; border-radius: var(--pill); padding: 8px 16px; font: inherit; font-size: 0.85rem; width: 170px; background: var(--surface); }
.site-header .search-form button, .site-header .search-form input[type="submit"] { display: none; }

.pl-cart { display: inline-flex; align-items: center; gap: 7px; border: none; background: var(--surface); border-radius: var(--pill); padding: 7px 15px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.85rem; }
.pl-cart:hover { background: #e8e8ed; color: var(--ink); }
.pl-cart__n { background: var(--brand); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 0.7rem; padding: 0 4px; }

.nav-toggle { display: none; background: var(--surface); border: none; border-radius: var(--pill); padding: 8px 14px; font: 500 0.85rem var(--font); color: var(--ink); cursor: pointer; }

.langswitch { display: inline-flex; background: var(--surface); border-radius: var(--pill); padding: 2px; }
.langswitch a { padding: 5px 12px; font: 600 0.72rem var(--font); letter-spacing: 0.02em; color: var(--muted); text-decoration: none; border-radius: var(--pill); }
.langswitch a.is-active { background: var(--ink); color: #fff; }
.langswitch a:hover:not(.is-active) { color: var(--ink); }
@media (max-width: 860px) { .langswitch { order: -1; margin-right: auto; } }

/* =========================================================
   5. HERO — zentrierte Headline, Bild darunter
   ======================================================= */
.hero { padding: 64px 0 0; text-align: center; background: var(--surface); }
.hero__grid { display: block; padding-bottom: 0; }
.hero__text { max-width: 780px; margin: 0 auto; }
.lp-tag {
  display: inline-block; margin: 0 0 20px; padding: 6px 16px;
  font: 600 0.8rem/1 var(--font); letter-spacing: 0; color: var(--muted);
  background: rgba(0,0,0,0.05); border-radius: var(--pill);
}
.hero h1 { margin-bottom: 0.15em; }
.lead { font-size: 1.3rem; color: var(--muted); max-width: 38em; margin-inline: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; justify-content: center; align-items: center; }

.hero__stats { display: flex; gap: 56px; margin: 56px auto 0; padding: 0; border: none; justify-content: center; max-width: none; }
.hero__stats dt { font-size: 2.2rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.hero__stats dd { margin: 2px 0 0; color: var(--muted); font-size: 0.92rem; max-width: 10em; }

.hero__photo {
  margin: 56px auto 0; position: relative; padding: 0; border: none; background: transparent;
  max-width: 620px;
}
.hero__photo::before, .hero__photo::after { display: none; }
.hero__photo img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.25); }

.report { margin: 0; background: #fff; border: none; border-radius: var(--r); padding: 28px 28px 22px; color: var(--ink); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18); }
.report svg { display: block; width: 100%; }
.report__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.report__meta dt { font-size: 0.78rem; color: var(--muted); }
.report__meta dd { margin: 0; font-weight: 600; }
.report__meta .ok { color: var(--flag); }
.report figcaption { font-size: 0.82rem; color: var(--muted); }
.trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s ease-out 0.3s forwards; }
.area { opacity: 0; animation: fade 0.6s ease-out 2.2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .trace { animation: none; stroke-dashoffset: 0; }
  .area { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
}

.trustbadges-row { margin: 56px 0 0; padding-top: 0; border: none; }
.trustbadges-row .paybadges { gap: 10px; max-width: 760px; margin-inline: auto; }
.trustbadges-row .paybadge { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

/* =========================================================
   6. VERTRAUENSLEISTE — Karten mit weichem Schatten statt Linien
   ======================================================= */
.trust { background: var(--paper); border: none; padding: 96px 0; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust__item { padding: 32px 26px; border: none; border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 14px; text-align: left; }
.trust__item .ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.trust__item .ic svg { width: 20px; height: 20px; }
.trust__item h3 { margin-bottom: 0; font-size: 1.05rem; }
.trust__item p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* =========================================================
   7. KATEGORIEN — große abgerundete Bildkacheln
   ======================================================= */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.cat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 26px; background: var(--surface); border-radius: var(--r); color: var(--ink); text-decoration: none; font-weight: 600; }
.cat:hover { background: #ececf0; color: var(--ink); }
.cat span { color: var(--muted); font-weight: 400; font-size: 0.88rem; }

.cats--photo { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat--photo { position: relative; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; height: 300px; border-radius: var(--r); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.15); }
.cat--photo .cat__img { flex: 1; background-size: cover; background-position: center; background-color: var(--surface); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cat--photo:hover .cat__img { transform: scale(1.06); }
.cat--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%); }
.cat--photo .cat__label { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; font-weight: 600; font-size: 1.2rem; display: flex; flex-direction: column; gap: 3px; }
.cat--photo .cat__label span { color: rgba(255,255,255,.82); font-weight: 400; font-size: 0.85rem; }

/* =========================================================
   8. PRODUKTKARTEN — abgerundet, Schatten statt Rahmen
   ======================================================= */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0 0 32px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  position: relative; width: auto; float: none; margin: 0; display: flex; flex-direction: column;
  background: var(--surface); padding: 22px; border-radius: var(--r); transition: transform .25s ease, box-shadow .25s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(0,0,0,0.2); background: var(--surface); }
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product a img { margin: 0 0 16px; border-radius: var(--r-sm); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.08rem; font-weight: 600; padding: 0; color: var(--ink); }
.woocommerce ul.products li.product .lp-ruo { display: block; font-size: .74rem; letter-spacing: 0; color: var(--muted); margin: 3px 0 10px; }
.woocommerce ul.products li.product .price { font-weight: 600; }
.woocommerce ul.products li.product .button { margin-top: auto; text-align: center; }
.tbd { color: var(--muted); font-weight: 500; font-size: .85rem; }

.stockbadge { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 0.68rem; font-weight: 600; padding: 5px 11px; border-radius: var(--pill); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.stockbadge--ok { color: var(--flag); }
.stockbadge--wait { color: var(--muted); }
.lp-hero .stockbadge { position: static; display: inline-block; margin-bottom: 14px; box-shadow: none; background: var(--surface); }

/* =========================================================
   9. LABORBERICHT LESEN + FAQ
   ======================================================= */
.reading { background: var(--surface); border: none; }
.reading__grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: start; }
.reading .steps { grid-template-columns: 1fr; gap: 28px; }
.reading .steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 18px; }
.reading .steps li::before { margin: 0; grid-row: span 2; }
.reading .steps h3 { margin-bottom: 0.2em; }
.reading .report { background: #fff; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--brand); color: #fff;
  font: 600 0.95rem/1 var(--font); margin-bottom: 16px; border-radius: 50%;
}
.steps p { color: var(--muted); margin: 0; }

.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 500; font-size: 1.1rem; padding: 22px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); font-weight: 300; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 20px; margin: 0; }

/* =========================================================
   10. BEWERTUNGEN
   ======================================================= */
.reviews__head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; flex-wrap: wrap; justify-content: center; }
.reviews__score { font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.reviews__count { color: var(--muted); font-size: 0.9rem; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { background: var(--surface); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.review .stars { margin-bottom: 2px; }
.review p { margin: 0; color: var(--ink); font-size: 0.98rem; }
.review__author { margin-top: auto; padding-top: 12px; font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.review__author .verified { color: var(--flag); font-weight: 600; }
.reviews__placeholder-note { margin-top: 24px; font-size: 0.82rem; color: var(--muted); text-align: center; max-width: 56em; margin-inline: auto; }

.stars { position: relative; display: inline-block; font-size: var(--size, 16px); line-height: 1; letter-spacing: 2px; }
.stars__bg, .stars__fg { display: block; white-space: nowrap; }
.stars__bg { color: var(--line); }
.stars__fg { position: absolute; inset: 0; color: #ff9f0a; overflow: hidden; width: var(--pct, 0%); }

/* =========================================================
   11. FOOTER — dunkle, ruhige Vollbild-Sektion
   ======================================================= */
.site-footer { background: var(--dark-surface); color: #a1a1a6; padding: 64px 0 30px; margin-top: 0; }
.site-footer a { color: #a1a1a6; }
.site-footer a:hover { color: #fff; }
.site-footer h3 { color: #fff; font-size: 0.85rem; font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer li a { font-size: 0.85rem; }
.site-footer .brand { --lg-n: #ffffff; --lg-g: #a3aab9; --lg-a: #0e64dd; }
.site-footer .brand__full { height: 46px; display: block !important; }
.site-footer .brand__compact { display: none !important; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer__note { margin-top: 24px; font-size: 0.76rem; color: #6e6e73; line-height: 1.5; }
.footer__pay { margin-top: 24px; }
.footer__pay h3 { margin-bottom: 12px; }

.paybadges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.paybadges li { list-style: none; }
.paybadge { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--surface); border-radius: var(--r-sm); padding: 9px 14px; font-size: 0.85rem; font-weight: 500; color: var(--ink); text-align: center; line-height: 1.25; }
.paybadge svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.site-footer .paybadge { background: rgba(255,255,255,0.08); color: #fff; }
.site-footer .paybadge svg { color: var(--accent); }
.footer__pay .paybadges { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); justify-content: start; }
.lp-pay { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.lp-pay p { margin: 0 0 10px; font-size: 0.78rem; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.lp-pay .paybadges { grid-template-columns: repeat(2, 1fr); }

/* =========================================================
   12. STANDARD-INHALTE
   ======================================================= */
.entry { max-width: 720px; }
.entry-title { margin-bottom: 0.6em; }
.entry h3 { margin: 1.6em 0 0.5em; font-size: 1.15rem; }
.entry h3:first-of-type { margin-top: 0.8em; }
.entry ul { padding-left: 20px; color: var(--muted); }
.entry ul li { margin-bottom: 6px; }
.entry em { color: var(--muted); }

/* =========================================================
   13. WOOCOMMERCE ALLGEMEIN
   ======================================================= */
.woocommerce-breadcrumb { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select { border: none; border-radius: var(--pill); padding: 9px 16px; background: var(--surface); font: inherit; }
.woocommerce .price, .woocommerce div.product p.price, .woocommerce ul.products li.product .price { color: var(--ink); font-weight: 600; }
.woocommerce span.onsale { background: var(--brand); border-radius: var(--pill); min-height: 0; min-width: 0; line-height: 1; padding: 7px 12px; }
.woocommerce div.product .product_title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--surface); border: none; border-radius: var(--r-sm); border-top: none; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .quantity .qty {
  border: none; border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface); font: inherit;
}
.woocommerce table.shop_table { border: none; border-radius: var(--r); background: var(--surface); overflow: hidden; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--paper); }
.woocommerce form .form-row .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; }
.woocommerce-checkout #payment { background: var(--surface); border-radius: var(--r); border: none; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--r-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* =========================================================
   14. PRODUKT-LANDINGPAGE
   ======================================================= */
.woocommerce div.product.lp { margin: 0; }
.lp-crumb { margin: 18px auto 0; color: var(--muted); font-size: 0.88rem; }
.lp-crumb a { color: var(--muted); }
.lp-crumb a:hover { color: var(--brand); }

.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; margin-bottom: 96px; padding-top: 32px; }
.lp .lp-gallery .woocommerce-product-gallery, .lp .lp-gallery div.images { width: 100% !important; float: none !important; margin: 0; }
.lp .woocommerce-product-gallery__wrapper { border-radius: var(--r); background: var(--surface); padding: 16px; }
.lp .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.lp .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 12px 0 0; padding: 0; }
.lp .flex-control-thumbs li { width: auto !important; float: none !important; }
.lp .flex-control-thumbs img { border-radius: var(--r-sm); opacity: 0.6; cursor: pointer; }
.lp .flex-control-thumbs img.flex-active, .lp .flex-control-thumbs img:hover { opacity: 1; box-shadow: 0 0 0 2px var(--brand); }

.lp-buy { width: 100% !important; float: none !important; }
.lp-buy .product_title { margin-bottom: 0.3em; }
.lp-buy .price { font-size: 1.7rem; display: block; margin: 0 0 18px; font-weight: 600; }
.lp-buy .woocommerce-product-details__short-description { color: var(--muted); max-width: 34em; font-size: 1.05rem; }
.lp-buy form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 26px 0; }
.lp-buy form.cart .quantity .qty { height: 100%; min-height: 50px; width: 76px; text-align: center; border-radius: var(--pill); }
.lp-buy form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; padding: 1em 1.4em; font-size: 1.05rem; }
.lp-buy .product_meta { font-size: 0.86rem; color: var(--muted); display: grid; gap: 4px; margin-top: 22px; }
.lp-buy .product_meta a { color: var(--muted); }

.lp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; padding: 22px; border: none; background: var(--surface); border-radius: var(--r); }
.lp-facts dt, .lp-dl dt { font-size: 0.78rem; color: var(--muted); }
.lp-facts dd, .lp-dl dd { margin: 0; font-weight: 600; }
.lp-facts .ok, .lp-dl .ok { color: var(--flag); }

.lp-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-assure li { padding-left: 26px; position: relative; font-size: 0.96rem; }
.lp-assure li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--flag);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-trustmini { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.lp-trustmini span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.lp-trustmini svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

.lp-section { margin-bottom: 96px; }
.lp-section > h2 { margin-bottom: 0.7em; }
.lp-lab { background: var(--surface); border: none; padding: 48px; border-radius: var(--r); }
.lp-lab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.lp-lab .report { background: #fff; }
.lp-lab .report img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.lp-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 22px 0; }

.lp-eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--brand); background: rgba(25,194,229,0.08); padding: 5px 12px; border-radius: var(--pill); margin-bottom: 12px; }

.lp-table { width: 100%; max-width: 760px; border-collapse: collapse; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.lp-table th, .lp-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: top; }
.lp-table th { width: 38%; font-weight: 500; color: var(--muted); font-size: 0.92rem; }
.lp-table tr:last-child th, .lp-table tr:last-child td { border-bottom: 0; }

.lp-desc { max-width: 720px; margin-inline: auto; text-align: center; }
.lp-desc p { text-align: left; }
.lp-disclaimer { margin-top: 18px; font-size: 0.82rem; color: var(--muted); text-align: left; }

.lp-handling__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-handling__grid > div { background: var(--surface); border-radius: var(--r); padding: 26px; }
.lp-handling__grid h3 { font-size: 1.05rem; }
.lp-handling__grid p { color: var(--muted); margin: 0; }
.lp-related h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.7em; }

.lp-sticky { display: none; }
@media (max-width: 860px) {
  .lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,0.06); transform: translateY(110%); transition: transform 0.25s; }
  .lp-sticky.is-visible { transform: none; }
  .lp-sticky__info { display: grid; line-height: 1.3; min-width: 0; }
  .lp-sticky__info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lp-hero { grid-template-columns: 1fr; gap: 40px; margin-bottom: 72px; }
  .lp-lab { padding: 28px; }
  .lp-lab__grid, .lp-handling__grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-section { margin-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }

/* =========================================================
   15. ALTERSABFRAGE
   ======================================================= */
.agegate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
.agegate[hidden] { display: none; }
.agegate__box { background: #fff; padding: 36px; max-width: 460px; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.agegate__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
body.has-agegate { overflow: hidden; }

/* =========================================================
   16. REKONSTITUTIONSRECHNER
   ======================================================= */
.calc-page { text-align: center; }
.calc-page h1, .calc-page .lp-tag { text-align: center; }
.calc-page .lead { max-width: 46em; margin: 0 auto 44px; }
.calc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; margin-bottom: 24px; text-align: left; }
.calc-card { background: var(--surface); padding: 34px; border-radius: var(--r); }
.calc-card h2 { font-size: 1.2rem; margin-bottom: 24px; text-align: left; }
.calc-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ink); margin: 22px 0 8px; }
.calc-label:first-of-type { margin-top: 0; }
.calc-input, .calc-select { width: 100%; border: none; border-radius: var(--r-sm); padding: 13px 16px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.calc-row { display: flex; gap: 10px; }
.calc-row .calc-input { flex: 1; }
.calc-row .calc-select { flex: 0 0 130px; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calc-chip { border: none; background: #fff; color: var(--ink); border-radius: var(--pill); padding: 7px 15px; font: 500 0.85rem var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.calc-chip:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.calc-chip.is-active { background: var(--brand); color: #fff; box-shadow: none; }
.calc-hint { font-size: 0.78rem; color: var(--muted); margin: 8px 0 0; }
.calc-reset { margin-top: 28px; width: 100%; text-align: center; justify-content: center; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.calc-reset:hover { background: #ececf0; }

.calc-result { background: var(--ink); color: #fff; }
.calc-result h2 { color: #fff; }
.calc-placeholder { color: #a1a1a6; }
.calc-out { display: grid; gap: 16px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.calc-out dt { font-size: 0.78rem; color: #a1a1a6; }
.calc-out dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 600; color: #fff; }
.calc-dose-out__label { font-size: 0.85rem; color: #a1a1a6; margin: 0 0 6px; }
.calc-dose-out__value { font-size: 2rem; font-weight: 600; color: #19c2e5; margin: 0; }
.calc-dose-out__units { font-size: 0.85rem; color: #a1a1a6; margin: 4px 0 0; }
.calc-disclaimer { font-size: 0.82rem; color: var(--muted); max-width: 56em; margin-inline: auto; text-align: left; }
.calc-link { margin-top: 14px; color: var(--muted); font-size: 0.92rem; }

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

/* =========================================================
   17. LABORANALYSEN-ÜBERSICHT
   ======================================================= */
.labtable { list-style: none; margin: 32px 0; padding: 0; }
.labrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 24px; border-radius: var(--r-sm); background: var(--surface); margin-bottom: 10px; }
.labrow__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.labrow__name:hover { color: var(--brand); }
.labrow__main { display: grid; gap: 3px; }
.labrow__meta { font-size: 0.85rem; color: var(--muted); }
.labrow__status { display: flex; align-items: center; gap: 12px; }
.labstatus { font-size: 0.8rem; font-weight: 600; padding: 6px 13px; border-radius: var(--pill); }
.labstatus--ok { background: var(--flag-bg); color: var(--flag); }
.labstatus--pending { background: #fff; color: var(--muted); }

/* =========================================================
   18. VERSAND UND ZAHLUNG
   ======================================================= */
.ship-page { text-align: center; }
.ship-page h1 { text-align: center; }
.ship-page .lead { max-width: 46em; margin: 0 auto 44px; }
.ship-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.ship-stat { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); padding: 26px; border-radius: var(--r); text-align: left; }
.ship-stat .ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--brand); background: none; border-radius: 0; box-shadow: none; }
.ship-stat .ic svg { width: 19px; height: 19px; }
.ship-stat strong { display: block; font-size: 1.1rem; color: var(--ink); }
.ship-stat span { font-size: 0.85rem; color: var(--muted); }
.ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; text-align: left; }
.ship-card { background: var(--surface); padding: 30px; border-radius: var(--r); }
.ship-card h2 { font-size: 1.15rem; margin-bottom: 18px; text-align: left; }
.ship-card .lp-table { width: 100%; background: #fff; }
.ship-note { font-size: 0.82rem; color: var(--muted); margin: 14px 0 0; }
.ship-list { margin: 0; padding-left: 18px; color: var(--ink); display: grid; gap: 8px; }
.ship-list li::marker { color: var(--brand); }

@media (max-width: 860px) {
  .ship-stats { grid-template-columns: 1fr; }
  .ship-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   19. RESPONSIVE
   ======================================================= */
@media (max-width: 960px) {
  .lp-hero { grid-template-columns: 1fr; gap: 40px; }
  .reading__grid { grid-template-columns: 1fr; gap: 40px; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .cats--photo { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section__head--row { flex-direction: column; align-items: flex-start; }
  .hero__stats { flex-wrap: wrap; gap: 32px; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 8px 20px 16px; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 4px; }
  .primary-nav a { display: block; padding: 10px 0; }
  .site-header .search-form { display: none; }
  .site-header__row { gap: 10px; }
  .site-header__tools { gap: 8px; }
  .nav-toggle { padding: 7px 11px; font-size: 0.8rem; }
  .langswitch a { padding: 5px 9px; font-size: 0.68rem; }
  .pl-cart { padding: 6px 11px; font-size: 0.8rem; gap: 5px; }
}
@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .hero { padding: 44px 0 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .report__meta { grid-template-columns: 1fr 1fr; }
  .cats--photo { grid-template-columns: 1fr; }
  .paybadges { grid-template-columns: repeat(2, 1fr); }
  .lp-pay .paybadges { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .paybadges { grid-template-columns: 1fr; }
}

/* =========================================================
   20. FEINSCHLIFF
   ======================================================= */
/* Listen-Einzug entfernen: Badges standen sonst versetzt */
.paybadges { padding: 0; margin: 0; }

/* Buttons: Beschriftung immer mittig */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { justify-content: center; }

/* Hero: Headline auf zwei statt drei Zeilen */
.hero__text { max-width: 980px; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }

/* Produktkarten: einheitlich zentriert */
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-bottom: 2px; }
.woocommerce ul.products li.product .lp-ruo { margin: 0 0 12px; }
.woocommerce ul.products li.product .price { display: block; margin: 0 0 16px; font-size: 1.05rem; }
.woocommerce ul.products li.product .button { width: 100%; }

/* Überschriften-Kopf mit Link darunter */
.section__head .btn--ghost { margin-top: 4px; }

/* Abstände straffen: keine doppelten Leerräume zwischen Sektionen */
.trust { padding: 72px 0 8px; }
.trustbadges-row { border: 0; padding-top: 0; }

/* Laborbericht-Erklärung: Kopf in der linken Spalte linksbündig */
.reading .section__head { text-align: left; margin: 0 0 36px; }
.reading .section__head h2 { text-align: left; }

/* Dunkle Vollbild-Sektion für das Sortimentsbild */
.showcase { background: #000; padding: 96px 0; text-align: center; }
.showcase h2 { color: #f5f5f7; }
.showcase .section__head p { color: #a1a1a6; }
.showcase .banner { margin: 0; }
.showcase .banner img { display: block; width: 100%; height: auto; border-radius: var(--r); }
@media (max-width: 560px) { .showcase { padding: 64px 0; } }

/* Lange deutsche Einzelwörter (z. B. "Rekonstitutionsrechner") auf dem Handy nie abschneiden */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 560px) {
  .calc-page h1, .ship-page h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}

/* =========================================================
   21. BADGES SYMMETRISCH
   Zahlungsarten: 3 gleich große Kacheln in einer Reihe.
   Sicherheit: 4 in einer Reihe (Startseite) bzw. 2x2 (Produktseite).
   Icon über Text, identische Höhe, kein Listen-Einzug.
   ======================================================= */
.paybadges { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.paybadge {
  flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  min-height: 86px; padding: 16px 10px; font-size: 0.8rem; font-weight: 500;
  text-align: center; line-height: 1.25; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.paybadge svg { width: 22px; height: 22px; }

.paybadges:not(.trustbadges),
.lp-pay .paybadges:not(.trustbadges) { grid-template-columns: repeat(3, 1fr); }
.trustbadges,
.trustbadges-row .trustbadges { grid-template-columns: repeat(4, 1fr); }
.lp-pay .trustbadges { grid-template-columns: repeat(2, 1fr); }
.footer__pay .paybadges:not(.trustbadges) { grid-template-columns: repeat(3, 170px); justify-content: start; }
.site-footer .paybadge { box-shadow: none; }
.lp-pay { text-align: left; }

@media (max-width: 560px) {
  .trustbadges, .trustbadges-row .trustbadges { grid-template-columns: repeat(2, 1fr); }
  .footer__pay .paybadges:not(.trustbadges) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  /* Sehr schmale Handys: Zahlungsarten als 3 gleich breite Zeilen */
  .paybadges:not(.trustbadges),
  .lp-pay .paybadges:not(.trustbadges),
  .footer__pay .paybadges:not(.trustbadges) { grid-template-columns: 1fr; }
  .paybadges:not(.trustbadges) .paybadge { flex-direction: row; min-height: 0; padding: 12px 16px; font-size: 0.85rem; }
  .trustbadges, .lp-pay .trustbadges, .trustbadges-row .trustbadges { grid-template-columns: repeat(2, 1fr); }

  /* Kopfzeile: Warenkorb als Symbol, damit nichts über den Rand läuft */
  .pl-cart { font-size: 0; padding: 7px 10px; gap: 6px; }
  .pl-cart::before {
    content: ""; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pl-cart__n { font-size: 0.68rem; }
  .trust__grid { grid-template-columns: 1fr; }
}

/* Tabellen und Raster auf dem Handy: nie breiter als der Bildschirm */
.ship-grid > *, .lp-hero > *, .calc-grid > *, .reading__grid > *, .lp-lab__grid > * { min-width: 0; }
.lp-table { table-layout: fixed; }
.lp-table td { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .lp-table, .lp-table tbody, .lp-table tr, .lp-table th, .lp-table td { display: block; width: 100%; }
  .lp-table tr { padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .lp-table tr:last-child { border-bottom: 0; }
  .lp-table th, .lp-table td { padding: 0; border: 0; }
  .lp-table th { font-size: 0.78rem; margin-bottom: 3px; }
  .ship-card, .calc-card { padding: 22px; }
}

/* =========================================================
   22. REDUKTION: weniger Dekoration, mehr Ruhe
   ======================================================= */
/* Hinweisleiste hell */
.notice { background: var(--surface); color: var(--ink); border-bottom: 1px solid rgba(0,0,0,0.04); }
.notice strong { color: var(--ink); }

/* Dachzeile statt Pillen-Etikett */
.eyebrow { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Vertrauensleiste: Icon, Titel, eine Zeile – ohne Kästen */
.trust { background: var(--paper); padding: 80px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.trust__grid { gap: 40px; }
.trust__item { background: transparent; padding: 0; align-items: center; text-align: center; gap: 10px; border-radius: 0; }
.trust__item .ic { width: auto; height: auto; background: none; box-shadow: none; color: var(--ink); border-radius: 0; }
.trust__item .ic svg { width: 34px; height: 34px; }
.trust__item h3 { font-size: 1.05rem; margin: 6px 0 0; }
.trust__item p { max-width: 20em; font-size: 0.92rem; }

/* Kategorien: Bild, darunter Name */
.cats--photo { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cat--photo, .cat--photo:hover { height: auto; overflow: visible; box-shadow: none; background: transparent; border-radius: 0; padding: 0; gap: 14px; }
.cat--photo::after { display: none; }
.cat--photo .cat__img { flex: none; width: 100%; aspect-ratio: 1; border-radius: var(--r); background-size: cover; background-position: center 40%; transition: opacity .2s; }
.cat--photo:hover .cat__img { transform: none; opacity: .88; }
.cat--photo .cat__label { position: static; color: var(--ink); font-size: 1rem; font-weight: 600; text-align: center; align-items: center; }
.cat--photo:hover .cat__label { color: var(--brand); }

/* Dunkle Kennzahlen-Sektion */
.stats { background: #000; padding: 112px 0; text-align: center; }
.stats h2 { color: #f5f5f7; }
.stats .section__head p { color: #a1a1a6; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 920px; margin: 0 auto; }
.stats__grid dt { font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #8e8e93 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats__grid dd { margin: 12px 0 0; color: #a1a1a6; font-size: 1rem; }

@media (max-width: 960px) { .cats--photo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .cats--photo { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stats { padding: 72px 0; }
  .stats__grid { grid-template-columns: 1fr; gap: 36px; }
  .trust { padding: 56px 0; }
}

/* Ausgeblendete Elemente bleiben immer ausgeblendet, auch wenn eine Komponente display setzt */
[hidden] { display: none !important; }

/* =========================================================
   23. 3D UND BEWEGUNG
   ======================================================= */
/* Scroll-Einblendung */
.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.reveal--row { transform: translateX(8px); transition-duration: .5s; }
.reveal.reveal--stage { transform: scale(.96); transition-duration: 1s; }
.reveal.in { opacity: 1; transform: none; }

/* Chromatogramm zeichnet sich erst, wenn es sichtbar wird */
.motion .report .trace, .motion .report .area { animation-play-state: paused; }
.motion .report.in .trace, .motion .report.in .area { animation-play-state: running; }

/* Hero-Foto in 3D mit wanderndem Lichtreflex */
.hero__photo { position: relative; transform-origin: 50% 0%; will-change: transform; }
.hero__photo .sheen { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.38), rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity .35s; }
.hero__photo:hover .sheen { opacity: 1; }

/* Karten mit 3D-Neigung und Glanzlicht */
.tilt { transform-style: preserve-3d; }
.cat--photo .cat__img { position: relative; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.5), rgba(255,255,255,0) 50%);
  opacity: 0; transition: opacity .3s; }
.tilt:hover::after { opacity: 1; }
.woocommerce ul.products li.product.tilt:hover { box-shadow: 0 30px 60px -24px rgba(0,0,0,.28); }

/* 3D-Sortimentskarussell */
.orbit { background: #000; padding: 112px 0 24px; text-align: center; overflow: hidden; }
.orbit h2 { color: #f5f5f7; }
.orbit .section__head { margin-bottom: 24px; max-width: 900px; }
.orbit .section__head p { color: #a1a1a6; }
.orbit__stage { position: relative; height: 520px; perspective: 1400px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.orbit__stage:active { cursor: grabbing; }
.orbit__ring { position: absolute; left: 50%; top: 40px; width: 224px; height: 280px; margin-left: -112px; transform-style: preserve-3d; }
.orbit__item { position: absolute; inset: 0; margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  -webkit-box-reflect: below 14px linear-gradient(transparent 72%, rgba(255,255,255,.16)); }
.orbit__item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.orbit + .stats { padding-top: 48px; }

@media (max-width: 560px) {
  .orbit { padding-top: 72px; }
  .orbit__stage { height: 310px; }
  .orbit__ring { width: 150px; height: 188px; margin-left: -75px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__photo { transform: none !important; }
}

/* =========================================================
   24. PRODUKTSEITE UND MIKRO-INTERAKTIONEN
   ======================================================= */
/* Produktbild: bleibt am Desktop stehen, während die Kaufinfos vorbeiziehen */
@media (min-width: 961px) { .lp-gallery { position: sticky; top: 84px; align-self: start; } }
.lp .woocommerce-product-gallery__wrapper { position: relative; transform-origin: 50% 0%; will-change: transform; }
.lp .woocommerce-product-gallery__wrapper .sheen { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; z-index: 2;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.4), rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity .35s; }
.lp .woocommerce-product-gallery__wrapper:hover .sheen { opacity: 1; }
.woocommerce-product-gallery__image img.swap { animation: pl-swap .5s cubic-bezier(.2,.7,.2,1); }
@keyframes pl-swap { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* Reinheits-Ring */
.lp-lab__metrics { display: flex; align-items: center; gap: 32px; margin: 24px 0; }
.lp-lab__metrics .lp-dl { margin: 0; flex: 1; }
.purity { position: relative; flex: none; width: 168px; height: 168px; }
.purity svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.purity__track, .purity__bar { fill: none; stroke-width: 11; }
.purity__track { stroke: rgba(0,0,0,.07); }
.purity__bar { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(25,194,229,.45)); }
.purity__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.purity__val strong { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.purity__val span { font-size: .72rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 560px) { .lp-lab__metrics { flex-direction: column; align-items: flex-start; } }

/* Buttons: magnetisch und mit Häkchen-Rückmeldung */
.btn, .woocommerce a.button, .woocommerce button.button { transition: background .2s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.is-added { background: var(--ink) !important; color: #fff !important; }
.added-check { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: pl-check .45s .05s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes pl-check { to { stroke-dashoffset: 0; } }
.pl-cart__n.bump { animation: pl-bump .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes pl-bump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* Shop-Filter: Karten fliegen ein */
.woocommerce ul.products li.product.pop { animation: pl-pop .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl-pop { from { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(10deg) scale(.96); } to { opacity: 1; transform: none; } }

/* Rechner: Ergebnis pulsiert */
.calc-result .bump { animation: pl-num .5s cubic-bezier(.2,.7,.2,1); }
@keyframes pl-num { 0% { transform: scale(1); } 40% { transform: scale(1.07); color: #19c2e5; } 100% { transform: scale(1); } }

/* Icons drehen sich beim Einblenden in 3D auf */
.motion .trust__item.in .ic svg, .motion .ship-stat.in .ic svg { animation: pl-icon .9s .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl-icon { from { opacity: 0; transform: perspective(300px) rotateY(90deg); } to { opacity: 1; transform: none; } }

/* Laboranalysen: Live-Punkt bei verfügbaren Berichten */
.labstatus--ok { position: relative; padding-left: 26px; }
.labstatus--ok::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--flag); animation: pl-pulse 2s infinite; }
@keyframes pl-pulse { 0% { box-shadow: 0 0 0 0 rgba(29,122,76,.45); } 70% { box-shadow: 0 0 0 8px rgba(29,122,76,0); } 100% { box-shadow: 0 0 0 0 rgba(29,122,76,0); } }

@media (prefers-reduced-motion: reduce) {
  .labstatus--ok::before, .pl-cart__n.bump, .calc-result .bump, .woocommerce ul.products li.product.pop, .added-check { animation: none; stroke-dashoffset: 0; }
  .lp .woocommerce-product-gallery__wrapper { transform: none !important; }
}

/* Produktseite: Abschnittsüberschriften linksbündig, Beschreibung bleibt zentriert */
.lp h2 { text-align: left; }
.lp .lp-desc h2 { text-align: center; }

/* =========================================================
   25. PRODUKTLEISTE, WORT-ANIMATION, SCROLL-TEXT, LICHT
   ======================================================= */
/* Horizontale Produktleiste */
.shelf { --edge: max(20px, calc((100vw - var(--max)) / 2)); position: relative; }
.shelf .woocommerce { margin: 0; }
.shelf ul.products {
  display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 280px; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 14px var(--edge) 44px; margin: 0; scrollbar-width: none; -ms-overflow-style: none;
}
.shelf ul.products::-webkit-scrollbar { display: none; }
.shelf ul.products li.product { scroll-snap-align: start; }
.shelf.is-dragging ul.products { scroll-snap-type: none; cursor: grabbing; }
.shelf.is-dragging ul.products li.product { pointer-events: none; }
.shelf img { -webkit-user-drag: none; user-select: none; }
.shelf__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: -12px; }
.shelf__btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s, transform .2s; }
.shelf__btn:hover:not(:disabled) { background: #e8e8ed; transform: scale(1.06); }
.shelf__btn:disabled { opacity: .35; cursor: default; }
.shelf__btn svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .shelf ul.products { grid-auto-columns: 76%; gap: 14px; } }

/* Hero: weiches, langsam pulsierendes Licht hinter dem Produktfoto */
.hero { overflow: hidden; }
.hero__grid { position: relative; }
.hero__grid::before {
  content: ""; position: absolute; left: 50%; bottom: -6%; width: min(1000px, 120%); height: 640px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(25,194,229,.24), rgba(25,194,229,0)); filter: blur(30px);
  animation: pl-glow 7s ease-in-out infinite alternate; pointer-events: none; z-index: 0;
}
.hero__text, .hero__photo { position: relative; z-index: 1; }
@keyframes pl-glow { from { opacity: .55; transform: translateX(-50%) scale(.92); } to { opacity: 1; transform: translateX(-50%) scale(1.06); } }

/* Hero-Überschrift Wort für Wort */
.hero h1.words .w { display: inline-block; animation: pl-word 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl-word { from { opacity: 0; filter: blur(14px); transform: translateY(22px); } to { opacity: 1; filter: none; transform: none; } }

/* Scroll-Text: Wörter schalten sich beim Scrollen ein */
.statement { padding: 140px 0; background: var(--paper); }
.statement__text { max-width: 980px; margin: 0 auto; font-size: clamp(1.9rem, 4.6vw, 3.7rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; }
.statement__text .sw { color: #d2d2d7; transition: color .4s ease; }
.statement__text .sw.lit { color: var(--ink); }
@media (max-width: 560px) { .statement { padding: 88px 0; } }

/* Lichtkegel in den dunklen Sektionen */
.spot { position: relative; }
.spot > * { position: relative; z-index: 1; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(640px circle at var(--sx, 50%) var(--sy, 40%), rgba(25,194,229,.16), rgba(25,194,229,0) 60%);
  opacity: 0; transition: opacity .5s; }
.spot:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__grid::before { animation: none; }
  .hero h1.words .w { animation: none; }
}

/* =========================================================
   26. HANDY-OPTIMIERUNG
   ======================================================= */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn:active, .woocommerce a.button:active, .woocommerce button.button:active,
  .shelf__btn:active, .catbtn:active, .ptab:active, .pl-cart:active, .calc-chip:active { transform: scale(.96); }
}

@media (max-width: 860px) {
  /* Kopfzeile ohne Weichzeichner, damit das Vollbild-Menü den ganzen Bildschirm nutzen kann */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.97); }
  .site-header__tools { order: 2; margin-left: auto; }

  /* Menü-Symbol: zwei Striche, die sich zum X drehen */
  .nav-toggle { order: 3; font-size: 0; width: 40px; height: 40px; padding: 0; background: transparent; position: relative; border-radius: 50%; }
  .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.6px; border-radius: 2px;
    background: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nav-toggle::before { top: 15px; }
  .nav-toggle::after { top: 23px; }
  .nav-toggle[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { transform: translateY(-4px) rotate(-45deg); }

  /* Vollbild-Menü */
  .primary-nav { display: block !important; position: fixed; left: 0; right: 0; top: var(--nav-top, 86px); bottom: 0; z-index: 49;
    background: rgba(255,255,255,.98); border: 0; padding: 18px 32px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none;
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s; }
  .primary-nav ul { flex-direction: column; gap: 0; justify-content: flex-start; }
  .primary-nav a { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; padding: 10px 0; color: var(--ink); }
  .primary-nav.is-open li { animation: pl-navin .5s cubic-bezier(.2,.7,.2,1) both; }
  .primary-nav.is-open li:nth-child(2) { animation-delay: .04s; } .primary-nav.is-open li:nth-child(3) { animation-delay: .08s; }
  .primary-nav.is-open li:nth-child(4) { animation-delay: .12s; } .primary-nav.is-open li:nth-child(5) { animation-delay: .16s; }
  .primary-nav.is-open li:nth-child(6) { animation-delay: .2s; }  .primary-nav.is-open li:nth-child(7) { animation-delay: .24s; }
  .primary-nav.is-open li:nth-child(8) { animation-delay: .28s; }
  body.nav-open { overflow: hidden; }

  /* Schwere Effekte auf dem Handy abspecken */
  .hero__grid::before { animation: none; filter: blur(22px); }
}
@keyframes pl-navin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* Kaufleiste unten */
.lp-sticky { background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.lp-sticky__info span { font-size: .9rem; color: var(--muted); }
.lp-sticky .btn { padding: .6em 1.4em; }

@media (max-width: 560px) {
  /* Hinweisleiste: drei Hinweise wechseln in einer Zeile */
  .notice { padding: 0; height: 34px; overflow: hidden; }
  .notice .wrap { position: relative; display: block; height: 34px; }
  .notice .wrap > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .78rem; white-space: nowrap; opacity: 0; animation: pl-tick 12s infinite; }
  .notice .wrap > span:nth-child(2) { animation-delay: 4s; }
  .notice .wrap > span:nth-child(3) { animation-delay: 8s; }

  /* Typografie und Abstände */
  .hero { padding-top: 36px; }
  .lead { font-size: 1.1rem; }
  .hero__photo { margin-top: 36px; }
  .section__head { margin-bottom: 36px; }
  .section__head p { font-size: 1.02rem; }

  /* Vertrauensleiste 2 x 2 statt vier langer Zeilen */
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .trust__item .ic svg { width: 28px; height: 28px; }
  .trust__item p { font-size: .84rem; }

  /* Filter und Produkt-Umschalter wischbar statt mehrzeilig */
  .shopfilter, .ptabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 0 20px 8px; scrollbar-width: none; }
  .shopfilter::-webkit-scrollbar, .ptabs::-webkit-scrollbar { display: none; }
  .catbtn, .ptab { flex: none; }

  /* Produktseite */
  .lp-buy .price { font-size: 1.5rem; }
  .lp-lab__metrics { align-items: center; }
  .purity { width: 150px; height: 150px; }

  /* Altersabfrage */
  .agegate__box { padding: 28px 22px; }
  .agegate__actions { flex-direction: column; }
  .agegate__actions .btn { width: 100%; justify-content: center; }

  /* Footer als Akkordeon */
  .footer__grid { gap: 0; }
  .fcol { border-bottom: 1px solid rgba(255,255,255,.12); }
  .fcol h3 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 15px 0; cursor: pointer; }
  .fcol h3::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
  .fcol.open h3::after { transform: rotate(-135deg); }
  .fcol ul { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.7,.2,1); }
  .fcol.open ul { max-height: 420px; padding-bottom: 12px; }
  .footer__grid > div:first-child { padding-bottom: 20px; }
}
@keyframes pl-tick { 0% { opacity: 0; transform: translateY(8px); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .notice .wrap > span { animation: none; }
  .notice .wrap > span:first-child { opacity: 1; }
  .primary-nav.is-open li { animation: none; }
}

/* Filter und Umschalter auf dem Handy: garantiert einzeilig und wischbar */
@media (max-width: 560px) {
  body .shopfilter, body .ptabs { flex-wrap: nowrap !important; overflow-x: auto !important; margin-inline: -20px !important;
    padding-left: 20px !important; padding-right: 20px !important; -webkit-overflow-scrolling: touch; }
  body .shopfilter { padding-bottom: 8px !important; }
}
@media (max-width: 560px) {
  body .ptabs.wrap { width: 100%; margin-inline: 0 !important; }
}

/* =========================================================
   27. SHOP-ERLEBNIS: KOPFZEILE, SUCHE, SCHUBLADE, STORY,
       PRODUKTSEITE, FOOTER, MIKRO-INTERAKTIONEN
   ======================================================= */
body.overlay-open { overflow: hidden; }

/* Kopfzeile verschmilzt oben mit dem Hero, beim Scrollen Milchglas */
.site-header { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
body.at-hero .site-header:not(.is-scrolled) { background: var(--surface); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.hdr-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.hdr-icon:hover { background: rgba(0,0,0,.05); }
.hdr-icon svg { width: 19px; height: 19px; }

/* Lesefortschritt */
.pl-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity .3s; pointer-events: none; }

/* Such-Overlay */
.srch { position: fixed; inset: 0; z-index: 250; visibility: hidden; pointer-events: none; }
.srch.is-open { visibility: visible; pointer-events: auto; }
.srch__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .35s ease; }
.srch.is-open .srch__backdrop { opacity: 1; }
.srch__panel { position: relative; background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  padding: 26px 0 34px; max-height: 86vh; overflow-y: auto; border-radius: 0 0 26px 26px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
  transform: translateY(-28px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.srch.is-open .srch__panel { transform: none; opacity: 1; }
.srch__form { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.srch__form > svg { width: 24px; height: 24px; color: var(--muted); flex: none; }
.srch__form input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink);
  font: 600 clamp(1.35rem, 3vw, 2rem)/1.2 var(--font); letter-spacing: -0.02em; -webkit-appearance: none; }
.srch__form input::-webkit-search-cancel-button { display: none; }
.srch__x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; cursor: pointer; flex: none; }
.srch__x svg { width: 18px; height: 18px; }
.srch__label { margin: 22px 0 10px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.srch__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.srch__chip { border: 0; background: var(--surface); color: var(--ink); border-radius: var(--pill); padding: 8px 15px; font: 500 .9rem var(--font); cursor: pointer; transition: background .2s, transform .2s; }
.srch__chip:hover { background: #e8e8ed; }
.srch__results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.srch__item a { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; color: var(--ink); transition: background .2s; }
.srch__item a:hover, .srch__item a:focus-visible { background: var(--surface); }
.srch__item img, .srch__ph { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface); flex: none; }
.srch__txt { flex: 1; min-width: 0; display: grid; }
.srch__txt strong { font-weight: 600; }
.srch__txt span { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch__price { font-weight: 600; font-size: .92rem; }
.srch__empty { color: var(--muted); margin: 18px 0 0; }
.srch.is-open .srch__item, .srch.is-open .srch__chip { animation: pl-fadeup .45s cubic-bezier(.2,.7,.2,1) both; }
.srch.is-open .srch__item:nth-child(2) { animation-delay: .03s; } .srch.is-open .srch__item:nth-child(3) { animation-delay: .06s; }
.srch.is-open .srch__item:nth-child(4) { animation-delay: .09s; } .srch.is-open .srch__item:nth-child(5) { animation-delay: .12s; }
.srch.is-open .srch__item:nth-child(6) { animation-delay: .15s; }
@keyframes pl-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Warenkorb-Schublade */
.drawer { position: fixed; inset: 0; z-index: 260; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .35s ease; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); background: #fff; display: flex; flex-direction: column;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.3); transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px 14px; }
.drawer__head h2 { margin: 0; font-size: 1.5rem; text-align: left; }
.drawer__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.drawer__x svg { width: 17px; height: 17px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; overscroll-behavior: contain; }
.drawer__foot { padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.drawer__foot:empty { display: none; }
.drawer__empty { text-align: center; padding: 60px 0; color: var(--muted); }
.dc-list, .drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.dc-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); animation: pl-fadeup .4s cubic-bezier(.2,.7,.2,1) both; }
.dc-item img, .dc-ph { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--surface); }
.dc-main { display: grid; gap: 2px; align-content: start; }
.dc-main span { font-size: .82rem; color: var(--muted); }
.dc-side { display: grid; justify-items: end; align-content: space-between; }
.dc-price { font-weight: 600; }
.dc-rm { border: 0; background: none; color: var(--muted); font: 500 .8rem var(--font); cursor: pointer; padding: 0; }
.dc-rm:hover { color: var(--ink); }
.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; background: var(--surface); border-radius: var(--pill); padding: 3px; width: max-content; }
.qty button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background .2s; }
.qty button:hover { background: #fff; }
.qty button svg { width: 14px; height: 14px; }
.qty output { min-width: 22px; text-align: center; font-weight: 600; font-size: .9rem; }
.dc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.dc-note { font-size: .8rem; color: var(--muted); margin: 6px 0 14px; }
.dc-checkout { width: 100%; justify-content: center; padding: .9em; }
/* WooCommerce-Mini-Warenkorb in der Schublade */
.drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--line); }
.drawer .woocommerce-mini-cart-item img { grid-row: span 2; width: 64px !important; height: 64px; border-radius: 12px; object-fit: cover; margin: 0 !important; float: none !important; }
.drawer .woocommerce-mini-cart-item a:not(.remove) { color: var(--ink); font-weight: 600; display: contents; }
.drawer .woocommerce-mini-cart-item .quantity { color: var(--muted); font-size: .88rem; }
.drawer .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: 16px; color: var(--muted) !important; font-size: 1.2rem; text-decoration: none; }
.drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 18px 0 6px; font-size: 1.05rem; margin: 0; }
.drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; padding: 10px 0 calc(20px + env(safe-area-inset-bottom, 0px)); margin: 0; }
.drawer .woocommerce-mini-cart__buttons .button { width: 100%; justify-content: center; }
.drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { background: var(--surface); color: var(--ink); }
.drawer .woocommerce-mini-cart__empty-message { text-align: center; color: var(--muted); padding: 60px 0; }
@media (max-width: 560px) {
  .drawer__panel { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; transform: translateY(100%); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.35); }
  .drawer__panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: #d2d2d7; }
  .srch__panel { padding-top: 16px; max-height: 92vh; }
  .srch__results { grid-template-columns: 1fr; }
}

/* Produktkarten: Bild-Zoom, Button blendet ein (nur mit Maus) */
.woocommerce ul.products li.product a img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover a img { transform: scale(1.035); }
  .woocommerce ul.products li.product .button { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .2s; }
  .woocommerce ul.products li.product:hover .button, .woocommerce ul.products li.product:focus-within .button, .woocommerce ul.products li.product .button.is-added { opacity: 1; transform: none; }
}


/* Abschluss auf der Startseite */
.home-final { background: var(--surface); padding: 112px 0; text-align: center; }
.home-final p { color: var(--muted); font-size: 1.2rem; max-width: 34em; margin-inline: auto; }
.home-final .hero__cta { margin-top: 26px; }

/* Produktseite: Untertitel, Lieferinfo, Jetzt kaufen */
.lp-sub { color: var(--muted); font-size: 1rem; margin: -4px 0 14px; }
.lp-deliv { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 8px; }
.lp-deliv li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ink); }
.lp-deliv svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.lp-buy form.cart .pl-buynow { flex: 1 1 100%; background: var(--ink); }
.lp-buy form.cart .pl-buynow:hover { background: #000; }
.single_add_to_cart_button.is-loading { opacity: .7; pointer-events: none; }
.lp-statement { padding: 72px 0 96px; }
.lp-statement .statement__text { max-width: 900px; }

/* Varianten-Pillen */
.pl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.pl-pill { border: 0; border-radius: 14px; padding: 12px 18px; background: #fff; color: var(--ink); font: 500 .95rem var(--font); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, transform .2s; }
.pl-pill:hover { box-shadow: inset 0 0 0 1px #86868b; }
.pl-pill.is-active { box-shadow: inset 0 0 0 2px var(--brand); }
.pl-pill.is-disabled { opacity: .4; }

/* Bewertungen */
.lp-reviews .rv-summary { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; background: var(--surface); border-radius: var(--r); padding: 30px; margin-bottom: 24px; }
.rv-avg { display: grid; justify-items: start; gap: 6px; }
.rv-avg strong { font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.rv-avg span { color: var(--muted); font-size: .88rem; }
.rv-bars { display: grid; gap: 8px; }
.rv-bar { display: grid; grid-template-columns: 38px 1fr 30px; gap: 12px; align-items: center; font-size: .85rem; color: var(--muted); }
.rv-bar i { height: 6px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; }
.rv-bar b { display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: 3px; }
.rv-empty { color: var(--muted); background: var(--surface); border-radius: var(--r); padding: 24px 26px; }
.rv-list .woocommerce-Reviews-title { display: none; }
.rv-list .commentlist { list-style: none; padding: 0; margin: 0; }
.rv-list .commentlist li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.rv-list .woocommerce-review__verified { color: var(--flag); font-style: normal; font-weight: 600; font-size: .82rem; }
@media (max-width: 560px) { .lp-reviews .rv-summary { grid-template-columns: 1fr; gap: 20px; } }

/* Abschluss-Kaufbereich */
.lp-final { background: #000; color: #f5f5f7; border-radius: 28px; padding: 72px 24px; text-align: center; margin: 0 0 96px; }
.lp-final__img { width: 150px !important; height: 150px; object-fit: cover; border-radius: 22px; margin: 0 auto 22px; display: block; }
.lp-final h2 { color: #f5f5f7; text-align: center !important; }
.lp-final__price { font-size: 1.3rem; margin: 0 0 22px; color: #f5f5f7; }
.lp-final__price .amount { color: #f5f5f7; }
.lp-final__note { font-size: .82rem; color: #a1a1a6; margin: 18px 0 0; }

/* Footer */
.ft-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 56px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft-brand p { margin: 16px 0 0; max-width: 26em; }
.site-footer .ft-cols { grid-template-columns: repeat(3, 1fr); border: 0; padding: 0; }
.nl-form { margin-top: 26px; max-width: 420px; }
.nl-label { display: block; color: #fff; font-size: .85rem; font-weight: 500; margin-bottom: 10px; }
.nl-row { display: flex; gap: 8px; }
.nl-row input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; border-radius: var(--pill); padding: 11px 16px; font: 400 1rem var(--font); }
.nl-row input::placeholder { color: #86868b; }
.nl-row input:focus { outline: none; border-color: #19c2e5; }
.nl-hint { font-size: .76rem; color: #86868b; margin: 10px 0 0; }
.nl-form.is-done .nl-row { display: none; }
.nl-form.is-done .nl-hint { color: #fff; font-size: .9rem; }
.ft-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #a1a1a6; }
.ft-chip svg { width: 17px; height: 17px; color: #d2d2d7; }
.site-footer li a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s; }
.site-footer li a:hover { background-size: 100% 1px; }
@media (max-width: 860px) { .ft-top { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .site-footer .ft-cols { grid-template-columns: 1fr; } .nl-row { flex-direction: column; } .nl-row .btn { width: 100%; } }

/* FAQ: weiches Aufklappen */
.faq details { overflow: hidden; }
.faq details[open] > p { animation: pl-fadeup .45s cubic-bezier(.2,.7,.2,1) both; }
.faq summary::after { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Textlinks: Pfeil wandert, Unterstreichung wächst */
.lp-crumb a, .entry a:not(.btn) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1); }
.lp-crumb a:hover, .entry a:not(.btn):hover { background-size: 100% 1px; }

/* Kopfzeile auf sehr kleinen Handys kompakt */
@media (max-width: 380px) {
  .site-header__tools { gap: 4px; }
  .langswitch a { padding: 4px 7px; }
  .hdr-icon { width: 32px; height: 32px; }
  .nav-toggle { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .srch__panel, .drawer__panel, .story__frame, .story__step { transition: none; }
  .srch.is-open .srch__item, .srch.is-open .srch__chip, .dc-item { animation: none; }
}


/* =========================================================
   28. HERO: PRODUKTFAMILIE (drei Fläschchen im Raum)
   ======================================================= */
.hero { padding-bottom: 24px; }
.hero__fan { position: relative; z-index: 1; height: 500px; max-width: 960px; margin: 44px auto 0; perspective: 1600px; transform-origin: 50% 0%; will-change: transform; }
.hero__fan img { position: absolute; top: 30px; left: 50%; width: min(300px, 40vw); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 26px; box-shadow: 0 50px 80px -34px rgba(0,0,0,.45); }
.hero__fan .fan-c { z-index: 2; transform: translateX(-50%) translateZ(60px);
  animation: pl-fan-in-c 1.2s cubic-bezier(.2,.7,.2,1) .2s both, pl-fan-c 7s ease-in-out 1.4s infinite; }
.hero__fan .fan-l { transform: translateX(-120%) rotateY(20deg) scale(.84);
  animation: pl-fan-in-l 1.3s cubic-bezier(.2,.7,.2,1) .45s both, pl-fan-l 7s ease-in-out 1.75s infinite; }
.hero__fan .fan-r { transform: translateX(20%) rotateY(-20deg) scale(.84);
  animation: pl-fan-in-r 1.3s cubic-bezier(.2,.7,.2,1) .45s both, pl-fan-r 7s ease-in-out 1.75s infinite; }
@keyframes pl-fan-in-c { from { opacity: 0; transform: translateX(-50%) translateZ(60px) translateY(70px); } to { opacity: 1; transform: translateX(-50%) translateZ(60px); } }
@keyframes pl-fan-in-l { from { opacity: 0; transform: translateX(-50%) rotateY(0) scale(.7); } to { opacity: 1; transform: translateX(-120%) rotateY(20deg) scale(.84); } }
@keyframes pl-fan-in-r { from { opacity: 0; transform: translateX(-50%) rotateY(0) scale(.7); } to { opacity: 1; transform: translateX(20%) rotateY(-20deg) scale(.84); } }
@keyframes pl-fan-c { 50% { transform: translateX(-50%) translateZ(60px) translateY(-12px); } }
@keyframes pl-fan-l { 50% { transform: translateX(-122%) rotateY(24deg) scale(.84) translateY(6px); } }
@keyframes pl-fan-r { 50% { transform: translateX(22%) rotateY(-24deg) scale(.84) translateY(6px); } }
@media (max-width: 560px) {
  .hero__fan { height: 340px; margin-top: 30px; }
  .hero__fan img { top: 16px; width: 46vw; border-radius: 20px; }
  .hero__fan .fan-l { transform: translateX(-112%) rotateY(20deg) scale(.8); }
  .hero__fan .fan-r { transform: translateX(12%) rotateY(-20deg) scale(.8); }
  @keyframes pl-fan-in-l { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-112%) rotateY(20deg) scale(.8); } }
  @keyframes pl-fan-in-r { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(12%) rotateY(-20deg) scale(.8); } }
  @keyframes pl-fan-l { 50% { transform: translateX(-114%) rotateY(24deg) scale(.8) translateY(5px); } }
  @keyframes pl-fan-r { 50% { transform: translateX(14%) rotateY(-24deg) scale(.8) translateY(5px); } }
}
@media (prefers-reduced-motion: reduce) { .hero__fan img { animation: none !important; } }

/* =========================================================
   29. COMPUTER UND TABLET (700–1100 px): Computer-Anordnung
   statt Handy-Anordnung, auch in schmalen Browserfenstern
   ======================================================= */
@media (min-width: 701px) {
  /* Storytelling immer zweispaltig: Bild links steht, Text rechts wechselt */
  /* Kategorien und Vertrauensleiste in einer Reihe */
  .cats--photo { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
  .trust__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  /* Handy-Kaufleiste nur auf Handys */
  .lp-sticky { display: none !important; }
}
@media (min-width: 769px) {
  /* Produktseite: Bild und Kaufbereich nebeneinander, Bild bleibt stehen */
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
  .lp-gallery { position: sticky; top: 84px; align-self: start; }
  .lp-lab__grid { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
  .reading__grid { grid-template-columns: 1fr .9fr; gap: clamp(28px, 5vw, 64px); }
  .lp-handling__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .trust__item p { font-size: .85rem; }
  .lp-lab { padding: 32px; }
  .lp-lab__metrics { flex-direction: column; align-items: flex-start; gap: 20px; }
  .purity { width: 140px; height: 140px; }
}
/* Handy: Storytelling mit einheitlicher linker Kante */
@media (max-width: 700px) {
}

/* =========================================================
   29. COMPUTER-FENSTERBREITEN (701–960 px) SAUBER
   ======================================================= */
@media (min-width: 701px) {
  .cats--photo { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .trust__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .lp-sticky { display: none !important; }
}
@media (min-width: 769px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .lp-gallery { position: sticky; top: 84px; align-self: start; }
  .reading__grid { grid-template-columns: 1fr .9fr; gap: 40px; }
  .lp-lab__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lp-handling__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
}

/* =========================================================
   30. SCROLL-CHROMATOGRAMM (Startseite)
   ======================================================= */
.scan { position: relative; height: 260vh; background: #000; }
.scan__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; text-align: center; padding-top: 40px; }
.scan__sticky .wrap { width: min(100% - 40px, 1200px); }
.scan h2 { color: #f5f5f7; margin-bottom: .2em; }
.scan__p { color: #a1a1a6; font-size: 1.15rem; margin: 0 auto 28px; }
.scan__chart { display: block; width: 100%; height: auto; overflow: visible; }
.scan__grid line { stroke: rgba(255,255,255,.08); }
.scan__trace { fill: none; stroke: #19c2e5; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px rgba(25,194,229,.9)); }
.scan__area { fill: url(#scanGrad); opacity: 0; }
.scan__peak { opacity: 0; }
.scan__num { fill: #f5f5f7; font: 600 34px var(--font); letter-spacing: -0.02em; }
.scan__lbl { fill: #86868b; font: 500 15px var(--font); }
.scan__cap { color: #6e6e73; font-size: .78rem; margin: 14px 0 0; }
@media (max-width: 700px) { .scan { height: 220vh; } .scan__num { font-size: 48px; } .scan__lbl { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .scan { height: auto; } .scan__sticky { position: relative; height: auto; padding: 100px 0; } }

/* =========================================================
   31. CHARGEN-ABGLEICH (Produktseite)
   ======================================================= */
.match__head { max-width: 640px; margin-bottom: 32px; }
.match__head p { color: var(--muted); font-size: 1.1rem; }
.match__stage { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; }
.match__card { position: relative; overflow: hidden; background: var(--surface); border-radius: 24px; padding: 26px; min-height: 230px; }
.match__k { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.match__tag { background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 12px 30px -18px rgba(0,0,0,.25); display: grid; gap: 4px; border-left: 4px solid var(--brand); }
.match__brand { display: block; line-height: 0; margin-bottom: 6px; --lg-n: #151b2b; --lg-g: #5a6175; --lg-a: #0e64dd; }
.match__brand svg { height: 30px; width: auto; aspect-ratio: 1752.9 / 523; display: block; }
.match__name { font-size: 1.2rem; margin: 2px 0 10px; }
.match__dt { font-size: .72rem; color: var(--muted); }
.match__code { font: 600 1.25rem var(--font-mono); letter-spacing: .04em; }
.match__code span { transition: color .25s ease, text-shadow .25s ease; }
.match.is-on .match__label .match__code span { color: var(--brand); text-shadow: 0 0 12px rgba(25,194,229,.35); }
.match__beam { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, rgba(25,194,229,0), rgba(25,194,229,.22) 60%, rgba(25,194,229,.55) 92%, rgba(25,194,229,0)); opacity: 0; }
.match.is-on .match__beam { animation: pl-beam 1.3s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes pl-beam { 0% { left: -30%; opacity: 1; } 85% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
.match__link { width: 100%; height: 20px; overflow: visible; }
.match__link path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1) 1.25s; }
.match.is-on .match__link path { stroke-dashoffset: 0; }
.match__report dl { margin: 0; display: grid; gap: 12px; }
.match__report dt { font-size: .78rem; color: var(--muted); }
.match__report dd { margin: 0; font-weight: 600; }
.match__code--r { display: inline-block; border-radius: 8px; padding: 2px 6px; margin-left: -6px; transition: background .4s ease 1.8s, color .4s ease 1.8s, box-shadow .4s ease 1.8s; }
.match.is-on .match__code--r { background: var(--flag-bg); color: var(--flag); box-shadow: 0 0 0 1px rgba(29,122,76,.25); }
.match__ok { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; font-weight: 600; color: var(--flag);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s ease 2.1s, transform .6s cubic-bezier(.3,1.5,.5,1) 2.1s; }
.match__ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  background: var(--flag-bg); border-radius: 50%; padding: 3px; }
.match.is-on .match__ok { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .match__stage { grid-template-columns: 1fr; }
  .match__link { width: 20px; height: 56px; margin: 0 auto; transform: rotate(90deg) scaleX(2.8); }
  .match__card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .match__beam { display: none; }
  .match__code span, .match__link path, .match__code--r, .match__ok { transition: none !important; }
}

/* Kategorie-Beschriftung: innere Elemente nie weiß auf weiß */
.cat--photo .cat__label span { color: var(--muted); }
.cat--photo .cat__label .lang-de, .cat--photo .cat__label .lang-en { color: inherit; font: inherit; }

/* Kategorie-Filterleiste im Shop */
.shopfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.catbtn { display: inline-flex; align-items: center; border: 0; border-radius: var(--pill); padding: 8px 16px; background: var(--surface);
  color: var(--ink); font: 600 .9rem var(--font); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.catbtn:hover { background: #e8e8ed; color: var(--ink); }
.catbtn.is-active { background: var(--brand); color: #fff; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 24px; }

/* =========================================================
   32. WOOCOMMERCE-RASTER, HANDY-KOPFZEILE
   ======================================================= */
/* WooCommerce setzt eigene Breiten/Floats (auch im Handy-Stylesheet) – hier neutralisieren */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  width: auto !important; float: none !important; clear: none !important; margin: 0 !important;
}
.woocommerce ul.products, .woocommerce-page ul.products { width: auto; }

/* Produktkarten-Button: nur auf breiten Bildschirmen mit Maus erst beim Überfahren */
@media (hover: hover) and (pointer: fine) and (max-width: 860px) {
  .woocommerce ul.products li.product .button { opacity: 1; transform: none; }
}

/* Handy: zwei kompakte Produktspalten */
@media (max-width: 560px) {
  .woocommerce ul.products:not(.shelf ul.products) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .woocommerce ul.products li.product { padding: 12px; border-radius: 18px; }
  .woocommerce ul.products li.product a img { margin-bottom: 10px; border-radius: 12px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; line-height: 1.25; }
  .woocommerce ul.products li.product .lp-ruo { font-size: .7rem; margin-bottom: 6px; }
  .woocommerce ul.products li.product .price { font-size: .95rem; margin-bottom: 10px; }
  .woocommerce ul.products li.product .button { font-size: .85rem; padding: .6em .8em; }
  .stockbadge { top: 18px; left: 18px; font-size: .6rem; padding: 4px 8px; }
  .shelf ul.products li.product { padding: 16px; }
}

/* Kopfzeile: Elemente werden nie zusammengedrückt */
.site-header__tools > *, .nav-toggle, .brand { flex: none; }
.nav-lang { display: none; }
@media (max-width: 400px) {
  .primary-nav .nav-lang { display: block; margin-top: 28px; }
  .primary-nav .nav-lang .langswitch { order: 0; margin: 0; }
  .primary-nav .nav-lang .langswitch a { font-size: .9rem; padding: 8px 18px; }
}
@media (max-width: 400px) {
  .site-header__tools .langswitch { display: none; }
  .site-header__row { gap: 8px; }
}

/* =========================================================
   33. PRODUKTSEITE: WOOCOMMERCE-STANDARDS ANGLEICHEN
   (höhere Spezifität als woocommerce.css / woocommerce-layout.css)
   ======================================================= */
/* Galerie: Fläche und 3D am äußeren Container, Slider-Innenteil unberührt */
.lp .woocommerce-product-gallery__wrapper { background: transparent; padding: 0; border-radius: 0; transform: none !important; }
body .lp div.woocommerce-product-gallery { position: relative; background: var(--surface); border-radius: var(--r); padding: 16px;
  float: none !important; width: 100% !important; margin: 0; transform-origin: 50% 0%; will-change: transform; }
body .lp .woocommerce-product-gallery .sheen { position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; z-index: 2;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.4), rgba(255,255,255,0) 45%); opacity: 0; transition: opacity .35s; }
body .lp .woocommerce-product-gallery:hover .sheen { opacity: 1; }
body .lp .woocommerce-product-gallery .flex-viewport { border-radius: var(--r-sm); }
body .lp .woocommerce-product-gallery__image img { border-radius: var(--r-sm); }
body .lp .woocommerce-product-gallery__trigger { top: 28px !important; right: 28px !important; z-index: 3; width: 38px !important; height: 38px !important;
  background: rgba(255,255,255,.9) !important; box-shadow: 0 4px 14px rgba(0,0,0,.12); border-radius: 50% !important; }

/* Kaufbereich */
body .lp div.summary.lp-buy { float: none !important; width: 100% !important; margin: 0; }
body .lp .lp-buy .product_title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; margin: 0 0 .3em; clear: none; padding: 0; }
body .lp .lp-buy p.price, body .lp .lp-buy span.price { color: var(--ink); font-size: 1.7rem; font-weight: 600; margin: 0 0 18px; }
body .lp .lp-buy p.price del { color: var(--muted); font-weight: 400; font-size: 1.1rem; opacity: 1; }
body .lp .lp-buy p.price ins { text-decoration: none; background: none; }
body .lp .lp-buy .woocommerce-product-details__short-description { color: var(--muted); font-size: 1.05rem; }
body .lp .lp-buy .woocommerce-product-details__short-description p { margin: 0 0 1em; }
body .lp .lp-buy .woocommerce-product-rating { margin: 0 0 12px; }

/* Warenkorb-Formular */
body .lp .lp-buy form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 26px 0 14px; padding: 0; border: 0; }
body .lp .lp-buy form.cart::before, body .lp .lp-buy form.cart::after { content: none; display: none; }
body .lp .lp-buy form.cart div.quantity { float: none; margin: 0; display: flex; }
body .lp .lp-buy form.cart div.quantity .qty { width: 76px; min-height: 50px; height: 100%; text-align: center; border: 0; border-radius: var(--pill); background: var(--surface); font: 500 1rem var(--font); }
body .lp .lp-buy form.cart .button { float: none; margin: 0; vertical-align: middle; }
body .lp .lp-buy form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; justify-content: center; background: var(--brand); color: #fff;
  border-radius: var(--pill); padding: 1em 1.4em; font: 500 1.05rem/1.2 var(--font); letter-spacing: -0.01em; opacity: 1; }
body .lp .lp-buy form.cart .single_add_to_cart_button:hover { background: var(--brand-dark); color: #fff; }
body .lp .lp-buy form.cart .single_add_to_cart_button.disabled { opacity: .5; }
body .lp .lp-buy form.cart .pl-buynow { flex: 1 1 100%; justify-content: center; background: var(--ink); color: #fff; border-radius: var(--pill);
  padding: .95em 1.4em; font: 500 1.05rem/1.2 var(--font); }
body .lp .lp-buy form.cart .pl-buynow:hover { background: #000; color: #fff; }

/* Variable Produkte */
body .lp .lp-buy form.variations_form { display: block; }
body .lp .lp-buy table.variations { width: 100%; border: 0; margin: 0 0 8px; }
body .lp .lp-buy table.variations tr, body .lp .lp-buy table.variations th, body .lp .lp-buy table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
body .lp .lp-buy table.variations th.label { font-size: .85rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
body .lp .lp-buy table.variations .reset_variations { font-size: .85rem; color: var(--muted); }
body .lp .lp-buy .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
body .lp .lp-buy .woocommerce-variation-price .price { font-size: 1.3rem; }

/* Lagerhinweis (nur wenn nicht vorrätig) und Meta-Angaben */
body .lp .lp-buy p.stock { font-size: .9rem; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
body .lp .lp-buy .product_meta { font-size: .86rem; color: var(--muted); display: grid; gap: 4px; margin-top: 22px; padding-top: 0; border: 0; }
body .lp .lp-buy .product_meta a { color: var(--muted); }

/* Hinweise nach dem Hinzufügen */
body.single-product .woocommerce-notices-wrapper .woocommerce-message { border-radius: var(--r-sm); margin-bottom: 20px; }
body.single-product .woocommerce-notices-wrapper .woocommerce-message .button { float: right; background: var(--brand); color: #fff; border-radius: var(--pill); }

/* Ähnliche Produkte */
body .lp .related.products > h2 { text-align: left; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .7em; }

/* =========================================================
   34. "SO FUNKTIONIERT NEROX." – Story
   Computer: durchgehende Bühne (sticky). Handy: drei Karten.
   ======================================================= */
.story { --ease: cubic-bezier(.2,.7,.2,1); padding: 96px 0 24px; }
.story__visual, .story__rail, .story__mv { display: none; }
.story__k { font-size: .9rem; font-weight: 600; color: var(--brand); margin: 0 0 12px; }
.story__step h3 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .45em; text-wrap: balance; }
.story__p { color: var(--muted); font-size: 1.12rem; max-width: 28em; margin: 0; }
.sv-chip { display: grid; gap: 2px; background: rgba(255,255,255,.92); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.3); }
.sv-chip small { font-size: .7rem; color: var(--muted); transition: color .5s; }
.sv-chip b { font: 600 1rem var(--font-mono); letter-spacing: .03em; transition: color .5s; }
.sv-hplc { display: block; width: 100%; height: auto; overflow: visible; }
.sv-base { stroke: #e3e6ea; stroke-width: 1.5; fill: none; }
.sv-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-box { width: 52%; overflow: visible; }
.sv-boxl, .sv-tape { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-boxl { stroke: var(--ink); stroke-width: 3; }
.sv-tape { stroke: var(--brand); stroke-width: 6; }
.sv-track { display: flex; align-items: center; gap: 8px; width: 60%; }
.sv-track i { flex: 1; height: 3px; border-radius: 2px; background: #dfe3e8; overflow: hidden; }
.sv-track em { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.sv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }

@media (min-width: 768px) {
  .story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
  .story__visual { display: grid; position: sticky; top: 12vh; height: 76vh; place-items: center; }
  .story__stage { position: relative; width: 100%; max-width: 500px; aspect-ratio: 4 / 5; max-height: 100%; border-radius: 28px;
    background: var(--surface); overflow: hidden; isolation: isolate; }
  .story__stage::before { content: ""; position: absolute; inset: -20%; z-index: -1; opacity: 0; transition: opacity 1.4s ease;
    background: radial-gradient(closest-side, rgba(25,194,229,.16), rgba(25,194,229,0) 70%); }
  .story.in .story__stage::before { opacity: 1; }
  .sv { position: absolute; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease), background-color .5s, color .5s; }
  .sv-vial { inset: 0; }
  .sv-vial img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: blur(6px); transition: transform 1.3s var(--ease), filter 1s var(--ease); }
  .story.in .sv-vial img { transform: none; filter: none; }
  .sv-sweep { position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 65%); }
  .story.in .sv-sweep { animation: pl-sweep 1.8s .6s var(--ease) both; }
  .sv.sv-chip { left: 24px; top: 24px; }
  .sv-link { left: 44px; top: 78px; width: 2px; height: 40px; background: var(--brand); transform: scaleY(0); transform-origin: 50% 0; }
  .sv-report { left: 24px; right: 24px; top: 118px; opacity: 0; transform: translateY(16px) scale(.97); background: #fff; border-radius: 20px;
    padding: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.3); }
  .sv-rh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
  .sv-rh small { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .sv-rb { font: 600 .9rem var(--font-mono); border-radius: 6px; padding: 2px 8px; transition: background-color .5s .9s, color .5s .9s; }
  .sv-report .sv-line { transition: stroke-dashoffset 1.4s var(--ease) .4s; }
  .sv-metric { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
  .sv-ring { position: relative; width: 78px; height: 78px; }
  .sv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .sv-ring .purity__bar { stroke-width: 10; transition: stroke-dashoffset 1.6s var(--ease) .6s; filter: none; }
  .sv-ring .purity__track { stroke-width: 10; }
  .sv-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .88rem; font-weight: 600; }
  .sv-metric span { color: var(--muted); font-size: .85rem; }
  .sv-ship { inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; opacity: 0; transform: scale(.96); }
  .sv-ship .sv-boxl { transition: stroke-dashoffset 1.2s var(--ease) .25s; }
  .sv-ship .sv-tape { transition: stroke-dashoffset .6s var(--ease) 1.2s; }
  .sv-ship .sv-track em { transition: transform 1.4s var(--ease) 1.3s; }
  .sv-ship-t { margin: 0; text-align: center; }
  .sv-ship-t b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .sv-ship-t span { color: var(--muted); }
  .sv.sv-note { right: 18px; bottom: 16px; margin: 0; font-size: .7rem; color: var(--muted); background: rgba(255,255,255,.85); padding: 3px 9px; border-radius: var(--pill); }

  /* Zustand 2: Analyse – Fläschchen tritt zurück, Chargennummer leuchtet, Linie zum Bericht */
  [data-stage="1"] .sv-vial { opacity: .12; transform: scale(.92) translateY(-3%); filter: blur(3px); }
  [data-stage="1"] .sv-chip { background: var(--brand); color: #fff; }
  [data-stage="1"] .sv-chip small { color: rgba(255,255,255,.8); }
  [data-stage="1"] .sv-link { transform: none; transition-delay: .2s; }
  [data-stage="1"] .sv-report { opacity: 1; transform: none; transition-delay: .35s; }
  [data-stage="1"] .sv-rb, [data-stage="2"] .sv-rb { background: var(--flag-bg); color: var(--flag); }
  [data-stage="1"] .sv-report .sv-line, [data-stage="2"] .sv-report .sv-line { stroke-dashoffset: 0; }
  [data-stage="1"] .sv-ring .purity__bar, [data-stage="2"] .sv-ring .purity__bar { stroke-dashoffset: .6; }
  /* Zustand 3: Versand – Bericht verdichtet sich, Paket entsteht, Sendung läuft */
  [data-stage="2"] .sv-vial, [data-stage="2"] .sv-chip, [data-stage="2"] .sv-link, [data-stage="2"] .sv-note { opacity: 0; }
  [data-stage="2"] .sv-report { opacity: 0; transform: scale(.86) translateY(-14px); }
  [data-stage="2"] .sv-ship { opacity: 1; transform: none; transition-delay: .25s; }
  [data-stage="2"] .sv-boxl, [data-stage="2"] .sv-tape { stroke-dashoffset: 0; }
  [data-stage="2"] .sv-track em { transform: none; }

  .story__steps { padding: 6vh 0 16vh; }
  .story__step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  .story__step > * { opacity: .25; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease); }
  .story__step.is-active > * { opacity: 1; transform: none; }
  .story__step.is-active > h3 { transition-delay: .08s; }
  .story__step.is-active > .story__p { transition-delay: .16s; }
}
@keyframes pl-sweep { to { transform: translateX(120%); } }

/* Handy: drei Karten mit Fortschrittslinie, ohne Sticky-Bühne */
@media (max-width: 767px) {
  .story { padding: 64px 0 16px; }
  .story .section__head { text-align: left; margin-bottom: 28px; }
  .story .section__head h2 { text-align: left; }
  .story__steps { position: relative; padding-left: 26px; }
  .story__rail { display: block; position: absolute; left: 7px; top: 30px; bottom: 60px; width: 2px; border-radius: 2px; background: #e3e7ec; overflow: hidden; }
  .story__rail i { display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
  .story__step { position: relative; margin: 0 0 16px; padding-bottom: 22px; background: var(--surface); border-radius: 24px;
    opacity: .45; transform: translateY(30px) scale(.94); transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .story__step::before { content: ""; position: absolute; left: -25px; top: 26px; width: 10px; height: 10px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 2px #cfd5dc; transition: background .4s, box-shadow .4s; }
  .story__step.is-in { opacity: 1; transform: none; }
  .story__step.is-in::before { background: var(--brand); box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px rgba(25,194,229,.15); }
  .story__step > :not(.story__mv) { padding: 0 20px; opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s var(--ease); }
  .story__step.is-in > :not(.story__mv) { opacity: 1; transform: none; }
  .story__step.is-in > .story__k { transition-delay: .15s; }
  .story__step.is-in > h3 { transition-delay: .25s; }
  .story__step.is-in > .story__p { transition-delay: .35s; }
  .story__k { margin: 18px 0 8px; }
  .story__step h3 { font-size: clamp(1.4rem, 6.2vw, 1.75rem); }
  .story__p { font-size: 1rem; }
  .story__mv { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 24px 24px 0 0; background: #e9edf2; }
  .mv-vial img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.04); transition: transform 1.1s var(--ease); }
  .story__step.is-in .mv-vial img { transform: none; }
  .mv-vial .sv-chip { position: absolute; left: 14px; top: 14px; }
  .story__step.is-in .mv-vial .sv-chip { background: var(--brand); color: #fff; transition: background .5s .7s, color .5s .7s; }
  .story__step.is-in .mv-vial .sv-chip small { color: rgba(255,255,255,.8); transition-delay: .7s; }
  .mv-lab { display: grid; place-items: center; background: #e9edf2; }
  .mv-lab__in { width: 84%; background: #fff; border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 16px 30px -22px rgba(0,0,0,.3); }
  .mv-num b { font-size: 1.35rem; }
  .mv-lab .sv-line { transition: stroke-dashoffset 1.4s var(--ease) .3s; }
  .story__step.is-in .mv-lab .sv-line { stroke-dashoffset: 0; }
  .mv-num { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
  .mv-num b { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
  .mv-num small { color: var(--muted); font-size: .8rem; }
  .mv-ship { display: grid; place-content: center; justify-items: center; gap: 14px; }
  .mv-ship .sv-box { width: 38%; }
  .mv-ship .sv-boxl { transition: stroke-dashoffset 1.1s var(--ease) .2s; }
  .mv-ship .sv-tape { transition: stroke-dashoffset .5s var(--ease) 1.1s; }
  .mv-ship .sv-track em { transition: transform 1.2s var(--ease) 1.2s; }
  .story__step.is-in .mv-ship .sv-boxl, .story__step.is-in .mv-ship .sv-tape { stroke-dashoffset: 0; }
  .story__step.is-in .mv-ship .sv-track em { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before { transition: none !important; animation: none !important; }
  .story__step, .story__step > *, .sv-vial img, .mv-vial img { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* =========================================================
   35. PRODUKTSEITE: EINSTIEG, KARTEN, BEWERTUNGEN, ÄHNLICHE, ABSCHLUSS
   ======================================================= */
.pl-enter { animation: pl-enter .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pl-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pl-enter-img { animation: pl-enter-img .8s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes pl-enter-img { from { opacity: 0; transform: translateY(12px) scale(1.04); } }
body .lp .lp-buy form.cart .button:active, .btn:active { transform: scale(.97); }
body .lp .lp-buy form.cart div.quantity .qty:focus { outline: none; box-shadow: 0 0 0 2px var(--brand); }

/* Pflegehinweise als Informationskarten */
.lp-handling__grid .lp-card { background: var(--surface); border-radius: var(--r); padding: 26px; transition: transform .3s ease, box-shadow .3s ease; }
.lp-card__ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--brand); margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.lp-card__ic svg { width: 22px; height: 22px; }
.lp-card h3 { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.lp-card p { color: var(--ink); margin: 0; }
@media (hover: hover) and (pointer: fine) { .lp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.25); } }

/* Eine Bewertungssektion: Zusammenfassung, Liste, Formular zum Aufklappen */
.rv-h-count { font-size: .5em; font-weight: 600; color: var(--muted); vertical-align: middle; }
.pl-reviews .commentlist { list-style: none; margin: 8px 0 0; padding: 0; }
.pl-reviews .commentlist li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.pl-reviews .comment_container { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.pl-reviews .comment_container img.avatar { width: 44px; height: 44px; border-radius: 50%; }
.pl-reviews .star-rating { color: #ff9f0a; }
.pl-reviews .woocommerce-review__verified { color: var(--flag); font-style: normal; font-weight: 600; font-size: .82rem; }
.rv-write { margin-top: 20px; }
.rv-write > summary { list-style: none; display: inline-flex; cursor: pointer; }
.rv-write > summary::-webkit-details-marker { display: none; }
.rv-write[open] > summary { color: var(--muted); }
.rv-write #review_form { margin-top: 18px; background: var(--surface); border-radius: var(--r); padding: 24px; animation: pl-fadeup .45s cubic-bezier(.2,.7,.2,1) both; }
.rv-write .comment-form { display: grid; gap: 14px; margin: 0; }
.rv-write .comment-form p { margin: 0; }
.rv-write label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; }
.rv-write input[type="text"], .rv-write input[type="email"], .rv-write textarea, .rv-write select {
  width: 100%; border: 0; border-radius: var(--r-sm); background: #fff; padding: 12px 14px; font: 400 1rem var(--font); box-shadow: inset 0 0 0 1px var(--line); }
.rv-write input:focus, .rv-write textarea:focus, .rv-write select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.rv-write p.stars a { color: #ff9f0a; }
.rv-write .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.rv-write .comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.rv-write .form-submit .btn { width: 100%; justify-content: center; }
.rv-note { color: var(--muted); font-size: .9rem; }
@media (min-width: 768px) { .rv-write .comment-form { grid-template-columns: 1fr 1fr; } .rv-write .comment-form > :not(.comment-form-author):not(.comment-form-email) { grid-column: 1 / -1; } }

/* Ähnliche Produkte: auf dem Handy als Wischleiste */
@media (max-width: 767px) {
  .lp-related ul.products { display: grid; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 72%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -20px; padding: 4px 20px 16px; scrollbar-width: none; }
  .lp-related ul.products::-webkit-scrollbar { display: none; }
  .lp-related ul.products li.product { scroll-snap-align: start; }
}

/* Abschluss als Bühne */
body .lp .lp-final { padding: clamp(56px, 8vw, 96px) 24px; }
body .lp .lp-final .lp-final__img { width: min(260px, 60%) !important; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; margin: 0 auto 26px;
  box-shadow: 0 40px 80px -30px rgba(25,194,229,.35); transform: scale(.94); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
body .lp .lp-final.in .lp-final__img { transform: none; }
body .lp .lp-final h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .2em; }
body .lp .lp-final .btn { padding: .9em 2em; font-size: 1.05rem; }

/* Überschriften ausbalancieren */
h1, h2, h3 { text-wrap: balance; }

/* Erklär-Modus ohne eingetragene Laborwerte */
.match__ex { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--brand); background: rgba(25,194,229,.08); padding: 2px 8px; border-radius: var(--pill); margin-left: 6px; vertical-align: middle; }
.match--example .match__ok { color: var(--brand); }
.match--example .match__ok svg { background: rgba(25,194,229,.1); }
.match--example.is-on .match__code--r { background: rgba(25,194,229,.08); color: var(--brand); box-shadow: 0 0 0 1px rgba(25,194,229,.2); }
.lp-lab__pending { color: var(--muted); background: #fff; border-radius: var(--r-sm); padding: 14px 16px; font-size: .92rem; margin: 18px 0; }
.lp-facts .lp-facts__pending { font-weight: 500; color: var(--muted); font-size: .92rem; }
@media (max-width: 430px) {
  .lp-facts { gap: 10px; padding: 16px; }
  .lp-facts dt { font-size: .7rem; }
  .lp-facts dd { font-size: .95rem; }
  .lp-facts .lp-facts__pending { font-size: .85rem; }
}
.lp-facts.lp-facts--2 { grid-template-columns: repeat(2, 1fr); }

/* =========================================================
   36. 404 – NEROX
   ======================================================= */
.e404 { background: var(--surface); padding: clamp(80px, 14vw, 160px) 0; text-align: center; --lg-n: #151b2b; --lg-a: #0e64dd; }
.e404__in { max-width: 680px; }
.e404__mark { width: 64px; height: auto; aspect-ratio: 490 / 523; display: block; margin: 0 auto 28px; }
.e404 h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; margin: 6px 0 14px; text-wrap: balance; }
.e404 .lead { margin-bottom: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .e404__mark { animation: e404in .9s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes e404in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
}

/* NEROX-Logo: Kopfzeile auf kleineren Desktop-Breiten ausbalancieren */
@media (min-width: 861px) and (max-width: 1180px) { .primary-nav ul { gap: 22px; } .site-header__row { gap: 20px; } .brand__full { height: 32px; } }

/* =========================================================
   37. WOOCOMMERCE-BLÖCKE (Warenkorb, Kasse, leerer Warenkorb)
   ======================================================= */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { --wc-block-radius: var(--r-sm); }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.wc-block-cart__empty-cart__title { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 6px; }
.wp-block-woocommerce-empty-cart-block > p { text-align: center; color: var(--muted); }
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { margin: 40px auto 28px; color: var(--line); }
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; text-align: center; }
.wc-block-grid__products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0 !important; padding: 0; list-style: none; }
.wc-block-grid__product { width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 16px !important; border: 0 !important; background: var(--surface); border-radius: var(--r); text-align: center; display: flex; flex-direction: column; gap: 6px; }
.wc-block-grid__product-image img { border-radius: var(--r-sm); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wc-block-grid__product-title { color: var(--ink); font-weight: 600; font-size: 1rem; }
.wc-block-grid__product-link { text-decoration: none; }
.wc-block-grid__product-price { color: var(--ink); font-weight: 500; }
.wc-block-grid__product-add-to-cart { margin-top: auto; }
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--brand) !important; color: #fff !important; border: 0 !important; border-radius: var(--pill) !important;
  font: 500 1rem/1.2 var(--font) !important; padding: 0.85em 1.4em !important; min-height: 48px; text-decoration: none; box-shadow: none !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--brand-dark) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input,
.wc-block-components-select-input select, .wc-blocks-components-select__select, .wc-block-components-textarea {
  border-radius: var(--r-sm) !important; border-color: var(--line) !important;
}
.wc-block-components-totals-wrapper, .wc-block-components-panel, .wc-block-cart-items { border-color: var(--line) !important; }
.wc-block-components-product-name { color: var(--ink) !important; font-weight: 600; text-decoration: none; }
.wc-block-components-notice-banner.is-info, .wc-block-components-notice-banner.is-success { border-radius: var(--r-sm); }
@media (max-width: 860px) { .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .wc-block-grid__product { padding: 12px !important; } }
/* Warenkorb, Kasse und Konto brauchen die volle Breite (normale Seiten bleiben schmal und gut lesbar) */
body.woocommerce-cart .entry, body.woocommerce-checkout .entry, body.woocommerce-account .entry { max-width: none; }
.wc-block-grid__products { max-width: 1000px; margin-inline: auto !important; }
@media (max-width: 560px) { .wc-block-grid__product-add-to-cart .wp-block-button__link { font-size: .9rem !important; padding: .7em 1em !important; min-height: 42px; } .wc-block-grid__product-title { font-size: .95rem; } }
/* Bestellbestätigung und Kundenkonto: ruhige Zwischenüberschriften statt Bühnen-Headlines */
body.woocommerce-order-received .entry h2, body.woocommerce-account .entry h2, .woocommerce-order-details__title, .woocommerce-column__title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); text-align: left; margin: 44px 0 14px; letter-spacing: -0.01em;
}
body.woocommerce-order-received .woocommerce-customer-details address { border: 0; background: var(--surface); border-radius: var(--r-sm); padding: 18px 20px; }
body.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 1.15rem; font-weight: 500; }
body.woocommerce-order-received ul.woocommerce-thankyou-order-details { display: flex; flex-wrap: wrap; gap: 12px 0; padding: 18px 0; margin: 18px 0 0; list-style: none; border-block: 1px solid var(--line); }
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li { border-right-color: var(--line); }
.pl-pending { font-style: normal; color: var(--muted); }

/* =========================================================
   38. NEROX – Markenauftritt (Schriften, Flächen, Knöpfe, Akzente)
   Schwarz/Weiß mit einem Akzent (Cyan aus dem Logo), technische Breitschrift
   Archivo für Überschriften, Inter für Fließtext. Schriften liegen im Theme.
   ======================================================= */
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 300 700; font-stretch: 100% 108%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

body { font-family: var(--font); letter-spacing: -0.006em; }
h1, h2, h3, .statement__text, .stats__grid dt, .hero__stats dt, .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title, .lp-title, .cat--photo .cat__label, .e404 h1 {
  font-family: var(--font-display); font-stretch: 108%; letter-spacing: -0.02em; }
h1 { font-weight: 650; }
h2 { font-weight: 640; }
h3 { font-weight: 620; letter-spacing: -0.01em; }
::selection { background: rgba(25,194,229,.28); }
:focus-visible { outline-color: var(--accent); }

/* Überzeile: Großbuchstaben, gesperrt, mit Akzentstrich */
.eyebrow, .story__k, .lp-eyebrow { font-family: var(--font-display); font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); }
.story__k { color: var(--brand); }
.lp-eyebrow { background: rgba(25,194,229,.10); color: var(--brand); border-radius: 6px; }

/* Knöpfe: Schwarz, leicht abgerundet, Breitschrift */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
body .lp .lp-buy form.cart .single_add_to_cart_button,
body.single-product .woocommerce-notices-wrapper .woocommerce-message .button,
.wc-block-components-button:not(.is-link) {
  background: var(--btn) !important; color: #fff !important; border-radius: var(--r-btn) !important;
  font-family: var(--font-display); font-weight: 600; font-stretch: 104%; letter-spacing: .01em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn { padding: .85em 1.5em; font-size: 1rem; }
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
body .lp .lp-buy form.cart .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover { background: var(--btn-hover) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(10,12,16,.55); }
.btn--ghost, .btn--ghost:hover { background: transparent !important; color: var(--ink) !important; box-shadow: none !important; transform: none; padding-inline: .2em; }
.btn--ghost::after { content: "→"; color: var(--brand); font-weight: 500; }
.btn--ghost:hover { color: var(--brand) !important; }
.calc-chip.is-active, .catbtn.is-active { background: var(--ink); }
.pl-cart__n { background: var(--accent); color: var(--ink); font-weight: 700; }
.woocommerce span.onsale { background: var(--ink); }

/* Hinweisleiste und Kopfzeile */
.notice { background: var(--ink); color: rgba(255,255,255,.78); letter-spacing: .01em; }
.notice strong { color: #fff; }
.site-header { background: rgba(255,255,255,.86); border-bottom-color: rgba(10,12,16,.07); }
body.at-hero .site-header:not(.is-scrolled) { background: rgba(255,255,255,.96); border-bottom-color: rgba(10,12,16,.06); }
.primary-nav a { color: var(--ink); }
.primary-nav a:hover { color: var(--brand); }

/* Startbereich: dunkle Bühne mit Sechseck-Raster und Cyan-Licht */
.hero { background: #0a0c10; color: #fff; padding-bottom: 40px; position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 72%, rgba(25,194,229,.22), rgba(25,194,229,0) 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(25,194,229,.08), rgba(25,194,229,0) 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1L55 16.5V47.5L28 63L1 47.5V16.5Z M28 63V97' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 70%, transparent 100%); }
.hero h1 { color: #fff; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero .lead { color: #a6adbb; }
.hero .btn:not(.btn--ghost) { background: #fff !important; color: var(--ink) !important; }
.hero .btn:not(.btn--ghost):hover { background: var(--accent) !important; color: var(--ink) !important; }
.hero .btn--ghost, .hero .btn--ghost:hover { color: #fff !important; }
.hero .btn--ghost::after { color: var(--accent); }
.hero__grid::before { background: radial-gradient(closest-side, rgba(25,194,229,.25), rgba(25,194,229,0)) !important; }
.hero__fan img { box-shadow: 0 50px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); }

/* Vorteile */
.trust__item { background: var(--surface); border: 1px solid transparent; transition: border-color .25s, background .25s; }
.trust__item:hover { background: #fff; border-color: var(--line); }
.trust__item .ic { color: var(--ink); background: none; box-shadow: none; position: relative; }
.trust__item .ic::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.trust__item h3 { font-size: 1rem; }

/* Statement */
.statement__text { font-weight: 620; }
.statement__text .sw { color: #d5d8de; }

/* Kategorien */
.cat--photo { border-radius: var(--r); }
.cat--photo .cat__label { font-weight: 640; }
.cat--photo:hover .cat__label { color: #fff; }
.cat--photo:hover .cat__label span { color: var(--accent); }

/* Produktkarten */
.woocommerce ul.products li.product { border: 1px solid var(--line); background: #fff; border-radius: var(--r); }
.woocommerce ul.products li.product:hover { background: #fff; border-color: #cfd4db; box-shadow: 0 24px 44px -26px rgba(10,12,16,.35); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 640; font-size: 1.04rem; }
.woocommerce ul.products li.product .lp-ruo { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; }

/* Dunkle Flächen: Graphit statt reinem Schwarz, Cyan als Licht */
.showcase, .stats, .scan, .orbit { background-color: #0a0c10; }
.stats__grid dt { font-weight: 650; }
.site-footer { background: #0a0c10; }
.footer__grid { border-bottom-color: rgba(255,255,255,.1); }

/* FAQ, Laborbericht */
.faq summary { font-weight: 550; }
.faq summary::after { color: var(--ink); font-weight: 400; }
.faq details[open] summary::after { color: var(--brand); }
.reading .steps li::before { background: var(--ink) !important; color: #fff !important; font-family: var(--font-display); }

/* Abschluss */
.home-final { background: var(--surface); }

/* Produktseite */
.match__code { font-family: var(--font-mono); }
.lp-crumb a:hover { color: var(--brand); }

@media (max-width: 560px) {
  .hero { padding-bottom: 24px; }
  .eyebrow { font-size: .68rem; letter-spacing: .16em; }
}