🍝 SPEISEKARTE ERSTELLEN - Fertige Templates

🎯 METHODE 1: Mit Content-Elements (EMPFOHLEN für Start)

Vorteile:

• ✅ Sofort einsatzbereit
• ✅ Kein Plugin nötig
• ✅ Einfach zu pflegen
• ✅ Perfekt ins Design integriert

📋 SPEISEKARTEN-LAYOUT

Layout 1: Zwei Spalten (Empfohlen)

┌────────────────┬────────────────┐
│  VORSPEISEN    │  HAUPTGERICHTE │
│  - Gericht 1   │  - Gericht 1   │
│  - Gericht 2   │  - Gericht 2   │
├────────────────┼────────────────┤
│  DESSERTS      │  GETRÄNKE      │
│  - Gericht 1   │  - Getränk 1   │
└────────────────┴────────────────┘

Backend Setup:

1. Seite "Speisekarte" erstellen
2. Backend Layout: "Zwei Spalten (1/3 + 2/3)"
3. Content-Elemente in Spalten

🎨 FERTIGE HTML-TEMPLATES

TEMPLATE 1: Elegante Gerichtsliste

Kopiere diesen Code in HTML-Element:

html

<div class="card card-glass glass">   <div class="card-header">     <h3 class="mb-0">🍝 Vorspeisen</h3>   </div>   <div class="card-body">     
    <!-- Gericht 1 -->     <div class="menu-item mb-4">       <div class="d-flex justify-content-between align-items-start mb-2">         <h5 class="mb-1 fw-bold">Bruschetta al Pomodoro</h5>         <span class="badge bg-primary fs-6">8,50 €</span>       </div>       <p class="text-muted mb-1">         Geröstetes Ciabatta mit frischen Tomaten, Basilikum, Knoblauch und Olivenöl
      </p>       <small class="text-muted">         <span class="badge badge-sm bg-secondary">vegetarisch</span>         <span class="badge badge-sm bg-light text-dark">A, C, G</span>       </small>     </div>     
    <hr class="my-3">     
    <!-- Gericht 2 -->     <div class="menu-item mb-4">       <div class="d-flex justify-content-between align-items-start mb-2">         <h5 class="mb-1 fw-bold">Carpaccio di Manzo</h5>         <span class="badge bg-primary fs-6">12,90 €</span>       </div>       <p class="text-muted mb-1">         Hauchdünnes Rinderfilet mit Rucola, Parmesan und Balsamico-Creme
      </p>       <small class="text-muted">         <span class="badge badge-sm bg-light text-dark">A, G, O</span>       </small>     </div>     
    <hr class="my-3">     
    <!-- Gericht 3 -->     <div class="menu-item mb-4">       <div class="d-flex justify-content-between align-items-start mb-2">         <h5 class="mb-1 fw-bold">Insalata Caprese</h5>         <span class="badge bg-primary fs-6">9,80 €</span>       </div>       <p class="text-muted mb-1">         Büffelmozzarella, Tomaten, frisches Basilikum und natives Olivenöl
      </p>       <small class="text-muted">         <span class="badge badge-sm bg-secondary">vegetarisch</span>         <span class="badge badge-sm bg-light text-dark">G</span>       </small>     </div>     
  </div> </div>

TEMPLATE 2: Mit Bildern

html

<div class="card card-glass glass">   <div class="card-header">     <h3 class="mb-0">🍖 Hauptgerichte</h3>   </div>   <div class="card-body">     
    <!-- Gericht mit Bild -->     <div class="menu-item-image mb-4">       <div class="row g-3">         <div class="col-md-4">           <img src="/pfad/zum/bild.jpg" class="img-fluid rounded" alt="Gericht">         </div>         <div class="col-md-8">           <div class="d-flex justify-content-between align-items-start mb-2">             <h5 class="mb-1 fw-bold">Bistecca alla Fiorentina</h5>             <span class="badge bg-primary fs-6">29,90 €</span>           </div>           <p class="text-muted mb-2">             Gegrilltes T-Bone-Steak vom Chianina-Rind, serviert mit 
            Rosmarinkartoffeln und gegrilltem Gemüse
          </p>           <small class="text-muted">             <span class="badge badge-sm bg-danger">Empfehlung</span>             <span class="badge badge-sm bg-light text-dark">A, C, G</span>           </small>         </div>       </div>     </div>     
    <hr class="my-3">     
    <!-- Weiteres Gericht -->     <div class="menu-item mb-4">       <div class="d-flex justify-content-between align-items-start mb-2">         <h5 class="mb-1 fw-bold">Risotto ai Funghi Porcini</h5>         <span class="badge bg-primary fs-6">16,50 €</span>       </div>       <p class="text-muted mb-1">         Cremiges Risotto mit Steinpilzen, Parmesan und frischen Kräutern
      </p>       <small class="text-muted">         <span class="badge badge-sm bg-secondary">vegetarisch</span>         <span class="badge badge-sm bg-light text-dark">A, G, L</span>       </small>     </div>     
  </div> </div>

TEMPLATE 3: Kompakt (Tagesgerichte)

html

<div class="card card-glass glass">   <div class="card-header bg-primary text-white">     <h4 class="mb-0">⭐ Tagesempfehlungen</h4>     <small>Freitag, 9. Oktober 2025</small>   </div>   <div class="card-body">     
    <div class="list-group list-group-flush">       
      <div class="list-group-item bg-transparent border-0 px-0">         <div class="d-flex justify-content-between align-items-center">           <div>             <h6 class="mb-1 fw-bold">Fischsuppe vom Haltertner See</h6>             <small class="text-muted">mit frischem Brot</small>           </div>           <span class="badge bg-primary">7,50 €</span>         </div>       </div>       
      <div class="list-group-item bg-transparent border-0 px-0">         <div class="d-flex justify-content-between align-items-center">           <div>             <h6 class="mb-1 fw-bold">Pasta Speziale des Tages</h6>             <small class="text-muted">Hausgemachte Tagliatelle</small>           </div>           <span class="badge bg-primary">14,90 €</span>         </div>       </div>       
      <div class="list-group-item bg-transparent border-0 px-0">         <div class="d-flex justify-content-between align-items-center">           <div>             <h6 class="mb-1 fw-bold">Tiramisu della Casa</h6>             <small class="text-muted">Nach Originalrezept</small>           </div>           <span class="badge bg-primary">6,50 €</span>         </div>       </div>       
    </div>     
  </div> </div>

📐 KOMPLETTES SPEISEKARTEN-LAYOUT

Variante A: Zwei-Spalten Layout

Backend Setup:

Seite: Speisekarte
Backend Layout: "Zwei Spalten (1/3 + 2/3)"
 Spalte 1 (Sidebar 1/3):
├─ HTML: Tagesempfehlungen
├─ HTML: Allergene-Legende
└─ Text: Hinweise
 Spalte 2 (Hauptbereich 2/3):
├─ HTML: Vorspeisen
├─ HTML: Hauptgerichte
├─ HTML: Pasta & Risotto
├─ HTML: Pizza
├─ HTML: Desserts
└─ HTML: Getränke

Variante B: Drei-Spalten Layout (Kategorien nebeneinander)

Backend Setup:

Seite: Speisekarte
Backend Layout: "Drei Spalten (1/3 + 1/3 + 1/3)"
 Spalte 1:
├─ HTML: Vorspeisen
└─ HTML: Salate
 Spalte 2:
├─ HTML: Hauptgerichte
└─ HTML: Pasta
 Spalte 3:
├─ HTML: Desserts
└─ HTML: Getränke

🏷️ ALLERGENE & ZUSATZSTOFFE

Legende (in Sidebar oder Footer)

html

<div class="card card-glass glass">   <div class="card-header">     <h5 class="mb-0">ℹ️ Allergene & Zusatzstoffe</h5>   </div>   <div class="card-body">     <small>       <p class="mb-2"><strong>A</strong> = Gluten</p>       <p class="mb-2"><strong>C</strong> = Eier</p>       <p class="mb-2"><strong>G</strong> = Milch/Laktose</p>       <p class="mb-2"><strong>L</strong> = Schwefeldioxid/Sulfite</p>       <p class="mb-2"><strong>N</strong> = Schalenfrüchte</p>       <p class="mb-2"><strong>O</strong> = Senf</p>       
      <hr class="my-2">       
      <p class="text-muted mb-0">         Alle Gerichte können Spuren von Allergenen enthalten. 
        Bei Fragen sprechen Sie uns bitte an.
      </p>     </small>   </div> </div>

🎨 CSS FÜR SPEISEKARTEN-STYLING

Füge das zu deiner Extension hinzu (oder inline):

css

/* Speisekarten-Styling */ .menu-item {   transition: all 0.2s ease; }  .menu-item:hover {   transform: translateX(5px); }  .menu-item h5 {   color: var(--brand-dark); }  .menu-item-image img {   object-fit: cover;   height: 120px;   width: 100%; }  /* Preis-Badge größer */ .badge.fs-6 {   font-size: 1rem !important;   padding: 0.5rem 0.75rem;   font-weight: 600; }  /* Allergene-Badges */ .badge-sm {   font-size: 0.75rem;   padding: 0.25rem 0.5rem; }

✅ SCHRITT-FÜR-SCHRITT ANLEITUNG

1. Seite erstellen

Backend → Seiten → Neue Seite
Titel: Speisekarte
Typ: Standard
Speichern

2. Layout setzen

Seite bearbeiten → Tab "Appearance"
Backend Layout: "Zwei Spalten (1/3 + 2/3)"
Speichern

3. Inhalte hinzufügen

Content-Modul → Spalte 2 (Hauptbereich)
[+] Content erstellen
→ "Allgemeiner Datensatz" → "HTML"
→ Template "Vorspeisen" kopieren und anpassen
→ Speichern
 Wiederholen für:
- Hauptgerichte
- Pasta
- Pizza
- Desserts
- Getränke

4. Sidebar befüllen

Content-Modul → Spalte 1 (Sidebar)
[+] Content erstellen
→ Tagesempfehlungen
→ Allergene-Legende

5. Fertig!

Cache löschen
Frontend prüfen
→ Professionelle Speisekarte! 🎉

📱 RESPONSIVE VERHALTEN

Desktop:

┌─────────┬──────────────────────┐
│ Sidebar │ Speisekarte          │
│         │ - Vorspeisen         │
│ Tipps   │ - Hauptgerichte      │
│         │ - Desserts           │
└─────────┴──────────────────────┘

Tablet/Mobile:

┌──────────────────────┐
│ Speisekarte          │
│ - Vorspeisen         │
│ - Hauptgerichte      │
│ - Desserts           │
├──────────────────────┤
│ Sidebar              │
│ Tipps                │
└──────────────────────┘

🔄 SPÄTER MIGRIEREN ZU PLUGIN

Falls du später doch Plugin willst:

Option 1: Custom Plugin

Ich baue dir:
- Backend für Gerichte
- Kategorien
- Automatische Frontend-Ausgabe
- Import-Funktion für bestehende Daten
 Zeit: ~5 Stunden

Option 2: Bestehendes Plugin

Extension "meals" installieren
Daten manuell übertragen
Template anpassen

🎯 FAZIT: Was empfehle ich?

✅ JETZT: Content-Elements (wie oben)

Warum:

• In 1 Stunde fertig
• Sieht professionell aus
• Einfach zu pflegen
• Kein Plugin-Overhead

⏭️ SPÄTER: Custom Plugin (wenn nötig)

Wann:

• Mehr als 50 Gerichte
• Tägliche Änderungen
• Multiple Speisekarten
• Export-Funktionen (PDF)
• Mehrsprachig

💡 SOFORT-START

Willst du dass ich dir:

A) Die fertigen Templates mit deinen echten Gerichten vorbereite? → Schick mir deine Speisekarte (PDF/Text/Foto)

B) Ein Custom Speisekarten-Plugin bauen? → Dauert ~5 Stunden, aber dann perfekt

C) Einfach mit den Templates oben starten? → Du kannst sofort loslegen!

Was bevorzugst du? 😊