<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>RoyalAminos – Research Peptides | Offizielle Freewebstore-Startseite</title>
  <meta name="description" content="RoyalAminos Research Peptides – BPC‑157, CJC‑1295 DAC, Follistatin 344. 99% Purity. Nur für Forschungszwecke. Keine Anwendung am Menschen."/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
    :root{
      --bg:#0b1020; --bg-soft:#0f1630; --card:#0e1326; --ink:#e7ecff; --muted:#a6b0d9;
      --brand:#7aa5ff; --accent:#9bffd0; --danger:#ff6570; --ok:#52d67f; --stroke:rgba(255,255,255,.08);
      --radius:18px; --radius-lg:26px; --shadow:0 10px 30px rgba(0,0,0,.35);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:radial-gradient(1100px 600px at 20% -10%,rgba(122,165,255,.18),transparent),radial-gradient(1200px 600px at 120% 10%,rgba(155,255,208,.12),transparent),var(--bg);}    
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--container);margin:0 auto;padding:0 20px}

    /* Topbar */
    .topbar{background:linear-gradient(90deg,var(--brand),#9cc2ff);color:#051129}
    .topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-weight:600}
    .badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#fff1;border:1px solid #ffffff22}

    /* Header */
    header{position:sticky;top:0;z-index:50;background:rgba(14,19,38,.7);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--stroke)}
    nav{display:flex;align-items:center;gap:18px;padding:14px 0}
    .logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
    .logo-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#8cf4cf);display:grid;place-items:center;box-shadow:var(--shadow)}
    .spacer{flex:1}
    .search{position:relative;max-width:520px;flex:1}
    .search input{width:100%;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--ink);padding:12px 44px 12px 14px;border-radius:12px}
    .search svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:.7}
    .nav-links a{opacity:.85}

    /* Hero */
    .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;padding:72px 0 40px}
    .hero .title{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0 0 10px}
    .hero p{color:var(--muted);margin:0 0 20px}
    .cta{display:flex;gap:14px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;border:1px solid var(--stroke);padding:12px 16px;font-weight:700;cursor:pointer;transition:.2s background,.2s transform}
    .btn-primary{background:linear-gradient(180deg,var(--brand),#628dff);color:#08122a}
    .btn:hover{transform:translateY(-1px)}
    .pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);opacity:.85}
    .hero-card{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}

    /* Filters */
    .controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
    .chip{padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);cursor:pointer}
    .chip.active{outline:2px solid #9bffd099}
    select, .controls input[type="number"]{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--stroke);border-radius:10px;padding:10px}

    /* Grid */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .product{grid-column:span 4;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;transition:transform .15s ease, box-shadow .15s ease}
    .product:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.45)}
    .product .media{background:#0d132a;display:grid;place-items:center;aspect-ratio:1/1;border-bottom:1px solid var(--stroke)}
    .product img{max-width:72%;height:auto;transition:transform .2s ease;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
    .product:hover img{transform:scale(1.03)}
    .product .body{padding:16px}
    .product .title{font-weight:700;margin:0 0 6px}
    .product .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
    .product .price{margin-top:8px;font-weight:800;font-size:18px}
    .product .actions{display:flex;gap:10px;margin-top:12px}
    .tag{font-size:11px;letter-spacing:.2px;padding:4px 8px;border-radius:999px;background:#ffffff10;border:1px solid #ffffff20}

    /* Sections */
    section{padding:40px 0}
    h2{font-size:clamp(22px,3vw,30px);margin:0 0 12px}
    .sub{color:var(--muted);margin-top:6px}

    /* Info blocks */
    .info{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .card{grid-column:span 4;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:var(--radius);padding:18px}

    /* Footer */
    footer{margin-top:60px;border-top:1px solid var(--stroke);background:rgba(255,255,255,.02)}
    footer .cols{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:30px 0}
    footer .col{grid-column:span 3}
    footer a{color:var(--muted)}
    .legal{font-size:12px;color:var(--muted);padding:12px 0 28px}

    /* Sticky Cart */
    .cart{position:fixed;right:22px;bottom:22px;background:linear-gradient(135deg,var(--brand),#8cf4cf);color:#08122a;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;font-weight:800;box-shadow:var(--shadow);cursor:pointer}

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px}
    .modal.open{display:flex}
    .modal .sheet{max-width:680px;width:100%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:18px;box-shadow:var(--shadow);padding:22px}
    .modal .sheet h3{margin-top:0}

    /* Cookies */
    .cookie{position:fixed;left:22px;bottom:22px;max-width:380px;background:#0e1325;border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:none}

    /* Responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr;}
      .product{grid-column:span 6}
      footer .col{grid-column:span 6}
    }
    @media (max-width:680px){
      .product{grid-column:span 12}
      .controls{flex-direction:column;align-items:stretch}
    }
  
</head>
<body>
  <!-- Topbar -->
  <div class="topbar">
    <div class="container wrap">
      <div class="badge" title="Schneller Versand">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h13l3-5h2" stroke="#051129" stroke-width="2" stroke-linecap="round"/></svg>
        <span>Versand innerhalb von 24–48h*</span>
      </div>
      <div class="pill">Nur für Forschungszwecke – keine Anwendung am Menschen</div>
    </div>
  </div>

  <!-- Header -->
  <header>
    <div class="container">
      <nav>
        <div class="logo">
          <div class="logo-mark">👑</div>
          <div>
            <div style="font-size:15px;opacity:.8">RoyalAminos</div>
            <div style="font-weight:900;letter-spacing:.8px;">RESEARCH PEPTIDES</div>
          </div>
        </div>
        <div class="spacer"></div>
        <div class="search">
          <input id="search" type="search" placeholder="Produkte suchen (z. B. BPC‑157, 5 mg)…" aria-label="Shop durchsuchen">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
        <div class="nav-links" aria-label="Hauptnavigation">
          <a href="#produkte">Produkte</a>
          <a href="#faq">FAQ</a>
          <a href="#kontakt">Kontakt</a>
        </div>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero container">
    <div>
      <h1 class="title">Reagenzien in Laborqualität – <span style="background:linear-gradient(120deg,var(--accent),#bde7ff);-webkit-background-clip:text;background-clip:text;color:transparent">BPC‑157, CJC‑1295 DAC & Follistatin 344</span></h1>
      <p>RoyalAminos liefert streng geprüfte Research‑Produkte (99% Purity). Sämtliche Artikel sind ausschließlich für <strong>in‑vitro Forschung</strong> vorgesehen. Keine Anwendung oder Verabreichung am Menschen oder Tier.</p>
      <div class="cta">
        <button class="btn btn-primary" onclick="document.querySelector('#produkte').scrollIntoView({behavior:'smooth'})">Jetzt einkaufen</button>
        <a class="btn" href="#zertifikate">CoA & Qualität</a>
        <span class="pill">Kauf auf Rechnung (B2B) – Anfrage</span>
      </div>
    </div>
    <div class="hero-card" role="img" aria-label="Produktvorschau">
      <div style="display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap">
        <img loading="lazy" alt="BPC‑157 Fläschchen" src="images/BPC-157-10mg.png" style="width:150px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))" />
        <img loading="lazy" alt="CJC‑1295 DAC Fläschchen" src="images/CJC-1295-DAC-5mg.png" style="width:150px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))" />
        <img loading="lazy" alt="Follistatin 344 Fläschchen" src="images/Follistatin-344-2mg.png" style="width:150px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))" />
      </div>
      <div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap">
        <span class="tag">99% Purity</span>
        <span class="tag">Batch‑geprüft</span>
        <span class="tag">Schneller Versand*</span>
        <span class="tag">EU/US Lab‑Grade</span>
      </div>
    </div>
  </section>

  <!-- Produktliste -->
  <section id="produkte" class="container">
    <h2>Produkte</h2>
    <p class="sub">Wähle Kategorie, Stärke und Sortierung. Preise sind Platzhalter – bitte im Freewebstore‑Backend festlegen.</p>

    <div class="controls" role="group" aria-label="Filter">
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <button class="chip active" data-chip="all">Alle</button>
        <button class="chip" data-chip="BPC-157">BPC‑157</button>
        <button class="chip" data-chip="CJC-1295 DAC">CJC‑1295 DAC</button>
        <button class="chip" data-chip="Follistatin 344">Follistatin 344</button>
      </div>
      <div class="spacer"></div>
      <label>Sortierung:
        <select id="sort">
          <option value="popular">Empfohlen</option>
          <option value="price-asc">Preis ↑</option>
          <option value="price-desc">Preis ↓</option>
          <option value="mg-asc">mg ↑</option>
          <option value="mg-desc">mg ↓</option>
        </select>
      </label>
      <label>mg ≥
        <input id="minMg" type="number" value="0" min="0" step="1" style="width:90px" />
      </label>
    </div>

    <div id="grid" class="grid" aria-live="polite"></div>
  </section>

  <!-- Qualität / Info -->
  <section id="zertifikate" class="container">
    <h2>Qualität & Compliance</h2>
    <div class="info">
      <div class="card">
        <h3>Charge & CoA</h3>
        <p class="sub">Jede Charge wird dokumentiert. <strong>Certificate of Analysis</strong> (HPLC, MS) auf Anfrage. Reinheit ≥ 99% für die gelisteten Artikel.</p>
      </div>
      <div class="card">
        <h3>Research Use Only</h3>
        <p class="sub">Nicht für Diät, Therapie oder Diagnostik. Keine Anwendung an Mensch oder Tier. Verkauf nur an Labor/Institute, B2B‑Kunden oder volljährige Privatpersonen zu <em>in‑vitro</em> Forschungszwecken.</p>
      </div>
      <div class="card">
        <h3>Versand & Lagerung</h3>
        <p class="sub">Versand als lyophilisiertes Pulver. Lagerung: trocken, dunkel, 2–8 °C (Langzeitlagerung −20 °C). 
          *Versandzeiten variieren je nach Zielregion.</p>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section id="faq" class="container">
    <h2>FAQ</h2>
    <div class="info">
      <div class="card"><h3>Wie nutze ich die Produkte?</h3><p class="sub">Artikel sind ausschließlich für <strong>in‑vitro</strong> Forschung. Keine Einnahme, Injektion oder sonstige Applikation. Bitte beachten Sie lokale Gesetze.</p></div>
      <div class="card"><h3>Gibt es Mengenrabatte?</h3><p class="sub">Ja, für Institute/Labore bieten wir Staffelpreise. Anfrage über das Kontaktformular.</p></div>
      <div class="card"><h3>Rückgabe</h3><p class="sub">Aus Gründen der Integrität ist geöffnete Laborware vom Umtausch ausgeschlossen. Defekte Sendungen werden selbstverständlich ersetzt.</p></div>
    </div>
  </section>

  <!-- Kontakt -->
  <section id="kontakt" class="container">
    <h2>Kontakt</h2>
    <p class="sub">Fragen oder B2B‑Anfragen? Schreiben Sie uns.</p>
    <form onsubmit="event.preventDefault();alert('Danke! Wir melden uns zeitnah.');" style="display:grid;grid-template-columns:repeat(12,1fr);gap:12px;max-width:860px">
      <input required class="card" style="grid-column:span 6" placeholder="Name" />
      <input required type="email" class="card" style="grid-column:span 6" placeholder="E‑Mail" />
      <input class="card" style="grid-column:span 6" placeholder="Firma / Institut (optional)" />
      <input class="card" style="grid-column:span 6" placeholder="Bestellnummer (optional)" />
      <textarea required class="card" style="grid-column:span 12;height:140px" placeholder="Nachricht"></textarea>
      <button class="btn btn-primary" style="grid-column:span 12;justify-content:center">Nachricht senden</button>
    </form>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container cols">
      <div class="col">
        <div class="logo" style="margin-bottom:10px">
          <div class="logo-mark">👑</div>
          <div style="font-weight:900">RoyalAminos</div>
        </div>
        <p class="sub">Research‑Reagenzien in Laborqualität. Keine Anwendung am Menschen.</p>
      </div>
      <div class="col">
        <h4>Rechtliches</h4>
        <p><a href="#">Impressum</a><br><a href="#">Datenschutz</a><br><a href="#">AGB</a></p>
      </div>
      <div class="col">
        <h4>Support</h4>
        <p><a href="#faq">FAQ</a><br><a href="#kontakt">Kontakt</a><br><a href="#">Versand & Rückgabe</a></p>
      </div>
      <div class="col">
        <h4>Newsletter</h4>
        <form onsubmit="event.preventDefault();alert('Danke für die Anmeldung!');">
          <input type="email" placeholder="E‑Mail" style="width:100%;margin-bottom:8px;border-radius:10px;border:1px solid var(--stroke);padding:10px;background:rgba(255,255,255,.04);color:var(--ink)">
          <button class="btn btn-primary" style="width:100%;justify-content:center">Abonnieren</button>
        </form>
      </div>
    </div>
    <div class="container legal">© <span id="year"></span> RoyalAminos – Research Use Only. Alle Preise inkl. MwSt., zzgl. Versand. *Versandzeiten abhängig vom Zielland.</div>
  </footer>

  <!-- Sticky Cart (Demo) -->
  <div class="cart" onclick="openCart()" aria-label="Warenkorb öffnen">
    🧪 Warenkorb · <span id="cartCount">0</span>
  </div>

  <!-- Research Gate Modal -->
  <div id="gate" class="modal open" role="dialog" aria-modal="true" aria-labelledby="gateTitle">
    <div class="sheet">
      <h3 id="gateTitle">Bestätigung: Nur für Forschungszwecke</h3>
      <p>Durch den Zugang bestätigen Sie, dass Sie volljährig sind und die Produkte ausschließlich für <strong>in‑vitro</strong> Forschung erwerben. Keine Anwendung am Menschen oder Tier. Weiterhin stimmen Sie den <a href="#">AGB</a> und dem Hinweis „Research Use Only“ zu.</p>
      <label style="display:flex;gap:10px;align-items:center;margin-top:8px"><input id="acceptGate" type="checkbox"> <span>Ich bestätige die obigen Bedingungen.</span></label>
      <div class="cta" style="margin-top:14px">
        <button id="enterBtn" class="btn btn-primary" disabled>Shop betreten</button>
        <button class="btn" onclick="window.location.href='https://www.google.com'">Ablehnen</button>
      </div>
    </div>
  </div>

  <!-- Cookie banner -->
  <div id="cookie" class="cookie">
    <strong>Cookies & Analyse</strong>
    <p class="sub">Diese Seite verwendet notwendige Cookies sowie anonyme Statistiken. Mehr in der <a href="#">Datenschutzerklärung</a>.</p>
    <div class="cta">
      <button class="btn btn-primary" onclick="dismissCookie()">Akzeptieren</button>
      <button class="btn" onclick="dismissCookie()">Nur erforderlich</button>
    </div>
  </div>

  <script>
    // ===== Produktdaten (Platzhalter-Bilder & Preise bitte im Backend anpassen) =====
    const PRODUCTS = [
      {id:'bpc-20', brand:'RoyalAminos', name:'BPC‑157', mg:20, purity:'99%', category:'BPC-157', price:129.90, img:'images/BPC-157-20mg.png'},
      {id:'bpc-10', brand:'RoyalAminos', name:'BPC‑157', mg:10, purity:'99%', category:'BPC-157', price:79.90, img:'images/BPC-157-10mg.png'},
      {id:'bpc-5',  brand:'RoyalAminos', name:'BPC‑157', mg:5,  purity:'99%', category:'BPC-157', price:49.90, img:'images/BPC-157-5mg.png'},
      {id:'bpc-2',  brand:'RoyalAminos', name:'BPC‑157', mg:2,  purity:'99%', category:'BPC-157', price:24.90, img:'images/BPC-157-2mg.png'},
      {id:'cjc-10', brand:'RoyalAminos', name:'CJC‑1295 DAC', mg:10, purity:'99%', category:'CJC-1295 DAC', price:94.90, img:'images/CJC-1295-DAC-10mg.png'},
      {id:'cjc-5',  brand:'RoyalAminos', name:'CJC‑1295 DAC', mg:5,  purity:'99%', category:'CJC-1295 DAC', price:59.90, img:'images/CJC-1295-DAC-5mg.png'},
      {id:'cjc-2',  brand:'RoyalAminos', name:'CJC‑1295 DAC', mg:2,  purity:'99%', category:'CJC-1295 DAC', price:29.90, img:'images/CJC-1295-DAC-2mg.png'},
      {id:'fst-5',  brand:'RoyalAminos', name:'Follistatin 344', mg:5,  purity:'99%', category:'Follistatin 344', price:169.00, img:'images/Follistatin-344-5mg.png'},
      {id:'fst-2',  brand:'RoyalAminos', name:'Follistatin 344', mg:2,  purity:'99%', category:'Follistatin 344', price:89.00, img:'images/Follistatin-344-2mg.png'},
      {id:'fst-1',  brand:'RoyalAminos', name:'Follistatin 344', mg:1,  purity:'99%', category:'Follistatin 344', price:54.00, img:'images/Follistatin-344-1mg.png'}
    ];

    const state = { q:'', cat:'all', minMg:0, sort:'popular', cart:[] };

    const grid = document.getElementById('grid');
    const search = document.getElementById('search');
    const sort = document.getElementById('sort');
    const minMg = document.getElementById('minMg');

    function formatEUR(n){return new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR'}).format(n)}

    function render(){
      grid.innerHTML = '';
      let list = PRODUCTS.filter(p => (
        (state.cat==='all' || p.category===state.cat) &&
        (p.mg>=state.minMg) &&
        (state.q==='' || (p.name+p.category+p.mg).toLowerCase().includes(state.q))
      ));
      switch(state.sort){
        case 'price-asc': list.sort((a,b)=>a.price-b.price); break;
        case 'price-desc': list.sort((a,b)=>b.price-a.price); break;
        case 'mg-asc': list.sort((a,b)=>a.mg-b.mg); break;
        case 'mg-desc': list.sort((a,b)=>b.mg-a.mg); break;
        default: list.sort((a,b)=>b.mg-a.mg); // simple demo
      }
      for(const p of list){
        const el = document.createElement('article');
        el.className='product';
        el.innerHTML = `
          <div class="media">
            <img loading="lazy" src="${p.img}" alt="${p.name} ${p.mg} mg – Produktbild" onerror="this.src='https://dummyimage.com/600x600/111633/ffffff&text=${encodeURIComponent(p.name+' '+p.mg+'mg')}'" />
          </div>
          <div class="body">
            <div class="title">${p.name} <span style="opacity:.8">• ${p.mg} mg</span></div>
            <div class="meta"><span>${p.brand}</span><span>Reinheit ${p.purity}</span><span>${p.category}</span></div>
            <div class="price">${formatEUR(p.price)}</div>
            <div class="actions">
              <button class="btn btn-primary" aria-label="In den Warenkorb" onclick="add('${p.id}')">In den Warenkorb</button>
              <a class="btn" href="#" onclick="openQuick('${p.id}');return false;">Details</a>
            </div>
          </div>`;
        grid.appendChild(el);
      }
    }

    function add(id){
      const item = PRODUCTS.find(x=>x.id===id);
      if(!item) return;
      state.cart.push(id);
      document.getElementById('cartCount').textContent = state.cart.length;
      // Freewebstore: Hier optional fwsAddToCart(ID) o.ä. einbinden.
    }

    function openQuick(id){
      const p = PRODUCTS.find(x=>x.id===id);
      if(!p) return;
      const sheet = document.createElement('div');
      sheet.className='sheet';
      sheet.innerHTML = `
        <h3>${p.name} – ${p.mg} mg</h3>
        <p class="sub">Reinheit: ${p.purity}. Form: lyophilisiertes Pulver. Hinweis: Research Use Only – nicht für Anwendung am Menschen/Tier.</p>
        <img src="${p.img}" alt="${p.name} Bild" style="width:220px;max-width:100%"> 
        <div class="cta" style="margin-top:14px">
          <button class="btn btn-primary" onclick="add('${p.id}')">In den Warenkorb · ${formatEUR(p.price)}</button>
          <button class="btn" onclick="closeModal()">Schließen</button>
        </div>`;
      openModal(sheet);
    }

    // ===== UI Wiring =====
    document.querySelectorAll('.chip').forEach(ch=>{
      ch.addEventListener('click',()=>{
        document.querySelectorAll('.chip').forEach(x=>x.classList.remove('active'));
        ch.classList.add('active');
        state.cat = ch.dataset.chip;
        render();
      })
    })
    search.addEventListener('input',()=>{state.q=search.value.trim().toLowerCase(); render();});
    sort.addEventListener('change',()=>{state.sort=sort.value; render();});
    minMg.addEventListener('input',()=>{state.minMg=parseFloat(minMg.value||0); render();});

    // ===== Modal helpers =====
    const modal = document.querySelector('.modal');
    function openModal(content){
      modal.innerHTML='';
      modal.appendChild(content);
      modal.classList.add('open');
    }
    function closeModal(){ modal.classList.remove('open'); }
    window.openCart = function(){
      const sheet = document.createElement('div');
      sheet.className='sheet';
      const items = state.cart.map(id=>PRODUCTS.find(p=>p.id===id));
      const list = items.map(p=>`<li>${p.name} ${p.mg} mg – <strong>${formatEUR(p.price)}</strong></li>`).join('');
      sheet.innerHTML = `<h3>Warenkorb</h3><ul>${list||'<li>Leer</li>'}</ul><div class="cta"><button class="btn btn-primary">Zur Kasse</button><button class="btn" onclick="closeModal()">Schließen</button></div>`;
      openModal(sheet);
    }

    // ===== Research Gate logic =====
    const gate = document.getElementById('gate');
    const enterBtn = document.getElementById('enterBtn');
    document.getElementById('acceptGate').addEventListener('change',e=>{ enterBtn.disabled=!e.target.checked });
    enterBtn.addEventListener('click',()=>{ gate.classList.remove('open'); showCookie(); });

    // ===== Cookies =====
    function showCookie(){
      const el=document.getElementById('cookie');
      if(!localStorage.getItem('cookie-ok')){ el.style.display='block'; }
    }
    function dismissCookie(){ localStorage.setItem('cookie-ok','1'); document.getElementById('cookie').style.display='none'; }

    // ===== Init =====
    document.getElementById('year').textContent = new Date().getFullYear();
    render();
  </script>

  <!-- JSON-LD: Organisation (minimal) -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"Organization",
    "name":"RoyalAminos",
    "url":"https://example.com",
    "logo":"https://example.com/logo.png",
    "sameAs": ["https://www.freewebstore.com/yourstore"]
  }
  </script>
</body>
</html>