@charset "UTF-8";
/* ============================================================================
   AMINOLABSPRO — responsive.css
   Ausschließlich Breakpoint-Overrides. Keine neuen Komponenten.

   Breakpoints
     ≤ 1279px   Desktop klein
     ≤ 1023px   Tablet quer
     ≤  849px   Tablet hoch
     ≤  767px   Mobil
     ≤  479px   Mobil klein
     Sonder     hover:none, prefers-reduced-motion, print

   Mobile ist keine Nachbesserung: alle Sektionen sind hier vollständig
   durchdefiniert — Navigation, Hero, Produktkarten, COA, FAQ, Footer.
   ============================================================================ */


/* ============================================================
   DESKTOP KLEIN — ≤ 1279px
   ============================================================ */

@media (max-width: 1279px) {

  body.alp-dark .container,
  body.alp-dark .row { padding-left: 20px; padding-right: 20px; }

  body.alp-dark .alp-usp-grid { gap: 14px; }

  body.alp-dark .alp-bestseller-banner .box-image,
  body.alp-dark .alp-bestseller-banner .box-image img { height: 180px; }
}


/* ============================================================
   TABLET QUER — ≤ 1023px
   ============================================================ */

@media (max-width: 1023px) {

  :root { --alp-section-y: clamp(48px, 6vw, 72px); }

  /* Vier Kennzahlen werden zu zwei Paaren. */
  body.alp-dark .alp-stats-inner { grid-template-columns: repeat(2, 1fr); }

  body.alp-dark .alp-stat:nth-child(2)::after { display: none; }

  body.alp-dark .alp-stat:nth-child(1),
  body.alp-dark .alp-stat:nth-child(2) { border-bottom: 1px solid var(--alp-line-soft); }

  /* USP und Steps zweispaltig. */
  body.alp-dark .alp-usp-grid,
  body.alp-dark .alp-how-grid { grid-template-columns: repeat(2, 1fr); }

  body.alp-dark .alp-rev-grid { grid-template-columns: repeat(2, 1fr); }

  /* COA zweispaltig. */
  body.alp-dark .coa-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer kompakter. */
  body.alp-dark .alp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Produktdetail: Info-Panel bekommt weniger Innenabstand. */
  body.alp-dark .product-info,
  body.alp-dark .summary.entry-summary { padding: 22px 20px; }
}


/* ============================================================
   TABLET HOCH — ≤ 849px
   ============================================================ */

@media (max-width: 849px) {

  body.alp-dark .alp-hero { min-height: clamp(480px, 72vh, 660px); }

  body.alp-dark .alp-hero-h1 { font-size: clamp(30px, 6.2vw, 44px); }

  /* Produktarchiv: drei Spalten sind zu eng — auf zwei reduzieren. */
  body.alp-dark .woocommerce ul.products li.product .box-image,
  body.alp-dark ul.products li.product .box-image,
  body.alp-dark .woocommerce ul.products li.product .box-image img,
  body.alp-dark ul.products li.product .box-image img { height: 250px; }

  /* Kasse einspaltig stapeln. */
  body.alp-dark #customer_details .col-1,
  body.alp-dark #customer_details .col-2 { width: 100%; float: none; }
}


/* ============================================================
   MOBIL — ≤ 767px
   ============================================================ */

@media (max-width: 767px) {

  :root {
    --alp-section-y: 46px;
    --alp-r-lg: 14px;
    --alp-r-xl: 18px;
  }

  /* --- Overflow-Schutz: nichts darf horizontal scrollen. --- */
  html,
  body.alp-dark { max-width: 100%; overflow-x: hidden; }

  body.alp-dark #wrapper,
  body.alp-dark #main,
  body.alp-dark .row,
  body.alp-dark .container { max-width: 100%; }

  body.alp-dark img,
  body.alp-dark video,
  body.alp-dark iframe,
  body.alp-dark table { max-width: 100%; }

  /* Breite Tabellen scrollen in sich selbst statt die Seite zu sprengen. */
  body.alp-dark .shop_table_responsive,
  body.alp-dark .woocommerce-tabs table,
  body.alp-dark .shop_attributes { display: block; overflow-x: auto; }

  body.alp-dark .section { padding-left: 18px; padding-right: 18px; }

  /* --- Header: Hamburger, kompakte Leiste --- */
  body.alp-dark .header-main { height: auto; }

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

  body.alp-dark #logo img,
  body.alp-dark .header-logo img { max-height: 38px; }

  body.alp-dark .mobile-nav > li > a,
  body.alp-dark .header .nav > li > a { font-size: 13px; }

  /* Touch-Ziele mindestens 44px. */
  body.alp-dark .header .nav > li > a,
  body.alp-dark .off-canvas .nav-vertical > li > a,
  body.alp-dark .alp-faq-q,
  body.alp-dark .woocommerce a.button,
  body.alp-dark .woocommerce button.button,
  body.alp-dark .btn { min-height: 44px; }

  /* --- Hero vertikal --- */
  body.alp-dark .alp-hero {
    min-height: auto;
    padding: 108px 0 56px;
    align-items: flex-start;
  }

  body.alp-dark .alp-hero::before {
    background:
      linear-gradient(180deg, rgba(5, 10, 12, .88) 0%, rgba(5, 10, 12, .68) 46%, rgba(5, 10, 12, .9) 100%),
      radial-gradient(60% 40% at 50% 78%, rgba(110, 218, 180, .16) 0%, rgba(110, 218, 180, 0) 72%);
  }

  body.alp-dark .alp-hero::after { height: 22%; }

  body.alp-dark .alp-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 20px;
    text-align: left;
    max-width: 100%;
  }

  body.alp-dark .alp-hero-h1 {
    font-size: clamp(29px, 8.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -.8px;
    text-align: left;
  }

  body.alp-dark .alp-hero-p { font-size: 15px; margin-bottom: 26px; max-width: 100%; }

  body.alp-dark .alp-hero-btns { gap: 10px; margin-bottom: 24px; }

  body.alp-dark .alp-hero-btns .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 14px 18px;
    font-size: 13px;
  }

  body.alp-dark .alp-hero-micro { gap: 10px 18px; }
  body.alp-dark .alp-micro-item { font-size: 12px; }

  /* Vials bleiben sichtbar, wenn eine rechte Spalte existiert. */
  body.alp-dark .alp-hero-right { order: -1; }
  body.alp-dark .alp-hero-float { position: static; margin-top: 14px; }

  /* --- Stats: 2×2, direkt unter dem Hero --- */
  body.alp-dark .alp-stats { margin-top: -28px; padding: 0 18px; }
  body.alp-dark .alp-stats-inner { grid-template-columns: repeat(2, 1fr); }
  body.alp-dark .alp-stat { padding: 20px 12px; }
  body.alp-dark .alp-stat-icon { width: 28px; height: 28px; background-size: 19px 19px; margin-bottom: 9px; }
  body.alp-dark .alp-stat-n { font-size: 23px; }
  body.alp-dark .alp-stats .alp-stat-l { font-size: 11.5px; }

  /* --- USP: horizontaler Swipe-Slider statt gestapelter Kacheln --- */
  body.alp-dark .alp-usp-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 12px;
    margin-top: 32px;
    padding: 4px 18px 14px;
    margin-left: -18px;
    margin-right: -18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.alp-dark .alp-usp-grid::-webkit-scrollbar { display: none; }

  body.alp-dark .alp-usp-card {
    scroll-snap-align: center;
    padding: 24px 20px;
  }

  body.alp-dark .alp-usp-card:hover { transform: none; }

  body.alp-dark .alp-usp-icon { width: 46px; height: 46px; background-size: 21px 21px; margin-bottom: 16px; }
  body.alp-dark .alp-usp-title { font-size: 15.5px; }
  body.alp-dark .alp-usp-text { font-size: 13.2px; }

  /* --- Bestseller --- */
  body.alp-dark .alp-bestseller-banner {
    padding: 0 0 26px;
    /* Bild in voller Breite oben, darunter läuft der Farbverlauf weiter. */
    background-image:
      var(--alp-img-bestseller-mobile),
      linear-gradient(180deg, #0B2230 0%, #050A0C 100%);
    background-size: 100% auto, 100% 100%;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
  }

  body.alp-dark .alp-bestseller-banner::before {
    background:
      linear-gradient(180deg, rgba(5, 10, 12, .3) 0%, rgba(5, 10, 12, .1) 20%, rgba(5, 10, 12, .48) 58%, rgba(5, 10, 12, .92) 100%);
  }

  body.alp-dark .alp-bestseller-bg { aspect-ratio: 1672 / 900; }

  body.alp-dark .alp-all-products-button {
    left: 16px;
    right: auto;
    bottom: 12px;
    padding: 11px 20px;
    font-size: 11.5px;
    letter-spacing: 1.1px;
  }

  body.alp-dark .alp-bestseller-banner .product-small.box { margin: 6px; padding: 8px; }
  body.alp-dark .alp-bestseller-banner .box-image,
  body.alp-dark .alp-bestseller-banner .box-image img { height: 140px; }
  body.alp-dark .alp-bestseller-banner .product-title,
  body.alp-dark .alp-bestseller-banner .product-title a { font-size: 14px; }
  body.alp-dark .alp-bestseller-banner .price,
  body.alp-dark .alp-bestseller-banner .price .amount { font-size: 15px; }

  /* --- Produkt-Sektion auf der Startseite: zweispaltiges Raster --- */
  body.alp-dark .alp-products .row-grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    height: auto;
    min-width: 0;
  }

  body.alp-dark .alp-products .row-grid .col {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
    transition: none;
    float: none;
  }

  body.alp-dark .alp-products .box-image {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    overflow: hidden;
  }

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

  body.alp-dark .alp-prod-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  body.alp-dark .alp-prod-head h2.section-title { max-width: 100%; }
  body.alp-dark .alp-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.alp-dark .alp-prod-body { padding: 14px; }
  body.alp-dark .alp-prod-name { font-size: 16px; }
  body.alp-dark .alp-prod-price { font-size: 17px; }

  /* --- Shop-Archiv: zwei Spalten, kompaktere Bilder --- */
  body.alp-dark .woocommerce ul.products li.product .box-image,
  body.alp-dark ul.products li.product .box-image,
  body.alp-dark .woocommerce ul.products li.product .box-image img,
  body.alp-dark ul.products li.product .box-image img { height: 190px; }

  body.alp-dark .woocommerce ul.products li.product .product-small,
  body.alp-dark ul.products li.product .product-small { padding: 8px; }

  body.alp-dark ul.products li.product .product-title,
  body.alp-dark ul.products li.product .product-title a { font-size: 14.5px; }

  body.alp-dark ul.products li.product .price { font-size: 16px; }

  /* --- About / Steps --- */
  body.alp-dark .alp-about-inner { grid-template-columns: 1fr; gap: 28px; }
  body.alp-dark .alp-about-img { aspect-ratio: 16 / 9; }
  body.alp-dark .alp-about-list li { font-size: 14.5px; }

  body.alp-dark .alp-how-grid { grid-template-columns: 1fr; gap: 26px; }
  body.alp-dark .alp-step { text-align: center; }
  body.alp-dark .alp-step-n { margin: 0 auto 16px; }
  body.alp-dark .alp-step-content { width: 100%; padding-left: 0; }

  /* --- COA einspaltig --- */
  body.alp-dark .coa-header { padding: 34px 18px 26px; margin-bottom: 30px; }
  body.alp-dark .coa-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 18px; margin-bottom: 44px; }
  body.alp-dark .coa-card:hover { transform: none; }
  body.alp-dark .coa-card-footer { flex-direction: column; align-items: stretch; text-align: center; }
  body.alp-dark .coa-view-btn { justify-content: center; }

  body.alp-dark .alp-coa-inner { grid-template-columns: 1fr; }
  body.alp-dark .alp-coa-card { padding: 20px; }
  body.alp-dark .alp-coa-row { flex-direction: column; gap: 4px; }
  body.alp-dark .alp-coa-row-v { text-align: left; }

  /* --- Reviews --- */
  body.alp-dark .alp-rev-grid { grid-template-columns: 1fr; }

  /* --- FAQ --- */
  body.alp-dark .alp-faq-list { margin-top: 30px; gap: 10px; }
  body.alp-dark .alp-faq-q { padding: 16px 50px 16px 18px; font-size: 14.5px; }
  body.alp-dark .alp-faq-q::after { right: 16px; width: 24px; height: 24px; margin-top: -12px; background-size: 13px; }
  body.alp-dark .alp-faq-a { padding: 0 18px 18px; font-size: 14px; }

  /* --- Newsletter --- */
  body.alp-dark .alp-cta { padding: 46px 18px; }
  body.alp-dark .alp-cta-form { flex-direction: column; }
  body.alp-dark .alp-cta-input,
  body.alp-dark #EMAIL { flex: 1 1 auto; width: 100%; }
  body.alp-dark #sib-form-container,
  body.alp-dark #sib-container { max-width: 100% !important; }

  /* --- Rechtliches --- */
  body.alp-dark .alp-legal { margin-top: 28px; padding: 15px 17px; font-size: 12px; }

  /* --- Footer stapelt sauber --- */
  body.alp-dark .alp-footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  body.alp-dark .alp-footer-brand p,
  body.alp-dark .alp-footer-disc { max-width: 100%; }
  body.alp-dark .footer-widgets { padding: 40px 18px 24px !important; }
  body.alp-dark #footer .col { padding-bottom: 18px; }
  body.alp-dark .alp-footer-links { justify-content: flex-start; gap: 14px; }
  body.alp-dark .alp-footer-bot,
  body.alp-dark .footer-bottom { text-align: center; }

  /* --- Warenkorb & Kasse --- */
  body.alp-dark .woocommerce-cart-form,
  body.alp-dark .cart-collaterals .cart_totals,
  body.alp-dark .woocommerce-checkout .col2-set,
  body.alp-dark #customer_details,
  body.alp-dark #order_review,
  body.alp-dark .woocommerce-checkout-review-order,
  body.alp-dark .woocommerce-MyAccount-content { padding: 16px; border-radius: var(--alp-r); }

  body.alp-dark table.shop_table td,
  body.alp-dark table.shop_table th { padding: 11px 8px; font-size: 13.5px; }

  body.alp-dark .coupon input[type="text"] { max-width: 100%; margin-bottom: 8px; }

  body.alp-dark .quantity input.qty { width: 48px; }

  /* --- Produktdetail --- */
  body.alp-dark .product-info,
  body.alp-dark .summary.entry-summary { padding: 18px 16px; margin-top: 16px; }
  body.alp-dark .product_title { font-size: 24px; }
  body.alp-dark .product-info .price,
  body.alp-dark .summary .price { font-size: 24px; }
  body.alp-dark .woocommerce-tabs .nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
  body.alp-dark .woocommerce-tabs .nav-tabs > li > a { white-space: nowrap; }

  /* --- WhatsApp: kleiner, kollidiert nicht mit Warenkorb-Leisten --- */
  body.alp-dark .alp-whatsapp { width: 48px; height: 48px; right: 14px; bottom: 76px; }
}


/* ============================================================
   MOBIL KLEIN — ≤ 479px
   ============================================================ */

@media (max-width: 479px) {

  body.alp-dark { font-size: 15.5px; }

  body.alp-dark .section { padding-left: 16px; padding-right: 16px; }

  body.alp-dark .alp-hero { padding-top: 96px; }
  body.alp-dark .alp-hero-h1 { font-size: 27px; }
  body.alp-dark .alp-hero-btns { flex-direction: column; align-items: stretch; }
  body.alp-dark .alp-hero-btns .btn { width: 100%; }

  body.alp-dark .alp-stats { padding: 0 16px; }
  body.alp-dark .alp-stat-n { font-size: 21px; }

  body.alp-dark .alp-usp-grid { grid-auto-columns: 84%; }

  /* Produktarchiv einspaltig — Vials bleiben groß und erkennbar. */
  body.alp-dark .woocommerce ul.products li.product .box-image,
  body.alp-dark ul.products li.product .box-image,
  body.alp-dark .woocommerce ul.products li.product .box-image img,
  body.alp-dark ul.products li.product .box-image img { height: 220px; }

  body.alp-dark .alp-prod-grid { grid-template-columns: 1fr; }

  body.alp-dark h2.section-title,
  body.alp-dark .section-title { font-size: 25px; max-width: 100%; }

  body.alp-dark .alp-bestseller-banner .box-image,
  body.alp-dark .alp-bestseller-banner .box-image img { height: 124px; }
}


/* ============================================================
   TOUCH — keine Hover-Zustände auf Touch-Geräten
   ============================================================ */

@media (hover: none) {

  body.alp-dark .alp-usp-card:hover,
  body.alp-dark .alp-prod-card:hover,
  body.alp-dark .coa-card:hover,
  body.alp-dark .alp-bestseller-banner .product-small.box:hover,
  body.alp-dark ul.products li.product .product-small:hover {
    transform: none;
    box-shadow: var(--alp-shadow), var(--alp-inset-top);
  }

  body.alp-dark ul.products li.product .product-small:hover .box-image img,
  body.alp-dark .alp-prod-card:hover .alp-prod-img img { transform: none; }

  body.alp-dark .btn-primary:hover,
  body.alp-dark .woocommerce a.button:hover,
  body.alp-dark .woocommerce button.button:hover,
  body.alp-dark #place_order:hover { transform: none; }

  /* Bildwerkzeuge, die nur bei Hover erscheinen, dauerhaft ausblenden. */
  body.alp-dark .image-tools.show-on-hover { display: none; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  body.alp-dark .alp-usp-grid { scroll-snap-type: none; }

  body.alp-dark .header-cart-link.nav-top-link.is-small,
  body.alp-dark .header-cart-link.nav-top-link.is-small::after,
  body.alp-dark .alp-hero-btns .btn-primary.btn-lg::after,
  body.alp-dark .status-dot { animation: none !important; }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

  body.alp-dark,
  body.alp-dark::before,
  body.alp-dark::after {
    background: #FFFFFF !important;
    color: #111111 !important;
  }

  body.alp-dark::before,
  body.alp-dark::after { display: none !important; }

  body.alp-dark h1,
  body.alp-dark h2,
  body.alp-dark h3,
  body.alp-dark h4,
  body.alp-dark p,
  body.alp-dark li,
  body.alp-dark td,
  body.alp-dark th { color: #111111 !important; }

  body.alp-dark .alp-whatsapp,
  body.alp-dark #alp-agegate,
  body.alp-dark .header-wrapper,
  body.alp-dark #footer,
  body.alp-dark .alp-hero-video,
  body.alp-dark .flickity-button { display: none !important; }

  body.alp-dark .coa-card,
  body.alp-dark .alp-usp-card,
  body.alp-dark .alp-faq-item {
    border: 1px solid #CCCCCC !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  body.alp-dark .alp-faq-a { display: block !important; }
}