.bestellung-app {
    --bg:#eae7e0;--card:#ffffff;--brown:#8e4401;--brown-mid:#9b6030;
    --brown-lt:#c8956a;--brown-pale:#f5ede3;--brown-xpale:#fdf9f5;
    --green:#5a8a3c;--text:#1a1208;--muted:#7a6e63;--border:#ddd8d0;
    --blue:#1a5bbf;--blue-h:#134a9e;--red:#c0392b;
    --success-bg:#edf7ed;--success:#2e7d32;
    --radius:10px;--shadow:0 2px 28px rgba(80,50,20,0.11);
    --tab-h:80px;
}
.bestellung-app *,
.bestellung-app *::before,
.bestellung-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.bestellung-app {background:var(--bg);font-family:'Source Sans 3',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:10px 16px 80px}

/* ── Header ── */
.bestellung-app .header{display:flex;flex-direction:column;align-items:center;margin-bottom:10px;animation:bestellung-fadeDown .5s ease both}
.bestellung-app .logo-img{width:150px;height:auto;margin-bottom:4px;filter:drop-shadow(0 2px 8px rgba(80,40,10,.18))}

/* ── Card ── */
/*.bestellung-app .card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:560px;overflow:hidden;animation:bestellung-fadeUp .45s ease .1s both} */
.bestellung-app .card{max-width:1160px;overflow:hidden;animation:bestellung-fadeUp .45s ease .1s both}
.bestellung-app .card-header{padding:28px 36px 0}
.bestellung-app .card-title{font-family:'Merriweather',serif;font-size:1.55rem;font-weight:700;color:var(--text);text-align:center;margin-bottom:3px}
.bestellung-app .card-sub{text-align:center;font-size:.86rem;color:var(--muted);font-weight:300;margin-bottom:0}
.bestellung-app .card-body{padding:22px 36px 28px}

/* ── Welcome banner ── */
.bestellung-app .welcome-back{display:none;background:var(--brown-pale);border:1px solid #e0c9ad;border-radius:8px;padding:10px 14px;margin-bottom:20px;font-size:.83rem;color:var(--brown-mid);align-items:center;gap:8px}
.bestellung-app .welcome-back.show{display:flex}
.bestellung-app .welcome-back strong{color:var(--brown)}

/* ── Section label ── */
.bestellung-app .section-label{font-family:'Lora',serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-mid);margin-bottom:10px}

/* ── Fields ── */
.bestellung-app .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.bestellung-app .field label{font-size:1rem;font-weight:600;color:var(--text);letter-spacing:.01em}
.bestellung-app input[type="text"],input[type="tel"],input[type="date"]{height:48px;padding:0 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:'Source Sans 3',sans-serif;font-size:.93rem;color:var(--text);background:#fff;transition:border-color .2s,box-shadow .2s;width:100%;appearance:none}
.bestellung-app input::placeholder{color:#bdb5ab}
.bestellung-app input:focus{outline:none;border-color:var(--brown-mid);box-shadow:0 0 0 3px rgba(154,96,48,.13)}
.bestellung-app input.invalid{border-color:var(--red)}
.bestellung-app input.invalid:focus{box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.bestellung-app .field-error{font-size:.77rem;color:var(--red);display:none;margin-top:-2px}
.bestellung-app .field-error.show{display:block}

/* ── Multiline Note Field ── */
.bestellung-app .field textarea {width: 100%;padding: 10px 14px;height: auto;min-height:160px;border: 1.5px solid var(--border);border-radius: var(--radius);font-family: 'Source Sans 3', sans-serif;font-size: 0.93rem;color: var(--text);background: #fff;transition: border-color 0.2s, box-shadow 0.2s;resize: vertical;}
.bestellung-app .field textarea::placeholder {color: #bdb5ab;}
.bestellung-app .field textarea:focus {outline: none;border-color: var(--brown-mid);box-shadow: 0 0 0 3px rgba(154, 96, 48, 0.13);}
.bestellung-app .field textarea.invalid {border-color: var(--red);}
.bestellung-app .field textarea.invalid:focus {box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);}

/* ── Date input ── */
.bestellung-app .date-wrap{position:relative}
.bestellung-app .date-wrap input[type="date"]{padding-right:44px;cursor:pointer}
.bestellung-app .date-wrap input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:100%;height:100%;cursor:pointer}
.bestellung-app .date-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}

/* ── Divider ── */
.bestellung-app .divider{border:none;border-top:1px solid var(--border);margin:18px 0}

/* ── Pickup Toggle ── */
.bestellung-app .pickup-row{display:flex;align-items:stretch;justify-content:space-between;border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden;background:#fff}
.bestellung-app .pickup-option{flex:1;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:4px;position:relative}
.bestellung-app .pickup-option:first-child{border-right:1px solid var(--border)}
.bestellung-app .pickup-option:hover{background:var(--brown-xpale)}
.bestellung-app .pickup-option.active{background:var(--brown);border-color:var(--brown)}
.bestellung-app .pickup-option.active .pickup-title{color:#fff;font-weight:700}
.bestellung-app .pickup-option.active .pickup-sub{color:rgba(255,255,255,.85)}
.bestellung-app .pickup-option.active::before{content:'✓';position:absolute;top:8px;right:12px;font-size:1.1rem;color:#fff;font-weight:700}
.bestellung-app .pickup-title{font-size:1rem;font-weight:600;color:var(--text);transition:color .2s}
.bestellung-app .pickup-sub{font-size:.78rem;color:var(--muted);line-height:1.3;transition:color .2s}
.bestellung-app .toggle{display:none}

/* ══════════════════════════════════
   PRODUCT TABS
══════════════════════════════════ */
.bestellung-app .products-section{margin-bottom:18px}
.bestellung-app .products-error{font-size:.77rem;color:var(--red);display:none;margin-top:6px}
.bestellung-app .products-error.show{display:block}

.bestellung-app .tab-bar{display:flex;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;background:var(--brown-xpale)}
.bestellung-app .tab-btn{flex:1;height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:transparent;cursor:pointer;font-family:'Source Sans 3',sans-serif;font-size:.8rem;font-weight:500;color:var(--muted);transition:background .18s,color .18s;border-right:1px solid var(--border);padding:6px 4px;line-height:1.2}
.bestellung-app .tab-btn:last-child{border-right:none}
.bestellung-app .tab-btn .tab-icon{font-size:1.7rem;line-height:1}
.bestellung-app .tab-btn .tab-label{font-size:1rem;font-weight:700;text-align:center;line-height:1.25}
.bestellung-app .tab-btn.active{background:var(--brown);color:#fff;font-weight:600}
.bestellung-app .tab-btn .tab-count{display:none;background:rgba(255,255,255,.25);color:#fff;border-radius:99px;padding:1px 6px;font-size:.65rem;font-weight:700;line-height:1.5;min-width:18px;text-align:center}
.bestellung-app .tab-btn.active .tab-count,.tab-btn.has-selection .tab-count{display:inline-block}
.bestellung-app .tab-btn.has-selection:not(.active) .tab-count{background:var(--brown-mid);color:#fff}

.bestellung-app .tab-panel{display:none}
.bestellung-app .tab-panel.active{display:block}

/* ── Product rows with quantity stepper ── */
.bestellung-app .product-list{display:flex;flex-direction:column;gap:8px}
.bestellung-app .product-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius);background:#fdfaf7;transition:border-color .18s,background .18s;outline:none}
.bestellung-app .product-row:hover{border-color:var(--brown-lt);background:var(--brown-xpale)}
.bestellung-app .product-row.selected{border-color:var(--brown-mid);background:var(--brown-pale)}

.bestellung-app .prod-left{display:flex;align-items:flex-start;gap:10px;min-width:0}
.bestellung-app .prod-info{flex:1;min-width:0}
.bestellung-app .prod-name{font-family:'Lora',serif;font-size:1rem;font-weight:600;color:var(--text);line-height:1.3}
.bestellung-app .prod-zutaten{font-size:.73rem;color:var(--muted);margin-top:3px;line-height:1.4}
.bestellung-app .prod-bottom{display:flex;align-items:center;gap:8px;margin-top:5px}
.bestellung-app .prod-artnr{font-size:.67rem;color:var(--brown-lt);font-weight:500;letter-spacing:.04em}
.bestellung-app .prod-price{font-family:'Lora',serif;font-size:.88rem;font-weight:700;color:var(--brown);white-space:nowrap}

/* Quantity stepper */
.bestellung-app .qty-wrap{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;flex-shrink:0}
.bestellung-app .qty-btn{width:30px;height:30px;border:none;background:transparent;cursor:pointer;font-size:1.1rem;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0;line-height:1}
.bestellung-app .qty-btn:hover{background:var(--brown-pale);color:var(--brown)}
.bestellung-app .qty-num{min-width:28px;text-align:center;font-family:'Source Sans 3',sans-serif;font-size:.88rem;font-weight:600;color:var(--text);border-left:1px solid var(--border);border-right:1px solid var(--border);padding:0 4px;height:30px;display:flex;align-items:center;justify-content:center}
.bestellung-app .product-row.selected .qty-wrap{border-color:var(--brown-mid)}
.bestellung-app .product-row.selected .qty-btn{border-color:var(--brown-lt)}

/* ── Cart summary ── */
.bestellung-app .cart-summary{margin-top:12px;padding:10px 14px;background:var(--brown-pale);border:1px solid #e0c9ad;border-radius:8px;display:none;flex-direction:column;gap:4px}
.bestellung-app .cart-summary.show{display:flex}
.bestellung-app .cart-row{display:flex;justify-content:space-between;align-items:center;font-size:.81rem;color:var(--brown-mid);gap:8px}
.bestellung-app .cart-row-name{flex:1}
.bestellung-app .cart-row-qty{color:var(--brown-lt);font-size:.75rem}
.bestellung-app .cart-total-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e0c9ad;margin-top:4px;padding-top:6px}
.bestellung-app .cart-total-label{font-family:'Lora',serif;font-size:.88rem;font-weight:600;color:var(--brown)}
.bestellung-app .cart-total-val{font-family:'Lora',serif;font-size:.95rem;font-weight:700;color:var(--brown)}

/* ── Honeypot ── */
.bestellung-app .hp{position:absolute;left:-9999px;visibility:hidden}

/* ── T&C Checkbox ── */
.bestellung-app #rememberRow{margin-bottom:14px}
.bestellung-app .terms-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:0px;padding:12px 14px;background:var(--brown-xpale);border:1.5px solid var(--border);border-radius:var(--radius);transition:border-color .18s}
.bestellung-app .terms-row.invalid-terms{border-color:var(--red);background:#fef9f9}
.bestellung-app .terms-check-wrap{flex-shrink:0;margin-top:1px}
.bestellung-app .terms-check{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.8px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;transition:background .16s,border-color .16s;position:relative;display:block}
.bestellung-app .terms-check:checked{background:var(--brown-mid);border-color:var(--brown-mid)}
.bestellung-app .terms-check:checked::after{content:'';position:absolute;left:5px;top:2px;width:7px;height:11px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(40deg)}
.bestellung-app .terms-check:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(154,96,48,.2)}
.bestellung-app .terms-text{font-size:.8rem;color:var(--muted);line-height:1.5;padding-top:1px}
.bestellung-app .terms-text a{color:var(--brown-mid);text-decoration:underline;text-underline-offset:2px}
.bestellung-app .terms-text a:hover{color:var(--brown)}
.bestellung-app .terms-error{font-size:.77rem;color:var(--red);display:none;margin-top:4px}
.bestellung-app .terms-error.show{display:block}

/* ── Buttons ── */
.bestellung-app .btn-row{display:grid;grid-template-columns:1fr 1.8fr;gap:12px;margin-top:8px}
.bestellung-app .btn{height:50px;border-radius:var(--radius);font-family:'Source Sans 3',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .18s,transform .1s,box-shadow .18s;letter-spacing:.01em}
.bestellung-app .btn-clear{background:#fff;border:1.5px solid var(--border);color:var(--muted)}
.bestellung-app .btn-clear:hover{background:#f5f2ef;border-color:#c4bdb4;color:var(--text)}
.bestellung-app .btn-submit{background:var(--blue);color:#fff;box-shadow:0 3px 14px rgba(26,91,191,.25)}
.bestellung-app .btn-submit:hover:not(:disabled){background:var(--blue-h);box-shadow:0 5px 20px rgba(26,91,191,.35)}
.bestellung-app .btn-submit:active:not(:disabled){transform:scale(.98)}
.bestellung-app .btn-submit:disabled{background:#a8b8d0;box-shadow:none;cursor:not-allowed}
.bestellung-app .spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:bestellung-spin .7s linear infinite;display:none;flex-shrink:0}
.bestellung-app .btn-submit.loading .spinner{display:block}
.bestellung-app .btn-submit.loading .btn-label{opacity:.75}

/* ── Alerts ── */
.bestellung-app .alert{border-radius:10px;padding:14px 16px;font-size:.87rem;line-height:1.55;margin-top:18px;display:none;gap:10px;align-items:flex-start}
.bestellung-app .alert.show{display:flex}
.bestellung-app .alert-icon{font-size:1.05rem;flex-shrink:0;margin-top:1px}
.bestellung-app .alert.success{background:var(--success-bg);color:var(--success);border:1px solid #b2dfb4}
.bestellung-app .alert.error{background:#fdecea;color:#b71c1c;border:1px solid #f5b4b0}

/* ── Footer ── */
.bestellung-app .site-footer{margin-top:24px;text-align:center;animation:bestellung-fadeUp .5s ease .2s both}
.bestellung-app .footer-links{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.bestellung-app .footer-links a{font-size:.75rem;color:var(--muted);text-decoration:none;letter-spacing:.02em;transition:color .15s}
.bestellung-app .footer-links a:hover{color:var(--brown)}
.bestellung-app .footer-sep{font-size:.7rem;color:var(--border)}
.bestellung-app .footer-copy{margin-top:6px;font-size:.7rem;color:#b5aca3}

@keyframes bestellung-fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes bestellung-fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bestellung-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){
    .bestellung-app .card-header{padding:24px 20px 0}
    .bestellung-app .card-body{padding:18px 20px 22px}
    .bestellung-app .btn-row{grid-template-columns:1fr 1fr}
    .bestellung-app .tab-btn .tab-label{font-size:0.7rem}
    .bestellung-app .logo-img{width:80px;margin-bottom:0px;filter:none}
    .bestellung-app .terms-row {margin-bottom: 16px;}
    .bestellung-app .pickup-title {font-size: 0.8rem;}
}

/* ══════════════════════════════════
   DESKTOP 2-COLUMN LAYOUT
   Only kicks in at ≥ 700 px
══════════════════════════════════ */
@media(min-width:700px){
    /* Widen the card to fit both columns */
    .bestellung-app .card{max-width:1160px}

    /* 40/60 column grid */
    .bestellung-app .form-layout{
        display:grid;
        grid-template-columns:40% 60%;
        gap:0;
        align-items:start;
    }

    /* Left column: right padding + border as visual divider */
    .bestellung-app .form-col-left{
        padding-right:36px;
        border-right:1px solid var(--border);
    }

    /* Right column: flex column so form-actions sticks to bottom */
    .bestellung-app .form-col-right{
        padding-left:36px;
        display:flex;
        flex-direction:column;
    }

    /* Products section grows to fill available space */
    .bestellung-app .form-col-right .products-section{
        flex:1;
    }

    /* Products: no scroll, show everything */
    .bestellung-app #tabPanels{
        max-height:none;
        overflow-y:visible;
    }
}

/* ── Pickup hint (description shown below the toggle boxes) ── */
.bestellung-app .pickup-hint{
    font-size:.78rem;
    color:var(--muted);
    line-height:1.4;
    margin-top:-10px;
    margin-bottom:14px;
}

/* ── Form actions wrapper ── */
.bestellung-app .form-actions{
    margin-top:8px;
}