From bf67396f949dc4b2cb146ca4f24e08d20d426fcd Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes-agent@deploybar.de>
Date: Mon, 3 Aug 2026 15:00:13 +0000
Subject: [PATCH] style: use responsive desktop workspace

---
 index.html                      | 47 +++++++++++++++++++++++++++++++++
 tests/responsive-layout.test.js | 22 +++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 tests/responsive-layout.test.js

diff --git a/index.html b/index.html
index 50916f9..7fd65a5 100644
--- a/index.html
+++ b/index.html
@@ -258,12 +258,50 @@ tr.tot td.n{color:var(--cyan);text-shadow:0 0 12px rgba(0,240,255,.3);font-size:
 footer{color:var(--muted);font-size:11.5px;line-height:1.6;margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
 footer b{color:var(--txt)}
 
+/* ---------- Responsive Desktop-Arbeitsbereich ---------- */
+.workspace{display:block}
+.input-stack,.output-stack{min-width:0}
+@media(max-width:1049px){
+  .workspace{display:block}
+}
+@media(min-width:1050px){
+  .wrap{max-width:1320px;padding:0 24px}
+  header{
+    display:grid;grid-template-columns:minmax(0,1fr) auto;
+    grid-template-areas:"brand status" "tag status";
+    column-gap:32px;align-items:end;padding:30px 0 20px
+  }
+  .brand{grid-area:brand;font-size:48px}
+  .tag{grid-area:tag}
+  .status{grid-area:status;align-self:center;justify-self:end;margin-top:0}
+  .quick-summary{
+    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
+    gap:10px;overflow:visible;margin:0 0 18px;padding:10px;
+    border:1px solid var(--line);background:rgba(7,8,11,.94)
+  }
+  body[data-ux="simple"] .quick-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
+  .quick-summary span{min-width:0;white-space:normal;text-align:center;line-height:1.3}
+  .workspace{
+    display:grid;
+    grid-template-columns:minmax(0,1fr) minmax(430px,.95fr);
+    gap:18px;align-items:start
+  }
+  body[data-ux="simple"] .workspace{
+    grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr)
+  }
+  .workspace .panel{padding:19px 18px 21px;margin-bottom:18px}
+  .output-stack .hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
+  .output-stack .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
+  .output-stack .btn{width:100%}
+}
+
 @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
 .printonly{display:none}
 @media print{
   @page{size:A4;margin:15mm}
   body{background:#fff;color:#000;background-image:none;font-size:11pt;padding:0}
   .wrap{max-width:none;padding:0}
+  .workspace{display:block}
   header,.actions,.noprint,#countdown{display:none!important}
   .printonly{display:block}
   #printhead{margin:0 0 8mm;border-bottom:2px solid #000;padding-bottom:4mm}
@@ -309,6 +347,9 @@ footer b{color:var(--txt)}
 
 <div class="quick-summary noprint" id="quickSummary" aria-label="Kurzüberblick"></div>
 
+<main class="workspace">
+<div class="input-stack">
+
 <section class="panel noprint">
   <p class="ph"><b>00 // Schnellstart</b><span>Einfach oder Profi</span></p>
   <div class="ctl">
@@ -473,6 +514,9 @@ footer b{color:var(--txt)}
   </div>
 </section>
 
+</div>
+<div class="output-stack">
+
 <!-- WARNUNGEN -->
 <div class="warns" id="warns"></div>
 
@@ -508,6 +552,9 @@ footer b{color:var(--txt)}
   <button type="button" class="btn" id="reset">Zurücksetzen</button>
 </div>
 
+</div>
+</main>
+
 <footer>
   <b>Hinweis:</b> Die Hefemenge wird über ein Q10-Modell aus Zeit und Temperatur geschätzt.
   Teigtemperatur, Hefevitalität und Schwankungen im Raum lassen sich nicht in eine Formel pressen —
diff --git a/tests/responsive-layout.test.js b/tests/responsive-layout.test.js
new file mode 100644
index 0000000..08cf77a
--- /dev/null
+++ b/tests/responsive-layout.test.js
@@ -0,0 +1,22 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+
+assert.match(html, /<main class="workspace">[\s\S]*<div class="input-stack">/,
+  'Desktop-Arbeitsbereich mit Eingabespalte fehlt');
+assert.match(html, /<div class="output-stack">[\s\S]*06 \/\/ Rezept[\s\S]*07 \/\/ Zeitplan/,
+  'Rezept und Zeitplan müssen in der Ausgabespalte liegen');
+assert.match(html, /@media\s*\(min-width:\s*1050px\)[\s\S]*?\.wrap\s*\{[^}]*max-width:\s*1320px/,
+  'Breiter Desktop-Container fehlt');
+assert.match(html, /@media\s*\(min-width:\s*1050px\)[\s\S]*?\.workspace\s*\{[^}]*display:\s*grid[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s+minmax\(430px,\s*\.95fr\)/,
+  'Responsive Zweispaltenstruktur für Desktop fehlt');
+assert.match(html, /@media\s*\(min-width:\s*1050px\)[\s\S]*?\.quick-summary\s*\{[^}]*grid-template-columns:\s*repeat\(5,\s*minmax\(0,\s*1fr\)\)/,
+  'Desktop-Profiübersicht muss die Breite in fünf Spalten nutzen');
+assert.match(html, /body\[data-ux="simple"\]\s+\.quick-summary\s*\{[^}]*grid-template-columns:\s*repeat\(4,\s*minmax\(0,\s*1fr\)\)/,
+  'Desktop-Einfachübersicht muss ihre vier Werte gleichmäßig verteilen');
+assert.match(html, /@media\s*\(max-width:\s*1049px\)[\s\S]*?\.workspace\s*\{[^}]*display:\s*block/,
+  'Tablet und Mobile müssen einspaltig bleiben');
+
+console.log('responsive desktop layout tests: OK');