<?/* 
 * shop.css — Mini-Shop Styles im Hausgewand für Göhler's Feinbäckerei.
 * Farbwelt über die Website-CSS-Variablen; hier eigenständig, da /shop/
 * eine eigene Kopie ist (htdocs-Spiegel). Zero-JS: alles in CSS bedienbar.
 */

/* ---- Basis & Farben ------------------------------------------------- */
:root{
  --gold:#C19A6B; --gold-d:#8a6d43; --ink:#2b2723; --cream:#FFFDF7;
  --paper:#f5efe4; --line:#e6dcc8; --red:#8c3024; --good:#4c6b4f;
}
html,body{margin:0;padding:0;}
.gf-body{background:var(--cream);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.55;}
a{color:inherit;text-decoration:none;}
small{font-size:.72em;opacity:.75;display:block;margin-top:.3rem;}

/* ---- Kopfzeile ------------------------------------------------------ */
.gf-headlock{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(80,60,20,.06);}
.gf-wr{max-width:1020px;margin-inline:auto;padding-inline:18px;}
.gf-hrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px;}
.gf-logo{font-family:'Playfair Display',serif;font-weight:800;font-size:1.35rem;color:#2b2723;white-space:nowrap;}
.gf-logo em{font-style:italic;color:var(--gold-d);font-weight:600;}
.gf-htop{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;}
.gf-htop a{font-size:.95rem;font-weight:500;padding:.35rem .2rem;border-bottom:2px solid transparent;color:#4a443c;}
.gf-htop a:hover,.gf-htop a.is-active{border-color:var(--gold);color:var(--ink);}
.gf-cart{background:linear-gradient(180deg,#fff, #fbf6ec);border:1px solid var(--line)!important;border-radius:40px;
  padding:.42rem .95rem!important;font-weight:600!important;display:inline-flex!important;align-items:center;gap:.35rem;}
.gf-cart__n{font-size:.78em;color:var(--red);font-weight:700;}

/* ---- Hauptbereich ---------------------------------------------------- */
.gf-main{padding-block:2.1rem 3.4rem;min-height:60vh;}
.gf-page-t{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem;flex-wrap:wrap;}
h1.gf-h1{font-family:'Playfair Display',serif;font-size:2rem;margin:0 0 .3rem;}
.gf-sub{margin-top:.1rem;color:#6b6459;font-style:italic;font-size:.98rem;}

/* Buttons */
.btn{--bgc:var(--gold);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bgc) 78%, #fff), var(--bgc));color:#241d10;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;padding:.72rem 1.35rem;border-radius:5px;box-shadow:0 2px 8px rgba(120,90,30,.18);}
.btn:active{transform:translateY(1px);}
.btn--ghost{background:none;color:#6b6459;font-weight:500;padding:.7rem .6rem;border-bottom:1px dashed var(--gold);border-radius:0;}
.btn--red{--bgc:var(--red);color:#fff;box-shadow:0 2px 8px rgba(130,40,30,.25);}

/* ---- Produktkarten --------------------------------------------------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(274px,1fr));gap:1.5rem;margin-top:1.6rem;}
.prodcard{background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(60,50,30,.08),0 12px 30px -18px rgba(90,70,30,.4);overflow:hidden;display:flex;flex-direction:column;}
.prodimg{display:block;border-bottom:1px solid var(--line);aspect-ratio:4/3;background:#efe8da;}
.prodimg img{width:100%;height:100%;object-fit:cover;display:block;}
.prodcard__b{padding:1.05rem 1.1rem .95rem;display:flex;flex-direction:column;gap:.65rem;flex:1;}
.cardname{font-size:1.24rem;font-weight:700;line-height:1.28;font-family:'Playfair Display',serif!important;}
.name-row,.descrow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.price-big{font-size:1.32rem;font-weight:700;color:#5b4a2f;white-space:nowrap;margin-left:auto;font-family:'Playfair Display',serif!important;}
.prodcard__add p{margin-top:auto;}

/* Badge */
.badge{display:inline-block;background:#f3e9d6;border-radius:30px;padding:.2rem .7rem;font-size:.78rem;font-weight:600;color:#7a5f34;}

/* Add-Menge-Reihe (Zero-JS): Buttons + 1 Menge-Hidden */
.addrow{display:flex;gap:.55rem;align-items:center;margin-top:auto;}
/* "In den Korb" — Größer, Wörter liegen rein, weicher Schatten unten (Fix 2026-10: vorher festes 2.9rem ×2.9rem-Quadrat) */
.addbtn{min-width:9.6rem;padding:.9rem 1.25rem;border-radius:7px;border:1px solid var(--line);background:#fffdf8;
  font-family:'Inter',sans-serif;font-weight:600;font-size:1.12rem;line-height:1.2;color:#6b4e2a;white-space:normal;text-align:center;word-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 7px 15px -3px rgba(90,70,30,.40);transition:box-shadow .12s ease,transform .06s ease;}
.addbtn:hover{box-shadow:0 10px 20px -4px rgba(90,70,30,.55);}

/* ---- Warenkorbseite ---------------------------------------------------- */
.korb-wrap{display:flex;gap:1.7rem;flex-wrap:wrap;margin-top:1.3rem;}
.korb-list{flex:1 1 500px;min-width:290px;display:flex;flex-direction:column;gap:.85rem;}
.korb-empty{padding:3rem 1rem;text-align:center;color:#6b6459;border:1.5px dashed var(--line);border-radius:10px;font-size:1.05rem;}
.kitem{display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--line);border-radius:9px;padding:.65rem .7rem;box-shadow:0 2px 9px -3px rgba(90,70,30,.12);}
.kitem img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex-shrink:0;}
.ki-mid{flex:1;display:flex;align-items:center;gap:.7rem;min-width:0;}
.qtycol{display:flex;align-items:center;gap:.35rem;white-space:nowrap;}
.qbtn{width:2.25rem;height:2.25rem;border-radius:7px;border:1px solid var(--line);background:#fffdf8;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;color:#4a443c;}
/* Löschen-Knopf im Korb (Fix 2026-10): prägnantes × + kleine Beschriftung darunter */
.qrm{display:inline-flex;flex-direction:column;align-items:center;gap:.18rem;line-height:1;}
.qbtn--rm{border-color:#e3c4bc;background:#fffaf9;color:#8c3024;font-weight:700;box-shadow:inset 0 -2px 5px rgba(140,48,36,.08);}
.qbtn--rm:hover{background:#fbeeee;}
.rmx{font-size:1.5rem;line-height:.75;display:inline-block;font-weight:800;transform:translateY(-1px);}
.qrm-cap{display:block!important;margin:0!important;font-family:'Inter',sans-serif;font-size:.64rem;font-weight:600;color:#a26a5f;letter-spacing:.03em;opacity:1;}
.qty{font-weight:700;min-width:1.5ch;text-align:center;}
.ki-sum{text-align:right;white-space:nowrap;font-family:'Playfair Display',serif;}

/* Kasse-Box rechts (Zusammenfassung & Checkout-Zugang) */
.aside-box{flex:0 1 360px;background:#fff;border-radius:9px;padding:1.25rem 1.3rem;box-shadow:0 4px 16px -8px rgba(90,70,30,.3);}
.krow{display:flex;justify-content:space-between;margin:.45rem 0;font-size:.98rem;}
.totrow{border-top:2px solid var(--line);margin-top:.8rem;padding-top:.85rem;font-weight:700;font-size:1.16rem;font-family:'Playfair Display',serif;}
.ship-hint{font-style:italic;color:#6b6459;margin:.7rem 0 .35rem;font-size:.92rem;}
.btn--big{width:100%;margin-top:.7rem;padding:.85rem;font-size:1.02rem;border-radius:7px;}

/* Checkout-Formular */
.co-grid{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:1.3rem;}
.left-box,.co-fieldbox{background:#fff;border-radius:9px;padding:1.25rem 1.4rem;box-shadow:0 4px 16px -8px rgba(90,70,30,.22);}
.co-formwrap{flex:1 1 430px;}
.left-box{flex:0 1 350px;align-self:flex-start;position:sticky;top:96px;}

input[type=text],input[type=email]{width:100%;box-sizing:border-box;border:1px solid #d8cfbc;background:#fffdf8;padding:.62rem .75rem;font-size:.95rem;border-radius:6px;font-family:'Inter',sans-serif;color:var(--ink);}
/* Fokus (CSS-only) */
input:focus-visible{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(193,154,107,.28);border-radius:6px;}

.chip{display:inline-flex;align-items:center;gap:.4rem;background:#fffdf6;border:1.6px solid #d9cdb4;border-radius:7px;padding:.36rem .8rem;font-size:.95rem;font-weight:600;color:#5b4a2f;}
.chip input{width:1.1ch;height:1.1ch;transform:scale(1.15);}

/* Radio-Karten für Zahlungsart (Zero-JS) — verborgene Radios VOR dem Label;
   Gate: gechecktes Radio öffnet den Bankdaten-Block per Geschwister-Selektor. */
.payrow{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;margin-top:.35rem;}
.payrow > input[type=radio]{position:absolute;width:0;height:0;margin:0;padding:0;opacity:0;-webkit-appearance:none;appearance:none;}   /* blendet aus, bleibt tabbar/screenreader-fähig */
.pk-card{position:relative;border:1.6px solid #ddd3c0;background:#fffdf7;border-radius:9px;padding:.85rem 1rem;cursor:pointer;display:block;width:min(232px,100%);}
.pk-name{display:block;font-weight:700;font-size:.95rem;margin-bottom:.3rem;color:#4a443c;}
.pk-desc{display:block;font-size:.82rem;color:#6b6459;line-height:1.42;}

/* Scharfer Kontroll-Kreis oben-links; bei Auswahl ausgefüllt mit Häkchen — per CSS allein */
.pk-cb{position:absolute;top:-15px;left:-17px;width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid #caa86f;background:#fffdf7;display:flex;align-items:center;justify-content:center;font-weight:800;color:#d3c2a2;z-index:3;}
.pk-cb::before{content:'';}
#p_pay_bar:checked + .pk-card,#p_pay_vo:checked + .pk-card{border-color:#c19a6b;background:#fffdf4;box-shadow:0 0 0 3px rgba(193,154,107,.18);}
.payrow input[type=radio]:checked + .pk-card .pk-cb{background:#c19a6b;border-color:#a57e47;color:#fff;}
.payrow input[type=radio]:checked + .pk-card .pk-cb::before{content:'✓';}

/* Tastatur-Fokus auf die Karte legen (Radio selbst ist unsichtbar) */
#p_pay_bar:focus-visible + .pk-card,#p_pay_vo:focus-visible + .pk-card{outline:3px solid rgba(193,154,107,.6);outline-offset:2px;}

/* Bankinformationen: rein per CSS sichtbar, wenn 'Vorkasse' ausgewählt ist */
.payrow > .bank-gate{display:none;}
#p_pay_vo:checked ~ .bank-gate{display:block;width:100%;}
.bank-gate{background:#fff;border:1px solid #d8cfbc;border-left:4px solid #c19a6b;border-radius:9px;padding:.95rem 1.15rem;margin-top:.2rem;box-shadow:0 4px 12px -8px rgba(90,70,30,.25);}
.brow{display:block;margin:.3rem 0;font-size:.96rem;}
code.ibank{font-family:'Inter',monospace;background:#f6efe0;border-radius:5px;padding:.1rem .5rem;font-weight:700;letter-spacing:.08em;color:#5b4a2f;}

/* Formular-Feinrippen (Kasse) */
input[type=tel].tele,.co-formwrap input.tele{width:11rem;max-width:100%;display:inline-block;}
.co-actions{margin-top:1.1rem;display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;}
.btn--go{padding:.85rem 2.1rem;font-size:1.02rem;border-radius:7px;font-weight:700;}

/* Dankeseite (Bestellschein) */
.bank-box{margin-top:1rem;background:#fffdf6;border:1px solid #d9cdb4;border-left:4px solid #c19a6b;border-radius:9px;padding:.9rem 1.05rem;max-width:430px;}
.bzbox{margin-top:.9rem;padding:.7rem .9rem;background:#faf3e3;border-left:3px solid #c19a6b;border-radius:6px;font-size:.9rem;color:#5b4a2f;line-height:1.5;max-width:480px;}
p.hint,.ghint{font-size:.88rem;color:#7a6a4e;font-style:italic;margin-top:.35rem;}


/* Konto-Seite & Code-Feld */
.konto-codebox{background:#fff;border-radius:9px;padding:1.5rem;max-width:480px;margin-top:1.2rem;}
code.inline{font-family:'Inter',monospace;background:#f6efe0;border-radius:5px;padding:.12rem .45rem;font-weight:700;color:#8a6d3f;letter-spacing:.2em;}

/* Demo-Outbox */
.gf-debug-mail{max-width:1020px;margin:-.8rem auto 2rem;padding-inline:18px;display:flex;flex-direction:column;gap:.5rem;}
.gf-debug-mail h4{font-family:'Inter',sans-serif;font-size:.9rem;color:#7a6a4e;border-bottom:1px dashed #d8cfbc;padding-bottom:.3rem;align-self:flex-start;background:#faf3e3;padding-inline:.9rem;border-radius:5px 5px 0 0;}
.gf-debug-mail details{background:#fffdf6;border-left:3px solid var(--gold);border-top:1px solid #ece2cd;border-right:1px solid #ece2cd;padding:.7rem .9rem;font-size:.84rem;border-radius:0 0 5px 5px;}
.gf-debug-mail summary{cursor:pointer;font-weight:600;color:#6b5a38;}
.gf-mail-body{white-space:pre-wrap;margin:0.6rem 0 0;font-family:'DejaVu Sans Mono','Noto Sans',monospace;font-size:.8rem;background:#f9f4ea;border-radius:6px;padding:.7rem;color:#3b352c;max-height:300px;overflow:auto;}

/* Fußzeile */
.gf-foot{background:#171410;color:#cbc3b5;margin-top:3.2rem;}
.gf-footin{padding-block:1.9rem;font-size:.9rem;line-height:1.6;}
.gf-foot a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}

/* Smartphone */
@media (max-width:740px){
  .gf-hrow{flex-wrap:wrap;padding-block:.55rem;min-height:auto;}
  .gf-logo{font-size:1.12rem;width:100%;}
  .gf-htop{width:100%;gap:.9rem;font-size:.84rem;}
  h1.gf-h1{font-size:1.5rem;}
  .prodcard__add{display:flex;}
  .left-box,.co-fieldbox{position:static!important;padding:1rem 1.05rem!important;}
}

/* Drucken (Bestellscheinkopie) */
@media print{
  .gf-headlock,.btn,.co-formwrap input[type=submit],.no-print{display:none!important;}
  body{background:#fff;}
}


/* --- Ergänzend (Katalog-Body, Flash) --- */
.prodbody{padding:1.05rem 1.1rem .95rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.prodnamewrap{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.prodname{font-size:1.24rem;font-weight:700;line-height:1.28;font-family:'Playfair Display',serif;margin:0;}
.proddesc{color:#6b6459;font-size:.93rem;line-height:1.5;margin:.1rem 0;display:block;}
.prod-badge,.badge{display:inline-block;background:#f3e9d6;border-radius:30px;padding:.2rem .7rem;font-size:.78rem;font-weight:600;color:#7a5f34;}
.gf-flash{border-radius:9px;padding:.8rem 1.05rem;margin-bottom:1.1rem;font-size:.97rem;border:1px solid transparent;}
.gf-flash--ok{background:#eef4ec;border-color:#cfe0cd;color:#2f4a33;}
.gf-flash--note{background:#faf6ea;border-color:#eadfc4;color:#5b4d28;}
.gf-flash--err{background:#f7ece9;border-color:#e5cbc3;color:#712f22;}
.btn--inline-small{padding:.45rem .9rem;font-size:.9rem;}
.gf-table-note{color:#6b6459;font-style:italic;font-size:.95rem;margin-top:1.2rem;}
a.backlink{display:inline-block;margin-bottom:1rem;color:#7a5f34;border-bottom:1px dashed var(--gold);font-size:.92rem;}
.gf-hint{background:#faf6ec;border-left:4px solid var(--gold);padding:.8rem 1.05rem;font-size:.95rem;margin:.9rem 0;color:#5b4d2a;border-radius:0 7px 7px 0;line-height:1.55;}

/* --- Kassen-/Konto-Ausbau Phase 1 (Bankdaten, Bestätigung, Login) --- */
.bank-box{background:#fffdf4;border:2px solid var(--gold);border-radius:10px;padding:1.15rem 1.3rem;margin-top:1rem;}
.bank-box h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:#5b4a2f;margin:0 0 .6rem;}
.bank-row{display:flex;gap:.4rem;align-items:baseline;font-size:.98rem;margin:.32rem 0;flex-wrap:wrap;}
.bank-row b{min-width:7.2em;display:inline-block;color:#5b4a2f;}
code.ibank{font-family:'DejaVu Sans Mono',monospace;background:#f6efe0;border-radius:5px;padding:.12rem .5rem;font-weight:700;color:#8a6d3f;letter-spacing:.03em;}
.bzbox{background:#eef4ec;border-left:4px solid var(--good);border-radius:0 8px 8px 0;padding:.75rem 1rem;margin-top:.9rem;font-size:.95rem;color:#2f4a33;}
.done-card{background:#fff;border-radius:10px;box-shadow:0 6px 22px -12px rgba(90,70,30,.35);padding:1.6rem 1.8rem;max-width:760px;margin-top:1.1rem;}
.done-card .ord-no{font-family:'Playfair Display',serif;font-size:1.45rem;color:#5b4a2f;font-weight:800;letter-spacing:.04em;display:block;margin-bottom:.5rem;}
.formlab{display:block;font-weight:600;font-size:.93rem;color:#4a443c;margin:.9rem 0 .3rem;}
.errline{color:#712f22;background:#f7ece9;border-radius:7px;padding:.65rem .9rem;font-size:.94rem;margin-top:.8rem;}
.hist-row{display:flex;gap:.8rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin:.5rem 0;flex-wrap:wrap;}

/* Konto-/Registrierungs-Formulare, Phase 2 (2026-10) */
.reg-card label{display:block;font-weight:600;color:#5c3d1e;margin-top:.8rem;}
.reg-card input[type="email"],.reg-card input[type="text"]{width:100%;margin-top:.4rem;padding:.62rem .8rem;border:1px solid #d9cdb4;border-radius:7px;font:inherit;background:#fffdf7;color:#3b2f1c;}
.reg-card input:focus{outline:none;border-color:#bea45a;box-shadow:0 0 0 3px rgba(190,164,90,.25);}
.reg-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.1rem;}
.acct-row{margin-top:.9rem;}
.prof-card p{margin:.35rem 0;}