*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --green:#1D9E75; --green-light:#E1F5EE; --green-dark:#0F6E56;
      --bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F4F4F1;
      --border:rgba(0,0,0,0.08); --border-mid:rgba(0,0,0,0.14);
      --text-1:#1A1A18; --text-2:#6B6B65; --text-3:#A5A59E;
      --font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace;
      --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
    }
    html { font-size:16px; -webkit-font-smoothing:antialiased; }
    body { font-family:var(--font); background:var(--bg); color:var(--text-1); }
    button { font-family:var(--font); cursor:pointer; border:none; background:none; }
    input  { font-family:var(--font); }

    .nav-partner-links {
      display:flex; align-items:center; gap:10px;
    }
    @media(max-width:600px) {
      .nav-partner-links { display:none; }
      .cart-btn { padding:7px 10px; }
      .cart-btn-label { display:none; }
    }
    @media(max-width:480px) {
  .name-grid { grid-template-columns:1fr !important; }
}

    nav {
      position:sticky; top:0; z-index:50;
      background:rgba(250,250,248,0.93); backdrop-filter:blur(8px);
      border-bottom:1px solid var(--border);
    }
    .nav-inner {
      max-width:1100px; margin:0 auto; padding:0 1.5rem;
      display:flex; align-items:center; justify-content:space-between; height:56px;
    }
.logo { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--text-1); text-decoration:none; }
    .logo span { color:var(--green); }
    .cart-btn {
      display:flex; align-items:center; gap:8px;
      border:1px solid var(--border-mid); background:var(--surface);
      border-radius:var(--r-md); padding:7px 14px; font-size:14px; color:var(--text-1);
      transition:background 0.15s; cursor:pointer;
    }
    .cart-btn:hover { background:var(--surface-2); }
    .cart-badge {
      background:var(--green); color:#fff; border-radius:20px;
      font-size:11px; font-weight:500; padding:1px 7px; min-width:20px; text-align:center;
    }
    .cart-badge[data-n="0"] { display:none; }

    .hero {
      text-align:center; padding:3rem 1.5rem 2.5rem;
      border-bottom:1px solid var(--border);
    }
    .hero-tag {
      display:inline-block; background:var(--green-light); color:var(--green-dark);
      font-size:12px; font-weight:500; border-radius:20px; padding:4px 14px; margin-bottom:1rem;
    }
    .hero h1 {
      font-size:clamp(24px,4vw,38px); font-weight:500; line-height:1.2;
      letter-spacing:-0.8px; margin-bottom:0.75rem;
    }
    .hero-sub {
      font-size:15px; color:var(--text-2); margin-bottom:1.75rem; line-height:1.5;
    }
    .search-wrap { position:relative; max-width:540px; margin:0 auto; }
    .search-wrap input {
      width:100%; padding:13px 18px 13px 46px;
      border:1.5px solid var(--green); border-radius:var(--r-xl);
      font-size:15px; color:var(--text-1); background:var(--surface);
      outline:none; transition:box-shadow 0.15s;
    }
    .search-wrap input::placeholder { color:var(--text-3); }
    .search-wrap input:focus { box-shadow:0 0 0 3px rgba(29,158,117,0.15); }
    .search-icon {
      position:absolute; left:16px; top:50%; transform:translateY(-50%);
      color:var(--text-3); font-size:18px; pointer-events:none;
    }
    .search-clear {
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      color:var(--text-3); font-size:14px; cursor:pointer; display:none;
    }

    .categories-section { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
    .section-label {
      font-size:12px; font-weight:500; color:var(--text-3);
      letter-spacing:0.5px; text-transform:uppercase; margin-bottom:1rem;
    }
    .cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
    .cat-tile {
      border:1px solid var(--border); background:var(--surface);
      border-radius:var(--r-lg); padding:16px 12px; text-align:center;
      cursor:pointer; transition:all 0.15s; user-select:none;
    }
    .cat-tile:hover { border-color:var(--green); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
    .cat-tile.on { border-color:var(--green); border-width:1.5px; background:var(--green-light); }
    .cat-icon { font-size:24px; margin-bottom:8px; }
    .cat-label { font-size:13px; font-weight:500; color:var(--text-1); line-height:1.3; }
    .cat-tile.on .cat-label { color:var(--green-dark); }

    .products-section { max-width:1100px; margin:0 auto; padding:0 1.5rem 3rem; display:none; }
    .products-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:1.5rem 0 1rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem;
    }
    .products-header h2 { font-size:18px; font-weight:500; }
    .btn-back { font-size:13px; color:var(--text-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
    .products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }

    .prod-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); overflow:hidden;
      transition:box-shadow 0.2s, transform 0.15s; cursor:pointer;
      text-decoration:none; color:inherit; display:block;
    }
    .prod-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); transform:translateY(-2px); }
    .prod-img {
      height:140px; background:var(--surface-2);
      display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .prod-img img { max-height:120px; max-width:85%; object-fit:contain; }
    .prod-img-emoji { font-size:40px; }
    .prod-body { padding:12px; }
    .prod-cat { font-size:11px; color:var(--green); font-weight:500; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
    .prod-name { font-size:14px; font-weight:500; line-height:1.35; margin-bottom:4px; }
    .prod-desc { font-size:12px; color:var(--text-3); margin-bottom:10px; }
    .prod-footer { display:flex; flex-direction:column; align-items:center; gap:8px; }
    .prod-price { font-size:15px; font-weight:500; }
    .btn-add {
      background:var(--green-light); color:var(--green-dark);
      border-radius:var(--r-sm); padding:5px 12px; font-size:13px; font-weight:500;
      transition:background 0.15s; border:none; cursor:pointer;
    }
    .btn-add:hover { background:#c2ebdb; }
    .btn-add.added { background:var(--green); color:#fff; }

    .trust-bar {
      border-top:1px solid var(--border); padding:1.25rem 1.5rem;
      display:flex; align-items:center; justify-content:center; gap:2rem;
      flex-wrap:wrap;
    }
    .trust-item {
      display:flex; align-items:center; gap:6px;
      font-size:12px; color:var(--text-3);
    }
    .trust-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }

    /* CART */
    .cart-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,0.3);
      z-index:200; opacity:0; pointer-events:none; transition:opacity 0.2s;
    }
    .cart-overlay.open { opacity:1; pointer-events:all; }
    .cart-panel {
      position:fixed; top:0; right:0; bottom:0; width:min(480px,100vw);
      background:var(--surface); z-index:201;
      display:flex; flex-direction:column;
      transform:translateX(100%); transition:transform 0.25s ease;
      border-left:1px solid var(--border);
    }
    .cart-panel.open { transform:translateX(0); }
    .cart-head {
      display:flex; align-items:center; justify-content:space-between;
      padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
    }
    .cart-head h2 { font-size:16px; font-weight:500; }
    .cart-close-btn {
      width:28px; height:28px; border-radius:50%;
      background:var(--surface-2); font-size:14px; color:var(--text-2);
      display:flex; align-items:center; justify-content:center; cursor:pointer;
    }
    .cart-body { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
    .cart-empty { text-align:center; padding:3rem 1rem; color:var(--text-3); font-size:14px; }
    .cart-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
    .ci-img {
      width:48px; height:48px; background:var(--surface-2); border-radius:var(--r-sm);
      display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
    }
    .ci-img img { max-width:100%; max-height:100%; object-fit:contain; }
    .ci-img-emoji { font-size:22px; }
    .ci-info { flex:1; }
    .ci-name { font-size:14px; font-weight:500; margin-bottom:2px; }
    .ci-price { font-size:13px; color:var(--text-2); margin-bottom:6px; }
    .ci-qty { display:flex; align-items:center; gap:8px; }
    .qty-btn {
      width:24px; height:24px; border-radius:50%;
      background:var(--surface-2); font-size:15px; line-height:1;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
    }
    .qty-n { font-size:14px; font-weight:500; min-width:18px; text-align:center; }
    .ci-remove { font-size:12px; color:var(--text-3); cursor:pointer; text-decoration:underline; margin-left:4px; }
    .cart-foot { padding:1.25rem 1.5rem; border-top:1px solid var(--border); }
    .cart-total-row { display:flex; justify-content:space-between; font-size:15px; font-weight:500; margin-bottom:6px; }
    .cart-fee-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text-2); margin-bottom:1.25rem; }
    .btn-checkout {
      width:100%; background:var(--green); color:#fff;
      border-radius:var(--r-md); padding:12px; font-size:15px; font-weight:500;
      border:none; cursor:pointer; transition:opacity 0.15s;
    }
    .btn-checkout:hover { opacity:0.88; }
    .btn-checkout:disabled { opacity:0.35; cursor:not-allowed; }

    /* CHECKOUT STEPS */
    .step-wrap { display:none; flex-direction:column; flex:1; overflow:hidden; }
    .step-wrap.active { display:flex; }
    .step-body { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; }
    .step-title { font-size:14px; font-weight:500; margin-bottom:1rem; }
    .pharm-list { display:flex; flex-direction:column; gap:8px; }
    .pharm-opt {
      border:1px solid var(--border-mid); border-radius:var(--r-md);
      padding:12px 14px; cursor:pointer; transition:all 0.15s;
    }
    .pharm-opt:hover { border-color:var(--green); }
    .pharm-opt.selected { border-color:var(--green); border-width:1.5px; background:var(--green-light); }
    .pharm-name { font-size:14px; font-weight:500; }
    .pharm-addr { font-size:12px; color:var(--text-2); margin-top:2px; }
    .fallback-row { margin-top:1rem; }
    .fallback-row label { font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:8px; cursor:pointer; }
    .phone-group { display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; }
    .phone-group label { font-size:13px; font-weight:500; color:var(--text-2); }
    .phone-group input {
      padding:11px 14px; border:1px solid var(--border-mid);
      border-radius:var(--r-md); font-size:16px; outline:none; transition:border-color 0.15s;
    }
    .phone-group input:focus { border-color:var(--green); }
    .phone-hint { font-size:12px; color:var(--text-3); line-height:1.5; }
    .confirm-wrap { text-align:center; padding:2rem 0; }
    .confirm-code {
      font-family:var(--mono); font-size:52px; font-weight:500;
      letter-spacing:8px; color:var(--green); margin:1rem 0;
    }
    .confirm-text { font-size:14px; color:var(--text-2); line-height:1.7; }
    .confirm-pharm { font-weight:500; color:var(--text-1); }

    /* SICHERHEITSCHECK */
    .check-item {
      border:1px solid var(--border); border-radius:var(--r-md);
      padding:10px 12px; display:flex; align-items:center; gap:10px;
      background:var(--surface);
    }
    .check-item-img {
      width:44px; height:44px; background:var(--surface-2);
      border-radius:var(--r-sm); display:flex; align-items:center;
      justify-content:center; flex-shrink:0; overflow:hidden; font-size:18px;
    }
    .check-item-img img { width:100%; height:100%; object-fit:contain; }
    .check-item-info { flex:1; min-width:0; }
    .check-item-name { font-size:13px; font-weight:500; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .check-item-cat { font-size:11px; color:var(--text-3); }
    .check-toggle {
      width:36px; height:20px; border-radius:10px; background:var(--surface-2);
      border:1px solid var(--border-mid); cursor:pointer; position:relative;
      transition:background 0.2s; flex-shrink:0;
    }
    .check-toggle.on { background:var(--green); border-color:var(--green); }
    .check-toggle::after {
      content:''; position:absolute; width:14px; height:14px;
      border-radius:50%; background:#fff; top:2px; left:2px; transition:transform 0.2s;
    }
    .check-toggle.on::after { transform:translateX(16px); }

    .early-partner-badge {
      font-size:10px; background:linear-gradient(135deg,#E1F5EE,#c8eddf);
      color:var(--green-dark); border-radius:20px; padding:3px 10px;
      white-space:nowrap; flex-shrink:0; cursor:pointer;
      border:1px solid rgba(29,158,117,0.2); font-weight:500;
      transition:opacity 0.15s;
    }
    .early-partner-badge:hover { opacity:0.8; }
    .pharm-opt-nonpartner { cursor:default; }

    @media(max-width:600px) {
      .cat-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
      .products-grid { grid-template-columns:repeat(2,1fr); }
      .trust-bar { gap:1rem; }
      .hero { padding:2rem 1.5rem 1.5rem; }
    }

   /* GESCHLECHTS-AUSWAHL */
    .gender-pick { padding:0.5rem 0 1.5rem; }
    .gender-pick-title { font-size:15px; font-weight:500; color:var(--text-1); margin-bottom:6px; }
    .gender-pick-sub { font-size:13px; color:var(--text-2); margin-bottom:1.5rem; line-height:1.6; }
    .gender-pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gender-pick-btn {
      border:1.5px solid var(--border-mid); border-radius:var(--r-lg);
      padding:20px 12px; text-align:center; cursor:pointer;
      background:var(--surface); transition:all 0.15s;
      font-family:var(--font);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .gender-pick-btn:hover { border-color:var(--green); background:var(--green-light); }
    .gender-pick-icon {
      font-size:26px; margin-bottom:8px;
      width:36px; height:36px;
      display:flex; align-items:center; justify-content:center;
      line-height:1;
    }
    .gender-pick-icon span {
      display:inline-flex; align-items:center; justify-content:center;
      width:100%; height:100%;
      font-style:normal; line-height:1;
    }
    .gender-pick-label { font-size:14px; font-weight:500; color:var(--text-1); }
    .gender-pick-note { font-size:11px; color:var(--text-3); text-align:center; margin-top:1.25rem; line-height:1.6; }
    @media(max-width:420px) {
      .gender-pick-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .gender-pick-btn { padding:16px 8px; }
    } 

  /* CHECKOUT POPUP */
    .checkout-modal-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,0.4);
      z-index:400; display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none; transition:opacity 0.2s; padding:1.5rem;
    }
    .checkout-modal-overlay.open { opacity:1; pointer-events:all; }
    .checkout-modal {
      background:var(--surface); border-radius:var(--r-xl);
      padding:1.75rem 1.5rem 2rem; width:100%; max-width:420px;
      transform:translateY(16px); transition:transform 0.25s ease;
      box-shadow:0 8px 32px rgba(0,0,0,0.15);
    }
    .checkout-modal-overlay.open .checkout-modal { transform:translateY(0); }
    .checkout-modal-title { font-size:15px; font-weight:500; margin-bottom:1.25rem; color:var(--text-1); }
    .checkout-modal-row {
      display:flex; gap:12px; align-items:flex-start;
      padding:10px 0; border-bottom:1px solid var(--border);
    }
    .checkout-modal-row:last-of-type { border-bottom:none; }
    .checkout-modal-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
    .checkout-modal-text { font-size:13px; color:var(--text-2); line-height:1.6; }
    .checkout-modal-text strong { color:var(--text-1); font-weight:500; }
    .checkout-modal-dont-show {
      display:flex; align-items:center; gap:8px;
      margin:1.25rem 0 1rem; cursor:pointer;
      font-size:12px; color:var(--text-3);
    }
    .checkout-modal-dont-show input { accent-color:var(--green); cursor:pointer; }

    /* REZEPT BANNER */
  .rx-banner {
      margin-bottom:1.5rem;
    }
  .rx-banner-inner {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-lg); padding:1rem 1.25rem;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
  }
  .rx-banner-inner.has-rx {
    background:var(--green-light); border-color:var(--green);
  }
  .rx-banner-text { font-size:13px; color:var(--text-2); line-height:1.5; }
  .rx-banner-text strong { color:var(--text-1); font-weight:500; }
  .rx-banner-text.has-rx { color:var(--green-dark); }
  .rx-banner-btn {
    font-size:13px; font-weight:500; color:var(--green);
    background:none; border:1px solid var(--green);
    border-radius:var(--r-md); padding:7px 14px;
    cursor:pointer; font-family:var(--font);
    white-space:nowrap; text-decoration:none; display:inline-block;
    transition:background 0.15s;
  }
  .rx-banner-btn:hover { background:var(--green-light); }
  .rx-banner-btn.has-rx {
    background:var(--green); color:#fff; border-color:var(--green);
  }
  .rx-banner-btn.has-rx:hover { opacity:0.88; }
  /* RX BADGE auf Produktkacheln */
  .prod-rx-badge {
    display:inline-block; font-size:10px; background:#FEF3C7; color:#92400E;
    border-radius:4px; padding:2px 7px; margin-bottom:4px; font-weight:500;
  }
  /* Rezept-Hinweis in Produktliste */
  .rx-hint {
    font-size:12px; color:var(--text-3); padding:6px 0 10px;
    border-bottom:1px solid var(--border); margin-bottom:10px;
  }
  .rx-hint a { color:var(--green); text-decoration:underline; cursor:pointer; }
  /* Rezept Checkout Popup */
  .rx-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.4);
    z-index:500; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.2s; padding:1.5rem;
  }
  .rx-modal-overlay.open { opacity:1; pointer-events:all; }
  .rx-modal {
    background:var(--surface); border-radius:var(--r-xl);
    padding:1.75rem 1.5rem 2rem; width:100%; max-width:420px;
    transform:translateY(16px); transition:transform 0.25s ease;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
  }
  .rx-modal-overlay.open .rx-modal { transform:translateY(0); }

/* ── SMS-Verifizierung ── */
#sms-code-section {
  margin-bottom: 10px;
}

#sms-code-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  font-size: 16px;
  font-family: var(--mono);
  letter-spacing: 4px;
  text-align: center;
  outline: none;
  margin-bottom: 8px;
}

#sms-verify-error {
  font-size: 12px;
  color: #B91C1C;
  margin-bottom: 8px;
}

#btn-send-code {
  background: var(--surface);
  color: var(--green);
  border: 1.5px solid var(--green);
  margin-bottom: 10px;
}

#sms-code-section p {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 8px;
}