From 746bd05d648780cff2dc476b0522619b3f9d89aa Mon Sep 17 00:00:00 2001
From: horus
Date: Thu, 1 Jan 2026 23:19:05 +0100
Subject: init

---
 .gitignore         |   4 +
 api_cocktail.php   |  14 +
 api_cocktails.php  |  44 ++++
 api_kategorien.php |  15 ++
 dark-mode.css      |  83 ++++++
 db_config.php      |  13 +
 index.php          | 753 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 926 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 api_cocktail.php
 create mode 100644 api_cocktails.php
 create mode 100644 api_kategorien.php
 create mode 100644 dark-mode.css
 create mode 100644 db_config.php
 create mode 100644 index.php

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8fc8538
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+db_passwd.php
+
+*.swp
+*~
diff --git a/api_cocktail.php b/api_cocktail.php
new file mode 100644
index 0000000..2a75754
--- /dev/null
+++ b/api_cocktail.php
@@ -0,0 +1,14 @@
+<?php
+header('Content-Type: application/json; charset=utf-8');
+require 'db_config.php';
+
+$id = $_GET['id'] ?? 0;
+$stmt = $pdo->prepare("SELECT * FROM cocktails WHERE id = ?");
+$stmt->execute([$id]);
+$cocktail = $stmt->fetch(PDO::FETCH_ASSOC);
+
+$stmtZutaten = $pdo->prepare("SELECT * FROM zutaten WHERE cocktail_id = ? ORDER BY menge_ml DESC, id");
+$stmtZutaten->execute([$id]);
+$cocktail['zutaten'] = $stmtZutaten->fetchAll(PDO::FETCH_ASSOC);
+
+echo json_encode($cocktail);
diff --git a/api_cocktails.php b/api_cocktails.php
new file mode 100644
index 0000000..3ccde2b
--- /dev/null
+++ b/api_cocktails.php
@@ -0,0 +1,44 @@
+<?php
+header('Content-Type: application/json; charset=utf8mb4');
+require 'db_config.php';
+
+$stmt = $pdo->query("
+    SELECT 
+        c.*, 
+        z.menge_ml, z.menge_anteil, z.einheit, z.original_text,
+        z.zutat, z.zutat_de, z.kategorie, z.id as zutat_id
+    FROM cocktails c 
+    LEFT JOIN zutaten z ON c.id = z.cocktail_id 
+    WHERE hide = 0
+    ORDER BY c.seite, c.name, z.menge_ml DESC, z.id ASC
+");
+
+$cocktails = [];
+$currentCocktail = null;
+
+foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
+    $cocktailId = $row['id'];
+    
+    if ($currentCocktail !== $cocktailId) {
+        $currentCocktail = $cocktailId;
+        $row['zutaten'] = [];
+        $cocktails[] = $row;
+    }
+    
+    // Zutat zu aktuellem Cocktail hinzufügen
+    if (!empty($row['zutat_id'])) {
+        $zutat = [
+            'menge_ml' => $row['menge_ml'],
+            'menge_anteil' => $row['menge_anteil'],
+            'einheit' => $row['einheit'],
+            'original_text' => $row['original_text'],
+            'zutat' => $row['zutat'],
+            'zutat_de' => $row['zutat_de'],
+            'kategorie' => $row['kategorie'],
+            'id' => $row['zutat_id']
+        ];
+        $cocktails[array_key_last($cocktails)]['zutaten'][] = $zutat;
+    }
+}
+
+echo json_encode($cocktails);
diff --git a/api_kategorien.php b/api_kategorien.php
new file mode 100644
index 0000000..d2e9b86
--- /dev/null
+++ b/api_kategorien.php
@@ -0,0 +1,15 @@
+<?php
+header('Content-Type: application/json');
+header('Access-Control-Allow-Origin: *');
+
+require_once 'db_config.php';
+
+try {
+    $stmt = $pdo->prepare("SELECT DISTINCT kategorie FROM zutaten WHERE kategorie != '' ORDER BY kategorie");
+    $stmt->execute();
+    $kategorien = $stmt->fetchAll(PDO::FETCH_COLUMN);
+    
+    echo json_encode($kategorien);
+} catch(PDOException $e) {
+    echo json_encode(['error' => 'DB Fehler ' . $e->getMessag() ]);
+}
diff --git a/dark-mode.css b/dark-mode.css
new file mode 100644
index 0000000..6688fb9
--- /dev/null
+++ b/dark-mode.css
@@ -0,0 +1,83 @@
+/* Dark Mode Basis */
+body.dark-mode {
+    background-color: #1a1a1a !important;
+    color: #e9ecef !important;
+}
+
+/* Cards */
+.dark-mode .card,
+.dark-mode .cocktail-card {
+    background-color: #2d2d2d !important;
+    border-color: #404040 !important;
+    color: #e9ecef !important;
+}
+.dark-mode .card-body {
+    background-color: #2d2d2d !important;
+}
+
+/* Suchformular */
+.dark-mode .card.shadow {
+    background-color: #2c2c2c !important;
+    border: 1px solid #404040 !important;
+}
+.dark-mode .form-control,
+.dark-mode .form-control-lg {
+    background-color: #3a3a3a !important;
+    border-color: #555 !important;
+    color: #e9ecef !important;
+}
+.dark-mode .form-control::placeholder {
+    color: #888 !important;
+}
+.dark-mode .input-group-text {
+    background-color: #404040 !important;
+    border-color: #555 !important;
+    color: #e9ecef !important;
+}
+
+/* Buttons */
+.dark-mode .btn-warning {
+    background-color: #e0a800 !important;
+    border-color: #d39e00 !important;
+}
+.dark-mode .btn-outline-primary {
+    color: #ffc107 !important;
+    border-color: #ffc107 !important;
+}
+.dark-mode .btn-outline-primary.active {
+    background-color: #ffc107 !important;
+    color: #000 !important;
+}
+
+/* Modal */
+.dark-mode .modal-content {
+    background-color: #2d2d2d !important;
+    color: #e9ecef !important;
+}
+.dark-mode .modal-header {
+    border-bottom: 1px solid #404040 !important;
+}
+.dark-mode .modal-body {
+    background-color: #2d2d2d !important;
+}
+
+/* Zutaten */
+.dark-mode .zutat-item {
+    border-bottom-color: #404040 !important;
+}
+.dark-mode .text-muted {
+    color: #adb5bd !important;
+}
+
+/* Container */
+.dark-mode .container {
+    background-color: #1a1a1a !important;
+}
+
+/* Hover-Effekte */
+.dark-mode .card:hover {
+    background-color: #363636 !important;
+    border-color: #555 !important;
+    transform: translateY(-2px);
+}
+
diff --git a/db_config.php b/db_config.php
new file mode 100644
index 0000000..d674004
--- /dev/null
+++ b/db_config.php
@@ -0,0 +1,13 @@
+<?php
+$host = '192.168.122.1';
+$dbname = 'savoy';
+$username = 'savoy';
+
+require_once __DIR__ . '/db_passwd.php';
+
+try {
+    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+} catch(PDOException $e) {
+    die("DB-Verbindung fehlgeschlagen: " . $e->getMessage());
+}
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..e51ad61
--- /dev/null
+++ b/index.php
@@ -0,0 +1,753 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Savoy Cocktail Database</title>
+    <!-- Bootstrap 4 CDN -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+	<link rel="stylesheet" href="dark-mode.css">
+    <style>
+        .cocktail-card { transition: all 0.3s; }
+        .cocktail-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
+        .ingredient-badge { font-size: 0.8em; margin: 2px; }
+        .search-result { min-height: 100px; }
+.zutaten-preview {
+    max-height: 60px;
+    overflow: hidden;
+}
+.ingredient-badge {
+    font-size: 0.75em;
+    padding: 0.4em 0.6em;
+}
+
+/* Bootstrap 4: Gap zwischen Suchfeldern */
+.card-body .row > [class*="col-"] {
+    padding-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+    .card-body .row > [class*="col-md"] {
+        padding-bottom: 1rem;
+    }
+}
+.zutat-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid #eee;
+}
+.zutat-item:last-child { border-bottom: none; }
+.zutat-item strong {
+    min-width: 70px;
+    color: #ffc107;
+    font-size: 0.95rem;
+}
+/* Badge + zutat_de PERFECT getrennt */
+.ingredient-badge {
+    font-size: 0.85rem !important;
+    padding: 0.45em 0.75em !important;
+    margin-right: 0.75rem !important;
+    font-weight: 600 !important;
+    min-width: 75px;
+    text-align: center;
+}
+
+.zutat-hilfe {
+    font-size: 0.88rem !important;
+    color: #adb5bd !important; /* Hellgrau */
+    font-style: italic;
+    padding-left: 0.25rem;
+    border-left: 2px solid #ffc107;
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    background: rgba(255,193,7,0.1);
+    border-radius: 4px;
+}
+
+/* Hover-Effekt */
+.zutat-item:hover .zutat-hilfe {
+    color: #ffc107 !important;
+    background: rgba(255,193,7,0.2);
+}
+
+.zutat {
+	color: #000;
+}
+.dark-mode .zutat {
+	color: #ffffff !important;
+}
+.zutat-muted {
+	color: #cccccc;
+}
+.dark-mode .zutat-muted {
+	color: #6c757d !important;
+}
+
+/* Dark Mode Button */
+body.dark-mode .mode-btn {
+    border: 2px solid #ffffff !important;
+    color: #ffffff !important;
+    background: rgba(0,0,0,0.3) !important;
+}
+
+body.dark-mode .mode-btn:hover {
+    background: rgba(255,255,255,0.1) !important;
+}
+
+/* Light Mode Button */
+body:not(.dark-mode) .mode-btn {
+    border: 2px solid #212529 !important;
+    color: #212529 !important;
+    background: rgba(248,249,250,0.9) !important;
+}
+
+body:not(.dark-mode) .mode-btn:hover {
+    background: rgba(33,37,41,0.1) !important;
+}
+
+
+    </style>
+</head>
+<body class="dark-mode">
+    <div class="container-fluid py-4">
+        <!-- Header -->
+        <div class="row mb-5">
+            <div class="col-12 text-center">
+                <h1 class="display-4 mb-3"><i class="fas fa-cocktail text-warning"></i> Savoy Cocktail Book</h1>
+                <p class="lead text-muted">Die klassische Cocktail-Bibel von Harry Craddock (1930)</p>
+            </div>
+        </div>
+
+<!-- Toggle Button (oben rechts) -->
+<div id="themeToggle" class="position-fixed" style="top: 20px; right: 20px; z-index: 9999;">
+    <button id="darkModeBtn" class="mode-btn btn btn-sm btn-outline-light rounded-circle p-2 shadow">
+        <i class="fas fa-sun"></i>
+    </button>
+</div
+
+        <!-- Suchformular -->
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card shadow">
+                    <div class="card-body p-3 p-md-4">
+                        <div class="row g-2 g-md-3">
+                            <div class="col-md-3 col-12">
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-search"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control form-control-lg" id="searchName" placeholder="Cocktail suchen... (z.B. Martini, Daiquiri)">
+                                </div>
+                            </div>
+				<div class="col-md-3 col-12">
+				    <div class="input-group">
+					<div class="input-group-prepend">
+					    <span class="input-group-text"><i class="fas fa-utensils"></i></span>
+					</div>
+					<input type="text" class="form-control form-control-lg" id="searchZutaten"
+					       placeholder="Zutaten (z.B. Gin Rum Zitrone)">
+					<div class="input-group-append">
+					    <span class="input-group-text"><small>UND</small></span>
+					</div>
+				    </div>
+				</div>
+                            <div class="col-md-2 col-12">
+                                <select class="form-control form-control-lg" id="searchKategorie">
+                                    <option value="">Alle Kategorien</option>
+                                    <option value="Gin">Gin</option>
+                                    <option value="Rum">Rum</option>
+                                    <option value="Whisky">Whisky</option>
+                                    <option value="Bitter">Bitter</option>
+                                    <option value="Fruchtsaft">Fruchtsaft</option>
+                                    <option value="Kräuterlikör">Kräuterlikör</option>
+                                </select>
+                            </div>
+                            <div class="col-md-2 col-12">
+                                <input type="number" class="form-control form-control-lg" id="searchSeite" placeholder="Seite" min="1" max="300">
+                            </div>
+                            <div class="col-md-2 col-6 col-sm-4">
+                                <button class="btn btn-warning btn-lg btn-block" onclick="searchCocktails()">
+                                    <i class="fas fa-search"></i> Suchen
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Filter-Ergebnisse -->
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="d-flex justify-content-between align-items-center">
+                    <h4 id="resultsTitle" class="mb-0"><i class="fas fa-list"></i> Alle Cocktails</h4>
+                    <span id="resultsCount" class="badge badge-secondary">0 Ergebnisse</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Ergebnisse -->
+        <div class="row" id="cocktailResults">
+            <div class="col-12 text-center py-5">
+                <div class="spinner-border text-warning" role="status">
+                    <span class="sr-only">Laden...</span>
+                </div>
+                <p class="mt-3 text-muted">Cocktails werden geladen...</p>
+            </div>
+        </div>
+
+        <!-- Detail-Modal -->
+<!--
+        <div class="modal fade" id="cocktailModal" tabindex="-1">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header bg-warning text-dark">
+                        <h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5>
+                        <button type="button" class="close" data-dismiss="modal">
+                            <span>&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body" id="modalBody">
+			    <div class="form-group mb-3">
+				<div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+				    <label class="btn btn-outline-primary active ml-view">
+					<input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml
+				    </label>
+				    <label class="btn btn-outline-secondary original-view">
+					<input type="radio" name="zutatenView" id="originalView"> Original
+				    </label>
+				</div>
+			    </div>
+
+			    <div id="modalZutaten" class="zutaten-list"></div>
+
+			    ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p>${cocktail.rezept}</p>` : ''}
+                    </div>
+                </div>
+            </div>
+        </div>
+-->
+
+	<!-- Detail-Modal -->
+	<div class="modal fade" id="cocktailModal" tabindex="-1">
+	    <div class="modal-dialog modal-xl">
+		<div class="modal-content">
+		    <div class="modal-header bg-warning text-dark">
+			<h5 class="modal-title" id="modalTitle"><i class="fas fa-cocktail"></i> Cocktail</h5>
+			<button type="button" class="close" data-dismiss="modal">
+			    <span>&times;</span>
+			</button>
+		    </div>
+		    <div class="modal-body">
+			<!-- TOGGLE (PERFEKT!) -->
+			<div class="form-group mb-3">
+				<!--
+			    <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+				<label class="btn btn-outline-primary active ml-view">
+				    <input type="radio" name="zutatenView" id="mlView" checked>
+				    <i class="fas fa-tint"></i> ml
+				</label>
+				<label class="btn btn-outline-secondary original-view">
+				    <input type="radio" name="zutatenView" id="originalView"> Original
+				</label>
+			    </div>
+				-->
+				<div class="btn-group w-100 mb-3" id="zutatenToggle">
+				    <button type="button" class="btn btn-outline-warning ml-view w-50" data-view="ml">
+					<i class="fas fa-tint"></i> ml (modern)
+				    </button>
+				    <button type="button" class="btn btn-outline-warning original-view w-50" data-view="original">
+					<i class="fas fa-balance-scale"></i>
+					<i class="fas fa-wine-glass"></i>
+					Parts & Glasses (original)
+				    </button>
+				</div>
+
+			</div>
+
+			<!-- **Container zum Füllen (PERFEKT!)** -->
+			<div id="modalInfo" class="mb-3"></div>
+			<h6>Zutaten:</h6>
+			<div id="modalZutaten" class="zutaten-list mb-4"></div>
+			<div id="modalRezept"></div> <!-- ← Rezept hier! -->
+		    </div>
+		</div>
+	    </div>
+	</div>
+    </div>
+
+
+
+<!-- Bootstrap 4 + VOLLSTÄNDIGES jQuery (NICHT slim!) -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script>
+        let allCocktails = [];
+
+        function loadAllCocktails() {
+            $.getJSON('api_cocktails.php', function(data) {
+                allCocktails = data;
+                displayCocktails(allCocktails);
+		updateResultsCount(allCocktails.length);
+            }).fail(function() {
+                $('#cocktailResults').html('<div class="col-12 text-center py-5"><div class="alert alert-danger">Fehler beim Laden der Cocktails!</div></div>');
+            });
+        }
+
+
+function updateResultsCount(count) {
+    $('#resultsCount').html(`<i class="fas fa-cocktail"></i> ${count} Cocktails`);
+    //$('#resultsTitle').html(`<i class="fas fa-list"></i> Alle Cocktails (${count})`);
+}
+
+function searchCocktails() {
+    const name = $('#searchName').val().toLowerCase();
+    const kategorie = $('#searchKategorie').val();
+    const seite = $('#searchSeite').val();
+    const zutatenSuche = $('#searchZutaten').val().toLowerCase().trim();
+
+    const filtered = allCocktails.filter(cocktail => {
+        const matchesName = !name || cocktail.name.toLowerCase().includes(name);
+        const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie);
+        const matchesSeite = !seite || cocktail.seite == seite;
+
+        // 🔍 MULTI-ZUTATEN-SUCHE (jede Zutat muss vorkommen)
+        let matchesZutaten = true;
+        if (zutatenSuche) {
+            const gesuchteZutaten = zutatenSuche.split(/\s+/).filter(w => w.length > 0);
+            matchesZutaten = gesuchteZutaten.every(zutat =>
+                cocktail.zutaten.some(ing =>
+                    ing.zutat.toLowerCase().includes(zutat) ||
+                    ing.kategorie.toLowerCase().includes(zutat)
+                )
+            );
+        }
+
+        return matchesName && matchesKategorie && matchesSeite && matchesZutaten;
+    });
+
+    displayCocktails(filtered);
+    $('#resultsCount').text(filtered.length + ' Ergebnisse');
+    $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse');
+}
+
+/*
+        function searchCocktails() {
+            const name = $('#searchName').val().toLowerCase();
+            const kategorie = $('#searchKategorie').val();
+            const seite = $('#searchSeite').val();
+
+            const filtered = allCocktails.filter(cocktail => {
+                const matchesName = !name || cocktail.name.toLowerCase().includes(name);
+                const matchesKategorie = !kategorie || cocktail.zutaten.some(z => z.kategorie === kategorie);
+                const matchesSeite = !seite || cocktail.seite == seite;
+                
+                return matchesName && matchesKategorie && matchesSeite;
+            });
+
+            displayCocktails(filtered);
+            $('#resultsCount').text(filtered.length + ' Ergebnisse');
+            $('#resultsTitle').html('<i class="fas fa-search"></i> Suchergebnisse');
+        }
+*/
+
+function formatiereZutaten(z) {
+		if (z.einheit === null && z.kategorie === 'Ei') {
+			output = '';
+		} else if (z.einheit === 'Dash') {
+			output = z.menge_anteil + " " + z.einheit;
+		} else if (z.einheit === 'piece') {
+			output = "";
+		} else {
+			output = z.menge_ml ? z.menge_ml + " ml" : (z.original_text || '—');
+		}
+
+		return output;
+}
+
+function displayCocktails(cocktails) {
+    let html = '';
+    cocktails.forEach(cocktail => {
+	// 🛡️ Sichere Zutaten-Anzahl
+	const zutatenCount = cocktail.zutaten ? cocktail.zutaten.length : (cocktail.zutaten_count || 0);
+
+	// Top 3 Zutaten für Vorschau
+	let topZutatenHtml = '';
+	if (cocktail.zutaten && cocktail.zutaten.length > 0) {
+	    const top3 = cocktail.zutaten.slice(0, 3);
+	    top3.forEach(z => {
+		output = formatiereZutaten(z);
+		topZutatenHtml += `
+		    <span class="badge badge-${getKategorieColor(z.kategorie)} ingredient-badge mr-1 mb-1">
+			<span class="menge_ml">
+			${output}
+			</span> ${z.zutat}
+		    </span>
+		`;
+	    });
+	    if (cocktail.zutaten.length > 3) {
+		topZutatenHtml += `<span class="badge badge-light ingredient-badge mr-1 mb-1">+${zutatenCount-3}</span>`;
+	    }
+	}
+
+	html += `
+	    <div class="col-lg-4 col-md-6 mb-4">
+		<div class="card cocktail-card h-100 shadow-sm border-0">
+		    <div class="card-body">
+			<h5 class="card-title">${cocktail.name}</h5>
+			<p class="text-muted small mb-2">
+			    <i class="fas fa-utensils"></i> ${zutatenCount} Zutaten
+			    <i class="fas fa-book"></i> Seite ${cocktail.seite || '?'} |
+			</p>
+
+			<!-- ZUTATEN VORSCHAU -->
+			<div class="zutaten-preview mb-3">
+			    ${topZutatenHtml}
+			</div>
+
+			<p class="card-text small mb-3">${cocktail.zubereitung || cocktail.zubereitung}</p>
+
+			<button class="btn btn-warning btn-sm cocktail-detail-btn" data-action="cocktail-detail" data-id="${cocktail.id}">
+			    <i class="fas fa-eye"></i> Alle Zutaten & Details
+			</button>
+		    </div>
+		</div>
+	    </div>
+	`;
+    });
+
+    if (cocktails.length === 0) {
+	html = '<div class="col-12"><div class="alert alert-info text-center">Keine Cocktails gefunden.</div></div>';
+    }
+
+    $('#cocktailResults').html(html);
+
+}
+
+
+	function showCocktailDetail(id) {
+$('#searchName, #searchZutaten, #searchKategorie, #searchSeite').off('input change');
+    $.getJSON(`api_cocktail.php?id=${id}`, function(cocktail) {
+
+	// **ML-Ansicht (KORREKT):**
+	currentCocktailMlZutaten = cocktail.zutaten.map(z => {
+		const output = formatiereZutaten(z);
+	    return `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;">
+		<!-- Badge (kompakt) -->
+		<span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1"
+		      style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;">
+ 			${output || (z.menge_anteil + (z.einheit ? ` ${z.einheit}` : '')) || ''}
+		</span>
+		<!-- Zutat (HOHER KONTRAST) -->
+		<div class="flex-grow-1 pr-3" style="max-width: 300px;">
+		    <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div>
+		    <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small>
+		</div>
+	    </div>`
+	}).join('');
+/*
+			${z.einheit === 'Dash'
+			    ? `${z.menge_anteil} ${z.einheit}`
+			    : (z.menge_ml ? `${z.menge_ml} ml` : (z.original_text || '—'))}
+*/
+
+	currentCocktailOriginalZutaten = cocktail.zutaten.map(z =>
+	    `<div class="zutat-item d-flex align-items-center mb-2 p-2 rounded" style="max-width: 500px;">
+		<!-- Badge (kompakt) -->
+		<span class="badge badge-${getKategorieColor(z.kategorie)} mr-3 px-2 py-1"
+		      style="font-weight: 700; font-size: 0.85rem; min-width: 65px; color: #000 !important;">
+			${z.menge_anteil} ${z.einheit ? ` ${z.einheit}` : ''}
+		</span>
+		<!-- Zutat (HOHER KONTRAST) -->
+		<div class="flex-grow-1 pr-3" style="max-width: 300px;">
+		    <div class="font-weight-bold zutat" style="font-size: 1rem;">${z.zutat}</div>
+		    <small class="text-muted zutat-muted" style="">(${z.zutat_de})</small>
+		</div>
+	    </div>`
+	).join('');
+              //style="background: #ffc107 !important; color: #000 !important; min-width: 60px; font-size: 0.9rem;">
+            //${z.original_text || `${z.menge_anteil} ${z.einheit}`}
+
+
+        $('#modalTitle').html(`<i class="fas fa-cocktail"></i> ${cocktail.name}`);
+        $('#modalZutaten').html(currentCocktailMlZutaten);
+
+        // Info-Bereich
+        $('#modalInfo').html(`
+            <div class="row mb-4">
+                <div class="col-md-4">
+                    <h6><i class="fas fa-utensils text-muted"></i> ${cocktail.zutaten.length} Zutaten</h6>
+                    <h6><i class="fas fa-book text-muted"></i> Seite ${cocktail.seite}</h6>
+                </div>
+            </div>
+        `);
+
+        $('#modalRezept').html(`
+            <h6><i class="fas fa-concierge-bell"></i> Zubereitung:</h6>
+            <p class="lead">${cocktail.zubereitung}</p>
+        `);
+
+$('#zutatenToggle .btn').removeClass('active btn-warning')
+                        .addClass('btn-outline-warning btn-outline-warning');
+$('#zutatenToggle .ml-view').addClass('active btn-warning')
+                           .removeClass('btn-outline-warning');
+
+        $('#cocktailModal').modal('show');
+
+	// **Toggle sofort aktivieren**
+		setTimeout(() => {
+		    $('#zutatenToggle .ml-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+		}, 100);
+	    });
+
+// **WICHTIG: NACH Modal-ZU Events WIEDER AN!**
+    $('#cocktailModal').one('hidden.bs.modal', function() {
+        // Live-Suche WIEDER AKTIVIEREN
+        $('#searchName, #searchZutaten').on('input', function() {
+            let searchTimeout;
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(searchCocktails, 300);
+        });
+
+        $('#searchKategorie, #searchSeite').on('change', searchCocktails);
+    })
+
+        }
+
+        function getKategorieColor(kategorie) {
+            const colors = {
+                'Gin': 'primary',
+                'Rum': 'success',
+                'Whisky': 'warning',
+                'Bitter': 'danger',
+                'Fruchtsaft': 'info',
+                'Kräuterlikör': 'secondary'
+            };
+            //return colors[kategorie] || 'light';
+            return 'light';
+        }
+
+        // Enter-Taste für Suche
+        $('#searchName, #searchSeite').keypress(function(e) {
+            if (e.which == 13) searchCocktails();
+        });
+	// Live-Suche bei Eingabe
+	// ✅ RICHTIG - NUR 'input' für Text + 'change' für Select:
+	$('#searchName, #searchZutaten').on('input', function() {
+	    searchCocktails();
+	});
+
+	$('#searchKategorie, #searchSeite').on('change', function() {
+	    searchCocktails();
+	});
+
+	// Nach allCocktails laden:
+	async function loadKategorien() {
+	    try {
+		const response = await fetch('api_kategorien.php');
+		const kategorien = await response.json();
+
+		const select = $('#searchKategorie');
+		select.empty();
+		select.append('<option value="">Alle Kategorien</option>');
+
+		kategorien.forEach(kat => {
+		    select.append(`<option value="${kat}">${kat}</option>`);
+		});
+	    } catch(e) {
+		console.log('Kategorien laden fehlgeschlagen');
+	    }
+	}
+
+	// Beim Laden aufrufen:
+	$(document).ready(function() {
+	    loadAllCocktails();  // Bestehende Funktion
+	    loadKategorien(); // NEU!
+	    // Bootstrap Buttons initialisieren
+	    $('.btn-group-toggle').button();
+
+	    // Toggle-Event für Zutaten-Wechsel
+	    $(document).on('change', '[name="zutatenView"]', function() {
+		if ($(this).attr('id') === 'mlView') {
+		    $('#modalZutaten').html(currentCocktailMlZutaten);
+		} else {
+		    $('#modalZutaten').html(currentCocktailOriginalZutaten);
+		}
+	    });
+	    $(document).on('click', '#zutatenToggle .btn', function() {
+		// Active Klasse wechseln
+		$('#zutatenToggle .btn').removeClass('active btn-warning').addClass('btn-outline-warning btn-outline-warning');
+		$(this).addClass('active btn-warning').removeClass('btn-outline-warning btn-outline-warning');
+
+		// Zutaten wechseln
+		if ($(this).data('view') === 'ml') {
+		    $('#modalZutaten').html(currentCocktailMlZutaten);
+		} else {
+		    $('#modalZutaten').html(currentCocktailOriginalZutaten);
+		}
+	    });
+	// NUR HIER - EINMALIG!
+	$(document).on('click', '.cocktail-detail-btn', function(e) {
+		e.preventDefault();
+		const id = $(this).data('id');
+		showCocktailDetail(id);
+		return false;
+	});
+	// **Nach DOM-Update Buttons "wecken"**
+    $(document).on('cocktails:updated', function() {
+	$('.cocktail-detail-btn').css('pointer-events', 'auto');
+    });
+$(document).off('click', '[data-id]');
+$(document).on('click', '[data-id]', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const id = $(this).data('id');
+    showCocktailDetail(id);
+    return false;
+});
+
+    // 1. DARK MODE BEIM LADEN (Default)
+    /*
+    $('body').addClass('dark-mode');
+    $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+    localStorage.setItem('darkMode', 'enabled');
+    
+    // 2. TOGGLE: Dark → Light (SUN → MOON)
+    $('#darkModeBtn').on('click', function() {
+        $('body').toggleClass('dark-mode');
+        
+        if ($('body').hasClass('dark-mode')) {
+            // Dark aktiv → Icon Sonne
+            localStorage.setItem('darkMode', 'enabled');
+            $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+        } else {
+            // **LIGHT MODUS!** → Icon Mond
+            localStorage.setItem('darkMode', 'disabled');
+            $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+        }
+});
+*/
+    // **1. LocalStorage prüfen**
+    const savedMode = localStorage.getItem('darkMode');
+
+    if (savedMode === 'enable') {
+        $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+        // Light Mode gespeichert
+	//$('body').removeClass('dark-mode');
+    } else if (savedMode === 'disabled'){
+        $('body').removeClass('dark-mode');  // Light aktiv
+        $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+        // **LIGHT MODE DEFAULT** (auch bei null/undefined/enabled)
+        //localStorage.setItem('darkMode', 'disabled');  // Default setzen
+    } else {
+        $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+    }
+
+
+    // **2. TOGGLE (Light ↔ Dark)**
+    $('#darkModeBtn').on('click', function() {
+        $('body').toggleClass('dark-mode');
+
+        if ($('body').hasClass('dark-mode')) {
+            // Dark aktiv → Sonne
+            localStorage.setItem('darkMode', 'enabled');
+            $('#darkModeBtn i').removeClass('fa-moon').addClass('fa-sun');
+        } else {
+            // Light aktiv → Mond
+            localStorage.setItem('darkMode', 'disabled');
+            $('#darkModeBtn i').removeClass('fa-sun').addClass('fa-moon');
+        }
+    });
+
+	});
+
+let currentModalView = 'ml'; // Globaler State
+
+// Globale Variablen für aktuelle Zutaten (Performance)
+let currentCocktailMlZutaten = '';
+let currentCocktailOriginalZutaten = '';
+
+function getMlZutaten() { return currentCocktailMlZutaten; }
+function getOriginalZutaten() { return currentCocktailOriginalZutaten; }
+
+function displayModal(cocktail) {
+    // Zutaten VORAB berechnen
+    currentCocktailMlZutaten = cocktail.zutaten.map(z =>
+        z.menge_ml > 0 ? `<div class="zutat-item"><strong>${z.menge_ml.toFixed(0)} ml</strong> ${z.zutat}</div>` : `<div class="zutat-item">${z.zutat}</div>`
+    ).join('');
+
+    currentCocktailOriginalZutaten = cocktail.zutaten.map(z =>
+        `<div class="zutat-item"><strong>${z.original_text || ''}</strong> ${z.zutat}</div>`
+    ).join('');
+
+    // Zutaten für BEIDE Ansichten vorbereiten
+    const mlZutaten = cocktail.zutaten.map(zutat => {
+        const menge_ml = zutat.menge_ml;
+        if (menge_ml && menge_ml > 0) {
+            return `<div class="zutat-item"><strong>${menge_ml.toFixed(0)} ml ${zutat.zutat}</strong> ${zutat.zutat_de}</div>`;
+        }
+        return `<div class="zutat-item">${zutat.zutat}</div>`;
+    }).join('');
+
+    const originalZutaten = cocktail.zutaten.map(zutat => {
+        return `<div class="zutat-item"><strong>${zutat.original_text || zutat.menge_anteil || ''}</strong> ${zutat.zutat}</div>`;
+    }).join('');
+
+    // Modal-HTML mit aktueller Ansicht
+    /*
+    const modalHtml = `
+        <div class="modal-header">
+            <h5 class="modal-title">${cocktail.name} <small class="text-muted">(Seite ${cocktail.seite})</small></h5>
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+        </div>
+        <div class="modal-body">
+            <div class="form-group mb-3">
+                <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
+                    <label class="btn btn-outline-primary active ml-view">
+                        <input type="radio" name="zutatenView" id="mlView" checked> <i class="fas fa-tint"></i> ml
+                    </label>
+                    <label class="btn btn-outline-secondary original-view">
+                        <input type="radio" name="zutatenView" id="originalView"> Original
+                    </label>
+                </div>
+            </div>
+
+*/
+    const modalHtml = `
+            <div id="modalZutaten" class="zutaten-list">Hallo${currentModalView === 'ml' ? mlZutaten : originalZutaten}</div>
+            ${cocktail.rezept ? `<hr><h6>Zubereitung:</h6><p class="small">${cocktail.rezept}</p>` : ''}
+        </div>
+    `;
+
+    //$('#cocktailModal .modal-content').html(modalHtml);
+    $('#cocktailModal .modalZutaten').html(modalHtml);
+    $('#cocktailModal').modal('show');
+
+    // Toggle-Event-Bindings
+    bindModalToggle();
+}
+
+function bindModalToggle() {
+    $('.ml-view').off('click').on('click', function() {
+        currentModalView = 'ml';
+        $('#modalZutaten').html(getMlZutaten()); // Funktion unten
+        $('.ml-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+        $('.original-view').removeClass('active btn-warning').addClass('btn-outline-warning');
+    });
+
+    $('.original-view').off('click').on('click', function() {
+        currentModalView = 'original';
+        $('#modalZutaten').html(getOriginalZutaten()); // Funktion unten
+        $('.original-view').addClass('active btn-warning').removeClass('btn-outline-warning');
+        $('.ml-view').removeClass('active btn-warning').addClass('btn-outline-warning');
+    });
+}
+
+    </script>
+</body>
+</html>
-- 
cgit v1.2.3