diff --git a/templates/roll_calculator.html b/templates/roll_calculator.html
index 5463d08..72e33d2 100644
--- a/templates/roll_calculator.html
+++ b/templates/roll_calculator.html
@@ -289,6 +289,23 @@
       border-left: 4px solid #2BAC70;
     }
     .lo-results-summary h4 { margin-top: 0; color: #333; font-size: 14px; margin-bottom: 12px; }
+    .lo-summary-section {
+      padding-top: 12px;
+      margin-top: 12px;
+      border-top: 1px solid #e6ece9;
+    }
+    .lo-summary-section:first-of-type {
+      padding-top: 0;
+      margin-top: 0;
+      border-top: 0;
+    }
+    .lo-summary-section-title {
+      margin-bottom: 8px;
+      color: #1F5438;
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
     .lo-summary-item {
       display: flex;
       justify-content: space-between;
@@ -415,6 +432,11 @@
     }
     .lo-sideview-section.show { display: block; }
     .lo-sideview-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #333; }
+    .lo-sideview-context {
+      margin: -6px 0 12px;
+      color: #666;
+      font-size: 12px;
+    }
     .lo-sideview-wrap {
       background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
     }
@@ -827,32 +849,43 @@
 
         <div class="lo-results-summary">
           <h4>Capacity Summary:</h4>
-          <div class="lo-summary-item lo-governing-summary">
-            <span><strong>Governing Constraint:</strong></span>
-            <span id="limitingFactorValue" class="lo-value-highlight">–</span>
-          </div>
-          <div class="lo-summary-item">
-            <span><strong>Total Rolls:</strong></span>
-            <div style="text-align:right;">
-              <span id="totalRollsValue" class="lo-value-highlight">–</span>
-              <small id="rollsDetailValue" style="display:block;color:#888;"></small>
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Governing Constraint</div>
+            <div class="lo-summary-item lo-governing-summary">
+              <span><strong>Constraint:</strong></span>
+              <span id="limitingFactorValue" class="lo-value-highlight">–</span>
             </div>
           </div>
-          <div class="lo-summary-item">
-            <span><strong>Utilization:</strong></span>
-            <div class="lo-util-group">
-              <div>Weight: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
-              <div>Volume: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
-              <div>Product: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
+
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Transport Result</div>
+            <div class="lo-summary-item">
+              <span><strong>Total Rolls:</strong></span>
+              <div style="text-align:right;">
+                <span id="totalRollsValue" class="lo-value-highlight">–</span>
+                <small id="rollsDetailValue" style="display:block;color:#888;"></small>
+              </div>
+            </div>
+            <div class="lo-summary-item">
+              <span><strong>Utilization:</strong></span>
+              <div class="lo-util-group">
+                <div>Weight Utilization: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
+                <div>Volume Utilization: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
+                <div>Transported Product Area: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
+              </div>
             </div>
           </div>
-          <div class="lo-summary-item">
-            <span><strong>Remaining Capacity:</strong></span>
-            <div class="lo-util-group">
-              <div>Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
-              <div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
-              <div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
-              <div id="capacityInterpretationValue" class="lo-reserve-note"></div>
+
+          <div class="lo-summary-section">
+            <div class="lo-summary-section-title">Remaining Capacity</div>
+            <div class="lo-summary-item">
+              <span><strong>Remaining Capacity:</strong></span>
+              <div class="lo-util-group">
+                <div>Remaining Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
+                <div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
+                <div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
+                <div id="capacityInterpretationValue" class="lo-reserve-note"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -863,8 +896,8 @@
             <thead>
               <tr>
                 <th>Constraint</th>
-                <th>Theoretical Max Rolls</th>
-                <th>Theoretical Total Weight</th>
+                <th>Max Rolls</th>
+                <th>Total Weight</th>
                 <th>Transported Area [m²]</th>
                 <th>Payload Util. %</th>
               </tr>
@@ -875,6 +908,7 @@
 
         <div class="lo-sideview-section" id="sideViewSection">
           <h4>🔍 Front View – Cross-Section</h4>
+          <p class="lo-sideview-context">Cross-section of the actual loading configuration.</p>
           <div class="lo-sideview-wrap">
             <svg id="sideViewSVG" width="100%" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
               <text x="400" y="130" text-anchor="middle" fill="#aaa" font-size="14">Run a calculation to see the side view.</text>
@@ -1382,9 +1416,9 @@ class LoadOptimizerUI {
     const unusedPayload = Math.max(0, 100 - res.utilizationWeight);
     const unusedVolume = Math.max(0, 100 - res.utilizationVolume);
     const interpretations = {
-      geometry: 'Payload remains available; no additional roll fits geometrically.',
-      weight: 'Payload limit is reached before volume or geometry.',
-      volume: 'Volume capacity is reached before payload or geometry.'
+      geometry: 'Geometry prevents loading additional rolls although payload capacity remains available.',
+      weight: 'Payload limit is reached before the available geometry or volume is fully used.',
+      volume: 'Volume capacity is reached before payload or geometric capacity is fully used.'
     };
     document.getElementById('limitingFactorValue').textContent = res.limiting.name;
     document.getElementById('totalRollsValue').textContent     = res.finalRolls;