/* GPeptides — gp-app.css: fonts.css + index.html <style> + gp-mobile.css (erzeugt von seo/app-css.php) */
/* GPeptides — lokale Schriften
   Einmalig von Google Fonts geholt, damit keine Besucher-IP mehr an
   Google geht (DSGVO, LG Muenchen I vom 20.01.2022). Nur die
   Zeichensaetze latin und latin-ext — mehr braucht der Shop nicht.
   Erzeugt am 11.08.2026. */

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-800-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-800-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-900-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-900-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bagel Fat One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bagel-fat-one-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bagel Fat One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bagel-fat-one-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* index.html <style> */

  /* ============ LANDING: HERO ============ */
  .hero{width:100%;background:var(--cobalt);color:var(--bone);position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(120% 95% at 68% 32%,#000 38%,transparent 80%);
            mask-image:radial-gradient(120% 95% at 68% 32%,#000 38%,transparent 80%);opacity:.45}
  .hero-inner{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:18px clamp(20px,3vw,52px) 30px}
  .stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
    gap:18px;align-items:center;margin-top:clamp(10px,2vw,20px);min-height:min(74vh,700px);z-index:3}
  .blob{position:absolute;z-index:1;top:2%;right:-3%;font-family:"Bagel Fat One";color:var(--bone);
    font-size:clamp(250px,33vw,640px);line-height:.8;letter-spacing:-.05em;opacity:.1;
    pointer-events:none;user-select:none}
  .lead{position:relative;z-index:4;max-width:640px}
  h1{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(48px,8vw,106px);
    line-height:.86;letter-spacing:-.035em}
  .sub{margin-top:18px;font-size:clamp(14px,1.3vw,17px);line-height:1.5;max-width:400px;opacity:.92}
  .sub b{font-weight:600}
        .ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
  .btn-join{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--bone);
    font-family:"Archivo";font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase;
    padding:8px 8px 8px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s}
  .btn-join:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(0,0,0,.55)}
  .btn-join .circ{width:38px;height:38px;border-radius:999px;background:var(--bone);color:var(--ink);display:grid;place-items:center;font-size:17px}
  .btn-ghost{font-family:"Archivo";font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--bone);border:1.5px solid var(--line);padding:14px 20px;border-radius:999px;transition:border-color .2s}
  .btn-ghost:hover{border-color:var(--bone)}
  .tagline{margin-top:18px;font-family:"Archivo";font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
  .trust{display:flex;align-items:center;gap:10px;margin-top:24px;background:var(--ink);border-radius:999px;padding:8px 16px 8px 9px;width:max-content;max-width:100%;transition:transform .2s,box-shadow .2s}
  .trust:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.55)}
  .trust .tick{width:26px;height:26px;border-radius:50%;background:var(--volt);color:var(--ink);display:grid;place-items:center;flex:none}
  .trust .tick svg{width:14px;height:14px}
  .trust .tarrow{color:var(--volt);font-family:"Archivo";font-weight:800;font-size:13px}
  .trust small{font-family:"Archivo";font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--bone);line-height:1.3;max-width:200px}
  .showcase{position:relative;z-index:4;min-height:520px;align-self:stretch;--vial-h:clamp(340px,56vh,520px)}
  /* Vial verankern: weiches Gegenlicht hinter dem Glas + hauchduenne
     Standlinie unter dem Schatten — dezent, keine zusaetzlichen Formen. */
  .showcase::before{content:"";position:absolute;z-index:1;left:50%;top:47%;transform:translate(-50%,-50%);
    width:calc(var(--vial-h)*1.55);height:calc(var(--vial-h)*1.55);pointer-events:none;
    background:radial-gradient(closest-side,rgba(203,255,58,.11),rgba(243,238,227,.05) 52%,transparent 74%)}
  .showcase::after{content:"";position:absolute;z-index:2;left:50%;top:calc(50% + var(--vial-h)/2 + 18px);
    transform:translateX(-50%);width:calc(var(--vial-h)*.98);height:1.5px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent)}
  .vialwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;animation:bob 7s ease-in-out infinite}
  /* ruhigeres Schweben: kleinere Amplitude, laengerer Takt */
  @keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-52.5%)}}
  .vial{display:block;height:var(--vial-h);width:auto;transform:rotate(-4deg);
    animation:sway 10s ease-in-out infinite;filter:drop-shadow(0 34px 40px rgba(6,9,52,.5)) drop-shadow(0 0 24px rgba(6,9,52,.32)) drop-shadow(0 0 42px rgba(203,255,58,.14))}
  @keyframes sway{0%,100%{transform:rotate(-5.5deg)}50%{transform:rotate(-2.5deg)}}
  .vshadow{position:absolute;left:50%;top:calc(50% + var(--vial-h)/2 + 6px);transform:translateX(-50%);
    width:calc(var(--vial-h)*.36);height:24px;border-radius:50%;
    background:radial-gradient(ellipse,rgba(6,9,52,.55),transparent 70%);filter:blur(7px);z-index:3;animation:shadowpulse 6s ease-in-out infinite}
  @keyframes shadowpulse{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1)}50%{opacity:.32;transform:translateX(-50%) scaleX(.78)}}
  .corner{position:absolute;bottom:8px;right:clamp(20px,4vw,56px);z-index:5;text-align:right;font-family:"Archivo";font-weight:700;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;line-height:1.4}
  /* Dezente Betonung um die Vial: zwei hauchduenne Eckwinkel + eine
     vertikale Mikro-Notiz im Stil technischer Messmarken. Bewusst wenig:
     keine Ringe, keine zusaetzlichen Formen. */
  .vframe{position:absolute;z-index:2;width:30px;height:30px;pointer-events:none;opacity:.55}
  .vframe.tl{left:calc(50% - var(--vial-h)*.44);top:calc(50% - var(--vial-h)/2 - 14px);border-left:1.5px solid var(--line);border-top:1.5px solid var(--line)}
  .vframe.br{left:calc(50% + var(--vial-h)*.44 - 30px);top:calc(50% + var(--vial-h)/2 - 16px);border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
  /* writing-mode statt rotate(90deg): so bleibt die Spaltenposition
     unabhaengig von der Laenge des uebersetzten Labels (FR/ES/PL). */
  .vnote{position:absolute;z-index:2;left:calc(50% + var(--vial-h)*.4);top:50%;transform:translateY(-50%);
    writing-mode:vertical-rl;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;pointer-events:none;user-select:none;
    font-family:"Archivo";font-weight:700;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);opacity:.5}
  .vnote .star{color:var(--volt);font-size:11px;letter-spacing:0}
  .vnote::after{content:"";width:1px;height:44px;background:var(--line)}

  /* ============ ZUGANGS-GATE (18+ · nur Forschung) ============ */
  .gate{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;
    background:rgba(20,21,28,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
  .gate[hidden]{display:none}
  .gate-card{position:relative;overflow:hidden;background:var(--bone);color:var(--ink);border-radius:26px;max-width:600px;width:100%;
    max-height:calc(100vh - 36px);overflow-y:auto;padding:clamp(24px,4vw,40px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
  .gate-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--cobalt)}
  .gate-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
  .gate-mark{width:34px;height:34px;border-radius:9px;background:var(--volt);color:var(--ink);display:grid;place-items:center;
    font-family:"Archivo";font-weight:900;font-size:15px;letter-spacing:-.02em}
  .gate-eyebrow{font-family:"Archivo";font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
  .gate-card h2{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(26px,4.6vw,40px);line-height:.92;letter-spacing:-.02em}
  .gate-card h2 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--cobalt)}
  .gate-intro{margin-top:12px;font-size:14px;color:#555;line-height:1.5}
  .gate-points{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:12px}
  .gate-points li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:#444}
  .gate-points b{color:var(--ink);font-weight:600}
  .gate-points .gtick{width:22px;height:22px;border-radius:50%;background:var(--volt);color:var(--ink);display:grid;place-items:center;flex:none;margin-top:1px}
  .gate-points .gtick svg{width:12px;height:12px;stroke:var(--ink);stroke-width:3;fill:none}
  .gate-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .gate-actions .btn-join{border:none;cursor:pointer}
  .gate-decline{font-family:"Archivo";font-weight:800;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#777;
    background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px 0}
  .gate-decline:hover{color:var(--ink)}
  .gate-declined{margin-top:14px;font-size:13px;font-weight:600;color:#b3261e}
  .gate-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--bone-soft);
    font-family:"Archivo";font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.45}
  html.gate-open,html.gate-open body{overflow:hidden}
  @media(prefers-reduced-motion:no-preference){
    .gate-card{animation:gateIn .45s cubic-bezier(.2,.7,.2,1)}
    @keyframes gateIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  }

  /* ============ MARQUEE ============ */
  
  /* ============ FOCUS / PROCESS / RANGE / LAB ============ */
  .focus{padding:84px 0 30px}
  .focus h2{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(34px,5.4vw,68px);line-height:.9;letter-spacing:-.03em;max-width:760px}
  .focus .intro{margin-top:20px;max-width:520px;font-size:15px;line-height:1.6;color:#444}
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
  .col .ic{width:46px;height:46px;border-radius:13px;background:var(--cobalt);display:grid;place-items:center;margin-bottom:16px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .col:hover .ic{transform:rotate(-7deg) scale(1.08)}
  .col .ic svg{width:22px;height:22px;stroke:var(--volt);fill:none;stroke-width:2}
  .col h3{font-family:"Archivo";font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
  .col p{font-size:14px;line-height:1.55;color:#555}
  .col p b{color:var(--ink);font-weight:600}
  .process{padding:60px 0 20px;position:relative;overflow:hidden}
  .process .wm{position:absolute;right:-2%;top:-30%;font-family:"Bagel Fat One";font-size:clamp(220px,30vw,460px);line-height:.8;color:var(--bone-soft);opacity:.45;pointer-events:none;user-select:none;z-index:0}
  .phead,.steps{position:relative;z-index:1}
  .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
  .phead h2{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,46px);line-height:.92;letter-spacing:-.02em}
  .phead p{max-width:280px;font-size:14px;color:#555;line-height:1.5}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step{position:relative;background:#fff;border:1px solid var(--bone-soft);border-radius:20px;padding:24px 20px 22px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
  .step:hover{transform:translateY(-4px);border-color:var(--cobalt);box-shadow:0 22px 40px -22px rgba(42,65,232,.4)}
  .step .n{font-family:"Archivo";font-weight:900;font-size:84px;line-height:.8;color:var(--cobalt-tint);letter-spacing:-.04em;transition:color .25s}
  .step:hover .n{color:var(--cobalt)}
  .step h4{font-family:"Archivo";font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;margin:14px 0 8px}
  .step p{font-size:13px;line-height:1.5;color:#666}
  .step .bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--cobalt);opacity:.18}
  .step:nth-child(1) .bar{width:25%;opacity:1}
  .step:nth-child(2) .bar{width:50%;opacity:1}
  .step:nth-child(3) .bar{width:75%;opacity:1}
  .step:nth-child(4) .bar{width:100%;opacity:1;background:var(--volt)}
  .range{padding:64px 0 24px}
  .secthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
  .secthead h2{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,46px);line-height:.95;letter-spacing:-.02em}
  .secthead p{max-width:300px;font-size:14px;color:#444;line-height:1.5}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .lab{margin:56px 0 0;width:100%;background:var(--cobalt);color:var(--bone);padding:clamp(40px,5vw,72px) 0;position:relative;overflow:hidden}
  .lab .glow{position:absolute;right:-6%;top:-34%;width:50%;height:170%;background:radial-gradient(circle,rgba(13,20,104,.5),transparent 62%);pointer-events:none}
  .lab .inner{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:0 clamp(20px,3vw,52px);display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
  .lab h2{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(26px,3.6vw,44px);line-height:.96;letter-spacing:-.02em}
  .lab h2 i,.focus h2 i,.phead h2 i,.secthead h2 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--cobalt)}
  .lab h2 i{color:var(--volt)}
  .lab p{margin-top:14px;font-size:14px;line-height:1.6;opacity:.82;max-width:430px}
  .lab .stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
  .lab .stat b{font-family:"Archivo";font-weight:900;font-size:32px;display:block;color:var(--volt)}
  .lab .stat span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
  .lab .coa{background:rgba(9,13,58,.42);border:1px solid rgba(243,238,227,.2);border-radius:18px;padding:18px}
  .lab .coa .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .lab .coa .top span{font-family:"Archivo";font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
  .lab .coa svg{width:100%;height:92px;display:block}
  .lab .coa .ctrace{fill:none;stroke:var(--volt);stroke-width:2;stroke-linejoin:round}
  .lab .coa .cfill{fill:rgba(203,255,58,.1)}
  .reveal{opacity:0;transform:translateY(26px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .75s cubic-bezier(.2,.7,.2,1)}

  /* ============ VIEWS (Info-/Rechtsseiten) ============ */
  .view[hidden]{display:none}
  /* Deep-Link: Startseite bleibt verborgen, bis der Router die Ziel-View kennt */
  .gp-deep #view-home{display:none}
  @media(max-width:940px){
    .stage{grid-template-columns:1fr;min-height:auto;gap:34px}
    .showcase{min-height:440px;order:2;--vial-h:clamp(280px,62vw,380px)}
    .blob{font-size:clamp(150px,44vw,280px);top:-4%;right:-6%;opacity:.12}
    .cols{grid-template-columns:1fr;gap:18px}
    .steps{grid-template-columns:repeat(2,1fr)}
    .grid4{grid-template-columns:repeat(2,1fr)}
    .lab .inner{grid-template-columns:1fr;gap:28px}
  }
  @media(max-width:560px){
    /* Der Kopfbereich war auf dem Handy 957px hoch — bei 812px Bildschirm
       also mehr als eine volle Seite, nur fuer Ueberschrift und Ampulle.
       Wer die Seite oeffnet, sieht Produkte erst nach anderthalb Wischern.
       Ueberschrift und Ampulle sind deshalb kleiner; der Auftritt bleibt,
       aber die ersten Inhalte ruecken in Sichtweite. */
    h1{font-size:34px;line-height:.94}
    .lead{margin-bottom:14px}
    .sub{font-size:13.5px}
    .steps,.grid4{grid-template-columns:1fr}
    .showcase{min-height:250px;--vial-h:clamp(180px,46vw,230px)}
    .stage{gap:20px}
    .corner{position:static;text-align:left;margin-top:18px;opacity:.5}
    .vnote{display:none}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none}}
  .hero h1 em{font-style:normal;color:var(--volt)}
.marquee{background:var(--ink);color:var(--bone);overflow:hidden;white-space:nowrap;padding:15px 0;display:flex}
  .mtrack{display:inline-flex;align-items:center;flex:none;animation:scrollx 26s linear infinite;will-change:transform}
  .marquee:hover .mtrack{animation-play-state:paused}
  .mtrack span{font-family:"Archivo";font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:0 22px}
  .mtrack .star{color:var(--volt);padding:0 4px}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(max-width:640px){.marquee{padding:12px 0}.mtrack span{font-size:12.5px;padding:0 16px}}
  @media(prefers-reduced-motion:reduce){.mtrack{animation:none!important}}

  /* ============ SHOP (aus shop.html gemergt) ============ */
  .shophero{background:var(--cobalt);color:var(--bone);position:relative;overflow:hidden}
  .shophero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 130% at 82% 0%,#000 34%,transparent 80%);
            mask-image:radial-gradient(120% 130% at 82% 0%,#000 34%,transparent 80%)}
  .shophero .bb{position:absolute;top:-14%;right:-2%;font-family:"Bagel Fat One";color:var(--bone);
    font-size:clamp(200px,26vw,460px);line-height:.8;opacity:.08;pointer-events:none;user-select:none}
  .shophero-in{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:clamp(24px,4vw,42px) clamp(18px,3vw,52px) clamp(18px,3vw,24px)}
  .shophero h1{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(38px,6vw,74px);line-height:.86;letter-spacing:-.03em}
  .shophero h1 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--volt)}
  /* zweite Zeile deutlich kleiner als die Hauptzeile */
  .shophero h1 .sm{display:block;font-size:.42em;line-height:1.05;margin-top:.3em;letter-spacing:-.01em;opacity:.92}
  .shophero p{margin-top:14px;max-width:520px;font-size:15px;line-height:1.55;opacity:.9}
  .trustrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
  .trustrow .t{display:inline-flex;align-items:center;gap:8px;background:rgba(243,238,227,.1);border:1px solid var(--line);
    border-radius:999px;padding:9px 14px;font-family:"Archivo";font-weight:700;font-size:11.5px;letter-spacing:.03em}
  .trustrow .t svg{width:15px;height:15px;stroke:var(--volt);fill:none;stroke-width:2.2;flex:none}
  .cat-hint{max-width:1600px;margin:0 auto;padding:0 clamp(18px,3vw,52px) 10px;font-size:11.5px;color:#a09a8c}
  #pmain{padding-top:34px;padding-bottom:40px}

/* gp-mobile.css */
@media (max-width:680px){
/* ══════════════════════════════════════════════════════════════
   GPeptides — gp-mobile.css
   Separates Mobile-Layout, greift NUR ≤680px (media-Attribut im
   <link> + zusätzliche Guards hier). Wird als LETZTES Stylesheet
   geladen und darf deshalb gp.css und die Inline-Blöcke der
   index.html überschreiben.

   Leitlinien:
   • 2-spaltiges, kompaktes Shop-Grid statt 1 Produkt pro Bildschirm
   • nichts ragt aus Karten/Buttons heraus (min-width:0 + wrap)
   • Eingabefelder ≥16px Schrift — sonst zoomt iOS beim Fokus
   • Tap-Ziele ≥40px
   • weniger Leerraum-Verschwendung, aber mehr Luft am Seitenrand
   ══════════════════════════════════════════════════════════════ */

@media (max-width:680px){

/* ── 0. GLOBAL ──────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
/* iOS zoomt in jedes Eingabefeld mit Schrift <16px hinein */
input[type=text],input[type=email],input[type=number],select,textarea{font-size:16px!important}
button{-webkit-tap-highlight-color:transparent}

/* ── 0b. SEITENRÄNDER ───────────────────────────────────────
   Die Inhalts-Sektionen (section.focus/.process/.range/.lab, alle
   .wrap-Container) haben nur padding oben/unten — auf dem Desktop
   zentriert die max-width sie mit Luft, auf dem Handy klebte der
   Text deshalb direkt an der Bildschirmkante. Einheitliche Gutter: */
.wrap,section.lab{padding-left:18px;padding-right:18px}

/* ── 1. HEADER ──────────────────────────────────────────────── */
.gpnav-in{gap:8px;padding-left:14px;padding-right:14px}
.gpnav .brand{font-size:17px}
.gpnav .pill,.gpnav .lang{padding:8px 12px}

/* ── 2. HOME-HERO: kompakter, Vial kleiner ──────────────────── */
h1{font-size:clamp(38px,11vw,48px)}
.hero-inner{padding:12px 16px 22px}
.stage{min-height:0;gap:8px}
.sub{margin-top:12px;font-size:14px}
.feat{gap:12px 16px;margin-top:16px;padding-top:14px}
.ctarow{gap:10px;margin-top:18px}
.trust{margin-top:16px}
.trust small{max-width:none}
.showcase{min-height:300px;--vial-h:clamp(220px,52vw,300px)}
.blob{font-size:clamp(160px,45vw,250px)}

/* ── 3. SHOP-HERO: halbe Höhe, damit Produkte früher kommen ── */
.shophero-in{padding-top:18px;padding-bottom:18px}
.shophero h1{font-size:clamp(30px,9vw,40px)}
.shophero p{font-size:13.5px;margin-top:8px}
.trustrow{gap:8px;margin-top:12px}
.trustrow .t{font-size:10.5px;padding:7px 10px}

/* ── 4. SHOPBAR: Suche+Sortierung in einer Zeile,
        Kategorien als EINE wischbare Chip-Zeile ─────────────── */
.shopbar-in{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.search{flex:1;min-width:0;padding:10px 14px}
.sortwrap{flex:none}
.sortwrap label{display:none}         /* "Sortieren"-Label: Dropdown erklärt sich selbst */
.sortsel{max-width:130px;padding:10px 30px 10px 10px}
.catrow{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;gap:8px;padding-bottom:4px;margin-right:-16px;padding-right:16px}
.catrow::-webkit-scrollbar{display:none}
.catrow .chip{flex:none;white-space:nowrap;padding:9px 14px;min-height:40px}

/* ── 5. GRID: immer 2 Spalten — 17.08. entzerrt: die Karten wirkten
        auf dem Handy gedrängt (Betreiber-Feedback). Mehr Abstand
        ZWISCHEN den Karten und mehr Luft IM Karteninneren; Varianten-
        wahl, Preiszeile und Button kleben nicht mehr aneinander. ── */
.grid{grid-template-columns:1fr 1fr!important;gap:14px;padding:14px 0 28px}
.card{border-radius:16px}
.vstage{aspect-ratio:1/0.8}
.vstage .bb{font-size:90px}
.vstage .vm{width:56%}
.card .body{padding:12px 12px 14px;gap:9px}
.card .body h3{font-size:14px;line-height:1.25}
.card .body .sub{font-size:10.5px;margin-top:-3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* Variantenwahl: volles Tap-Ziel, minimal abgesetzt */
.card .vsel{min-height:42px;padding:9px 26px 9px 10px;margin:1px 0}
/* Preis über vollbreitem Button statt gequetschter Zeile */
.card .crow{flex-direction:column;align-items:stretch;gap:9px;padding-top:2px}
.card .price-wrap{display:flex;align-items:baseline;gap:5px 8px;flex-wrap:wrap;line-height:1.25}
.card .add{width:100%;justify-content:center;padding:11px 8px;font-size:11.5px;min-height:42px}
.count{font-size:11px;padding-top:8px}

/* ── 6. PRODUKTDETAIL ───────────────────────────────────────── */
.phero-p{gap:16px}
.pvis{max-width:300px}
.pcrumb{font-size:10.5px}

/* ── 7. WARENKORB-DRAWER: volle Breite, kompakte Zeilen ─────── */
.gpdrawer{width:100vw;max-width:100vw;border-radius:0}
.gpdrawer .ditems{padding:10px 14px}
.gpdrawer .dhead,.gpdrawer .dfoot{padding-left:14px;padding-right:14px}
.gpdrawer .qty button{min-width:34px;min-height:34px}

/* ── 8. CHECKOUT (#view-checkout) ───────────────────────────── */
#view-checkout .cg-page{padding:12px 12px 90px}
#view-checkout .cg-card{padding:14px;border-radius:14px}
#view-checkout .cg-card *{min-width:0}   /* nichts drückt sich mehr aus der Karte */
#view-checkout .cg-title{font-size:26px}
/* Promo: Eingabe darf schrumpfen, Button bleibt IN der Karte;
   auf sehr schmalen Screens bricht der Button in die zweite Zeile */
#view-checkout .cg-prow{flex-wrap:wrap}
#view-checkout .cg-pin{flex:1 1 150px;min-width:0}
#view-checkout .cg-papply{flex:0 1 auto;white-space:nowrap;min-height:44px}
/* Packstation-Zeile: Text umbrechen statt unter dem Aufpreis verschwinden */
#view-checkout .cg-pack{gap:10px;align-items:flex-start}
#view-checkout .cg-pack .pl,#view-checkout .cg-pack .ps{overflow-wrap:anywhere}
#view-checkout .cg-pack .px{flex:none}
/* Artikelzeilen: Mengen-Buttons als echte Tap-Ziele */
#view-checkout .cg-iqty button{min-width:36px;min-height:36px}
#view-checkout .cg-iimg{width:44px;height:44px}
/* Vereinbarungs-Scrollbox nicht höher als der halbe Screen */
#view-checkout .cg-cbody,#view-checkout [id*=cgCbody]{max-height:45dvh}
#view-checkout .cg-upsell{flex-wrap:wrap}
#view-checkout .cg-upsell button{min-height:42px}

/* ── 9. ZUGANGS-GATE: passt auch auf kleine Screens ─────────── */
#gpGate .gate-card,#gpGate>div{max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ── 10. SALE-BANNER + FOOTER ───────────────────────────────── */
.salebar-in{padding:9px 14px;font-size:12px}
footer .wrap,.gpfooter{padding-left:16px;padding-right:16px}

}/* Ende @media 680px */

/* ── Extra-schmal (≤360px): eine Karte pro Zeile wäre wieder
     Platzverschwendung — stattdessen nur Schrift minimal runter ── */
@media (max-width:360px){
.card .body h3{font-size:13px}
.card .add{font-size:10.5px}
.shophero h1{font-size:28px}
}

}