/* ══════════════════════════════════════════════════════════════
   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}
}