/* ============================================================================ EIT Seitlicher Warenkorb - Optik „Kumpel" ---------------------------------------------------------------------------- Markup: frontend/template/basket/cart_dropdown_label.tpl Verhalten: frontend/js/eit_bk_warenkorb.js Farben kommen aus den --bk-*-Variablen des Templates EIT-BesteKumpels. Außerhalb des Templates greifen die eingebauten Ersatzwerte derselben Palette. Das JS hängt .bk-cart direkt an . Deshalb darf hier nichts von einem Elternelement abhängen, alle Regeln stehen für sich. ========================================================================== */ .bk-cart { --wk-primary: var(--bk-primary, #CB5550); --wk-primary-h: var(--bk-primary-hover, #A84335); --wk-primary-s: var(--bk-primary-soft, #FBF1F1); --wk-accent: var(--bk-accent, #107C92); --wk-accent-h: var(--bk-accent-hover, #0C6272); --wk-surface: var(--bk-surface, #F8F6F5); --wk-text: var(--bk-text, #3B3535); --wk-muted: #7a7573; /* lesbar auf Weiß, 4,6:1 */ --wk-faint: var(--bk-muted, #AEAAA8); --wk-border: var(--bk-border, #DFDDDC); --wk-border-s: var(--bk-border-soft, #EBEAE9); --wk-gold: var(--bk-gold, #D4B896); --wk-gold-h: #b9945f; --wk-ok: #3d7f5c; --wk-ok-s: #edf6f1; --wk-cta-shadow: rgba(203, 85, 80, .7); /* Balkenfarbe folgt der Einstellung (data-bk-balken), Standard Gold */ --wk-bar: var(--wk-gold); --wk-bar-ink: var(--wk-gold-h); --wk-scrim: rgba(0, 0, 0, .42); --wk-shadow: rgba(60, 40, 20, .45); --wk-card-shadow: 0 1px 2px rgba(60, 40, 20, .05); /* Eckenregel: Radius = 30 % der Elementhöhe, gedeckelt bei 15 px. Bedienelemente tragen ihre Höhe als --h und rechnen den Radius daraus; große Flächen (Panel, Kärtchen) nehmen direkt den Deckel. So wirkt die Rundung bei jeder Größe gleich. */ --wk-radius-max: 15px; --wk-radius-ratio: .3; --wk-radius-panel: var(--wk-radius-max); --wk-radius-card: var(--wk-radius-max); --wk-ease-in: cubic-bezier(.32, .72, 0, 1); /* Ankunft: schnell, dann sanft */ --wk-ease-out: cubic-bezier(.4, 0, 1, 1); /* Abgang: knapp und zügig */ --bk-cart-width: 392px; /* wird vom Template überschrieben */ font-family: inherit; color: var(--wk-text); } /* Eigene Farben aus den Einstellungen kommen als Inline-Variablen am Panel-Knoten mit (Panel::colorVars) und überschreiben die Werte oben. */ .bk-cart[data-bk-balken="primary"] { --wk-bar: var(--wk-primary); --wk-bar-ink: var(--wk-primary-h); } .bk-cart[data-bk-balken="accent"] { --wk-bar: var(--wk-accent); --wk-bar-ink: var(--wk-accent-h); } /* Nicht auf das Template verlassen: width:100 % plus Innenabstand darf nie über den Rand laufen. */ .bk-cart, .bk-cart *, .bk-cart *::before, .bk-cart *::after { box-sizing: border-box; } .bk-cart button { font-family: inherit; } /* --------------------------------------------------------------------------- Auslöser im Kopfbereich ------------------------------------------------------------------------- */ .cart-icon-dropdown .bk-cart-trigger { cursor: pointer; } /* Das Panel liegt vor dem Verschieben noch im

des Kopfbereichs. Bis das JS es an gehängt hat, darf es nicht aufblitzen. */ .cart-icon-dropdown .bk-cart { display: none; } /* --------------------------------------------------------------------------- Panel als Karte mit Abstand zum Rand ------------------------------------------------------------------------- */ body > .bk-cart { position: fixed; inset: 0; z-index: 1090; /* über Bootstrap-Modal (1050) */ pointer-events: none; } body > .bk-cart[data-open="true"] { pointer-events: auto; } .bk-cart-ov { position: absolute; inset: 0; background: var(--wk-scrim); opacity: 0; transition: opacity .25s var(--wk-ease-out); } .bk-cart[data-open="true"] .bk-cart-ov { opacity: 1; transition: opacity .35s var(--wk-ease-in); } .bk-cart-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: var(--bk-cart-width); max-width: calc(100% - 24px); background: var(--wk-surface); border-radius: var(--wk-radius-panel); display: flex; flex-direction: column; box-shadow: 0 24px 60px -20px var(--wk-shadow); transform: translateX(calc(100% + 16px)); transition: transform .26s var(--wk-ease-out); } .bk-cart[data-open="true"] .bk-cart-panel { transform: translateX(0); transition: transform .42s var(--wk-ease-in); } /* Auf dem Telefon von unten: der Daumen kommt dort besser hin. */ @media (max-width: 480px) { .bk-cart[data-bk-mobil="unten"] .bk-cart-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 90vh; border-radius: var(--wk-radius-panel) var(--wk-radius-panel) 0 0; box-shadow: 0 -12px 40px -10px var(--wk-shadow); transform: translateY(104%); } .bk-cart[data-bk-mobil="unten"][data-open="true"] .bk-cart-panel { transform: translateY(0); } .bk-cart[data-bk-mobil="rechts"] .bk-cart-panel { top: 0; right: 0; bottom: 0; max-width: 100%; border-radius: 0; } } /* --------------------------------------------------------------------------- Kopfzeile ------------------------------------------------------------------------- */ .bk-cart-hd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 8px; flex: 0 0 auto; } .bk-cart-hd h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--wk-text); text-transform: none; line-height: 1.25; } .bk-cart-hd h2 span { display: block; font-size: 12.5px; font-weight: 700; color: var(--wk-gold-h); margin-top: 1px; } .bk-cart-x { --h: 34px; width: var(--h); height: var(--h); display: grid; place-items: center; background: #fff; border: 0; border-radius: min(var(--wk-radius-max), calc(var(--h) * var(--wk-radius-ratio))); padding: 0; color: var(--wk-muted); cursor: pointer; flex: 0 0 auto; line-height: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: color .15s, background .15s; } .bk-cart-x:hover { color: var(--wk-text); background: #fff; } .bk-cart-x:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; } /* Bestätigung „Liegt im Korb": kommt kurz unter der Kopfzeile hervor */ .bk-cart-toast { position: absolute; left: 50%; top: 100%; margin-top: 2px; transform: translate(-50%, -6px); display: inline-flex; align-items: center; gap: 6px; --h: 30px; min-height: var(--h); padding: 0 12px; border-radius: min(var(--wk-radius-max), calc(var(--h) * var(--wk-radius-ratio))); background: var(--wk-text); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .16s var(--wk-ease-out), transform .16s var(--wk-ease-out); } .bk-cart-toast svg { color: #8fe0a6; } .bk-cart-toast.is-on { opacity: 1; transform: translate(-50%, 0); transition: opacity .2s var(--wk-ease-in), transform .2s var(--wk-ease-in); } /* --------------------------------------------------------------------------- Positionen als weiße Kärtchen ------------------------------------------------------------------------- */ .bk-cart-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 0; } .bk-cart-it { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; margin-bottom: 10px; background: #fff; border-radius: var(--wk-radius-card); box-shadow: var(--wk-card-shadow); transition: opacity .18s var(--wk-ease-out), transform .18s var(--wk-ease-out); } /* wird vom JS beim Löschen gesetzt, bevor neu gerendert wird */ .bk-cart-it[data-removing="true"] { opacity: 0; transform: translateX(14px); } /* zuletzt gelegter Artikel leuchtet nach dem Hinzufügen kurz auf */ .bk-cart-it.is-flash { animation: bk-cart-flash 1.2s ease-out; } @keyframes bk-cart-flash { 0% { background: var(--wk-primary-s); } 100% { background: #fff; } } .bk-cart-ph { width: 72px; height: 72px; border-radius: 12px; background: var(--wk-surface); overflow: hidden; } .bk-cart-ph img, .bk-cart-ph picture, .bk-cart-ph a { display: block; width: 100%; height: 100%; } .bk-cart-ph img { object-fit: cover; background: #fff; } .bk-cart-it-main { min-width: 0; display: flex; flex-direction: column; } .bk-cart-it-n { font-size: 15px; font-weight: 700; color: var(--wk-text); line-height: 1.35; } .bk-cart-it-n a { color: inherit; text-decoration: none; } .bk-cart-it-n a:hover { color: var(--wk-accent); text-decoration: none; } .bk-cart-it-s, .bk-cart-it-meta { font-size: 12.5px; color: var(--wk-muted); margin-top: 2px; font-variant-numeric: tabular-nums; } .bk-cart-it-p { margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--wk-text); font-variant-numeric: tabular-nums; } /* Mengensteller und Löschen in einer Zeile */ .bk-cart-it-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .bk-cart-it-qty { font-size: 12.5px; color: var(--wk-muted); } .bk-cart-qty { --h: 32px; display: inline-flex; align-items: center; border-radius: min(var(--wk-radius-max), calc(var(--h) * var(--wk-radius-ratio))); background: var(--wk-surface); overflow: hidden; flex: 0 0 auto; } .bk-cart-qty button { width: var(--h); height: var(--h); display: grid; place-items: center; background: none; border: 0; color: var(--wk-muted); cursor: pointer; transition: background .15s, color .15s; } .bk-cart-qty button:hover:not(:disabled) { background: var(--wk-text); color: #fff; } .bk-cart-qty button:disabled { opacity: .35; cursor: default; } .bk-cart-qty button:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: -2px; } .bk-cart-qty span { min-width: 34px; height: var(--h); display: grid; place-items: center; padding: 0 4px; font-size: 13.5px; font-weight: 800; color: var(--wk-text); font-variant-numeric: tabular-nums; } .bk-cart-qty span.is-bump { animation: bk-cart-bump .18s var(--wk-ease-in); } @keyframes bk-cart-bump { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } } .bk-cart-rm { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; background: none; border: 0; font-size: 12.5px; color: var(--wk-muted); cursor: pointer; transition: color .15s; } .bk-cart-rm:hover { color: var(--wk-primary-h); text-decoration: underline; } .bk-cart-rm:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; } /* Versand, Zuschläge, Kupons */ .bk-cart-extra { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: #fff; box-shadow: var(--wk-card-shadow); font-size: 13.5px; color: var(--wk-text); } .bk-cart-extra span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; } .bk-cart-empty { padding: 56px 0; text-align: center; color: var(--wk-faint); } .bk-cart-empty p { margin: 14px 0 0; font-size: 14.5px; color: var(--wk-muted); } .bk-cart-ghost { display: inline-flex; align-items: center; justify-content: center; --h: 46px; margin-top: 22px; min-height: var(--h); padding: 10px 24px; border-radius: min(var(--wk-radius-max), calc(var(--h) * var(--wk-radius-ratio))); border: 1.5px solid var(--wk-accent); background: #fff; color: var(--wk-accent); font-size: 14.5px; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; } .bk-cart-ghost:hover { background: var(--wk-accent); color: #fff; } .bk-cart-ghost:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; } /* --------------------------------------------------------------------------- Fußzeile ------------------------------------------------------------------------- */ .bk-cart-ft { flex: 0 0 auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); } /* Gratisversand: weiße Karte mit kleiner Zeile, Text und Balken mit Pfote */ .bk-cart-free { padding: 14px 16px; margin-bottom: 12px; border-radius: var(--wk-radius-card); background: #fff; box-shadow: var(--wk-card-shadow); transition: background .4s var(--wk-ease-in); } .bk-cart-free-eye { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wk-bar-ink); } .bk-cart-free-t { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wk-text); } .bk-cart-free-t b { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .bk-cart-free-bar { position: relative; height: 10px; margin-top: 12px; border-radius: 5px; background: var(--wk-surface); /* kein overflow:hidden, die Pfote ragt über den Balken hinaus */ } .bk-cart-free-f { position: relative; height: 100%; min-width: 10px; max-width: 100%; border-radius: 5px; background: var(--wk-bar); color: var(--wk-bar-ink); /* Farbe der Pfote */ transition: width .5s var(--wk-ease-in), background .4s var(--wk-ease-in); } /* Marke am Ende des Balkens: weiße Scheibe (::after) mit Pfote (::before). Die Pfote ist eine Maske in currentColor, damit sie jeder eingestellten Balkenfarbe folgt, ohne je Farbe ein eigenes Bild zu brauchen. */ .bk-cart-free-f::after { content: ""; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 11px; background: #fff; box-shadow: 0 1px 4px rgba(60, 40, 20, .25); transition: background .4s var(--wk-ease-in); } .bk-cart-free-f::before { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); z-index: 1; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* Schwelle erreicht: grün, Pfote wird zum Haken */ .bk-cart .bk-cart-free.is-done { background: var(--wk-ok-s); } .bk-cart .bk-cart-free.is-done .bk-cart-free-eye { color: var(--wk-ok); } .bk-cart .bk-cart-free.is-done .bk-cart-free-t { color: var(--wk-ok); font-weight: 700; } .bk-cart .bk-cart-free.is-done .bk-cart-free-bar { background: #fff; } .bk-cart .bk-cart-free.is-done .bk-cart-free-f { background: var(--wk-ok); color: #fff; } .bk-cart .bk-cart-free.is-done .bk-cart-free-f::after { background: var(--wk-ok); } .bk-cart .bk-cart-free.is-done .bk-cart-free-f::before { -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* Hinweistext des Shops, wenn kein Balken aktiv ist */ .bk-cart-ship { margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: var(--wk-card-shadow); font-size: 12.5px; line-height: 1.5; color: var(--wk-text); } .bk-cart-ship a { color: var(--wk-accent); } .bk-cart-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 0 6px; font-size: 15px; font-weight: 800; color: var(--wk-text); } .bk-cart-sum b { font-size: 26px; font-weight: 900; letter-spacing: -.025em; font-variant-numeric: tabular-nums; } .bk-cart-note { margin: 2px 0 12px; padding: 0 6px; font-size: 11.5px; line-height: 1.5; color: var(--wk-muted); } .bk-cart-note a { color: var(--wk-accent); } .bk-cart-sum + .bk-cart-cta { margin-top: 12px; } .bk-cart-cta { display: flex; align-items: center; justify-content: center; --h: 56px; width: 100%; min-height: var(--h); padding: 12px 20px; border-radius: min(var(--wk-radius-max), calc(var(--h) * var(--wk-radius-ratio))); background: var(--wk-primary); color: #fff; font-size: 16.5px; font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 10px 24px -10px var(--wk-cta-shadow); transition: background .2s var(--wk-ease-in), transform .1s; } .bk-cart-cta:hover, .bk-cart-cta:focus { background: var(--wk-primary-h); color: #fff; text-decoration: none; } .bk-cart-cta:active { transform: scale(.99); } .bk-cart-cta:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 3px; } .bk-cart-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: var(--wk-muted); } .bk-cart-trust svg { color: var(--wk-ok); flex: 0 0 auto; } .bk-cart-alt { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--wk-muted); text-decoration: none; } .bk-cart-alt:hover { color: var(--wk-text); text-decoration: underline; } /* --------------------------------------------------------------------------- Ladezustand während eines Hintergrund-POST ------------------------------------------------------------------------- */ .bk-cart[data-busy="true"] .bk-cart-body, .bk-cart[data-busy="true"] .bk-cart-ft { opacity: .5; pointer-events: none; transition: opacity .2s ease; } /* Wenn der Warenkorb offen ist, soll die Seite dahinter nicht mitscrollen. */ body.bk-cart-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .bk-cart-ov, .bk-cart-panel, .bk-cart-it, .bk-cart-free, .bk-cart-free-f, .bk-cart-toast, .bk-cart-qty span { transition: none !important; animation: none !important; } }