/* Global theme toggling styles */
@media (min-width:821px){#themeToggleMobile{display:none!important;}#themeToggleDesktop{display:inline-grid!important;margin-left:8px;}}
@media (max-width:820px){#themeToggleDesktop{display:none!important;}#themeToggleMobile{display:inline-grid!important;margin-left:6px!important;margin-top:0!important;}}
.theme-toggle-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--surface);color:var(--text);transition:background .3s,color .3s,transform .2s;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.theme-toggle-btn:hover{transform:scale(1.1);background:var(--brand);color:#fff;}
.theme-toggle-btn .icon{display:none;}
/* Ensure toggles sit above other elements and remain clickable */
#themeToggleDesktop,#themeToggleMobile{position:relative;z-index:10;pointer-events:auto;}
/* Burger icon colors for light/dark themes */
html[data-theme="light"] .dng-burger svg,
html[data-theme="light"] .dng-burger svg path{stroke:#000!important;}
html[data-theme="dark"] .dng-burger svg,
html[data-theme="dark"] .dng-burger svg path{stroke:#e6e9ee!important;}
/* Mobile menu background and link colors */
html[data-theme="light"] .dng-drawer,
html[data-theme="light"] #mobileMenu{background:#fff;color:#111;border-left:1px solid #e5e7eb;}
html[data-theme="light"] .dng-drawer a,
html[data-theme="light"] #mobileMenu a{color:#111;}
html[data-theme="light"] .dng-drawer a:hover,
html[data-theme="light"] #mobileMenu a:hover{background:#f5f6f7;}
html[data-theme="dark"] .dng-drawer,
html[data-theme="dark"] #mobileMenu{background:rgba(9,11,12,.98);color:#e6e9ee;border-left:1px solid rgba(255,255,255,.12);}
html[data-theme="dark"] .dng-drawer a,
html[data-theme="dark"] #mobileMenu a{color:#e6e9ee;}
html[data-theme="dark"] .dng-drawer a:hover,
html[data-theme="dark"] #mobileMenu a:hover{background:rgba(255,255,255,.06);}
html[data-theme="light"] .theme-toggle-btn .sun{display:block;}
html[data-theme="dark"] .theme-toggle-btn .moon{display:block;}
:root[data-theme="light"],html[data-theme="light"],body.light-mode{--bg:#ffffff;--surface:#ffffff;--elev:#f7f7f7;--text:#0f172a;--muted:#0f172a;--border:#e5e7eb;--surface-alt:#f7f7f7;}
:root[data-theme="light"] header,html[data-theme="light"] header,body.light-mode header,:root[data-theme="light"] .site-header,html[data-theme="light"] .site-header,body.light-mode .site-header{background:#ffffff!important;border-bottom:1px solid #e5e7eb!important;}
:root[data-theme="light"] header .nav__links a,:root[data-theme="light"] header .nav-links a,:root[data-theme="light"] header nav a,html[data-theme="light"] header .nav__links a,html[data-theme="light"] header .nav-links a,html[data-theme="light"] header nav a,body.light-mode header .nav__links a,body.light-mode header .nav-links a,body.light-mode header nav a,:root[data-theme="light"] .brand,:root[data-theme="light"] .brand span,html[data-theme="light"] .brand,html[data-theme="light"] .brand span,body.light-mode .brand,body.light-mode .brand span{color:#0f172a!important;opacity:1!important;-webkit-text-fill-color:#0f172a;}
:root[data-theme="light"] header .nav__links a:hover,html[data-theme="light"] header .nav__links a:hover,body.light-mode header .nav__links a:hover{color:#0b65d6!important;background:rgba(2,6,23,.04)!important;}
html[data-theme="light"] .btn{background:#000!important;color:#fff!important;border-color:#fff!important;}
html[data-theme="light"] .btn:hover{background:#000!important;}
:root[data-theme="light"] header h1,
:root[data-theme="light"] header h2,
:root[data-theme="light"] header h3,
:root[data-theme="light"] header span,
:root[data-theme="light"] header a {
  color: #000 !important;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: #000 !important;  /* Schwarz statt Türkis */
  color: #fff !important;       /* Icon bleibt weiß sichtbar */
}
/* Überschriften auf den Info/Legal-Seiten im Light-Theme schwarz */
html[data-theme="light"] .legal-card h2,
html[data-theme="light"] .hero h1,
html[data-theme="light"] .about-section h2 {
  color: #000 !important;
}
/* Footer im Light-Theme über die ganze Breite als Box */
html[data-theme="light"] footer {
  background: #f9f9f9 !important;        /* heller Hintergrund */
  border-top: 1px solid #e5e7eb !important; /* dezente Linie oben */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);  /* leichter Schatten nach oben */
  padding: 40px 20px !important;         /* mehr Innenabstand */
  width: 100% !important;                /* volle Breite */
  border-radius: 0 !important;           /* keine Rundungen (wie Balken) */
}
/* Trustpilot Widget im Light-Theme */
html[data-theme="light"] .trustpilot-dark {
  background-color: #fff !important;   /* Weiß statt Schwarz */
  border: 1px solid #e5e7eb !important;/* dezente graue Linie */
  box-shadow: 0 4px 12px rgba(0,0,0,.06); /* leichter Schatten */
}

html[data-theme="light"] .trustpilot-dark a {
  color: #000 !important;  /* Linktext schwarz */
}
/* Preise im Light-Theme schwarz */
html[data-theme="light"] .price,
html[data-theme="light"] .product-info .price,
html[data-theme="light"] .product-detail-price {
  color: #000 !important;
}

/* Titel im Produkt-Balken: weiße Umrandung (nur Light-Theme) */
html[data-theme="light"] .sticky-cta .sc-title #scName,
html[data-theme="light"] .sticky-cta .sc-title strong {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #fff !important;
  border-radius: 6px;
  color: #fff !important;
  background: transparent !important;
}
html[data-theme="light"] .sticky-cta {
  background: #000 !important;
  border-top: none !important;
}
/* === Preise im Header nur im Dark Theme ausblenden === */
html[data-theme="dark"] .product-info .price,
html[data-theme="dark"] .sticky-cta .price,
html[data-theme="dark"] .hero .price {
  display: none !important;
}
/* ===========================
   Dark Theme – Header Box
   =========================== */

/* Produkt-Header-Bar im Dark Theme gleiche Farbe wie Haupt-Header */
html[data-theme="dark"] .sticky-cta,
html[data-theme="dark"] .product-hero,
html[data-theme="dark"] .product-top,
html[data-theme="dark"] .product-header,
html[data-theme="dark"] .hero-bar {
  background: rgba(11, 13, 15, 0.85) !important;  /* gleiche Farbe wie site-header */
  border: 1px solid rgba(255,255,255,0.06);       /* dezente Linie */
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  padding: 12px 20px;
  color: #fff !important;
  box-sizing: border-box;
}
/* Dark Theme: Türkise Umrandung nur um den Produkt-Titel oben */
html[data-theme="dark"] .sticky-cta .sc-title #scName,
html[data-theme="dark"] .sticky-cta .sc-title strong,
html[data-theme="dark"] .hero-bar .sc-title #scName,
html[data-theme="dark"] .hero-bar .sc-title strong {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid var(--brand, #18a196) !important; /* türkis */
  border-radius: 8px;
  background: transparent !important;
  color: #fff !important;
  line-height: 1.2;
}

/* Optional: leichter Glow in Markenfarbe */
html[data-theme="dark"] .sticky-cta .sc-title #scName,
html[data-theme="dark"] .sticky-cta .sc-title strong {
  box-shadow: 0 0 0 2px rgba(24,161,150,0.08);
}
/* -- Footer adjustments for light theme -- */
/* Make footer column titles black for improved readability */
html[data-theme="light"] .footer-col h4{
  color: #000 !important;
}
/* -- Trust row dot removal in dark theme as well (keep consistent across themes) -- */
html[data-theme="dark"] .trust .dot:last-of-type{
  display: none !important;
}
/* Add a black separator line above the health notice box to clearly separate it from the footer */
html[data-theme="light"] footer.site-footer > div:last-of-type{
  border-top: 1px solid #000 !important;
  margin-top: 24px;
  padding-top: 16px;
}

/* -- Trust indicators: adjust dot color and remove extra dot -- */
/* Always hide the last dot to remove the separator after SSL-verschlüsselt */
.trust .dot:last-of-type{
  display: none !important;
}
/* In the light theme, make the separator dot black for better contrast */
html[data-theme="light"] .trust .dot{
  background: #000 !important;
  opacity: 1 !important;
}

/* -- Light Theme: product gallery and images backgrounds -- */
html[data-theme="light"] .gallery{
  background: #fff !important;         /* white card background */
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
html[data-theme="light"] .gallery .hero-media{
  background: #fff !important;         /* white backdrop behind main image */
}
html[data-theme="light"] .thumbs img,
html[data-theme="light"] .thumbs video{
  background: #fff !important;         /* white background for thumbnails */
}

/* -- Light Theme: product buy & details buttons -- */
html[data-theme="light"] .cta-primary{
  background: #000 !important;    /* black background for buy button */
  color: #fff !important;         /* white text */
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .cta-ghost{
  background: transparent !important;
  border: 2px solid #fff !important;  /* white border instead of turquoise */
  color: #000 !important;             /* black text for contrast */
}

/* Titel im Produkt-Balken: weiße Umrandung (nur Light-Theme) */
html[data-theme="light"] .sticky-cta .sc-title #scName,
html[data-theme="light"] .sticky-cta .sc-title strong {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid #fff !important;
  border-radius: 6px;
  color: #fff !important;
  background: transparent !important;
}
html[data-theme="light"] .sticky-cta {
  background: #000 !important;
  border-top: none !important;
}

/* -- Light Theme: product buy & details buttons -- */
html[data-theme="light"] .cta-primary{
  background: #000 !important;    /* black background for buy button */
  color: #fff !important;         /* white text */
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .cta-ghost{
  background: transparent !important;
  border: 2px solid #fff !important;  /* white border instead of turquoise */
  color: #000 !important;             /* black text for contrast */
}

/* -- Light Theme: product buy & details buttons -- */
html[data-theme="light"] .cta-primary{
  /* In the light theme we want the primary call‑to‑action to appear as a simple outlined box. */
  background: transparent !important;
  color: #000000 !important;       /* match dark text for contrast on light backgrounds */
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .cta-ghost{
  /* Secondary call‑to‑action adopts the same outlined style in the light theme. */
  background: transparent !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
}

/* Lighten the product header/hero bars and the sticky CTA in the light theme */
html[data-theme="light"] .sticky-cta,
html[data-theme="light"] .product-header,
html[data-theme="light"] .product-hero,
html[data-theme="light"] .product-top,
html[data-theme="light"] .hero-bar {
  background: #f7f7f7 !important;         /* light card background */
  border: 1px solid #e5e7eb !important;    /* subtle border */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  color: #000000 !important;
}

/* Remove the dark override applied to the product title inside the sticky CTA */
html[data-theme="light"] .sticky-cta .sc-title #scName,
html[data-theme="light"] .sticky-cta .sc-title strong,
html[data-theme="light"] .hero-bar .sc-title #scName,
html[data-theme="light"] .hero-bar .sc-title strong {
  /* Display the product name with a subtle outline and dark text */
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #000000 !important;
  border-radius: 6px;
  background: transparent !important;
  color: #000000 !important;
  line-height: 1.2;
  box-shadow: none !important;
}

/* Ensure the separator dots in the trust row have sufficient contrast */
html[data-theme="light"] .trust .dot {
  background: #0f172a !important;
  opacity: 1 !important;
}

/* Style header buttons (within product header or hero bar) like the product CTA buttons */
html[data-theme="light"] .product-header .btn,
html[data-theme="light"] .product-hero .btn,
html[data-theme="light"] .product-top .btn,
html[data-theme="light"] .hero-bar .btn,
html[data-theme="light"] .sticky-cta .btn {
  background: transparent !important;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

/* Trust indicators: wrap each label in a subtle outlined pill */
html[data-theme="light"] .trust {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
}
html[data-theme="light"] .trust span:not(.dot) {
  padding: 4px 8px;
  margin-right: 6px;
  border: 1px solid #0f172a;
  border-radius: 6px;
  background: transparent;
  color: #0f172a;
  font-weight: 500;
}

/* Partner offer notification box styling (replacing previous inline styles) */
.partner-offer-box {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  margin: 18px 0;
  line-height: 1.5;
}
html[data-theme="light"] .partner-offer-box {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.12);
  color: #444;
}
html[data-theme="dark"] .partner-offer-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #aab3be;
}

/* Nur den Preis oben im Header (sticky-cta) im Light-Theme ausblenden */
html[data-theme="light"] .sticky-cta .sc-title .price {
  display: none !important;
}

/* Light-Theme: Trust-Row als gemeinsame Box (wie im Dark-Theme) */
html[data-theme="light"] .trust{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}

/* Pills zurücksetzen: keine Einzelrahmen mehr um die Labels */
html[data-theme="light"] .trust span:not(.dot){
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #0f172a !important;
}

/* Punkt bleibt schwarz (du hast das schon, hier zur Vollständigkeit) */
html[data-theme="light"] .trust .dot{
  background: #0f172a !important;
  opacity: 1 !important;
}

/* ==== Light-Theme: Buttons zwingend schwarz mit weißer Schrift ==== */
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .cta-btn,
html[data-theme="light"] .cta a,
html[data-theme="light"] a.btn,
html[data-theme="light"] a[role="button"] {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #000 !important;
  -webkit-text-fill-color: #fff !important; /* iOS/Safari fix */
}

html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .cta-btn:hover,
html[data-theme="light"] .cta a:hover,
html[data-theme="light"] a.btn:hover,
html[data-theme="light"] a[role="button"]:hover {
  background: #222 !important;
  color: #fff !important;
  border-color: #222 !important;
}

    :root{
      --bg: #0b0d0f;            /* Haupt‑Hintergrund */
      --surface: #121417;       /* Karten/Flächen */
      --elev: #191c20;          /* leichte Erhöhung */
      --text: #e6e9ee;          /* Primärtext */
      --muted: #aab3be;         /* Sekundärtext */
      --brand: rgb(24,161,150); /* Akzent */
      --brand-700: #0e9d90;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    /* Reset + Base */
    *,*::before,*::after{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background:
        radial-gradient(1200px 700px at 70% -10%, rgba(24,161,150,.08), transparent 60%),
        radial-gradient(900px 600px at 0% 100%, rgba(24,161,150,.06), transparent 60%),
        var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    img{ max-width:100%; display:block; border-radius: 12px; }
    a{ color:inherit; text-decoration:none; }

    /* Container */
    .container{ width:min(1100px, 92%); margin-inline:auto; }

    /* ===== Header (identisch aufgebaut wie index.html) ===== */
    header.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: saturate(160%) blur(10px); background: rgba(11,13,15,.75); border-bottom:1px solid rgba(255,255,255,.06); }
    .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; }
    .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
    .brand img{ width:34px; height:34px; border-radius:10px; box-shadow: 0 6px 18px rgba(24,161,150,.3); }
    .nav__links{ display:flex; gap:18px; align-items:center; }
    .nav__links a{ padding:8px 12px; border-radius:10px; color:var(--muted); transition: all .2s ease; }
    .nav__links a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
    .nav__cta{ display:flex; gap:10px; }
    .btn{ padding:10px 14px; border-radius:10px; border:1px solid transparent; background:var(--brand); color:#041413; font-weight:700; box-shadow: 0 8px 18px rgba(24,161,150,.25); cursor:pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease; }
    .btn:hover{ background:var(--brand-700); box-shadow: 0 12px 26px rgba(24,161,150,.35); }
    .btn--ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
    .btn--ghost:hover{ background:rgba(255,255,255,.06); }

    /* Mobile nav */
    .nav-toggle{ display:none; background:transparent; border:1px solid rgba(255,255,255,.14); padding:10px; border-radius:10px; }
    .nav-toggle svg{ width:22px; height:22px; }
    @media (max-width: 820px){
      .nav__links{ display:none; }
      .nav__cta{ display:none; }
      .nav-toggle{ display:block; }
      .mobile-menu{ display:none; position:fixed; inset:64px 0 0 0; background:rgba(9,11,12,.98); border-top:1px solid rgba(255,255,255,.06); padding:18px; }
      .mobile-menu a{ display:block; padding:14px 10px; border-radius:10px; color:var(--muted); }
      .mobile-menu a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
      .mobile-cta{ display:grid; gap:10px; margin-top:14px; }
    }

    /* ===== Seite: Produktdetail ===== */
    main{ padding: clamp(20px, 2vw, 28px) 0 70px; } /* Luft unter dem Header */
    .breadcrumbs{
      font-size:.95rem; color:var(--muted); margin: 8px 0 18px;
    }
    .breadcrumbs a{ color:var(--muted); text-decoration: underline; text-underline-offset: 2px; }
    .product-wrap{
      display:grid; grid-template-columns: 1.05fr .95fr; gap:32px; align-items:start;
    }
    @media (max-width: 980px){ .product-wrap{ grid-template-columns: 1fr; } }

    /* Galerie */
    .gallery{
      background: linear-gradient(180deg, var(--surface), var(--elev));
      border:1px solid rgba(255,255,255,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:16px;
    }
    .gallery .hero-media{
      aspect-ratio: 4/3; background:#0f1114; display:grid; place-items:center; overflow:hidden; border-radius:12px;
    }
    .thumbs{
      margin-top:12px; display:grid; grid-template-columns: repeat(5,1fr); gap:10px;
    }
    .thumbs img, .thumbs video{ aspect-ratio: 1/1; object-fit:cover; cursor:pointer; border-radius:10px; opacity:.85; transition:.2s; }
    .thumbs img:hover{ opacity:1; transform: translateY(-1px); }

    /* Info‑Card */
    .info{
      background: var(--surface);
      border:1px solid rgba(255,255,255,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:22px 22px 26px;
    }
    .info h1{ margin:0 0 6px; font-size: clamp(28px, 4.8vw, 40px); line-height:1.1; }
    .price{ color:var(--brand); font-weight:800; font-size:1.6rem; margin: 8px 0 16px; }
    .meta{ color:var(--muted); font-size:.95rem; }
    .cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 4px; }
    .cta-primary{ padding:12px 18px; border-radius:12px; background:var(--brand); color:#041413; font-weight:800; }
    .cta-primary:hover{ background:var(--brand-700); }
    .cta-ghost{ padding:12px 18px; border-radius:12px; border:2px solid var(--brand); color:var(--brand); font-weight:800; background:transparent; }
    .cta-ghost:hover{ background:var(--brand); color:#041413; }

    /* Vertrauens-Row */
    .trust{
      display:flex; gap:14px; align-items:center; flex-wrap:wrap;
      background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
      border-radius: 12px; padding: 12px 14px; margin-top:18px; color:var(--muted);
    }
    .dot{ width:6px; height:6px; border-radius:50%; background: var(--brand); display:inline-block; opacity:.7; }

    /* Tabs (Beschreibung/Details/Versand) */
    .tabs{ margin-top: 26px; }
    .tab-head{ display:flex; gap:8px; flex-wrap:wrap; }
    .tab-head button{
      background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text);
      padding:8px 12px; border-radius:10px; cursor:pointer;
    }
    .tab-head button[aria-selected="true"]{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
    .tab-panel{ display:none; margin-top:14px; color:var(--muted); }
    .tab-panel[data-active="true"]{ display:block; }

    /* Spezifikationen */
    .specs{
      margin-top: 26px;
      background: var(--surface);
      border:1px solid rgba(255,255,255,.06);
      border-radius: 12px;
      padding: 18px;
    }
    .specs h3{ margin:0 0 10px; font-size: 1.1rem; color:#d7dde6; }
    .specgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .specgrid div{ display:flex; justify-content:space-between; gap:10px; color:var(--muted); }
    @media (max-width:680px){ .specgrid{ grid-template-columns: 1fr; } }

    /* Ähnliche Produkte */
    .related{
      margin-top: 56px;
      background: rgba(255,255,255,.03);
      border-radius: 14px;
      padding: 26px 0 32px;
    }
    .related h2{ text-align:center; margin:0 0 18px; font-size: clamp(22px, 3.6vw, 28px); }
    .rel-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
    .rel-card{
      background: var(--surface);
      border:1px solid rgba(255,255,255,.06);
      border-radius: 12px; overflow:hidden; box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .2s ease;
    }
    .rel-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.35); }
    .rel-card img{ aspect-ratio:1/1; object-fit:cover; }
    .rel-card .body{ padding:14px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
    .rel-card .price{ margin:0; font-size:1rem; }

    /* Footer (leicht) */
    footer.site-footer{ margin-top: 60px; border-top:1px solid rgba(255,255,255,.06); background:#0a0c0e; }
    .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:18px; padding: 26px 0; }
    .footer-col h4{ margin:0 0 8px; font-size: 16px; color:#d7dde6; }
    .footer-col a{ color:var(--muted); display:inline-block; padding:6px 0; }
    .footer-col a:hover{ color:var(--text); }
    .copyright{ color:#8f98a3; font-size: 14px; padding: 12px 0 32px; }
    @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
    
       /* --- Mobile-Menü Fix products.html --- */
@media (max-width: 900px){
  header .nav__links { display: none !important; }

  #navToggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent; color: var(--text);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  #mobileMenu[hidden] { display: none !important; }
  #mobileMenu {
    position: fixed;
    inset: 64px 0 0 0; /* direkt unter dem Header, wie index.html */
    background: rgba(9,11,12,.98);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 18px;
    z-index: 999;
  }
  #mobileMenu a {
    display: block; padding: 14px 10px;
    border-radius: 10px; color: #aab3be; text-decoration: none;
  }
  #mobileMenu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
}

@media (min-width: 901px){
  #navToggle { display: none !important; }
  #mobileMenu { display: none !important; }
}

@media (max-width: 820px){
  .mobile-menu{
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(9,11,12,.98);
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 18px;
    display: none;
    z-index: 10000;     /* <- über alles legen */
    pointer-events: auto;
  }
  .mobile-menu a{ display:block; padding:14px 10px; border-radius:10px; color:var(--muted); }
  .mobile-menu a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
}

@media (max-width: 820px){
  header.site-header{ z-index: 10001; }     /* Header über die Seite */
  header .mobile-menu{
    z-index: 10002;                          /* Mobile-Menü über Header-Inhalt */
    pointer-events: auto;
  }
}

/* --- Fix: mobile-menu sichtbar, wenn nicht [hidden] --- */
@media (max-width: 900px){
  .mobile-menu { display: block !important; }         /* überschreibt alte display:none-Regel */
  .mobile-menu[hidden] { display: none !important; }  /* bleibt sauber versteckbar über [hidden] */
  header.site-header { z-index: 10001; }              /* Header unter Menü */
  .mobile-menu { z-index: 10002; pointer-events: auto; }
}
.trust-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:12px; margin:18px 0 }
.sticky-cta{ position:sticky; bottom:0; background:rgba(11,13,15,.86); backdrop-filter:saturate(140%) blur(8px); border-top:1px solid rgba(255,255,255,.08); }
.sticky-cta__inner{ padding:12px 0; display:flex; gap:12px; align-items:center; justify-content:space-between }
.sc-title{ display:flex; gap:10px; align-items:baseline }
.sc-title .price{ color:var(--brand); font-weight:700 }
/* Tabs: feste Mindesthöhe, damit das Layout nicht springt */
.tabs .tab-panel {
  min-height: 220px;           /* <- Höhe nach Bedarf anpassen */
  padding: 14px;
}

/* Tab-Head optisch dezent, Buttons sind deaktiviert */
.tab-head {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.tab-head button[disabled]{
  opacity: .6; cursor: not-allowed;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 12px; border-radius: 8px;
}

/* Info-Note Karte */
.partner-info-note{
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.partner-info-note .pin-icon{
  font-size: 20px; line-height: 1; margin-top: 2px;
}
.partner-info-note .pin-text strong{ color: var(--text); }
.partner-info-note em{ font-style: normal; color: var(--text); opacity: .9; }

      .gallery{ position:relative; }
    .gallery-prev, .gallery-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); color:#fff; border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; }
    .gallery-prev{ left:8px; }
    .gallery-next{ right:8px; }
    .hero-media img{ max-width:100%; max-height:400px; object-fit:contain; }
    .rel-card img{ width:90px; height:90px; object-fit:cover; }

    /* === Light-Theme FIX: Produktseiten-Buttons === */
/* 1) Sticky-CTA Button (z.B. "Beim Partner kaufen" mit class="btn") */
html[data-theme="light"] .sticky-cta .btn,
html[data-theme="light"] .sticky-cta a.btn {
  background: transparent !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;  /* <-- überschreibt den globalen Weiß-Fix */
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .sticky-cta .btn:hover,
html[data-theme="light"] .sticky-cta a.btn:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #000 !important;
}

/* 2) Inhaltliche Produkt-Buttons (cta-primary / cta-ghost) */
html[data-theme="light"] .cta-primary {
  background: transparent !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .cta-primary:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-theme="light"] .cta-ghost {
  background: transparent !important;
  border: 2px solid #000 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
html[data-theme="light"] .cta-ghost:hover {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Basis-Box */
.partner-offer-box {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  margin: 18px 0;
  line-height: 1.5;
}

/* Light Theme: graue Box */
html[data-theme="light"] .partner-offer-box {
  background: rgba(0,0,0,0.05);      /* hellgrau */
  border: 1px solid rgba(0,0,0,0.12);
  color: #444;
}

/* Dark Theme: türkisfarbene Box */
html[data-theme="dark"] .partner-offer-box {
  background: rgba(24,161,150,0.08);   /* leicht türkis hinterlegt */
  border: 1px solid rgba(24,161,150,0.25);
  color: #aab3be;
}

/* ==== Light Theme: Hintergrundbox für Ähnliche Produkte ==== */
html[data-theme="light"] .related {
  background: #ffffff !important;        /* weiße Box */
  border: 1px solid #e5e7eb !important;  /* dezente Umrandung */
  border-radius: 14px !important;        /* wie im Dark Theme */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; /* sanfter Schatten */
  padding: 26px 0 32px !important;
}


/* Light Theme: Testimonial-Karten wie im Dark Theme */
html[data-theme="light"] .testimonials .quote{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
  color: #475569 !important;            /* dezenter Fließtext */
}

html[data-theme="light"] .testimonials .quote strong{
  color: #0f172a !important;            /* Überschrift in der Karte */
}

/* optional: Überschrift der Section im Light Theme dunkler */
html[data-theme="light"] .section h2{
  color: #0f172a !important;
}

/* =====================================================================
   Mobile Theme Toggle – Zentrierte Positionierung
   ---------------------------------------------------------------------
   Auf schmalen Displays möchten wir den Dark/Light‑Switch (#themeToggleMobile)
   näher zur Mitte des Headers verschieben, statt ihn direkt neben dem
   Logo zu belassen. Dafür positionieren wir ihn absolut relativ zum
   Navigationscontainer (.dng-nav) und zentrieren ihn horizontal via
   left:50% und translateX(-50%). Die vertikale Zentrierung erreicht
   translate(-50%, -50%). Ein hoher z‑Index stellt sicher, dass der
   Button über anderen Elementen liegt. Diese Regel gilt nur für
   Viewports bis 820px Breite.
   ===================================================================== */
@media (max-width: 820px) {
  /* Navigationscontainer als Positionierungsbezug deklarieren */
  .dng-nav {
    position: relative !important;
  }
  #themeToggleMobile {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
  }
}