style: use responsive desktop workspace

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');