marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(specs): add C3 variety page rework mockups and V1 implementation spec

Browse Source 
Three mockup variations (c3-variety-rework.html) for /planner/variety page,
plus detailed implementation spec for the chosen V1 "Erweiterte Karten" approach:
recipe names + swap links inside warning cards, minimal layout changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-09 16:31:14 +02:00
parent bd1604fc1d
commit e3066ec3e5
2 changed files with 1415 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

625
specs/frontend/c3-variety-rework-v1-spec.html Normal file
View File

@@ -0,0 +1,625 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Recipe App — C3 Abwechslungs-Analyse · Implementierungsspezifikation V1</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<style>
:root{
--color-page:#FAFAF7;--color-surface:#F5F4EE;--color-subtle:#EDECEA;
--color-border:#D8D7D0;--color-text-muted:#6B6A63;--color-text:#1C1C18;
--green-tint:#E8F5EA;--green-light:#AEDCB0;--green:#3D8C4A;--green-dark:#2E6E39;
--yellow-tint:#FDF6D8;--yellow-light:#F9E08A;--yellow:#F2C12E;--yellow-dark:#C49610;--yellow-text:#8A6800;
--blue-tint:#E6F1FB;--blue-light:#A4CFF4;--blue:#2D7DD2;--blue-dark:#185FA5;
--purple-tint:#EEEDFE;--purple-light:#CECBF6;--purple:#534AB7;--purple-dark:#3C3489;
--orange-tint:#FEF0E6;--orange:#E8862A;
--red-tint:#FDECEA;--red:#DC4C3E;--red-dark:#B03328;
--font-display:'Fraunces',Georgia,serif;--font-sans:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;
--shadow-overlay:0 8px 32px rgba(28,28,24,.12),0 2px 8px rgba(28,28,24,.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);background:#DDDBD5;color:var(--color-text);font-size:14px;line-height:1.6;}
.doc{max-width:1100px;margin:0 auto;padding:48px 40px 120px;}
.doc-header{background:var(--color-page);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:40px 40px 28px;margin:-48px -40px 48px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--color-border);}
.doc-header h1{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px;}
.doc-header p{font-size:13px;color:var(--color-text-muted);}
.doc-meta{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:right;line-height:1.9;}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:500;letter-spacing:.05em;}
.pill-ready{background:var(--green-tint);color:var(--green-dark);}
.pill-warn{background:var(--yellow-tint);color:var(--yellow-text);}
.section{margin-bottom:56px;}
.section-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:10px;border-bottom:1px solid var(--color-border);margin-bottom:20px;}
.prose{font-size:13px;color:var(--color-text-muted);line-height:1.7;max-width:720px;margin-bottom:16px;}
.prose strong{color:var(--color-text);font-weight:500;}
/* Code blocks */
.code{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 20px;font-family:var(--font-mono);font-size:12px;line-height:1.7;overflow-x:auto;margin-bottom:16px;white-space:pre;}
.code .cm{color:var(--color-text-muted);}
.code .kw{color:var(--purple);}
.code .ty{color:var(--blue-dark);}
.code .st{color:var(--green-dark);}
.code .nu{color:var(--orange);}
/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);margin-bottom:16px;}
.tbl thead tr{background:var(--color-subtle);border-bottom:1px solid var(--color-border);}
.tbl th{text-align:left;padding:10px 14px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--color-subtle);vertical-align:top;}
.tbl tr:last-child td{border-bottom:none;}
.tbl td:first-child{font-weight:500;color:var(--color-text-muted);white-space:nowrap;font-size:11px;}
.tbl td.mono{font-family:var(--font-mono);font-size:11px;}
/* Callout boxes */
.box{border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;}
.box-lbl{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.box ul{list-style:none;display:flex;flex-direction:column;gap:5px;}
.box li{font-size:12px;line-height:1.5;display:flex;align-items:flex-start;gap:8px;}
.box li::before{font-weight:500;flex-shrink:0;}
.box-y{background:var(--yellow-tint);border:1px solid var(--yellow-light);}
.box-y .box-lbl,.box-y li::before{color:var(--yellow-text);}
.box-y li{color:var(--yellow-text);}
.box-g{background:var(--green-tint);border:1px solid var(--green-light);}
.box-g .box-lbl,.box-g li::before{color:var(--green-dark);}
.box-g li{color:var(--green-dark);}
.box-b{background:var(--blue-tint);border:1px solid var(--blue-light);}
.box-b .box-lbl,.box-b li::before{color:var(--blue-dark);}
.box-b li{color:var(--blue-dark);}
.box ul.checks li::before{content:'✓';}
.box ul.arrows li::before{content:'→';}
/* State cards */
.state-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:12px;}
.state-head{background:var(--color-subtle);padding:10px 16px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;}
.state-id{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--color-text-muted);}
.state-title{font-size:13px;font-weight:500;}
.state-body{padding:14px 16px;font-size:12px;line-height:1.7;}
/* Device frames (compact preview) */
.prev-row{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px;}
.prev-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
.bp-lbl{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);}
.phone{width:300px;flex-shrink:0;background:var(--color-page);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.08);border:5px solid #1C1C18;}
.pst{padding:8px 16px 0;display:flex;justify-content:space-between;align-items:center;font-size:10px;background:var(--color-page);}
.pst b{font-weight:600;font-size:11px;}
/* Warning card preview */
.wcard{border-radius:8px;border:1px solid var(--yellow-light);background:var(--yellow-tint);overflow:hidden;margin-bottom:8px;}
.wcard:last-child{margin-bottom:0;}
.wcard-hd{padding:9px 14px;border-bottom:1px solid var(--yellow-light);}
.wcard-hd-t{font-size:13px;font-weight:500;color:var(--yellow-text);}
.wcard-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid rgba(249,224,138,.4);}
.wcard-row:last-child{border-bottom:none;}
.wcard-left{display:flex;align-items:center;gap:8px;min-width:0;}
.wcard-day{font-size:11px;font-weight:600;color:var(--yellow-text);width:20px;flex-shrink:0;}
.wcard-recipe{font-size:13px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wcard-swap{font-size:12px;font-weight:500;color:var(--yellow-text);white-space:nowrap;flex-shrink:0;}
.divider{border:none;border-top:1px solid var(--color-border);margin:40px 0;}
/* File diff style */
.diff{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:12px;line-height:1.6;overflow-x:auto;margin-bottom:16px;}
.diff-file{padding:8px 16px;background:var(--color-subtle);border-bottom:1px solid var(--color-border);font-size:11px;font-weight:500;color:var(--color-text-muted);}
.diff-body{padding:12px 16px;white-space:pre;}
.diff-add{color:var(--green-dark);background:rgba(61,140,74,.06);}
.diff-rem{color:var(--red-dark);background:rgba(220,76,62,.06);}
.diff-ctx{color:var(--color-text-muted);}
</style>
</head>
<body>
<div class="doc">
<!-- Header -->
<div class="doc-header">
<div>
<h1>C3 — Abwechslungs-Analyse · Implementierungsspezifikation</h1>
<p>Recipe App · Variation V1 "Erweiterte Karten" · Rezeptnamen + Tausch-Links in Warnkarten</p>
</div>
<div class="doc-meta">
<span class="pill pill-ready">Final</span><br>
Erstellt: 2026-04<br>
Screen: C3<br>
Bezug: c3-variety-rework.html
</div>
</div>
<!-- ── 1. ÜBERBLICK ── -->
<div class="section">
<div class="section-label">1 · Überblick</div>
<p class="prose">Die Seite <strong>/planner/variety</strong> zeigt derzeit Warnkarten mit technischen Tages-Codes (<code style="font-family:var(--font-mono);font-size:11px;">MON, WED — erwäge einen Tausch</code>). Der Planer muss manuell nachschlagen, welches Gericht an diesen Tagen eingeplant ist, und dann zurück zum Planer navigieren um es zu tauschen.</p>
<p class="prose"><strong>V1 "Erweiterte Karten"</strong> löst dies mit minimalem Umbauaufwand: Die Warnkarten erhalten eine strukturierte Zeile pro betroffenem Tag — mit Wochentag-Abkürzung, Rezeptname und direktem "Tauschen →" Link. Score-Hero, Bewertungsdetails und das Gesamt-Layout bleiben unverändert.</p>
<div class="box box-b">
<div class="box-lbl">Scope</div>
<ul class="arrows">
<li>Kein neues Backend-Endpoint — alle nötigen Daten sind bereits im weekPlan-Load vorhanden</li>
<li>Kein Layout-Umbau — nur VarietyWarningCards.svelte und die Datenvorbereitung in +page.svelte ändern sich</li>
<li>Protein-Grid und EffortBar bleiben wie bisher (Desktop)</li>
</ul>
</div>
</div>
<!-- ── 2. PROBLEM IM DETAIL ── -->
<div class="section">
<div class="section-label">2 · Aktueller Ist-Zustand und Problem</div>
<table class="tbl">
<thead><tr><th>Element</th><th>Aktuell</th><th>Soll (V1)</th></tr></thead>
<tbody>
<tr>
<td>Warnkarte Inhalt</td>
<td><code style="font-family:var(--font-mono);font-size:11px;">title + explanation (String)</code></td>
<td>Strukturierte Zeilen: Wochentag · Rezeptname · Tauschen-Link</td>
</tr>
<tr>
<td>Tages-Angabe</td>
<td>API-Code <code style="font-family:var(--font-mono);font-size:11px;">MON, WED</code></td>
<td>Abkürzung <code style="font-family:var(--font-mono);font-size:11px;">Mo, Mi</code></td>
</tr>
<tr>
<td>Rezeptname</td>
<td>Fehlt</td>
<td>Aus <code style="font-family:var(--font-mono);font-size:11px;">weekPlan.slots[].recipe.name</code></td>
</tr>
<tr>
<td>Tausch-Navigation</td>
<td>Fehlt — Nutzer verlässt die Seite manuell</td>
<td><code style="font-family:var(--font-mono);font-size:11px;">/planner?week={weekStart}&amp;swap={slotId}</code></td>
</tr>
<tr>
<td>Datenbasis</td>
<td><code style="font-family:var(--font-mono);font-size:11px;">computeWarnings()</code> aus variety.ts</td>
<td>Inline <code style="font-family:var(--font-mono);font-size:11px;">$derived.by()</code> in +page.svelte, direkt aus API-Daten</td>
</tr>
</tbody>
</table>
</div>
<!-- ── 3. DATENFLUSS ── -->
<div class="section">
<div class="section-label">3 · Datenfluss</div>
<p class="prose">Alle nötigen Daten werden bereits im Server-Load geladen. Kein neuer API-Call erforderlich.</p>
<table class="tbl">
<thead><tr><th>Quelle</th><th>Feld</th><th>Verwendung</th></tr></thead>
<tbody>
<tr>
<td>weekPlan.slots[]</td>
<td class="mono">{ id, dayOfWeek, recipe: { id, name } }</td>
<td>Aufbau der <code style="font-family:var(--font-mono);font-size:11px;">slotsByDay</code>-Map: DayCode → { slotId, recipeName }</td>
</tr>
<tr>
<td>varietyScore.tagRepeats[]</td>
<td class="mono">{ tagType, tagName, days: string[] }</td>
<td>Warnkarten für wiederholte Tags (Protein, Cuisine). days[] enthält API-Codes: "MON", "TUE" …</td>
</tr>
<tr>
<td>varietyScore.ingredientOverlaps[]</td>
<td class="mono">{ ingredientName, days: string[] }</td>
<td>Warnkarten für Zutaten-Überschneidungen</td>
</tr>
<tr>
<td>varietyScore.duplicatesInPlan[]</td>
<td class="mono">string[] (Rezeptnamen)</td>
<td>Warnkarte: "X doppelt geplant". Alle Slots mit diesem Rezeptnamen liefern die Items.</td>
</tr>
<tr>
<td>data.weekStart</td>
<td class="mono">string (YYYY-MM-DD)</td>
<td>Swap-URL-Parameter</td>
</tr>
</tbody>
</table>
<p class="prose">Tag-Code → Abkürzung Mapping (konstant):</p>
<div class="code"><span class="cm">// Day code → German short label</span>
<span class="kw">const</span> DAY_SHORT: Record&lt;<span class="ty">string</span>, <span class="ty">string</span>&gt; = {
MON: <span class="st">'Mo'</span>, TUE: <span class="st">'Di'</span>, WED: <span class="st">'Mi'</span>,
THU: <span class="st">'Do'</span>, FRI: <span class="st">'Fr'</span>, SAT: <span class="st">'Sa'</span>, SUN: <span class="st">'So'</span>
};</div>
</div>
<!-- ── 4. TYPEN ── -->
<div class="section">
<div class="section-label">4 · Typen</div>
<p class="prose">Die bestehende <code style="font-family:var(--font-mono);font-size:11px;">VarietyWarningCards.svelte</code> definiert bereits die korrekten Interfaces. Diese bleiben unverändert:</p>
<div class="code"><span class="cm">// In VarietyWarningCards.svelte (bereits vorhanden, nicht ändern)</span>
<span class="kw">interface</span> <span class="ty">WarningItem</span> {
dayShort: <span class="ty">string</span>; <span class="cm">// 'Mo', 'Di', …</span>
recipeName: <span class="ty">string</span>; <span class="cm">// aus weekPlan.slots[].recipe.name</span>
slotId: <span class="ty">number</span>; <span class="cm">// für Swap-Link</span>
}
<span class="kw">interface</span> <span class="ty">ActionWarning</span> {
title: <span class="ty">string</span>; <span class="cm">// z.B. "Tofu mehrfach diese Woche"</span>
items: <span class="ty">WarningItem</span>[]; <span class="cm">// eine Zeile pro betroffenem Tag</span>
}</div>
<p class="prose">Die alte <code style="font-family:var(--font-mono);font-size:11px;">Warning</code>-Schnittstelle aus <code style="font-family:var(--font-mono);font-size:11px;">variety.ts</code> (<code style="font-family:var(--font-mono);font-size:11px;">{ title, explanation }</code>) wird nicht mehr verwendet.</p>
</div>
<!-- ── 5. IMPLEMENTIERUNG ── -->
<div class="section">
<div class="section-label">5 · Implementierung</div>
<p class="prose">Es gibt drei Änderungen:</p>
<!-- 5.1 slotsByDay -->
<div class="state-card">
<div class="state-head">
<div class="state-id">5.1</div>
<div class="state-title">+page.svelte — slotsByDay Map aufbauen</div>
</div>
<div class="state-body">
<p style="margin-bottom:10px;">Füge direkt nach den bestehenden <code style="font-family:var(--font-mono);font-size:11px;">$derived</code>-Deklarationen hinzu:</p>
<div class="code" style="margin-bottom:0"><span class="kw">const</span> DAY_SHORT: Record&lt;<span class="ty">string</span>, <span class="ty">string</span>&gt; = {
MON: <span class="st">'Mo'</span>, TUE: <span class="st">'Di'</span>, WED: <span class="st">'Mi'</span>,
THU: <span class="st">'Do'</span>, FRI: <span class="st">'Fr'</span>, SAT: <span class="st">'Sa'</span>, SUN: <span class="st">'So'</span>
};
<span class="cm">// dayOfWeek (API code) → { slotId, recipeName }</span>
<span class="kw">let</span> slotsByDay = $derived.by(() => {
<span class="kw">const</span> map: Record&lt;<span class="ty">string</span>, { slotId: <span class="ty">number</span>; recipeName: <span class="ty">string</span> }&gt; = {};
<span class="kw">for</span> (<span class="kw">const</span> slot <span class="kw">of</span> weekPlan?.slots ?? []) {
<span class="kw">if</span> (slot.dayOfWeek && slot.recipe?.name && slot.id) {
map[slot.dayOfWeek] = { slotId: slot.id, recipeName: slot.recipe.name };
}
}
<span class="kw">return</span> map;
});</div>
</div>
</div>
<!-- 5.2 actionWarnings -->
<div class="state-card">
<div class="state-head">
<div class="state-id">5.2</div>
<div class="state-title">+page.svelte — actionWarnings ersetzen computeWarnings()</div>
</div>
<div class="state-body">
<p style="margin-bottom:10px;">Ersetze den bestehenden <code style="font-family:var(--font-mono);font-size:11px;">let warnings = $derived.by(() =&gt; computeWarnings(…))</code>-Block vollständig:</p>
<div class="code" style="margin-bottom:0"><span class="kw">interface</span> <span class="ty">WarningItem</span> { dayShort: <span class="ty">string</span>; recipeName: <span class="ty">string</span>; slotId: <span class="ty">number</span>; }
<span class="kw">interface</span> <span class="ty">ActionWarning</span> { title: <span class="ty">string</span>; items: <span class="ty">WarningItem</span>[]; }
<span class="kw">let</span> actionWarnings = $derived.by((): <span class="ty">ActionWarning</span>[] => {
<span class="kw">const</span> result: <span class="ty">ActionWarning</span>[] = [];
<span class="kw">const</span> vs = varietyScore;
<span class="kw">if</span> (!vs) <span class="kw">return</span> result;
<span class="cm">// Tag repeats (protein, cuisine, …)</span>
<span class="kw">for</span> (<span class="kw">const</span> repeat <span class="kw">of</span> vs.tagRepeats ?? []) {
<span class="kw">if</span> ((repeat.days?.length ?? <span class="nu">0</span>) &lt; <span class="nu">2</span>) <span class="kw">continue</span>;
<span class="kw">const</span> items: <span class="ty">WarningItem</span>[] = (repeat.days ?? [])
.map((day) => {
<span class="kw">const</span> slot = slotsByDay[day];
<span class="kw">return</span> slot
? { dayShort: DAY_SHORT[day] ?? day, recipeName: slot.recipeName, slotId: slot.slotId }
: <span class="kw">null</span>;
})
.filter((x): x is <span class="ty">WarningItem</span> => x !== <span class="kw">null</span>);
<span class="kw">if</span> (items.length > <span class="nu">0</span>) {
result.push({ title: `${repeat.tagName} mehrfach diese Woche`, items });
}
}
<span class="cm">// Ingredient overlaps</span>
<span class="kw">for</span> (<span class="kw">const</span> overlap <span class="kw">of</span> vs.ingredientOverlaps ?? []) {
<span class="kw">if</span> ((overlap.days?.length ?? <span class="nu">0</span>) &lt; <span class="nu">2</span>) <span class="kw">continue</span>;
<span class="kw">const</span> items: <span class="ty">WarningItem</span>[] = (overlap.days ?? [])
.map((day) => {
<span class="kw">const</span> slot = slotsByDay[day];
<span class="kw">return</span> slot
? { dayShort: DAY_SHORT[day] ?? day, recipeName: slot.recipeName, slotId: slot.slotId }
: <span class="kw">null</span>;
})
.filter((x): x is <span class="ty">WarningItem</span> => x !== <span class="kw">null</span>);
<span class="kw">if</span> (items.length > <span class="nu">0</span>) {
result.push({ title: `${overlap.ingredientName} in mehreren Gerichten`, items });
}
}
<span class="cm">// Duplicate recipes — find all slots with that recipe name</span>
<span class="kw">for</span> (<span class="kw">const</span> name <span class="kw">of</span> vs.duplicatesInPlan ?? []) {
<span class="kw">const</span> items: <span class="ty">WarningItem</span>[] = Object.entries(slotsByDay)
.filter(([, s]) => s.recipeName === name)
.map(([day, s]) => ({ dayShort: DAY_SHORT[day] ?? day, recipeName: s.recipeName, slotId: s.slotId }));
<span class="kw">if</span> (items.length > <span class="nu">0</span>) {
result.push({ title: `${name} doppelt geplant`, items });
}
}
<span class="kw">return</span> result;
});</div>
</div>
</div>
<!-- 5.3 Template update -->
<div class="state-card">
<div class="state-head">
<div class="state-id">5.3</div>
<div class="state-title">+page.svelte — Template: warnings → actionWarnings, weekStart übergeben</div>
</div>
<div class="state-body">
<p style="margin-bottom:10px;">An beiden Stellen im Template (Mobile + Desktop) ersetzen:</p>
<div class="diff">
<div class="diff-file">+page.svelte (Mobile, ~Zeile 110 / Desktop, ~Zeile 222)</div>
<div class="diff-body"><span class="diff-rem">- {#if warnings.length > 0}</span>
<span class="diff-rem">- &lt;VarietyWarningCards {warnings} /&gt;</span>
<span class="diff-add">+ {#if actionWarnings.length > 0}</span>
<span class="diff-add">+ &lt;VarietyWarningCards warnings={actionWarnings} {weekStart} /&gt;</span></div>
</div>
<p style="font-size:12px;color:var(--color-text-muted);">Achtung: <code style="font-family:var(--font-mono);font-size:11px;">weekStart</code> ist für die Swap-URL erforderlich und muss explizit übergeben werden.</p>
</div>
</div>
<!-- 5.4 Import cleanup -->
<div class="state-card">
<div class="state-head">
<div class="state-id">5.4</div>
<div class="state-title">+page.svelte — Import aufräumen</div>
</div>
<div class="state-body">
<p style="margin-bottom:10px;">Entferne den nicht mehr genutzten Import:</p>
<div class="diff">
<div class="diff-file">+page.svelte (Script-Block, oben)</div>
<div class="diff-body"><span class="diff-rem">- import { computeSubScores, computeWarnings } from '$lib/planner/variety';</span>
<span class="diff-add">+ import { computeSubScores } from '$lib/planner/variety';</span></div>
</div>
<p style="font-size:12px;color:var(--color-text-muted);">computeSubScores wird noch für die Score-Breakdown-Anzeige genutzt.</p>
</div>
</div>
</div>
<!-- ── 6. KOMPONENTE: VarietyWarningCards ── -->
<div class="section">
<div class="section-label">6 · VarietyWarningCards.svelte — bereits korrekt</div>
<p class="prose">Die Komponente wurde bereits auf das neue <code style="font-family:var(--font-mono);font-size:11px;">ActionWarning</code>-Format aktualisiert. <strong>Keine Änderung erforderlich.</strong> Zur Referenz die erwartete Props-Schnittstelle:</p>
<div class="code"><span class="cm">// Props (bereits implementiert)</span>
<span class="kw">let</span> { warnings, weekStart }: {
warnings: <span class="ty">ActionWarning</span>[];
weekStart: <span class="ty">string</span>;
} = $props();</div>
<p class="prose">Die Komponente rendert für jede Warnung:</p>
<ul style="font-size:12px;color:var(--color-text-muted);margin-left:20px;margin-bottom:16px;line-height:1.9;">
<li>Gelbe Karte (<code style="font-family:var(--font-mono);font-size:11px;">border: yellow-light, bg: yellow-tint</code>) mit Header-Zeile (Titel)</li>
<li>Pro Item: Zeile mit Wochentag-Abkürzung (W=20px, fixed) · Rezeptname (truncate) · "Tauschen →" Link (rechts)</li>
<li>Swap-URL: <code style="font-family:var(--font-mono);font-size:11px;">/planner?week={weekStart}&amp;swap={item.slotId}</code></li>
</ul>
<!-- Visual preview -->
<div class="prev-row">
<div class="prev-col">
<div class="bp-lbl">Warnkarte · Referenz-Darstellung</div>
<div style="width:340px;">
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ── 7. EDGE CASES ── -->
<div class="section">
<div class="section-label">7 · Edge Cases</div>
<table class="tbl">
<thead><tr><th>Fall</th><th>Verhalten</th></tr></thead>
<tbody>
<tr>
<td>Tag im tagRepeat hat keinen Slot</td>
<td>Filter-Schritt (.filter(x => x !== null)) entfernt das Item. Warnkarte erscheint nur wenn ≥1 Item vorhanden.</td>
</tr>
<tr>
<td>weekPlan hat keine Slots (leere Woche)</td>
<td>slotsByDay ist {}, actionWarnings ist []. Keine Warnkarten sichtbar.</td>
</tr>
<tr>
<td>varietyScore ist null</td>
<td>Bestehende {#if !varietyScore}-Guard greift — actionWarnings wird nie gerendert.</td>
</tr>
<tr>
<td>Slot hat kein Rezept (slot.recipe === null)</td>
<td>slot.recipe?.name ist undefined → Slot wird nicht in slotsByDay aufgenommen.</td>
</tr>
<tr>
<td>duplicatesInPlan: Rezeptname kommt in slotsByDay nicht vor</td>
<td>items ist leer → Warnkarte wird nicht gepusht.</td>
</tr>
<tr>
<td>Unbekannter Tag-Code (z.B. zukünftige API-Erweiterung)</td>
<td>DAY_SHORT[day] ?? day — Fallback auf den rohen Code.</td>
</tr>
<tr>
<td>Sehr langer Rezeptname</td>
<td>CSS truncate auf .wcard-recipe — kein Überlauf, Swap-Link bleibt sichtbar.</td>
</tr>
</tbody>
</table>
</div>
<!-- ── 8. ABNAHMEKRITERIEN ── -->
<div class="section">
<div class="section-label">8 · Abnahmekriterien</div>
<div class="box box-g">
<div class="box-lbl">Acceptance Criteria</div>
<ul class="checks">
<li>AC-1: Warnkarte zeigt pro betroffenem Tag eine eigene Zeile (nicht mehr einen langen Erklärungstext)</li>
<li>AC-2: Jede Zeile enthält die deutsche Wochentag-Abkürzung (Mo, Di, Mi, Do, Fr, Sa, So)</li>
<li>AC-3: Jede Zeile enthält den Namen des eingeplanten Rezepts</li>
<li>AC-4: Jede Zeile enthält einen "Tauschen →" Link, der zu /planner?week={weekStart}&amp;swap={slotId} führt</li>
<li>AC-5: Tags mit nur einem betroffenen Tag (days.length &lt; 2) erzeugen keine Warnkarte</li>
<li>AC-6: Score-Hero, Bewertungsdetails und Protein-Grid (Desktop) bleiben unverändert</li>
<li>AC-7: Wenn varietyScore null ist, werden keine Warnkarten gerendert (leere-Woche-State bleibt)</li>
<li>AC-8: Der Import von computeWarnings ist entfernt, TypeScript kompiliert fehlerfrei</li>
<li>AC-9: Auf Mobilgerät sind Tausch-Links touch-freundlich (mind. 44px Zeilenhöhe)</li>
</ul>
</div>
<div class="box box-y">
<div class="box-lbl">Nicht in Scope</div>
<ul class="arrows">
<li>Neues Backend-Endpoint — alle Daten kommen aus dem bestehenden Load</li>
<li>Layout-Umbau der Seite — Score bleibt oben, Warnungen unten wie bisher</li>
<li>Protein-Grid oder EffortBar Änderungen</li>
<li>computeSubScores aus variety.ts — bleibt unverändert</li>
<li>Entfernen von computeWarnings aus variety.ts (Funktion bleibt, wird nur nicht mehr aufgerufen)</li>
</ul>
</div>
</div>
<!-- ── 9. DATEIEN ── -->
<div class="section">
<div class="section-label">9 · Betroffene Dateien</div>
<table class="tbl">
<thead><tr><th>Datei</th><th>Änderung</th></tr></thead>
<tbody>
<tr>
<td class="mono">frontend/src/routes/(app)/planner/variety/+page.svelte</td>
<td>DAY_SHORT-Konstante, slotsByDay-Derived, actionWarnings-Derived, Template-Update (2×), Import-Bereinigung</td>
</tr>
<tr>
<td class="mono">frontend/src/lib/planner/VarietyWarningCards.svelte</td>
<td>Keine — bereits auf ActionWarning-Format aktualisiert</td>
</tr>
<tr>
<td class="mono">frontend/src/lib/planner/variety.ts</td>
<td>Keine — computeWarnings bleibt (ungenutzt, aber nicht entfernen um Regressions-Risiko zu vermeiden)</td>
</tr>
</tbody>
</table>
</div>
<!-- ── LLM AGENT REGION ── -->
<div class="section">
<div class="section-label">LLM-Agent-Lesbereich</div>
<p class="prose">Dieser Abschnitt enthält maschinenlesbare Regeln für einen KI-Agenten der die Implementierung durchführt.</p>
<div class="code"><span class="cm">SCREEN: C3 /planner/variety
VARIATION: V1 "Erweiterte Karten"
STATUS: Final spec — ready for implementation
FILES TO MODIFY:
frontend/src/routes/(app)/planner/variety/+page.svelte
FILES NOT TO MODIFY:
frontend/src/lib/planner/VarietyWarningCards.svelte (already correct)
frontend/src/lib/planner/variety.ts (keep computeWarnings, remove only import)
STEP 1 — Add DAY_SHORT constant (in &lt;script&gt; block, after imports):
const DAY_SHORT: Record&lt;string, string&gt; = {
MON: 'Mo', TUE: 'Di', WED: 'Mi',
THU: 'Do', FRI: 'Fr', SAT: 'Sa', SUN: 'So'
};
STEP 2 — Add slotsByDay derived (after $derived declarations for weekPlan, etc.):
let slotsByDay = $derived.by(() => {
const map: Record&lt;string, { slotId: number; recipeName: string }&gt; = {};
for (const slot of weekPlan?.slots ?? []) {
if (slot.dayOfWeek && slot.recipe?.name && slot.id) {
map[slot.dayOfWeek] = { slotId: slot.id, recipeName: slot.recipe.name };
}
}
return map;
});
STEP 3 — Define inline interfaces + actionWarnings derived:
interface WarningItem { dayShort: string; recipeName: string; slotId: number; }
interface ActionWarning { title: string; items: WarningItem[]; }
let actionWarnings = $derived.by((): ActionWarning[] => {
const result: ActionWarning[] = [];
const vs = varietyScore;
if (!vs) return result;
for (const repeat of vs.tagRepeats ?? []) {
if ((repeat.days?.length ?? 0) &lt; 2) continue;
const items: WarningItem[] = (repeat.days ?? [])
.map((day) => {
const slot = slotsByDay[day];
return slot ? { dayShort: DAY_SHORT[day] ?? day, recipeName: slot.recipeName, slotId: slot.slotId } : null;
})
.filter((x): x is WarningItem => x !== null);
if (items.length &gt; 0) result.push({ title: `${repeat.tagName} mehrfach diese Woche`, items });
}
for (const overlap of vs.ingredientOverlaps ?? []) {
if ((overlap.days?.length ?? 0) &lt; 2) continue;
const items: WarningItem[] = (overlap.days ?? [])
.map((day) => {
const slot = slotsByDay[day];
return slot ? { dayShort: DAY_SHORT[day] ?? day, recipeName: slot.recipeName, slotId: slot.slotId } : null;
})
.filter((x): x is WarningItem => x !== null);
if (items.length &gt; 0) result.push({ title: `${overlap.ingredientName} in mehreren Gerichten`, items });
}
for (const name of vs.duplicatesInPlan ?? []) {
const items: WarningItem[] = Object.entries(slotsByDay)
.filter(([, s]) => s.recipeName === name)
.map(([day, s]) => ({ dayShort: DAY_SHORT[day] ?? day, recipeName: s.recipeName, slotId: s.slotId }));
if (items.length &gt; 0) result.push({ title: `${name} doppelt geplant`, items });
}
return result;
});
STEP 4 — Replace template occurrences (both mobile and desktop sections):
OLD: {#if warnings.length > 0} / &lt;VarietyWarningCards {warnings} /&gt;
NEW: {#if actionWarnings.length > 0} / &lt;VarietyWarningCards warnings={actionWarnings} {weekStart} /&gt;
STEP 5 — Fix import:
OLD: import { computeSubScores, computeWarnings } from '$lib/planner/variety';
NEW: import { computeSubScores } from '$lib/planner/variety';
INVARIANTS (do not change):
- VarietyScoreHero, ScoreBreakdownList, EffortBar remain untouched
- Desktop protein grid (proteinByDay) remains untouched
- Layout structure (score top, warnings bottom) stays identical
- No new server load or API calls</span></div>
</div>
</div>
</body>
</html>

790
specs/frontend/c3-variety-rework.html Normal file
View File

@@ -0,0 +1,790 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Recipe App — C3 Abwechslungs-Analyse · 3 Mockup-Variationen</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<style>
:root{
--color-page:#FAFAF7;--color-surface:#F5F4EE;--color-subtle:#EDECEA;
--color-border:#D8D7D0;--color-text-muted:#6B6A63;--color-text:#1C1C18;
--green-tint:#E8F5EA;--green-light:#AEDCB0;--green:#3D8C4A;--green-dark:#2E6E39;
--yellow-tint:#FDF6D8;--yellow-light:#F9E08A;--yellow:#F2C12E;--yellow-dark:#C49610;--yellow-text:#8A6800;
--blue-tint:#E6F1FB;--blue-light:#A4CFF4;--blue:#2D7DD2;--blue-dark:#185FA5;
--purple-tint:#EEEDFE;--purple-light:#CECBF6;--purple:#534AB7;--purple-dark:#3C3489;
--orange-tint:#FEF0E6;--orange:#E8862A;
--red-tint:#FDECEA;--red:#DC4C3E;--red-dark:#B03328;
--font-display:'Fraunces',Georgia,serif;--font-sans:'DM Sans',system-ui,sans-serif;--font-mono:'DM Mono',monospace;
--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;
--shadow-overlay:0 8px 32px rgba(28,28,24,.12),0 2px 8px rgba(28,28,24,.06);
--shadow-card:0 1px 3px rgba(28,28,24,.06),0 1px 2px rgba(28,28,24,.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);background:#DDDBD5;color:var(--color-text);font-size:14px;line-height:1.6;}
.doc{max-width:1200px;margin:0 auto;padding:48px 40px 120px;}
/* Header */
.doc-header{background:var(--color-page);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:40px 40px 28px;margin:-48px -40px 48px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--color-border);}
.doc-header h1{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px;}
.doc-header p{font-size:13px;color:var(--color-text-muted);}
.doc-meta{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:right;line-height:1.9;}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:500;letter-spacing:.05em;}
.pill-draft{background:var(--yellow-tint);color:var(--yellow-text);}
.pill-rec{background:var(--green-tint);color:var(--green-dark);}
/* Section */
.section{margin-bottom:80px;}
.section-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:10px;border-bottom:1px solid var(--color-border);margin-bottom:24px;}
.prose{font-size:13px;color:var(--color-text-muted);line-height:1.7;max-width:720px;margin-bottom:24px;}
/* Variation header */
.var-head{padding:20px 24px;border-radius:var(--radius-xl);margin-bottom:32px;display:flex;align-items:flex-start;gap:16px;}
.var-num{font-family:var(--font-display);font-size:48px;font-weight:300;line-height:1;opacity:.5;flex-shrink:0;}
.var-id{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
.var-title{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px;}
.var-desc{font-size:13px;line-height:1.6;max-width:600px;}
.var-y{background:var(--yellow-tint);border:1px solid var(--yellow-light);}
.var-y .var-num,.var-y .var-id{color:var(--yellow-dark);}
.var-y .var-desc{color:var(--yellow-text);}
.var-g{background:var(--green-tint);border:1px solid var(--green-light);}
.var-g .var-num,.var-g .var-id{color:var(--green);}
.var-g .var-desc{color:var(--green-dark);}
.var-p{background:var(--purple-tint);border:1px solid var(--purple-light);}
.var-p .var-num,.var-p .var-id{color:var(--purple);}
.var-p .var-desc{color:var(--purple-dark);}
/* Device frames */
.previews{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-bottom:28px;}
.prev-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
.bp-lbl{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);}
.phone{width:320px;flex-shrink:0;background:var(--color-page);border-radius:36px;overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.08);border:6px solid #1C1C18;}
.pst{padding:10px 20px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px;background:var(--color-page);}
.pst b{font-weight:600;font-size:12px;}
.desk{width:100%;max-width:1040px;background:var(--color-page);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-overlay),0 0 0 1px rgba(0,0,0,.06);display:flex;min-height:500px;}
/* Nav chrome */
.mtb{padding:10px 16px;background:var(--color-page);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:10px;}
.mtb-back{font-size:20px;color:var(--color-text-muted);line-height:1;}
.mtb-t{font-family:var(--font-display);font-size:18px;font-weight:300;letter-spacing:-.02em;flex:1;}
.mbt{border-top:1px solid var(--color-border);background:var(--color-surface);padding:8px 16px 28px;display:flex;justify-content:space-around;flex-shrink:0;}
.mt-i{display:flex;flex-direction:column;align-items:center;gap:2px;}
.mt-ic{width:20px;height:20px;border-radius:4px;background:var(--color-subtle);font-size:11px;display:flex;align-items:center;justify-content:center;}
.mt-i.a .mt-ic{background:var(--yellow-tint);}
.mt-l{font-size:9px;font-weight:500;color:var(--color-text-muted);}
.mt-i.a .mt-l{color:var(--yellow-text);}
/* Desktop sidebar */
.dsb{width:224px;flex-shrink:0;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;}
.dsb-logo{padding:20px 16px 16px;border-bottom:1px solid var(--color-border);}
.dsb-lm{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
.dsb-ic{width:24px;height:24px;border-radius:5px;background:var(--green);font-size:12px;display:flex;align-items:center;justify-content:center;}
.dsb-nm{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.02em;}
.dsb-sub{font-size:10px;color:var(--color-text-muted);padding-left:32px;}
.dsb-nav{padding:12px 10px;flex:1;}
.dsb-nl{font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);padding:0 8px;margin-bottom:4px;}
.dsb-ni{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-md);font-size:13px;color:var(--color-text-muted);margin-bottom:2px;}
.dsb-ni.a{background:var(--yellow-tint);color:var(--yellow-text);font-weight:500;}
.dsb-nc{font-size:13px;width:18px;text-align:center;}
.dm{flex:1;display:flex;flex-direction:column;min-width:0;}
.dtb{padding:14px 24px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.dtb-bc{font-size:12px;color:var(--color-text-muted);}
.dtb-t{font-family:var(--font-display);font-size:18px;font-weight:300;letter-spacing:-.02em;}
.dmc{padding:24px;flex:1;overflow-y:auto;}
/* Shared components */
.score-num{font-family:var(--font-display);font-weight:300;letter-spacing:-.02em;line-height:1;}
.prog{height:6px;border-radius:3px;background:var(--color-border);overflow:hidden;margin-top:8px;}
.prog-fill{height:100%;border-radius:3px;background:var(--yellow);}
/* Warning card styles */
.wcard{border-radius:var(--radius-lg);border:1px solid var(--yellow-light);background:var(--yellow-tint);overflow:hidden;margin-bottom:8px;}
.wcard:last-child{margin-bottom:0;}
.wcard-hd{padding:10px 14px;border-bottom:1px solid var(--yellow-light);}
.wcard-hd-t{font-size:13px;font-weight:500;color:var(--yellow-text);}
.wcard-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid rgba(249,224,138,.4);}
.wcard-row:last-child{border-bottom:none;}
.wcard-left{display:flex;align-items:baseline;gap:8px;min-width:0;}
.wcard-day{font-size:11px;font-weight:600;color:var(--yellow-text);width:20px;flex-shrink:0;}
.wcard-recipe{font-size:13px;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wcard-swap{font-size:12px;font-weight:500;color:var(--yellow-text);white-space:nowrap;flex-shrink:0;}
.wcard-swap:hover{text-decoration:underline;}
/* Score breakdown rows */
.sb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--color-subtle);}
.sb-row:last-child{border-bottom:none;}
.sb-label{font-size:12px;color:var(--color-text-muted);}
.sb-val{font-family:var(--font-mono);font-size:12px;font-weight:500;}
/* Collapsible details */
.det summary{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);cursor:default;list-style:none;display:flex;align-items:center;justify-content:space-between;}
.det summary::after{content:'▾';font-size:11px;}
.det[open] summary::after{content:'▴';}
.det-body{padding-top:8px;}
/* Notes block */
.notes{border-radius:var(--radius-lg);padding:16px 20px;margin-top:20px;}
.notes-lbl{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.notes ul{list-style:none;display:flex;flex-direction:column;gap:5px;}
.notes li{font-size:12px;line-height:1.5;display:flex;align-items:flex-start;gap:8px;}
.notes li::before{content:'→';font-weight:500;flex-shrink:0;}
.notes-y{background:var(--yellow-tint);border:1px solid var(--yellow-light);}
.notes-y .notes-lbl,.notes-y li::before{color:var(--yellow-text);}
.notes-y li{color:var(--yellow-text);}
.notes-g{background:var(--green-tint);border:1px solid var(--green-light);}
.notes-g .notes-lbl,.notes-g li::before{color:var(--green-dark);}
.notes-g li{color:var(--green-dark);}
.notes-p{background:var(--purple-tint);border:1px solid var(--purple-light);}
.notes-p .notes-lbl,.notes-p li::before{color:var(--purple-dark);}
.notes-p li{color:var(--purple-dark);}
.divider{border:none;border-top:1px solid var(--color-border);margin:48px 0;}
/* Comparison table */
.ct{width:100%;border-collapse:collapse;font-size:13px;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);}
.ct thead tr{background:var(--color-subtle);border-bottom:1px solid var(--color-border);}
.ct th{text-align:left;padding:10px 16px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);}
.ct td{padding:10px 16px;border-bottom:1px solid var(--color-subtle);font-size:12px;vertical-align:top;}
.ct tr:last-child td{border-bottom:none;}
.ct td:first-child{font-weight:500;font-size:11px;color:var(--color-text-muted);white-space:nowrap;}
</style>
</head>
<body>
<div class="doc">
<!-- Header -->
<div class="doc-header">
<div>
<h1>C3 — Abwechslungs-Analyse · Rework</h1>
<p>Recipe App · 3 Mockup-Variationen · Aktuell: technische Tages-Codes, keine Rezeptnamen, kein direkter Tausch</p>
</div>
<div class="doc-meta">
<span class="pill pill-draft">Entwurf</span><br>
Erstellt: 2026-04<br>
Variationen: 3<br>
Screen: C3
</div>
</div>
<!-- Context -->
<div class="section">
<div class="section-label">Problem</div>
<p class="prose">Die aktuelle Seite zeigt Warnungen wie <strong style="font-family:var(--font-mono);font-size:12px;">"MON, WED — erwäge einen Tausch"</strong>. Der Planer muss selbst nachschlagen, welches Gericht an Montag und Mittwoch geplant ist, und dann manuell zum Planer navigieren um zu tauschen. Zwei Probleme:</p>
<p class="prose"><strong>1. Keine Rezeptnamen</strong> — Tag-Codes statt echter Gerichte. <strong>2. Kein direkter Tausch</strong> — der Planer muss die Seite verlassen, zurück zum Planer, das richtige Gericht suchen und dann tauschen.</p>
</div>
<!-- ═══════════════════════════════════════
V1 — ERWEITERTE KARTEN
════════════════════════════════════════ -->
<div class="section">
<div class="var-head var-y">
<div class="var-num">V1</div>
<div>
<div class="var-id">Variation 1</div>
<div class="var-title">Erweiterte Karten</div>
<div class="var-desc">Minimale Änderung: bestehende gelbe Karten bleiben, aber der Text wird durch strukturierte Zeilen ersetzt — eine pro betroffenem Gericht, mit Wochentag, Rezeptname und "Tauschen →" Link. Score-Bereich und Layout bleiben unverändert.</div>
</div>
</div>
<div class="previews">
<!-- Mobile V1 -->
<div class="prev-col">
<div class="bp-lbl">Mobile · 320px</div>
<div class="phone">
<div class="pst"><b>9:41</b><span>●●●</span></div>
<!-- topbar -->
<div class="mtb">
<div class="mtb-back">‹</div>
<div class="mtb-t">Abwechslungs-Analyse</div>
</div>
<div style="flex:1;overflow-y:auto;padding:20px 16px 16px;">
<!-- Score hero -->
<div style="margin-bottom:24px;">
<div style="display:flex;align-items:baseline;gap:8px;">
<span class="score-num" style="font-size:56px;color:var(--color-text);">5.8</span>
<span style="font-size:16px;color:var(--color-text-muted);">/ 10</span>
<span style="font-size:14px;font-weight:500;color:var(--yellow-text);margin-left:4px;">Verbesserbar</span>
</div>
<div class="prog" style="width:120px;"><div class="prog-fill" style="width:58%;"></div></div>
</div>
<!-- Sub-scores -->
<div style="margin-bottom:24px;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Bewertung im Detail</div>
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
</div>
<!-- Warnings — V1 style: same card structure, but rows inside -->
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
</div>
<div class="mbt">
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
</div>
</div>
</div>
<!-- Desktop V1 -->
<div class="prev-col" style="flex:1;min-width:580px;">
<div class="bp-lbl">Desktop · 1040px</div>
<div class="desk">
<div class="dsb">
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
<div class="dsb-nav">
<div class="dsb-nl">Planung</div>
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
</div>
</div>
<div class="dm">
<div class="dtb">
<span class="dtb-bc">Planer /</span>
<span class="dtb-t">Abwechslungs-Analyse</span>
</div>
<div class="dmc">
<!-- 2-col: left score + breakdown, right warnings -->
<div style="display:flex;gap:32px;">
<!-- Left -->
<div style="flex:1;">
<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:12px;">
<span class="score-num" style="font-size:72px;color:var(--color-text);">5.8</span>
<span style="font-size:18px;color:var(--color-text-muted);">/ 10</span>
<span style="font-size:14px;font-weight:500;color:var(--yellow-text);margin-left:4px;">Verbesserbar</span>
</div>
<div class="prog" style="width:200px;"><div class="prog-fill" style="width:58%;"></div></div>
<div style="margin-top:20px;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Bewertung im Detail</div>
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
</div>
</div>
<!-- Right: warnings -->
<div style="width:340px;flex-shrink:0;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notes notes-y">
<div class="notes-lbl">Design-Notizen V1</div>
<ul>
<li>Geringster Umbauaufwand — nur VarietyWarningCards.svelte ändert sich, keine Layout-Umstrukturierung.</li>
<li>Behält die bekannte Score-Hierarchie bei: Zahl oben, dann Detail, dann Hinweise.</li>
<li>Schwachstelle: Hinweise sind trotzdem am Ende der Seite versteckt — auf kurzen Telefon-Bildschirmen muss gescrollt werden, bevor der Planer die Tausch-Links sieht.</li>
<li>Die Sub-Scores bleiben immer sichtbar, auch wenn der Planer nur die Tausch-Aktionen braucht.</li>
</ul>
</div>
</div>
<hr class="divider"/>
<!-- ═══════════════════════════════════════
V2 — AKTIONS-LISTE (EMPFOHLEN)
════════════════════════════════════════ -->
<div class="section">
<div class="var-head var-g">
<div class="var-num">V2</div>
<div>
<div class="var-id">Variation 2 · Empfohlen</div>
<div class="var-title">Aktions-Liste</div>
<div class="var-desc">Hinweise rücken nach oben — direkt unter dem Score. Der Planer sieht sofort, was zu tun ist. Sub-Scores wandern in ein ausklappbares "Bewertung im Detail" (native &lt;details&gt;, kein JS). Kompakterer Score-Hero gibt Hinweisen mehr Raum.</div>
</div>
</div>
<div class="previews">
<!-- Mobile V2 -->
<div class="prev-col">
<div class="bp-lbl">Mobile · 320px</div>
<div class="phone">
<div class="pst"><b>9:41</b><span>●●●</span></div>
<div class="mtb">
<div class="mtb-back">‹</div>
<div class="mtb-t">Abwechslungs-Analyse</div>
</div>
<div style="flex:1;overflow-y:auto;padding:16px;">
<!-- Compact score strip -->
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:16px;">
<div>
<span class="score-num" style="font-size:40px;color:var(--color-text);">5.8</span>
<span style="font-size:13px;color:var(--color-text-muted);margin-left:4px;">/ 10</span>
</div>
<div style="flex:1;">
<div style="font-size:12px;font-weight:500;color:var(--yellow-text);margin-bottom:4px;">Verbesserbar</div>
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
</div>
</div>
<!-- Warnings — primary content -->
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">2 Hinweise</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<div class="wcard" style="margin-bottom:16px;">
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<!-- Sub-scores — collapsed -->
<details class="det" style="border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:10px 14px;background:var(--color-surface);">
<summary>Bewertung im Detail</summary>
<div class="det-body">
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
</div>
</details>
</div>
<div class="mbt">
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
</div>
</div>
</div>
<!-- Desktop V2 -->
<div class="prev-col" style="flex:1;min-width:580px;">
<div class="bp-lbl">Desktop · 1040px</div>
<div class="desk">
<div class="dsb">
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
<div class="dsb-nav">
<div class="dsb-nl">Planung</div>
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
</div>
</div>
<div class="dm">
<div class="dtb">
<span class="dtb-bc">Planer /</span>
<span class="dtb-t">Abwechslungs-Analyse</span>
</div>
<div class="dmc">
<!-- Top: compact score strip + effort -->
<div style="display:flex;gap:16px;align-items:center;padding:16px;background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);margin-bottom:24px;">
<div>
<span class="score-num" style="font-size:52px;color:var(--color-text);">5.8</span>
<span style="font-size:14px;color:var(--color-text-muted);margin-left:6px;">/ 10</span>
</div>
<div style="flex:1;">
<div style="font-size:13px;font-weight:500;color:var(--yellow-text);margin-bottom:4px;">Verbesserbar — 2 Hinweise</div>
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
</div>
<!-- Sub-scores inline on desktop -->
<div style="border-left:1px solid var(--color-border);padding-left:16px;display:flex;gap:16px;">
<div style="text-align:center;">
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--red-dark);">4</div>
<div style="font-size:10px;color:var(--color-text-muted);">Quellen</div>
</div>
<div style="text-align:center;">
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--yellow-text);">7</div>
<div style="font-size:10px;color:var(--color-text-muted);">Zutaten</div>
</div>
<div style="text-align:center;">
<div style="font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--green-dark);">8</div>
<div style="font-size:10px;color:var(--color-text-muted);">Aufwand</div>
</div>
</div>
</div>
<!-- Warnings full-width -->
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Hinweise</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Tofu mehrfach diese Woche</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mo</span><span class="wcard-recipe">Tofu-Gemüse-Pfanne</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
<div class="wcard">
<div class="wcard-hd"><div class="wcard-hd-t">Paprika in mehreren Gerichten</div></div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Di</span><span class="wcard-recipe">Paprika-Linsen-Eintopf</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
<div class="wcard-row">
<div class="wcard-left"><span class="wcard-day">Mi</span><span class="wcard-recipe">Tofu-Curry mit Reis</span></div>
<span class="wcard-swap">Tauschen →</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notes notes-g">
<div class="notes-lbl">Design-Notizen V2</div>
<ul>
<li>Hinweise erscheinen direkt unter dem Score — kein Scrollen nötig auf typischen Telefon-Bildschirmen.</li>
<li>Kompakter Score-Strip auf Mobile spart ~80px gegenüber dem aktuellen großen Hero — mehr Raum für die eigentlichen Tausch-Aktionen.</li>
<li>Desktop: Sub-Scores werden als kompakte Zahlen-Spalte in die Score-Leiste integriert — kein separater Abschnitt mehr nötig.</li>
<li>Native &lt;details&gt; auf Mobile braucht kein JavaScript; funktioniert auch ohne hydration.</li>
<li>"2 Hinweise" im Score-Strip auf Desktop gibt dem Planer sofort Kontext, ohne zu scrollen.</li>
</ul>
</div>
</div>
<hr class="divider"/>
<!-- ═══════════════════════════════════════
V3 — HINWEISE ZUERST
════════════════════════════════════════ -->
<div class="section">
<div class="var-head var-p">
<div class="var-num">V3</div>
<div>
<div class="var-id">Variation 3</div>
<div class="var-title">Hinweise zuerst</div>
<div class="var-desc">Invertiertes Layout: die Seite öffnet mit den konkreten Problem-Karten — groß und klar. Score und Breakdown erscheinen darunter als unterstützende Information. Jede Warnung ist eine eigenständige "Aufgaben-Karte" mit prominentem Tausch-Button statt Link.</div>
</div>
</div>
<div class="previews">
<!-- Mobile V3 -->
<div class="prev-col">
<div class="bp-lbl">Mobile · 320px</div>
<div class="phone">
<div class="pst"><b>9:41</b><span>●●●</span></div>
<div class="mtb">
<div class="mtb-back">‹</div>
<div class="mtb-t">Abwechslungs-Analyse</div>
</div>
<div style="flex:1;overflow-y:auto;padding:16px;">
<!-- Problem cards — full width, prominent -->
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Was zu tun ist</div>
<!-- Problem card 1 -->
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:10px;background:var(--yellow-tint);">
<div style="padding:12px 14px;border-bottom:1px solid var(--yellow-light);">
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:2px;">Quellen-Wiederholung</div>
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Tofu an 2 Tagen</div>
</div>
<!-- Row 1 -->
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(249,224,138,.5);">
<div style="display:flex;flex-direction:column;gap:1px;">
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Montag</div>
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Gemüse-Pfanne</div>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
<!-- Row 2 -->
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;">
<div style="display:flex;flex-direction:column;gap:1px;">
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Mittwoch</div>
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</div>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
</div>
<!-- Problem card 2 -->
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:16px;background:var(--yellow-tint);">
<div style="padding:12px 14px;border-bottom:1px solid var(--yellow-light);">
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:2px;">Zutaten-Überschneidung</div>
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Paprika an 2 aufeinanderfolgenden Tagen</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(249,224,138,.5);">
<div style="display:flex;flex-direction:column;gap:1px;">
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Dienstag</div>
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Paprika-Linsen-Eintopf</div>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;">
<div style="display:flex;flex-direction:column;gap:1px;">
<div style="font-size:10px;font-weight:600;color:var(--yellow-text);">Mittwoch</div>
<div style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</div>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 12px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
</div>
<!-- Score — secondary, at bottom -->
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px 16px;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Gesamt-Score</div>
<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:8px;">
<span class="score-num" style="font-size:36px;color:var(--color-text);">5.8</span>
<span style="font-size:13px;color:var(--color-text-muted);">/ 10 · Verbesserbar</span>
</div>
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
<div class="det" style="margin-top:10px;">
<details>
<summary style="font-size:11px;color:var(--color-text-muted);cursor:default;">Aufschlüsselung anzeigen</summary>
<div style="padding-top:8px;">
<div class="sb-row"><span class="sb-label">Quellen-Vielfalt</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
<div class="sb-row"><span class="sb-label">Zutaten-Überschneidung</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
<div class="sb-row"><span class="sb-label">Aufwandsbalance</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
</div>
</details>
</div>
</div>
</div>
<div class="mbt">
<div class="mt-i"><div class="mt-ic">📅</div><div class="mt-l">Plan</div></div>
<div class="mt-i"><div class="mt-ic">🛒</div><div class="mt-l">Einkauf</div></div>
<div class="mt-i"><div class="mt-ic">🍳</div><div class="mt-l">Rezepte</div></div>
<div class="mt-i a"><div class="mt-ic">📊</div><div class="mt-l">Analyse</div></div>
</div>
</div>
</div>
<!-- Desktop V3 -->
<div class="prev-col" style="flex:1;min-width:580px;">
<div class="bp-lbl">Desktop · 1040px</div>
<div class="desk">
<div class="dsb">
<div class="dsb-logo"><div class="dsb-lm"><div class="dsb-ic">🥦</div><div class="dsb-nm">Mealprep</div></div><div class="dsb-sub">Familie Raddatz</div></div>
<div class="dsb-nav">
<div class="dsb-nl">Planung</div>
<div class="dsb-ni a"><span class="dsb-nc">📅</span> Wochenplan</div>
<div class="dsb-ni"><span class="dsb-nc">🛒</span> Einkaufsliste</div>
<div class="dsb-ni"><span class="dsb-nc">🍳</span> Rezepte</div>
<div class="dsb-nl" style="margin-top:12px;">Haushalt</div>
<div class="dsb-ni"><span class="dsb-nc">⚙️</span> Einstellungen</div>
</div>
</div>
<div class="dm">
<div class="dtb">
<span class="dtb-bc">Planer /</span>
<span class="dtb-t">Abwechslungs-Analyse</span>
</div>
<div class="dmc">
<div style="display:grid;grid-template-columns:1fr 240px;gap:24px;">
<!-- Left: problem cards -->
<div>
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Was zu tun ist</div>
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:10px;background:var(--yellow-tint);">
<div style="padding:10px 16px;border-bottom:1px solid var(--yellow-light);">
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:1px;">Quellen-Wiederholung</div>
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Tofu an 2 Tagen</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(249,224,138,.5);">
<div style="display:flex;align-items:baseline;gap:10px;">
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Montag</span>
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Gemüse-Pfanne</span>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;">
<div style="display:flex;align-items:baseline;gap:10px;">
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Mittwoch</span>
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</span>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
</div>
<div style="border:1px solid var(--yellow-light);border-radius:var(--radius-xl);overflow:hidden;background:var(--yellow-tint);">
<div style="padding:10px 16px;border-bottom:1px solid var(--yellow-light);">
<div style="font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-text);margin-bottom:1px;">Zutaten-Überschneidung</div>
<div style="font-size:14px;font-weight:500;color:var(--color-text);">Paprika an 2 aufeinanderfolgenden Tagen</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid rgba(249,224,138,.5);">
<div style="display:flex;align-items:baseline;gap:10px;">
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Dienstag</span>
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Paprika-Linsen-Eintopf</span>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;">
<div style="display:flex;align-items:baseline;gap:10px;">
<span style="font-size:11px;font-weight:600;color:var(--yellow-text);width:60px;">Mittwoch</span>
<span style="font-size:13px;font-weight:500;color:var(--color-text);">Tofu-Curry mit Reis</span>
</div>
<a href="#" style="font-size:12px;font-weight:600;padding:6px 14px;background:var(--yellow-text);color:#fff;border-radius:var(--radius-md);white-space:nowrap;text-decoration:none;">Tauschen</a>
</div>
</div>
</div>
<!-- Right: score panel -->
<div>
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:8px;">Score</div>
<div style="display:flex;align-items:baseline;gap:6px;margin-bottom:8px;">
<span class="score-num" style="font-size:40px;color:var(--color-text);">5.8</span>
<span style="font-size:13px;color:var(--color-text-muted);">/ 10</span>
</div>
<div style="font-size:12px;font-weight:500;color:var(--yellow-text);margin-bottom:6px;">Verbesserbar</div>
<div class="prog"><div class="prog-fill" style="width:58%;"></div></div>
</div>
<div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px;">
<div style="font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px;">Aufschlüsselung</div>
<div class="sb-row"><span class="sb-label">Quellen</span><span class="sb-val" style="color:var(--red-dark);">4 / 10</span></div>
<div class="sb-row"><span class="sb-label">Zutaten</span><span class="sb-val" style="color:var(--yellow-text);">7 / 10</span></div>
<div class="sb-row"><span class="sb-label">Aufwand</span><span class="sb-val" style="color:var(--green-dark);">8 / 10</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notes notes-p">
<div class="notes-lbl">Design-Notizen V3</div>
<ul>
<li>Klarer Fokus: Das erste, was der Planer sieht, ist "Was zu tun ist" — keine Score-Hierarchie die von der Aktion ablenkt.</li>
<li>Prominente "Tauschen"-Buttons (gefüllt, dunkelgelb) statt Links — erhöht die Tipp-Fläche auf Mobile und macht die Aktion offensichtlicher.</li>
<li>Voller Wochentag ("Montag" statt "Mo") — lesbarer, besonders auf Desktop.</li>
<li>Schwachstelle: Wenn es keine Hinweise gibt (Score ≥ 9), wirkt die Seite leer — der Score müsste dann nach oben rücken. Erfordert einen separaten Empty-State.</li>
<li>Höherer Umbauaufwand gegenüber V1 und V2 — die Page-Struktur ändert sich grundlegend.</li>
</ul>
</div>
</div>
<hr class="divider"/>
<!-- Comparison -->
<div class="section">
<div class="section-label">Vergleich</div>
<table class="ct">
<thead>
<tr>
<th>Kriterium</th>
<th style="color:var(--yellow-text);">V1 Erweiterte Karten</th>
<th style="color:var(--green-dark);">V2 Aktions-Liste ★</th>
<th style="color:var(--purple-dark);">V3 Hinweise zuerst</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rezeptnamen sichtbar</td>
<td>✓ Ja</td>
<td>✓ Ja</td>
<td>✓ Ja, prominent</td>
</tr>
<tr>
<td>Direkter Tausch</td>
<td>Link</td>
<td>Link</td>
<td>Button (größere Tap-Fläche)</td>
</tr>
<tr>
<td>Hinweise sichtbar ohne Scrollen</td>
<td>Nein (Score + Breakdown zuerst)</td>
<td>Ja (direkt unter kompaktem Score)</td>
<td>Ja (ganz oben)</td>
</tr>
<tr>
<td>Umbauaufwand</td>
<td>Niedrig</td>
<td>Mittel</td>
<td>Hoch</td>
</tr>
<tr>
<td>Layout-Änderung</td>
<td>Keine</td>
<td>Score kompakter, Details kollabierbar</td>
<td>Grundlegende Umstrukturierung</td>
</tr>
<tr>
<td>Empfehlung</td>
<td>Wenn schnelle Lieferung Prio</td>
<td><strong>Empfohlen ★</strong></td>
<td>Wenn Aktions-Fokus Prio</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>