/* Druck und Zauber — Warenkorb-Drawer, Warenkorbseite, Kasse, Danke/Status */

/* ---------- Drawer ---------- */
.cart-backdrop { position: fixed; inset: 0; background: rgba(26,26,26,0); z-index: 950; transition: background 260ms var(--ease-out); }
.cart-backdrop.is-open { background: rgba(26,26,26,0.35); }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; z-index: 960; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms var(--ease-out); box-shadow: -12px 0 40px rgba(31,46,42,0.12); }
.cart-drawer[hidden] { display: none; }
.cart-drawer.is-open { transform: none; }
.cart-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem 0.8rem; border-bottom: 1px solid var(--border); }
.cart-drawer-title { font-size: 1.4rem; outline: none; }
.cart-close { width: 44px; height: 44px; border: none; background: none; font-size: 1.6rem; cursor: pointer; color: var(--gray); border-radius: 50%; }
@media (hover: hover) { .cart-close:hover { background: var(--mint-pale); } }
.cart-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.6rem 1.4rem; }
.cart-drawer-foot { border-top: 1px solid var(--border); padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: 0.6rem; }
.cart-sum { display: flex; justify-content: space-between; font-size: 1.05rem; }
.cart-sum strong { font-variant-numeric: tabular-nums; }
.cart-note { font-size: 0.8rem; color: var(--gray-mid); }
.cart-errors { margin: 0.5rem 1.4rem; font-size: 0.85rem; }
.cart-page .cart-errors { margin: 1rem 0; }
[data-cart-checkout].is-disabled { opacity: 0.45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cart-drawer, .cart-backdrop { transition: opacity 120ms; } .cart-drawer { transform: none; opacity: 0; } .cart-drawer.is-open { opacity: 1; } }

/* ---------- Zeilen ---------- */
.cart-line { display: grid; grid-template-columns: 64px 1fr; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.cart-line.has-error { background: #FFF7E6; margin: 0 -0.6rem; padding: 0.9rem 0.6rem; border-radius: 12px; }
.cart-thumb { width: 64px; aspect-ratio: 4/5; background: var(--mint-pale); border-radius: 12px; overflow: hidden; display: block; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-name { font-weight: 700; color: var(--black); text-decoration: none; font-size: 0.98rem; }
@media (hover: hover) { .cart-name:hover { color: var(--mint-text); } }
.cart-cfg { font-size: 0.8rem; color: var(--gray-mid); margin: 0.15rem 0 0.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cart-row { display: flex; align-items: center; gap: 0.6rem; }
.qty-stepper--sm .qty-btn { width: 32px; height: 32px; font-size: 1rem; }
.qty-stepper--sm .qty-val { min-width: 28px; text-align: center; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cart-price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-remove { width: 32px; height: 32px; border: none; background: none; color: var(--gray-mid); font-size: 1.2rem; cursor: pointer; border-radius: 50%; }
@media (hover: hover) { .cart-remove:hover { background: var(--mint-pale); color: var(--black); } }
@media (pointer: coarse) { .qty-stepper--sm .qty-btn, .cart-remove { width: 44px; height: 44px; } }
.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--gray); display: grid; gap: 0.8rem; justify-items: center; }
.cart-empty svg { width: 44px; height: 44px; fill: var(--mint-light); }

/* ---------- Warenkorbseite ---------- */
.cart-page { max-width: 760px; }
.cart-page-foot { margin-top: 1.5rem; display: grid; gap: 0.8rem; }
.cart-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Kasse ---------- */
.checkout-head { padding-bottom: 1rem; }
.stepper { list-style: none; display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; counter-reset: st; }
.stepper li { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--gray-mid); counter-increment: st; }
.stepper li::before { content: counter(st) ' · '; color: var(--mint-text); }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; align-items: start; max-width: var(--container); margin: 0 auto; }
@media (max-width: 960px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { order: -1; } }
.checkout-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.6rem; margin-bottom: 1.4rem; }
.checkout-section h2 { font-size: 1.3rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.step-no { width: 30px; height: 30px; border-radius: 50%; background: var(--mint-deep); color: #fff; font: 800 0.85rem 'Nunito', sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.2rem; }
@media (max-width: 560px) { .segmented { grid-template-columns: 1fr; } }
.segment, .pay-option { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.segment:has(input:checked), .pay-option:has(input:checked) { border-color: var(--mint); background: var(--mint-pale); }
.segment input, .pay-option input { margin-top: 0.3rem; accent-color: var(--mint-deep); }
.segment span, .pay-option span { display: grid; gap: 0.15rem; }
.segment small, .pay-option small { color: var(--gray-mid); font-size: 0.82rem; line-height: 1.4; }
.pay-options { display: grid; gap: 0.7rem; }
.billing-fields { border: none; padding: 0; margin-top: 1rem; }
.billing-fields legend { font-weight: 700; margin-bottom: 0.4rem; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--gray); margin: 0.6rem 0; cursor: pointer; }
.check input { margin-top: 0.3rem; accent-color: var(--mint-deep); flex: none; }
.check a { color: var(--mint-text); font-weight: 700; }
.order-legal { background: var(--bg-alt); border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.9rem; color: var(--gray); margin: 1rem 0; }
.btn-order { font-size: 1.05rem; padding: 1.05rem 1.7rem; }
.btn-order[disabled] { background: var(--gray-light); cursor: not-allowed; transform: none; }
.checkout-summary { position: sticky; top: 88px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.4rem; }
.checkout-summary h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.summary-lines .cart-line { grid-template-columns: 48px 1fr; }
.summary-lines .cart-thumb { width: 48px; }
.summary-lines .qty-stepper { display: none; }
.summary-lines .cart-row::before { content: attr(data-qty); }
.summary-totals { margin-top: 1rem; display: grid; gap: 0.35rem; }
.summary-totals div { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--gray); }
.summary-totals dd { font-variant-numeric: tabular-nums; }
.summary-total { font-size: 1.1rem !important; font-weight: 800; color: var(--black) !important; border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.3rem; }
.summary-edit { display: inline-block; margin-top: 0.8rem; font-size: 0.85rem; color: var(--mint-text); font-weight: 700; }
.field input.is-invalid, .field textarea.is-invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }

/* ---------- Danke / Status ---------- */
.thanks-head .thanks-sign { font-size: 1.8rem; margin: 0.2rem 0 1rem; }
.thanks-body { display: grid; gap: 1.4rem; max-width: 760px; }
.thanks-body .card { padding: 1.6rem; }
.thanks-body h2 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.bank-data { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.bank-data div { display: grid; grid-template-columns: 160px 1fr; gap: 0.5rem; align-items: center; }
@media (max-width: 560px) { .bank-data div { grid-template-columns: 1fr; } }
.bank-data dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-text); font-weight: 700; }
.bank-data code { font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; background: var(--mint-pale); padding: 0.3rem 0.6rem; border-radius: 12px; }
.copy-btn { margin-left: 0.5rem; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; font: 700 0.75rem 'Nunito', sans-serif; color: var(--mint-text); cursor: pointer; }
@media (hover: hover) { .copy-btn:hover { background: var(--mint-pale); } }
.order-table { width: 100%; border-collapse: collapse; }
.order-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.95rem; }
.order-table tfoot td { border: none; padding: 0.3rem 0; color: var(--gray); }
.order-table .ot-total td { font-weight: 800; color: var(--black); font-size: 1.05rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.ot-qty { white-space: nowrap; color: var(--gray-mid); padding: 0 0.8rem !important; }
.ot-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ot-cfg { font-size: 0.82rem; color: var(--gray-mid); }
.ot-address { margin-top: 0.8rem; font-size: 0.9rem; color: var(--gray); }
.thanks-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin: 0 0 2rem; max-width: 760px; }
@media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } }
.timeline li { position: relative; font-size: 0.82rem; font-weight: 700; color: var(--gray-mid); padding-top: 1.4rem; }
.timeline li::before { content: ''; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--border); }
.tl-dot { position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--border); }
.timeline li.is-done, .timeline li.is-current { color: var(--black); }
.timeline li.is-done::before { background: var(--mint); }
.timeline li.is-done .tl-dot { background: var(--mint); border-color: var(--mint); }
.timeline li.is-current .tl-dot { border-color: var(--mint-deep); background: var(--mint-deep); box-shadow: 0 0 0 4px var(--mint-pale); }
.info-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
.info-table th, .info-table td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.info-table th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-text); }

/* ---------- Nav-Warenkorb ---------- */
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--black); text-decoration: none; }
@media (hover: hover) { .nav-cart:hover { background: var(--mint-pale); } }
.nav-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mint-deep); color: #fff; font: 800 0.68rem/18px 'Nunito', sans-serif; text-align: center; }

/* Anfrageformular: Captcha */
.captcha { border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem 0.6rem; }
.captcha legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.4rem; }
.captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.captcha-img { border-radius: 12px; border: 1px solid var(--border); background: var(--mint-pale); }
.captcha-question { font-weight: 700; margin: 0; }
.captcha-row input { flex: 1 1 160px; max-width: 220px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--mint-text); text-decoration: underline; cursor: pointer; }

/* Wartungsmodus: Positionsliste in der Anfrage (/anfrage?konfiguration=1) */
.anfrage-liste { margin: .75rem 0 0; padding: .75rem 1rem; background: #fff; border: 1px solid var(--border, #9BC7B8); border-radius: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; line-height: 1.5; }