Produktseite: Bild links, Angaben rechts im Modus „neu“

Bilder und Angaben stehen nebeneinander, auf schmalen Bildschirmen untereinander. Der Produkttitel steht in der rechten Spalte.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2 files changed, 30 insertions, 16 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 39b1ba2..94cbf88 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -317,6 +317,11 @@
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_produkt_preishinweis) { font-size:0.75em; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_oldprice), .product_wrap :where(.productdetails .oldprice) { text-decoration:line-through; }
 .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_price) { font-weight:bold; }
+.wpsg-product :where(.wpsg-product__main) { display:flex; flex-wrap:wrap; align-items:flex-start; gap:calc(var(--wpsg-gap) * 2.5); }
+.wpsg-product :where(.wpsg-product__media) { flex:1 1 22rem; min-width:0; float:none; margin:0; }
+.wpsg-product :where(.wpsg-product__media .wpsg_produkt_produktbilder) { max-width:none; }
+.wpsg-product :where(.wpsg-product__details) { flex:1 1 20rem; min-width:0; }
+.wpsg-product :where(.wpsg-product__details .wpsg_producttitle) { margin-top:0; }
 .wpsg-product :where(.wpsg-product__offer) { display:flex; flex-direction:column; gap:0.25em; margin:0.75em 0; }
 .wpsg-product :where(.wpsg-product__price) { font-size:1.75em; font-weight:700; line-height:1.2; }
 .wpsg-product :where(.wpsg-product__price .wpsg_mod_productview_oldprice) { margin-left:0.4em; font-size:0.6em; font-weight:400; opacity:var(--wpsg-muted-opacity); }
diff --git a/views/produktseite/produkt.phtml b/views/produktseite/produkt.phtml
index 13e6b8a..09140d0 100644
--- a/views/produktseite/produkt.phtml
+++ b/views/produktseite/produkt.phtml
@@ -26,21 +26,6 @@
 	<input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" />
 	<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" />
 
-	<div class="wpsg_produkt wpsg_product_name">
-
-		<?php if (!$this->titleDisplayed) { ?>
-			<h1 class="wpsg_producttitle"><?php echo $oProduct->getProductName(); ?></h1>
-			<?php if (($this->view['data']['detailname']??'') !== '' && $oProduct->getProductName() !== $this->view['data']['detailname']) { ?>
-				<h2 class="wpsg_productdetailtitle"><?php echo wp_kses_post($this->view['data']['detailname']); ?></h2>
-			<?php } ?>
-		<?php }  ?>
-
-		<?php $this->callMods('product_top_afterheadline', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?>
-
-	</div>
-
-	<?php $this->callMods('product_top', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?>
-
 	<div itemscope itemtype="http://schema.org/Product" class="wpsg_produkt wpsg_produkt_<?php echo $this->view['data']['id']; ?>">
 
 		<meta itemprop="name" content="<?php echo wpsg_hspc($oProduct->getProductName()); ?>" />
@@ -52,6 +37,9 @@
 			<?php } ?>
 		<?php } ?>
 
+		<?php /* Zweispaltig: Bilder links, Angaben rechts; schmal untereinander (Punkt 8.1) */ ?>
+		<div class="wpsg-product__main">
+
 		<?php /* Block für die Produktbilder START */ ?>
 		<?php
 
@@ -64,7 +52,7 @@
 		?>
 
 		<?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { ?>
-		<div class="wpsg_productimages">
+		<div class="wpsg_productimages wpsg-product__media">
 
 			<div class="wpsg_produkt_produktbilder">
 
@@ -89,6 +77,23 @@
 		<?php } ?>
 		<?php /* Block für die Produktbilder ENDE */ ?>
 
+		<div class="wpsg-product__details">
+
+			<div class="wpsg_produkt wpsg_product_name">
+
+				<?php if (!$this->titleDisplayed) { ?>
+					<h1 class="wpsg_producttitle"><?php echo $oProduct->getProductName(); ?></h1>
+					<?php if (($this->view['data']['detailname']??'') !== '' && $oProduct->getProductName() !== $this->view['data']['detailname']) { ?>
+						<h2 class="wpsg_productdetailtitle"><?php echo wp_kses_post($this->view['data']['detailname']); ?></h2>
+					<?php } ?>
+				<?php }  ?>
+
+				<?php $this->callMods('product_top_afterheadline', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?>
+
+			</div>
+
+			<?php $this->callMods('product_top', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?>
+
 		<?php /* Preis, Preiszeile und Lieferzeit (Punkt 8.5) START */ ?>
 		<div class="wpsg-product__offer">
 
@@ -351,6 +356,10 @@
 		<?php } ?>
 		<?php /* Artikelnummer und Produktcodes ENDE */ ?>
 
+		</div>
+		</div>
+		<?php /* Zweispaltig ENDE */ ?>
+
 		<?php /* Langtext, Zusätzliche Informationen und Lieferumfang je als Abschnitt mit H2 (Punkt 8.7) START */ ?>
 		<?php foreach (['longdescription' => __('Beschreibung', 'wpsg'), 'moreinfos' => __('Zusätzliche Informationen', 'wpsg'), 'moreinfos2' => __('Lieferumfang', 'wpsg')] as $field => $title) { ?>
 		<?php if (trim((string)($this->view['data'][$field]??'')) === '') continue; $section_id = 'wpsg-product-'.$field.'-'.$this->getTemplateIndex(); ?>