style: use responsive desktop workspace

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 —