@@ -1 +1,2 @@

 !vendor/

+.env*

@@ -10,6 +10,42 @@

   --luumicore-border-radius: 1rem;

   --luumicore-element-spacing: 2rem;

+

+  /* Winzer Portal Styles */

+  /* Farben */

+  --primary-color: #8B1E43;

+  --primary-rgb: 139, 30, 67;

+  --primary-light: #FBEAEA;

+

+  --alert-color: #D32F2F; /* Rot für Ausgebucht / PDF Icon */

+  --alert-light: #FFEBEE;

+

+  --bg-app: #f0f0f0;

+  --bg-card: #f4f4f4;

+  --bg-white: #ffffff;

+

+  --text-main: #333333;

+  --text-dark: #000000;

+  --text-muted: #888888;

+  --border-color: #eeeeee;

+

+  /* Schatten & Radius */

+  --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);

+  --shadow-md: 0 4px 6px rgba(0,0,0,0.2);

+  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);

+

+  --radius-card: 16px;

+  --radius-sm: 12px;

 }

 /* Global styles for the core bundle */

+body {

+  margin: 0;

+  padding: 0;

+  background-color: var(--bg-app);

+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

+}

+* { box-sizing: border-box; }

+

+/* Scrollbar hiding for cleaner mobile look */

+::-webkit-scrollbar { width: 0px; background: transparent; }

new file mode 100644

@@ -0,0 +1,20 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerCard extends LitElement {

+    static properties = { category: { type: String }, date: { type: String }, title: { type: String }, text: { type: String }, hasAttachment: { type: Boolean } };

+    static styles = css`

+        :host { display: block; margin-bottom: 35px; }

+        .card { background-color: var(--bg-card); border-radius: var(--radius-card); padding: 20px 20px 40px 20px; position: relative; color: var(--text-main); display: block; }

+        .header { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }

+        h3 { color: var(--primary-color); margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 600; }

+        p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--text-dark); padding-right: 25px; }

+        .attachment-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--primary-color); }

+        .action-btn { position: absolute; bottom: -20px; right: 20px; background-color: var(--primary-color); color: var(--bg-white); width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.1s; z-index: 10; }

+        .action-btn:active { transform: scale(0.95); }

+        svg { width: 24px; height: 24px; fill: currentColor; }

+    `;

+    render() {

+        return html`<div class="card"><div class="header"><span>${this.category}</span><span>${this.date}</span></div><h3>${this.title}</h3><p>${this.text}</p>${this.hasAttachment ? html`<div class="attachment-icon"><svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg></div>` : ''}<div class="action-btn"><svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg></div></div>`;

+    }

+}

+customElements.define('winzer-card', WinzerCard);

new file mode 100644

@@ -0,0 +1,152 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerFileCard extends LitElement {

+    static properties = {

+        file: { type: Object } // { name, date, size, type, isNew }

+    };

+

+    static styles = css`

+        :host {

+            display: block;

+            margin-bottom: 12px;

+        }

+        .file-card {

+            background-color: var(--bg-card); /* Standard: Grau für gelesene Dateien */

+            border-radius: var(--radius-sm);

+            padding: 12px 16px;

+            display: flex;

+            align-items: center;

+            border: 1px solid var(--border-color);

+            box-shadow: var(--shadow-sm);

+            position: relative;

+        }

+

+        /* UPDATE: Styling für neue Dateien (Weißer BG + Farbiger Rand) */

+        .file-card.has-new {

+            background-color: var(--bg-white);

+            border-color: var(--primary-color);

+        }

+

+        .icon-container {

+            width: 40px;

+            height: 40px;

+            display: flex;

+            align-items: center;

+            justify-content: center;

+            margin-right: 16px;

+            flex-shrink: 0;

+        }

+        .icon-container svg {

+            width: 32px;

+            height: 32px;

+        }

+        .file-info {

+            flex: 1;

+            min-width: 0; /* Text truncation fix */

+        }

+        .file-name {

+            font-weight: 400; /* UPDATE: Standard nicht fett */

+            font-size: 0.9rem;

+            color: var(--text-dark);

+            margin-bottom: 4px;

+            white-space: nowrap;

+            overflow: hidden;

+            text-overflow: ellipsis;

+        }

+        /* UPDATE: Fett nur wenn neu */

+        .has-new .file-name {

+            font-weight: 700;

+        }

+

+        .file-meta {

+            font-size: 0.75rem;

+            color: var(--text-muted);

+        }

+        .download-btn {

+            width: 36px;

+            height: 36px;

+            border: 1px solid var(--primary-color);

+            border-radius: 8px;

+            display: flex;

+            align-items: center;

+            justify-content: center;

+

+            /* UPDATE: Standard Button Style (Weiß) */

+            background-color: var(--bg-white);

+            color: var(--primary-color);

+

+            cursor: pointer;

+            margin-left: 12px;

+            flex-shrink: 0;

+

+            /* UPDATE: Transition angepasst an WinzerCard */

+            transition: transform 0.1s, background-color 0.2s;

+        }

+

+        /* UPDATE: Klick-Effekt hinzugefügt (wie bei WinzerCard) */

+        .download-btn:active {

+            transform: scale(0.95);

+        }

+

+        /* UPDATE: Button Style für neue Dateien (Primärfarbe) */

+        .has-new .download-btn {

+            background-color: var(--primary-color);

+            color: white;

+        }

+

+        .download-btn svg {

+            width: 20px;

+            height: 20px;

+        }

+

+        /* New Indicator Dot */

+        .new-dot {

+            position: absolute;

+            left: 6px; /* UPDATE: Position angepasst für fixe Ausrichtung */

+            top: 50%;

+            transform: translateY(-50%);

+            width: 6px;

+            height: 6px;

+            background-color: var(--primary-color);

+            border-radius: 50%;

+        }

+        /* UPDATE: Padding-Shift entfernt, damit Icons ausgerichtet bleiben */

+

+        /* Type Colors */

+        .type-pdf { color: var(--alert-color); }

+        .type-doc { color: #2b5797; } /* Word blueish */

+        .type-default { color: var(--text-muted); }

+    `;

+

+    _getIcon(type) {

+        const t = type.toLowerCase();

+        if (t === 'pdf') {

+            return html`<svg class="type-pdf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15l3 3 3-3"></path><path d="M12 18v-6"></path><text x="6" y="22" font-size="6" font-weight="bold" fill="currentColor" stroke="none">PDF</text></svg>`;

+        } else if (t === 'docx' || t === 'doc') {

+            return html`<svg class="type-doc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>`;

+        }

+        return html`<svg class="type-default" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`;

+    }

+

+    render() {

+        return html`

+            <div class="file-card ${this.file.isNew ? 'has-new' : ''}">

+                ${this.file.isNew ? html`<div class="new-dot"></div>` : ''}

+

+                <div class="icon-container">

+                    ${this._getIcon(this.file.type)}

+                </div>

+

+                <div class="file-info">

+                    <div class="file-name">${this.file.name}</div>

+                    <div class="file-meta">${this.file.date} &nbsp; ${this.file.size}</div>

+                </div>

+

+                <div class="download-btn">

+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>

+                </div>

+            </div>

+        `;

+    }

+}

+customElements.define('winzer-file-card', WinzerFileCard);

new file mode 100644

@@ -0,0 +1,15 @@

+import { LitElement, html, css } from 'lit';

+

+export class ToggleSwitch extends LitElement {

+    static properties = { checked: { type: Boolean } };

+    static styles = css`

+        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }

+        .switch input { opacity: 0; width: 0; height: 0; }

+        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: .4s; border-radius: 24px; }

+        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--bg-white); transition: .4s; border-radius: 50%; }

+        input:checked + .slider { background-color: var(--primary-color); }

+        input:checked + .slider:before { transform: translateX(20px); }

+    `;

+    render() { return html`<label class="switch"><input type="checkbox" ?checked="${this.checked}" @change="${e => this.checked = e.target.checked}"><span class="slider"></span></label>`; }

+}

+customElements.define('toggle-switch', ToggleSwitch);

new file mode 100644

@@ -0,0 +1,223 @@

+import { LitElement, html, css, svg } from 'lit';

+import { unsafeHTML } from 'lit/directives/unsafe-html.js';

+import './card/winzer-file-card.js';

+import './winzer-day-view.js';

+import './winzer-menu-group.js';

+import './winzer-modal.js';

+import './card/winzer-card.js';

+import './winzer-header.js';

+import './winzer-nav.js';

+import './toggle-switch.js';

+

+export class WinzerApp extends LitElement {

+    static properties = {

+        isUserModalOpen: { type: Boolean },

+        isFilterModalOpen: { type: Boolean },

+        currentTab: { type: String },

+

+        // Configurable properties

+        appTitle: { type: String, attribute: 'app-title' },

+        appSubtitle: { type: String, attribute: 'app-subtitle' },

+        navItems: { type: Array }, // [{ id, label, icon (svg string), url }]

+        menuAccount: { type: Array },

+        menuSession: { type: Array },

+    };

+

+    constructor() {

+        super();

+        this.isUserModalOpen = false;

+        this.isFilterModalOpen = false;

+        this.currentTab = 'news'; // Default tab

+

+        // Defaults

+        this.appTitle = 'WINZER-PORTAL';

+        this.appSubtitle = 'Badischer Winzerkeller';

+

+        // Default Navigation (can be overwritten via property)

+        this.navItems = [

+            {

+                id: 'news',

+                label: 'News',

+                url: '/news',

+                icon: svg`<svg viewBox="0 0 24 24"><path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2-2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>`

+            },

+            {

+                id: 'anlieferung',

+                label: 'Anlieferung',

+                url: '/anlieferung',

+                icon: svg`<svg viewBox="0 0 24 24"><circle cx="12" cy="10" r="2"/><circle cx="15.5" cy="8" r="2"/><circle cx="8.5" cy="8" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="10" cy="13" r="2"/><circle cx="14" cy="13" r="2"/><circle cx="12" cy="16" r="2"/><path d="M12 2v4" stroke-linecap="round"/></svg>`

+            },

+            {

+                id: 'tresor',

+                label: 'Datei-Tresor',

+                url: '/tresor',

+                icon: svg`<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="M12 12v3"/><path d="M12 12v-1"/></svg>`

+            }

+        ];

+

+        this.menuAccount = [

+            { label: 'Persönliche Daten', icon: svg`<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`, action: 'profile' },

+            { label: 'Sicherheits-Einstellungen', icon: svg`<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`, action: 'security' },

+            { label: 'Meine Buchungen', icon: svg`<circle cx="12" cy="10" r="2"/><circle cx="15.5" cy="8" r="2"/><circle cx="8.5" cy="8" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="10" cy="13" r="2"/><circle cx="14" cy="13" r="2"/><circle cx="12" cy="16" r="2"/><path d="M12 2v4"/>`, action: 'bookings' }

+        ];

+        this.menuSession = [

+            { label: 'Abmelden', icon: svg`<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>`, action: 'logout' }

+        ];

+    }

+

+    static styles = css`

+        :host {

+            display: block;

+            background-color: var(--bg-white);

+            min-height: 100vh;

+            width: 100%;

+            position: relative;

+        }

+        .content { padding: 20px; padding-bottom: 90px; }

+        .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

+        h1 { font-size: 1.5rem; font-weight: 800; margin: 0; text-transform: uppercase; }

+        .abo-label { font-size: 0.8rem; font-weight: 600; margin-left: auto; margin-right: 8px; }

+

+        /* Filter Bar */

+        .filter-bar {

+            display: flex;

+            align-items: center;

+            font-size: 0.9rem;

+            font-weight: 600;

+            margin-bottom: 16px;

+            cursor: pointer;

+        }

+        .filter-icon {

+            margin-left: 8px;

+            width: 24px;

+            height: 24px;

+            color: var(--text-dark);

+        }

+

+        /* Filter Modal Styles */

+        .filter-content {

+            background-color: var(--bg-white);

+            padding: 16px;

+            border-radius: var(--radius-card);

+            box-shadow: var(--shadow-sm);

+        }

+        .filter-row {

+            display: flex;

+            align-items: center;

+            justify-content: space-between;

+            margin-bottom: 12px;

+        }

+        .filter-row label {

+            display: flex;

+            align-items: center;

+            font-weight: 700;

+            font-size: 0.9rem;

+            color: var(--text-dark);

+        }

+        .filter-row label svg {

+            width: 20px;

+            height: 20px;

+            margin-right: 8px;

+            color: var(--primary-color);

+        }

+        .filter-select {

+            background-color: var(--bg-white);

+            border: 1px solid var(--border-color);

+            border-radius: 8px;

+            padding: 8px 12px;

+            font-size: 0.9rem;

+            color: var(--text-dark);

+            width: 160px;

+        }

+        .filter-btn {

+            width: 100%;

+            background-color: var(--primary-color);

+            color: white;

+            border: none;

+            border-radius: var(--radius-sm);

+            padding: 12px;

+            font-weight: 600;

+            font-size: 1rem;

+            margin-top: 20px;

+            display: flex;

+            align-items: center;

+            justify-content: center;

+            gap: 8px;

+            cursor: pointer;

+        }

+    `;

+

+    render() {

+        return html`

+            <!-- Header -->

+            <winzer-header

+                    .mainTitle="${this.appTitle}"

+                    .subTitle="${this.appSubtitle}"

+                    @user-click="${() => this.isUserModalOpen = true}">

+            </winzer-header>

+

+            <div class="content">

+                <!-- Dynamic Content Slot -->

+                <!--

+                   The main content is now injected via the default slot.

+                   Contao renders the page content, and it gets placed here.

+                -->

+                <slot></slot>

+            </div>

+

+            <!-- Bottom Nav -->

+            <winzer-nav

+                    .activeTab="${this.currentTab}"

+                    .items="${this.navItems}">

+            </winzer-nav>

+

+            <!-- MODAL: USER -->

+            <winzer-modal title="Mein Benutzerkonto" ?open="${this.isUserModalOpen}" @close="${() => this.isUserModalOpen = false}">

+                <winzer-menu-group .items="${this.menuAccount}"></winzer-menu-group>

+                <winzer-menu-group .items="${this.menuSession}"></winzer-menu-group>

+            </winzer-modal>

+

+            <!-- MODAL: FILTER -->

+            <winzer-modal title="FILTER - EINSTELLUNGEN" ?open="${this.isFilterModalOpen}" @close="${() => this.isFilterModalOpen = false}">

+                <div class="filter-content">

+                    <div class="filter-row">

+                        <label>

+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>

+                            Kategorie:

+                        </label>

+                        <select class="filter-select">

+                            <option>Traubengeld</option>

+                            <option>Rechnungen</option>

+                        </select>

+                    </div>

+                    <div class="filter-row">

+                        <label>

+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>

+                            Zeitraum:

+                        </label>

+                        <select class="filter-select">

+                            <option>Letzter Monat</option>

+                            <option>Dieses Jahr</option>

+                        </select>

+                    </div>

+                    <div class="filter-row" style="margin-top: 20px;">

+                        <label>

+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line><polyline points="18 20 21 23 24 20"></polyline></svg>

+                            Sortierung:

+                        </label>

+                        <select class="filter-select">

+                            <option>Datum absteigend</option>

+                            <option>Datum aufsteigend</option>

+                        </select>

+                    </div>

+

+                    <button class="filter-btn" @click="${() => this.isFilterModalOpen = false}">

+                        Filtern

+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

+                    </button>

+                </div>

+            </winzer-modal>

+        `;

+    }

+}

+customElements.define('winzer-app', WinzerApp);

new file mode 100644

@@ -0,0 +1,34 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerDayView extends LitElement {

+    static properties = { events: { type: Array } };

+    static styles = css`

+        :host { display: block; background: var(--bg-white); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; height: 600px; display: flex; flex-direction: column; }

+        .scroll-container { flex: 1; overflow-y: auto; position: relative; }

+        .day-grid { display: grid; grid-template-columns: 50px 1fr; grid-auto-rows: 20px; background-image: linear-gradient(to bottom, var(--border-color) 1px, transparent 1px); background-size: 100% 80px; background-attachment: local; }

+        .time-label { grid-column: 1; text-align: right; padding-right: 10px; font-size: 0.75rem; color: var(--text-muted); line-height: 1; transform: translateY(-50%); margin-top: 1px; }

+        .event-item { grid-column: 2; background-color: var(--primary-light); border-left: 4px solid var(--primary-color); border: 1px solid rgba(0,0,0,0.05); border-left-width: 4px; border-radius: 4px; padding: 6px 8px; font-size: 0.8rem; color: var(--primary-color); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; margin-right: 10px; margin-bottom: 2px; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; transition: transform 0.1s, filter 0.1s; }

+        .event-item:active { transform: scale(0.98); filter: brightness(0.95); }

+        .event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

+        .event-details-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; opacity: 0.8; line-height: 1.2; }

+        .capacity-text { font-weight: 600; }

+        .progress-track { width: 100%; height: 6px; background-color: rgba(255,255,255,0.6); border-radius: 3px; overflow: hidden; margin-top: auto; }

+        .progress-fill { height: 100%; background-color: var(--primary-color); border-radius: 3px; transition: width 0.3s ease; }

+        .event-item.fully-booked { border-color: var(--alert-color); border-left-width: 4px; background-color: var(--alert-light); color: #b71c1c; }

+        .event-item.fully-booked .progress-fill { background-color: var(--alert-color); }

+        .badge-booked-out { background-color: var(--alert-color); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; font-weight: bold; text-transform: uppercase; margin-right: 6px; display: inline-block; }

+        .event-item.short-event { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 6px; padding-bottom: 4px; gap: 8px; position: relative; }

+        .event-item.short-event .event-title { flex: 1; min-width: 0; }

+        .event-item.short-event .event-details-row { flex-shrink: 0; display: flex; align-items: center; }

+        .event-item.short-event .progress-track { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 2px; margin-top: 0; border-radius: 0; background-color: rgba(0,0,0,0.05); }

+        .event-item.short-event .progress-fill { border-radius: 0; }

+        .grid-spacer { grid-column: 1 / -1; grid-row: 97; height: 20px; }

+    `;

+    _timeToGridRow(t) { if(!t) return 1; const [h, m] = t.split(':').map(Number); return (h * 4) + Math.floor(m / 15) + 1; }

+    _formatNumber(n) { return new Intl.NumberFormat('de-DE').format(n); }

+    render() {

+        const hours = Array.from({ length: 24 }, (_, i) => i);

+        return html`<div class="scroll-container"><div class="day-grid">${hours.map(h => html`<div class="time-label" style="grid-row: ${(h * 4) + 1}">${h.toString().padStart(2, '0')}:00</div>`)}${this.events ? this.events.map(ev => { const startRow = this._timeToGridRow(ev.start); const endRow = this._timeToGridRow(ev.end); const durationRows = endRow - startRow; const isShort = durationRows <= 2; const isFull = (ev.total && ev.booked >= ev.total); let capacityLabel = ''; let progressBar = html``; if (ev.total && ev.total > 0) { const percent = Math.min(100, Math.round((ev.booked / ev.total) * 100)); capacityLabel = `${this._formatNumber(ev.booked)} / ${this._formatNumber(ev.total)} kg`; progressBar = html`<div class="progress-track"><div class="progress-fill" style="width: ${percent}%;"></div></div>`; } return html`<div class="event-item ${isShort ? 'short-event' : ''} ${isFull ? 'fully-booked' : ''}" style="grid-row: ${startRow} / ${endRow};" title="${ev.title}"><div class="event-title">${ev.title}</div><div class="event-details-row">${isFull ? html`<span class="badge-booked-out">Ausgebucht</span>` : ''}${!isShort || !isFull ? html`<span class="capacity-text">${capacityLabel}</span>` : ''}${isShort && capacityLabel ? '' : html`<span style="margin-left:8px;">${ev.start} - ${ev.end}</span>`}</div>${progressBar}</div>`; }) : ''}<div class="grid-spacer"></div></div></div>`;

+    }

+}

+customElements.define('winzer-day-view', WinzerDayView);

new file mode 100644

@@ -0,0 +1,19 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerHeader extends LitElement {

+    static properties = { mainTitle: { type: String, attribute: 'main-title' }, subTitle: { type: String, attribute: 'sub-title' } };

+    static styles = css`

+        :host { display: block; background: var(--bg-white); padding: 10px 20px; border-bottom: 1px solid var(--border-color); }

+        .top-bar { display: flex; align-items: center; justify-content: space-between; height: 60px; }

+        .logo-placeholder { border: 1px solid var(--primary-color); width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; color: var(--primary-color); font-weight: bold; line-height: 1; }

+        .title-group { text-align: center; }

+        .main-title { color: var(--primary-color); font-weight: bold; font-size: 1rem; text-transform: uppercase; }

+        .sub-title { font-size: 0.9rem; color: var(--primary-color); }

+        .user-icon { width: 32px; height: 32px; color: var(--text-main); cursor: pointer; }

+    `;

+    _handleUserClick() { this.dispatchEvent(new CustomEvent('user-click', { bubbles: true, composed: true })); }

+    render() {

+        return html`<div class="top-bar"><div class="logo-placeholder"><span>luumi</span><span>CORE</span></div><div class="title-group"><div class="main-title">${this.mainTitle || ''}</div><div class="sub-title">${this.subTitle || ''}</div></div><svg class="user-icon" @click="${this._handleUserClick}" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2"/></svg></div>`;

+    }

+}

+customElements.define('winzer-header', WinzerHeader);

new file mode 100644

@@ -0,0 +1,21 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerMenuGroup extends LitElement {

+    static properties = { items: { type: Array } };

+    static styles = css`

+        :host { display: block; margin-bottom: 20px; }

+        .menu-group { background-color: var(--bg-card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }

+        .menu-item { display: flex; align-items: center; padding: 16px 20px; cursor: pointer; background: var(--bg-white); border-bottom: 1px solid var(--border-color); font-size: 0.95rem; font-weight: 600; color: var(--text-dark); }

+        .menu-item:last-child { border-bottom: none; }

+        .menu-item:active { background-color: #f9f9f9; }

+        .menu-icon { width: 24px; height: 24px; margin-right: 16px; color: var(--primary-color); display: flex; justify-content: center; align-items: center; }

+        .menu-icon svg { width: 100%; height: 100%; display: block; }

+        .chevron { margin-left: auto; color: var(--primary-color); width: 18px; height: 18px; }

+    `;

+    _handleItemClick(item) { this.dispatchEvent(new CustomEvent('item-click', { detail: { action: item.action, label: item.label }, bubbles: true, composed: true })); }

+    render() {

+        if (!this.items || this.items.length === 0) return html``;

+        return html`<div class="menu-group">${this.items.map(item => html`<div class="menu-item" @click="${() => this._handleItemClick(item)}"><div class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${item.icon}</svg></div><span>${item.label}</span><svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>`)}</div>`;

+    }

+}

+customElements.define('winzer-menu-group', WinzerMenuGroup);

new file mode 100644

@@ -0,0 +1,20 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerModal extends LitElement {

+    static properties = { open: { type: Boolean }, title: { type: String } };

+    static styles = css`

+        :host { display: block; }

+        .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--primary-rgb), 0.85); backdrop-filter: blur(4px); z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding-top: 120px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

+        :host([open]) .backdrop { opacity: 1; pointer-events: all; }

+        .modal-container { width: 90%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; transform: translateY(20px); transition: transform 0.3s ease; }

+        :host([open]) .modal-container { transform: translateY(0); }

+        .modal-header { background-color: var(--primary-light); color: var(--primary-color); padding: 16px 20px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; box-shadow: var(--shadow-lg); }

+        .close-btn { cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }

+        .close-btn svg { width: 20px; height: 20px; stroke: var(--primary-color); stroke-width: 2; }

+    `;

+    _close() { this.dispatchEvent(new CustomEvent('close')); }

+    render() {

+        return html`<div class="backdrop" @click="${(e) => e.target.classList.contains('backdrop') && this._close()}"><div class="modal-container"><div class="modal-header"><span>${this.title}</span><div class="close-btn" @click="${this._close}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></div></div><slot></slot></div></div>`;

+    }

+}

+customElements.define('winzer-modal', WinzerModal);

new file mode 100644

@@ -0,0 +1,37 @@

+import { LitElement, html, css, svg } from 'lit';

+

+export class WinzerNav extends LitElement {

+    static properties = {

+        activeTab: { type: String },

+        items: { type: Array } // [{ id: 'news', label: 'News', icon: '...', url: '/news' }]

+    };

+

+    static styles = css`

+        :host { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-white); border-top: 1px solid var(--border-color); padding-bottom: env(safe-area-inset-bottom); z-index: 100; }

+        .nav-bar { display: flex; justify-content: space-around; padding: 10px 0; }

+        .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: var(--text-main); cursor: pointer; width: 80px; text-decoration: none; }

+        .nav-item.active { color: var(--primary-color); }

+        .nav-item svg { width: 24px; height: 24px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 2; }

+    `;

+

+    constructor() {

+        super();

+        this.items = [];

+    }

+

+    render() {

+        if (!this.items || this.items.length === 0) return html``;

+

+        return html`

+            <div class="nav-bar">

+                ${this.items.map(item => html`

+                    <a href="${item.url || '#'}" class="nav-item ${this.activeTab === item.id ? 'active' : ''}">

+                        ${item.icon}

+                        <span>${item.label}</span>

+                    </a>

+                `)}

+            </div>

+        `;

+    }

+}

+customElements.define('winzer-nav', WinzerNav);

@@ -6,6 +6,9 @@ import './components/card/luumicore-card.js';

 import './components/list/luumicore-list.js';

 import './components/list/luumicore-list-item.js';

+// Winzer Portal Components

+import './components/winzer-app.js';

+

 console.log('luumiCORE Core Bundle initialized');

 // Example component (kept for reference, can be removed if not needed)

new file mode 100644

@@ -0,0 +1,16 @@

+{% extends "@Contao/news/news_latest.html.twig" %}

+

+{% block content %}

+    {% set category = archive.title %}

+    {% set date = date|date("d.m.y") %}

+    {% set hasAttachment = enclosure is not empty %}

+

+    <winzer-card

+        category="{{ category }}"

+        date="{{ date }}"

+        title="{{ newsHeadline }}"

+        text="{{ teaser|striptags }}"

+        {% if hasAttachment %}hasAttachment{% endif %}

+    >

+    </winzer-card>

+{% endblock %}

@@ -1 +1 @@

-:root{--luumicore-primary: #8c124d;--luumicore-primary-tint: color-mix(in srgb, var(--luumicore-primary), #ffffff 85%);--luumicore-secondary: #f0f0f0;--luumicore-tertiary: #ffffff;--luumicore-text-color: #000000;--luumicore-shadow-color: rgba(from #000 r g b / 15%);--luumicore-shadow: .25rem .25rem .25rem var(--luumicore-shadow-color);--luumicore-border-radius: 1rem;--luumicore-element-spacing: 2rem}

+:root{--luumicore-primary: #8c124d;--luumicore-primary-tint: color-mix(in srgb, var(--luumicore-primary), #ffffff 85%);--luumicore-secondary: #f0f0f0;--luumicore-tertiary: #ffffff;--luumicore-text-color: #000000;--luumicore-shadow-color: rgba(from #000 r g b / 15%);--luumicore-shadow: .25rem .25rem .25rem var(--luumicore-shadow-color);--luumicore-border-radius: 1rem;--luumicore-element-spacing: 2rem;--primary-color: #8B1E43;--primary-rgb: 139, 30, 67;--primary-light: #FBEAEA;--alert-color: #D32F2F;--alert-light: #FFEBEE;--bg-app: #f0f0f0;--bg-card: #f4f4f4;--bg-white: #ffffff;--text-main: #333333;--text-dark: #000000;--text-muted: #888888;--border-color: #eeeeee;--shadow-sm: 0 2px 5px rgba(0,0,0,.05);--shadow-md: 0 4px 6px rgba(0,0,0,.2);--shadow-lg: 0 4px 12px rgba(0,0,0,.1);--radius-card: 16px;--radius-sm: 12px}body{margin:0;padding:0;background-color:var(--bg-app);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}::-webkit-scrollbar{width:0px;background:transparent}

@@ -1,265 +1,265 @@

-var mt = Object.defineProperty;

-var ft = (r, t, e) => t in r ? mt(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;

-var b = (r, t, e) => ft(r, typeof t != "symbol" ? t + "" : t, e);

+var Ee = Object.defineProperty;

+var Se = (o, e, t) => e in o ? Ee(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;

+var p = (o, e, t) => Se(o, typeof e != "symbol" ? e + "" : e, t);

 /**

  * @license

  * Copyright 2019 Google LLC

  * SPDX-License-Identifier: BSD-3-Clause

  */

-const T = globalThis, q = T.ShadowRoot && (T.ShadyCSS === void 0 || T.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Z = Symbol(), K = /* @__PURE__ */ new WeakMap();

-let nt = class {

-  constructor(t, e, s) {

-    if (this._$cssResult$ = !0, s !== Z) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");

-    this.cssText = t, this.t = e;

+const N = globalThis, te = N.ShadowRoot && (N.ShadyCSS === void 0 || N.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ie = Symbol(), oe = /* @__PURE__ */ new WeakMap();

+let fe = class {

+  constructor(e, t, i) {

+    if (this._$cssResult$ = !0, i !== ie) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");

+    this.cssText = e, this.t = t;

   }

   get styleSheet() {

-    let t = this.o;

-    const e = this.t;

-    if (q && t === void 0) {

-      const s = e !== void 0 && e.length === 1;

-      s && (t = K.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && K.set(e, t));

+    let e = this.o;

+    const t = this.t;

+    if (te && e === void 0) {

+      const i = t !== void 0 && t.length === 1;

+      i && (e = oe.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && oe.set(t, e));

     }

-    return t;

+    return e;

   }

   toString() {

     return this.cssText;

   }

 };

-const _t = (r) => new nt(typeof r == "string" ? r : r + "", void 0, Z), D = (r, ...t) => {

-  const e = r.length === 1 ? r[0] : t.reduce((s, i, n) => s + ((o) => {

-    if (o._$cssResult$ === !0) return o.cssText;

-    if (typeof o == "number") return o;

-    throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");

-  })(i) + r[n + 1], r[0]);

-  return new nt(e, r, Z);

-}, gt = (r, t) => {

-  if (q) r.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);

-  else for (const e of t) {

-    const s = document.createElement("style"), i = T.litNonce;

-    i !== void 0 && s.setAttribute("nonce", i), s.textContent = e.cssText, r.appendChild(s);

-  }

-}, F = q ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((t) => {

-  let e = "";

-  for (const s of t.cssRules) e += s.cssText;

-  return _t(e);

-})(r) : r;

+const Ce = (o) => new fe(typeof o == "string" ? o : o + "", void 0, ie), f = (o, ...e) => {

+  const t = o.length === 1 ? o[0] : e.reduce((i, r, n) => i + ((s) => {

+    if (s._$cssResult$ === !0) return s.cssText;

+    if (typeof s == "number") return s;

+    throw Error("Value passed to 'css' function must be a 'css' function result: " + s + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");

+  })(r) + o[n + 1], o[0]);

+  return new fe(t, o, ie);

+}, Me = (o, e) => {

+  if (te) o.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);

+  else for (const t of e) {

+    const i = document.createElement("style"), r = N.litNonce;

+    r !== void 0 && i.setAttribute("nonce", r), i.textContent = t.cssText, o.appendChild(i);

+  }

+}, se = te ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((e) => {

+  let t = "";

+  for (const i of e.cssRules) t += i.cssText;

+  return Ce(t);

+})(o) : o;

 /**

  * @license

  * Copyright 2017 Google LLC

  * SPDX-License-Identifier: BSD-3-Clause

  */

-const { is: At, defineProperty: vt, getOwnPropertyDescriptor: yt, getOwnPropertyNames: bt, getOwnPropertySymbols: Et, getPrototypeOf: St } = Object, f = globalThis, G = f.trustedTypes, xt = G ? G.emptyScript : "", L = f.reactiveElementPolyfillSupport, C = (r, t) => r, V = { toAttribute(r, t) {

-  switch (t) {

+const { is: Te, defineProperty: ze, getOwnPropertyDescriptor: Pe, getOwnPropertyNames: Ue, getOwnPropertySymbols: Oe, getPrototypeOf: He } = Object, y = globalThis, ne = y.trustedTypes, Re = ne ? ne.emptyScript : "", j = y.reactiveElementPolyfillSupport, T = (o, e) => o, F = { toAttribute(o, e) {

+  switch (e) {

     case Boolean:

-      r = r ? xt : null;

+      o = o ? Re : null;

       break;

     case Object:

     case Array:

-      r = r == null ? r : JSON.stringify(r);

+      o = o == null ? o : JSON.stringify(o);

   }

-  return r;

-}, fromAttribute(r, t) {

-  let e = r;

-  switch (t) {

+  return o;

+}, fromAttribute(o, e) {

+  let t = o;

+  switch (e) {

     case Boolean:

-      e = r !== null;

+      t = o !== null;

       break;

     case Number:

-      e = r === null ? null : Number(r);

+      t = o === null ? null : Number(o);

       break;

     case Object:

     case Array:

       try {

-        e = JSON.parse(r);

+        t = JSON.parse(o);

       } catch {

-        e = null;

+        t = null;

       }

   }

-  return e;

-} }, at = (r, t) => !At(r, t), Q = { attribute: !0, type: String, converter: V, reflect: !1, useDefault: !1, hasChanged: at };

-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), f.litPropertyMetadata ?? (f.litPropertyMetadata = /* @__PURE__ */ new WeakMap());

+  return t;

+} }, ve = (o, e) => !Te(o, e), ae = { attribute: !0, type: String, converter: F, reflect: !1, useDefault: !1, hasChanged: ve };

+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), y.litPropertyMetadata ?? (y.litPropertyMetadata = /* @__PURE__ */ new WeakMap());

 let E = class extends HTMLElement {

-  static addInitializer(t) {

-    this._$Ei(), (this.l ?? (this.l = [])).push(t);

+  static addInitializer(e) {

+    this._$Ei(), (this.l ?? (this.l = [])).push(e);

   }

   static get observedAttributes() {

     return this.finalize(), this._$Eh && [...this._$Eh.keys()];

   }

-  static createProperty(t, e = Q) {

-    if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {

-      const s = Symbol(), i = this.getPropertyDescriptor(t, s, e);

-      i !== void 0 && vt(this.prototype, t, i);

+  static createProperty(e, t = ae) {

+    if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {

+      const i = Symbol(), r = this.getPropertyDescriptor(e, i, t);

+      r !== void 0 && ze(this.prototype, e, r);

     }

   }

-  static getPropertyDescriptor(t, e, s) {

-    const { get: i, set: n } = yt(this.prototype, t) ?? { get() {

-      return this[e];

-    }, set(o) {

-      this[e] = o;

+  static getPropertyDescriptor(e, t, i) {

+    const { get: r, set: n } = Pe(this.prototype, e) ?? { get() {

+      return this[t];

+    }, set(s) {

+      this[t] = s;

     } };

-    return { get: i, set(o) {

-      const l = i == null ? void 0 : i.call(this);

-      n == null || n.call(this, o), this.requestUpdate(t, l, s);

+    return { get: r, set(s) {

+      const l = r == null ? void 0 : r.call(this);

+      n == null || n.call(this, s), this.requestUpdate(e, l, i);

     }, configurable: !0, enumerable: !0 };

   }

-  static getPropertyOptions(t) {

-    return this.elementProperties.get(t) ?? Q;

+  static getPropertyOptions(e) {

+    return this.elementProperties.get(e) ?? ae;

   }

   static _$Ei() {

-    if (this.hasOwnProperty(C("elementProperties"))) return;

-    const t = St(this);

-    t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);

+    if (this.hasOwnProperty(T("elementProperties"))) return;

+    const e = He(this);

+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);

   }

   static finalize() {

-    if (this.hasOwnProperty(C("finalized"))) return;

-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(C("properties"))) {

-      const e = this.properties, s = [...bt(e), ...Et(e)];

-      for (const i of s) this.createProperty(i, e[i]);

+    if (this.hasOwnProperty(T("finalized"))) return;

+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(T("properties"))) {

+      const t = this.properties, i = [...Ue(t), ...Oe(t)];

+      for (const r of i) this.createProperty(r, t[r]);

     }

-    const t = this[Symbol.metadata];

-    if (t !== null) {

-      const e = litPropertyMetadata.get(t);

-      if (e !== void 0) for (const [s, i] of e) this.elementProperties.set(s, i);

+    const e = this[Symbol.metadata];

+    if (e !== null) {

+      const t = litPropertyMetadata.get(e);

+      if (t !== void 0) for (const [i, r] of t) this.elementProperties.set(i, r);

     }

     this._$Eh = /* @__PURE__ */ new Map();

-    for (const [e, s] of this.elementProperties) {

-      const i = this._$Eu(e, s);

-      i !== void 0 && this._$Eh.set(i, e);

+    for (const [t, i] of this.elementProperties) {

+      const r = this._$Eu(t, i);

+      r !== void 0 && this._$Eh.set(r, t);

     }

     this.elementStyles = this.finalizeStyles(this.styles);

   }

-  static finalizeStyles(t) {

-    const e = [];

-    if (Array.isArray(t)) {

-      const s = new Set(t.flat(1 / 0).reverse());

-      for (const i of s) e.unshift(F(i));

-    } else t !== void 0 && e.push(F(t));

-    return e;

+  static finalizeStyles(e) {

+    const t = [];

+    if (Array.isArray(e)) {

+      const i = new Set(e.flat(1 / 0).reverse());

+      for (const r of i) t.unshift(se(r));

+    } else e !== void 0 && t.push(se(e));

+    return t;

   }