/* Zweck: Enthält ausschließlich Styles für die Warenkorbseite (`html/cart.html`). Verantwortung: Gestaltet Darstellung der Warenkorbliste, Summenübersicht und Interaktionsbereiche. Einbindung: In `html/cart.html` im `` nach den globalen Styles eingebunden. Zusammenarbeit: - Nutzt Layout- und Komponenten-Styles aus `../base.css`, `../layout.css` und `../components.css`. - Definiert seiten-spezifische Anpassungen für Warenkorb-Elemente. */ .cart { padding: 1.5rem 0 2rem; } .cart-items { display: grid; gap: 1rem; margin-top: 1rem; } .cart__summary-wrap { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .cart-summary { margin-top: 0; } .cart-delivery-note { margin: 0; padding: 0 0.15rem; font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: #111111; } .cart .container { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 1rem; align-items: start; } .cart .container > h1 { grid-column: 1 / -1; margin: 0; } .cart-item { border: 1px solid #dcdcdc; border-radius: 0.8rem; background: #ffffff; overflow: hidden; display: grid; grid-template-columns: 180px 1fr; } .cart-item__image { width: 100%; height: 100%; min-height: 180px; object-fit: cover; background: #f4f4f4; } .cart-item__image-link { display: block; text-decoration: none; } .cart-item__content { padding: 0.9rem 1rem; display: grid; gap: 0.45rem; } .cart-item__title { margin: 0; font-size: 1.15rem; color: #111111; } .cart-item__title-link { color: inherit; text-decoration: none; } .cart-item__title-link:hover, .cart-item__title-link:focus-visible { color: #8b5e3c; text-decoration: underline; outline: none; } .cart-item__meta { margin: 0; color: #444444; } .cart-item__line-total { margin: 0.15rem 0 0; color: #111111; } .cart-price-inline { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.55rem; direction: ltr; unicode-bidi: isolate; } .cart-price-inline__original { position: relative; display: inline-block; color: #111111; text-decoration: none; font-weight: 600; font-size: 0.92em; } .cart-price-inline__original::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(calc(-50% + 0.12em)); background: #c62828; border-radius: 1px; pointer-events: none; } .cart-price-inline__sale { font-weight: 700; color: #111111; } .cart-item__actions { margin-top: 0.25rem; display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .cart-item__qty-btn { width: 2rem; height: 2rem; border: 1px solid #cfcfcf; border-radius: 999px; background: #ffffff; color: #111111; font-weight: 700; cursor: pointer; } .cart-item__qty-btn:hover { background: #f4f4f4; } .cart-item__qty-btn:disabled { opacity: 0.45; cursor: not-allowed; } .cart-item__qty-value { min-width: 1.5rem; text-align: center; font-weight: 700; color: #111111; } .cart-item__remove-btn { min-height: 2rem; padding: 0.35rem 0.7rem; border: 1px solid #d7d7d7; border-radius: 999px; background: #ffffff; color: #333333; font-weight: 600; cursor: pointer; } .cart-item__remove-btn:hover { background: #f4f4f4; border-color: #b9b9b9; } .cart-summary-card { border: 1px solid #dcdcdc; border-radius: 0.8rem; background: #ffffff; padding: 1rem; display: grid; gap: 0.8rem; } .cart-summary__title { margin: 0; font-size: 1.08rem; color: #111111; } .cart-summary__rows { margin: 0; padding: 0; display: grid; gap: 0.5rem; } .cart-summary__row { display: flex; justify-content: space-between; gap: 0.75rem; color: #444444; } .cart-summary__row dt, .cart-summary__row dd { margin: 0; } .cart-summary__row--total { padding-top: 0.6rem; border-top: 1px solid #e8e8e8; font-weight: 700; color: #111111; } .cart-summary__checkout-btn { width: 100%; min-height: 2.9rem; border-radius: 999px; border: 1px solid #c9a84c; color: #1a1613; background: #c9a84c; text-decoration: none; font-weight: 700; } .cart-summary__hint { margin: 0; color: #555555; } .cart-item--empty { grid-template-columns: 1fr; padding: 1rem; gap: 0.6rem; } .cart-item--empty h2, .cart-item--empty p { margin: 0; } .cart-empty-link { width: fit-content; min-height: 2.6rem; padding: 0.65rem 1rem; border-radius: 999px; border: 1px solid #c9a84c; color: #1a1613; background: #c9a84c; text-decoration: none; font-weight: 700; } .cart-items__footer { display: flex; justify-content: flex-start; } .cart-continue-link { min-height: 2.8rem; padding: 0.65rem 1.15rem; border-radius: 999px; border: 1px solid #8b5e3c; color: #8b5e3c; background: #ffffff; text-decoration: none; font-weight: 700; } .cart-continue-link:hover, .cart-continue-link:focus-visible { background: #f2ead9; outline: none; } @media (max-width: 900px) { .cart .container { grid-template-columns: 1fr; } .cart__summary-wrap { margin-top: 0; } .cart-item { grid-template-columns: 1fr; } .cart-item__image { min-height: 220px; } }