Mealplan · Planer · Flip Tiles

Kachel-Flip + Zutaten-Farben

Klick auf eine gefüllte Kachel → sie dreht sich um. Auf der Rückseite: Rezeptname, Hauptzutaten, Aktionen. Kein Expansion-Panel mehr. Leere Kacheln bleiben unverändert mit Inline-Vorschlägen.

Palette Farben nach Hauptzutat / Küchenstil Fallback wenn heroImageUrl fehlt
Hähnchen
Protein
Rind
Protein
Fisch
Protein
Tofu
Protein
vegetarisch
Protein
Schwein
Protein
Lamm
Protein
Ei
Protein
Hülsenfrüchte
Protein
Italienisch
Küche
Asiatisch
Küche
Indisch
Küche
Mexikanisch
Küche
Mediterran
Küche
Priorität: Wenn heroImageUrl vorhanden → echtes Foto. Sonst: Farbe nach erstem Protein-Tag (z.B. tagType=protein, tagName=Hähnchen). Wenn kein Protein-Tag → Farbe nach Küchenstil-Tag (tagType=cuisine). Fallback auf --color-surface neutral. Die Farbwerte werden als CSS-Klassen gemappt: protein-haehnchen, cuisine-asiatisch etc.
Demo Flip-Interaktion — zum Klicken Echte CSS-3D-Transition

Klicke auf eine Kachel um sie umzudrehen. × auf der Rückseite klappt zurück.

Standard
Mo 7
Hähnchen-Curry
35 Min · mittel
Hähnchen 4 Port.
Mo · 7. Apr
Hähnchen-Curry
35 Min · mittel · 4 Port.
Hähnchen Kokosmilch Paprika Spinat Curry Knoblauch
Heute
Di 8
Pasta Bolognese
45 Min · mittel
Rind Heute
Di · Heute
Pasta Bolognese
45 Min · mittel · 4 Port.
Rinderhack Pasta Tomaten Zwiebeln Olivenöl Knoblauch
Ausgewählt (bereits umgedreht)
Mi 9
Gemüse-Stir-fry
20 Min · einfach
Tofu
Mi · 9. Apr
Gemüse-Stir-fry
20 Min · einfach · 2 Port.
Tofu Paprika Brokkoli Karotten Sesamöl Sojasauce
Leer — kein Flip
Sa 12
+
Gericht wählen
Vorschläge
Ramen mit EiNeues Protein
ShakshukaKein Overlap
TacosAufwand: leicht
Alle Rezepte →
Flip-Mechanik: CSS transform:rotateY(180deg) auf dem .card wrapper, backface-visibility:hidden auf beiden Faces, perspective:900px auf der Scene. Transition: .45s cubic-bezier(.4,0,.2,1) (Material-Easing — schnell herein, weich heraus). Der × Button auf der Rückseite stoppt den Klick-Event mit stopPropagation() und dreht die Karte zurück. Kein zusätzlicher State nötig — die Karte ist selbst das State-Element.

Farbstreifen oben auf der Rückseite = 5px Gradient, identisch mit der Front-Farbe. Gibt visuelle Kontinuität zwischen Vorder- und Rückseite.
Seite Vollansicht — Mittwoch umgedreht Kein rechtes Panel. Kacheln bis zum Rand.
Wochenplaner 7.–13. Apr
‹
›
Abwechslungs-Score
7.8/10
Protein
8.0
Zutaten
7.2
Aufwand
8.2
Variety-Analyse →
Überschneidungen
⚠ Hähnchen an Mo + Do
⚠ Tomaten an Di + Do
Geplant
5/ 7 Tage
Mo7
Hähnchen-Curry
35 Min · mittel
Di8
Pasta Bolognese
45 Min · mittel
Mi 9
Gemüse-Stir-fry
20 Min · einfach
Tofu
Mi · 9. Apr
Gemüse-Stir-fry
20 Min · einfach · 2 Port.
Tofu Paprika Brokkoli Karotten Ingwer Sesamöl Sojasauce
Do10
Lachs mit Kartoffeln
30 Min · einfach
Fr11
Pizza Margherita
50 Min · aufwändig
Sa12
+
Gericht wählen
Vorschläge
Ramen mit EiNeues Protein
ShakshukaKein Overlap
Alle Rezepte →
So13
+
Gericht wählen
Vorschläge
Grünes Thai-CurryNeues Protein
TacosAufwand: leicht
Alle Rezepte →
Layout: Linke Sidebar (Variety-Score) bleibt. Kein rechtes Panel mehr. Die Kacheln füllen den gesamten verbleibenden Platz (flex:1) — 7 gleich breite Spalten, volle Höhe (height:100% auf Grid und Kacheln). Kein Layout-Shift, kein After-Scroll.

Dimm-Effekt: Beim Flip werden alle anderen Kacheln auf 38% gedimmt. Kein neuer API-Aufruf nötig — reine CSS-Klasse per JS.

„Gericht tauschen": Öffnet den Rezept-Picker als Slide-in-Drawer von rechts (kein persistentes Panel). Drawer schließt sich nach Auswahl oder Abbruch.

Leere Kacheln: Zeigen Inline-Vorschläge auch im gedimmten Zustand (wenn eine andere Kachel geflippt ist). Kein Flip auf leeren Kacheln.