From 0521b4399fbee319c799c69b9baebfc33ae70e1c Mon Sep 17 00:00:00 2001
From: Thomas Bartelt <tb@tel.bar>
Date: Fri, 18 Sep 2026 19:55:37 +0200
Subject: [PATCH] feat(warenkorb-neu): Zeile zweistufig (Bild+Name /
 Stepper+Summe) fuer die 722px-Spalte, Gewaehrleistungs-Label ueber dem
 Summenkasten, Stapeln per Container-Query

Bild label-gewaehrleistung.webp liegt in media/images (gitignored), auf Dev und Live kopiert.
---
 .../templates/content_shoppingcart_neu.tpl    | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/web/intelectra_shop/themes/theme2/templates/content_shoppingcart_neu.tpl b/web/intelectra_shop/themes/theme2/templates/content_shoppingcart_neu.tpl
index 2eb155f..db87e80 100644
--- a/web/intelectra_shop/themes/theme2/templates/content_shoppingcart_neu.tpl
+++ b/web/intelectra_shop/themes/theme2/templates/content_shoppingcart_neu.tpl
@@ -67,7 +67,12 @@
 			<div class="wk-continue"><a href="/">&larr; Weiter einkaufen</a></div>
 		</div>
 
-		<aside class="wk-box">
+		<aside class="wk-side">
+			<a class="wk-label" href="{$THEME_DIR}/media/images/label-gewaehrleistung.webp" target="_blank" rel="noopener" title="Gesetzliche Gew&auml;hrleistung: das ganze Label &ouml;ffnen">
+				<img src="{$THEME_DIR}/media/images/label-gewaehrleistung.webp" alt="Gesetzliche Gew&auml;hrleistung" />
+				<span>Mindestens zwei Jahre gesetzliche Gew&auml;hrleistung &middot; Details</span>
+			</a>
+			<div class="wk-box">
 			<div class="wk-line"><span>Zwischensumme</span><span>{$shoppingcart.shown_price_sum|number_format:"2":",":"."} &euro;</span></div>
 			{foreach $shoppingcart.tax_values as $taxRate => $taxData}
 				<div class="wk-line wk-muted"><span>{if $shoppingcartVATUsage}inkl. MwSt.{else}zzgl. MwSt.{/if} {$taxRate} %</span><span>{$taxData['vat']|number_format:"2":",":"."} &euro;</span></div>
@@ -90,6 +95,7 @@
 			{/if}
 			<button type="button" id="update_cart" class="wk-btn wk-btn-ghost">Mengen aktualisieren</button>
 			<div class="wk-trust wk-muted">Sichere Zahlung &middot; Versand aus Deutschland</div>
+			</div>
 		</aside>
 	</form>
 	{else}
@@ -116,13 +122,24 @@
 .wk-count { font-size: 14px; font-weight: 400; color: #777; margin-left: 8px; }
 .wk-muted { color: #777; font-weight: 400; }
 
-.wk-grid { display: flex; gap: 28px; align-items: flex-start; }
+.wk { container-type: inline-size; }
+.wk-grid { display: flex; gap: 20px; align-items: flex-start; }
 .wk-list { flex: 1 1 auto; min-width: 0; }
-.wk-box  { flex: 0 0 300px; position: sticky; top: 16px; background: #fafafa; border: 1px solid #e3e3e3; border-radius: 8px; padding: 18px; }
+.wk-side { flex: 0 0 260px; position: sticky; top: 16px; }
+.wk-box  { background: #fafafa; border: 1px solid #e3e3e3; border-radius: 8px; padding: 16px; }
+/* Gewaehrleistungs-Label ueber dem Kasten: Kopf des EU-Labels als Badge, Klick oeffnet das ganze Label */
+.wk-label { display: block; margin-bottom: 12px; border: 1px solid #e3e3e3; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none; color: #333; }
+.wk-label img { display: block; width: 100%; height: 78px; object-fit: cover; object-position: top; }
+.wk-label span { display: block; font-size: 12px; padding: 7px 10px; color: #555; }
+.wk-label:hover span { color: #FF6700; }
 
-.wk-row { display: grid; grid-template-columns: 84px 1fr auto auto 28px; gap: 14px; align-items: center;
-          padding: 14px 0; border-bottom: 1px solid #e6e6e6; }
-.wk-img img { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 6px; display: block; }
+/* Zeile zweistufig (Tom, 18.09.): oben Bild + Name/Nr, darunter Stepper + Zeilensumme.
+   Die Inhaltsspalte des Themes ist nur 722px breit, fuenf Spalten nebeneinander tragen da nicht. */
+.wk-row { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "img info del" "img qty sum";
+          column-gap: 14px; row-gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e6e6e6; }
+.wk-img { grid-area: img; align-self: start; } .wk-info { grid-area: info; } .wk-del { grid-area: del; }
+.wk-qty { grid-area: qty; justify-self: start; } .wk-sum { grid-area: sum; }
+.wk-img img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 6px; display: block; }
 .wk-name { font-weight: 700; color: #222; text-decoration: none; }
 .wk-name:hover { color: #FF6700; }
 .wk-variant, .wk-nr, .wk-unit { color: #666; font-size: 13px; margin-top: 2px; }
@@ -168,13 +185,15 @@
 .wk-quick-title { font-weight: 700; margin-bottom: 6px; }
 .wk-quick input { width: 100%; max-width: 480px; height: 38px; border: 1px solid #cfcfcf; border-radius: 6px; padding: 0 10px; font: inherit; }
 
-@media (max-width: 760px) {
+@container (max-width: 640px) {
 	.wk-grid { display: block; }
-	.wk-box { position: static; margin-top: 20px; }
-	.wk-row { grid-template-columns: 64px 1fr 28px; grid-template-areas: "img info del" "img qty sum"; }
-	.wk-img { grid-area: img; } .wk-info { grid-area: info; } .wk-del { grid-area: del; }
-	.wk-qty { grid-area: qty; justify-self: start; } .wk-sum { grid-area: sum; }
-	.wk-img img { width: 64px; height: 64px; }
+	.wk-side { position: static; margin-top: 20px; }
+}
+@media (max-width: 560px) {
+	.wk-grid { display: block; }
+	.wk-side { position: static; margin-top: 20px; }
+	.wk-row { grid-template-columns: 56px 1fr auto; }
+	.wk-img img { width: 56px; height: 56px; }
 }
 </style>
 <script type="text/javascript">