/* httpdocs/css/style.css */

/* --- 1. CSS-Variablen (Themes) --- */
/* Light Theme (Standard) */
:root {
    --primary-color: #9575cd;           /* Primäres Lila */
    --primary-hover: #7e57c2;           /* Dunkleres Lila für Hover-Effekte */
    --primary-light: #b39ddb;           /* Helleres Lila für Akzente */

    --background-color: #f9f9f9;        /* Heller Seitenhintergrund */
    --card-background: #ffffff;         /* Weißer Hintergrund für Karten und Boxen */

    --text-color: #333333;              /* Dunkler Standardtext */
    --secondary-text: #666666;          /* Sekundärer Text/Grauton */
    --border-color: #e0e0e0;            /* Heller Rand für Trennlinien */

    --success-color: #4caf50;           /* Grün für Erfolgsmeldungen */
    --error-color: #f44336;             /* Rot für Fehlermeldungen */
    --info-color: #2196F3;              /* Blau für Informationsmeldungen */

    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Standard-Schatten für Tiefeneffekte */
    --transition: all 0.3s ease;        /* Sanfte Übergänge für Animationen */

    /* Farben für Outline-Buttons im Header (Light Mode) */
    --header-btn-outline-color: white; /* Rahmenfarbe: Weiß */
    --header-btn-outline-text-color: white; /* Textfarbe: Weiß */
    --header-btn-outline-hover-bg: rgba(255, 255, 255, 0.2); /* Hintergrund beim Hover: leicht transparentes Weiß */
    --header-btn-outline-hover-text: white; /* Textfarbe beim Hover: Weiß */
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #bb86fc; /* Helleres Lila für Dark Mode */
    --primary-hover: #a66efa;
    --primary-light: #d0bcff;

    --background-color: #121212; /* Dunkler Seitenhintergrund */
    --card-background: #1e1e1e; /* Dunklerer Hintergrund für Karten und Boxen */

    --text-color: #e0e0e0; /* Heller Text für Dark Mode */
    --secondary-text: #b0b0b0;
    --border-color: #333333;

    --success-color: #81c784;
    --error-color: #e57373;
    --info-color: #64b5f6;

    --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

    /* Farben für Outline-Buttons im Header (Dark Mode) */
    --header-btn-outline-color: var(--primary-light); /* Rahmenfarbe: Hell-Lila */
    --header-btn-outline-text-color: var(--primary-light); /* Textfarbe: Hell-Lila */
    --header-btn-outline-hover-bg: rgba(255, 255, 255, 0.2); /* Hintergrund beim Hover: leicht transparentes Weiß */
    --header-btn-outline-hover-text: var(--primary-light); /* Textfarbe beim Hover: Hell-Lila */
}


/* --- 2. Globale Resets & Body Styling --- */
* {
    box-sizing: border-box; /* Bessere Kontrolle über Padding und Border */
    margin: 0;
    padding: 0;
    transition: all 0.3s ease; /* Sanfte Übergänge für alle animierbaren Eigenschaften (z.B. Theme-Wechsel) */
    word-wrap: break-word; /* Bricht lange Wörter um, um Textüberläufe zu verhindern (ältere Browser) */
    overflow-wrap: break-word; /* Moderne Alternative zu word-wrap */
}

body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6; /* Guter Wert für Lesbarkeit */
    min-height: 100vh; /* Mindesthöhe des Viewports für Sticky Footer */
    display: flex;
    flex-direction: column; /* Vertikale Anordnung für Header, Content, Footer */
}

.container {
    width: 90%; /* Standardbreite des Inhaltsbereichs */
    max-width: 1200px; /* Maximale Breite für große Bildschirme */
    margin: 0 auto; /* Horizontale Zentrierung */
    padding: 20px;
    flex-grow: 1; /* Lässt den Container den verfügbaren Platz einnehmen (für Sticky Footer) */
}

/* --- 3. Header Styling --- */
header {
    background-color: var(--primary-color);
    padding: 15px 0;
    color: white;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 100; /* Sehr hoher z-Index, damit Dropdown immer oben ist */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Erlaubt, dass Elemente auf kleineren Bildschirmen umbrechen */
    padding: 0 20px; /* Innenabstand für den Header-Inhalt */
}

.site-title { /* Für den klickbaren Titel */
    margin: 0;
    font-weight: 600;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; /* Verhindert, dass der Titel auf mobilen Geräten zu stark schrumpft */
}
.site-title a {
    color: inherit; /* Vererbt die Farbe vom h1 */
    text-decoration: none;
    transition: all 0.3s ease;
}
.site-title a:hover {
    filter: brightness(1.1); /* Leicht aufhellen beim Hover */
}


.header-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Erlaubt, dass Buttons auf kleinen Bildschirmen umbrechen */
    gap: 10px; /* Abstand zwischen den Buttons */
    margin-left: auto; /* Buttons nach rechts schieben */
}

/* NEU: Dropdown-Menü im Header */
.dropdown {
    position: relative;
    display: inline-block; /* Wichtig für die Positionierung des Dropdowns */
}

.dropdown-toggle {
    /* Nutzt die btn-outline Styles */
    /* Background und Border werden durch die btn-outline Klasse gesetzt */
}
/* Für Icons innerhalb von Buttons, um ihre Farbe bei btn-outline zu kontrollieren */
.btn-outline i {
    color: var(--header-btn-outline-text-color); /* Icons haben dieselbe Farbe wie der Text */
}
.btn-outline:hover i {
    color: var(--header-btn-outline-hover-text); /* Icon Farbe beim Hover */
}


.dropdown-content {
    display: none; /* Standardmäßig versteckt */
    position: absolute;
    background-color: var(--card-background);
    min-width: 200px;
    box-shadow: var(--shadow);
    border-radius: 8px;
    z-index: 100; /* Liegt über anderen Inhalten, aber unter dem Modal */
    right: 0; /* Rechtsbündig zum Button */
    padding: 10px 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; /* Klicks deaktivieren, wenn versteckt */
    /* Neue Regel: Max-Height und Scroll für lange Dropdowns */
    max-height: 80vh; /* Maximal 80% der Viewport-Höhe */
    overflow-y: auto; /* Scrollbar, wenn Inhalt zu lang */
}

/* JavaScript fügt die Klasse 'show' hinzu */
.dropdown.show .dropdown-content {
    display: block; /* Wichtig: Ändert display von 'none' zu 'block' */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: flex; /* Für Icon und Text */
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Dropdown-Einträge brechen nicht um */
}

.dropdown-content a:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 10px 0;
}

.dropdown-content .btn-logout {
    width: calc(100% - 20px); /* Padding berücksichtigen */
    margin: 0 10px;
    background-color: var(--error-color); /* Spezifische Farbe für Logout */
    color: white;
}
.dropdown-content .btn-logout:hover {
    background-color: color-mix(in srgb, var(--error-color) 10%, black);
}

.theme-toggle {
    background: none;
    border: none;
    color: white; /* Icon Farbe ist immer weiß */
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* --- 4. Button Styling --- */
.btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex; /* Für Icon-Ausrichtung und flexible Inhalte */
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    transition: all 0.3s ease; /* Übergänge für alle animierbaren Eigenschaften */
    font-weight: 500;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Button-Text */
    flex-grow: 0;
    flex-shrink: 0;
}

.btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px); /* Leichter "Lift"-Effekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--header-btn-outline-color); /* Farbe aus Variablen für bessere Lesbarkeit */
    color: var(--header-btn-outline-text-color); /* Textfarbe aus Variablen */
}

.btn-outline:hover {
    background-color: var(--header-btn-outline-hover-bg);
    color: var(--header-btn-outline-hover-text);
}

/* Spezifische Button-Farben */
.btn-register, .btn-success { background-color: var(--success-color); }
.btn-register:hover, .btn-success:hover { background-color: var(--success-color); filter: brightness(1.1); } /* Leichter aufhellen */

.btn-unregister, .btn-error { background-color: var(--error-color); }
.btn-unregister:hover, .btn-error:hover { background-color: var(--error-color); filter: brightness(1.1); }

.btn-view-participants, .btn-info { background-color: var(--info-color); }
.btn-view-participants:hover, .btn-info:hover { background-color: var(--info-color); filter: brightness(1.1); }

.btn-secondary { background-color: var(--secondary-text); }
.btn-secondary:hover { background-color: #555555; } /* Dunkleres Grau beim Hover */

/* --- 5. Allgemeine Inhaltsbereiche --- */
.welcome-message {
    margin: 30px 0;
    text-align: center;
    padding: 20px;
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.welcome-message h2 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    flex-wrap: wrap; /* Ermöglicht Umbruch bei langen Titeln oder vielen Buttons */
}

.section-header h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px; /* Abstand, wenn umgebrochen wird (auf kleinen Bildschirmen) */
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
}

/* --- 6. Karten-Layouts (Events, Produkte, Profile) --- */
.event-list, .product-list, .order-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsives Grid-Layout */
    gap: 20px; /* Abstand zwischen den Grid-Elementen */
    margin-top: 20px;
}

.event-item, .product-item, .kiosk-order-item { /* Profile-Card ist anders, daher hier raus */
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid var(--primary-color); /* Standard-Akzentlinie */
    display: flex; /* Machen wir die Karten selbst zu Flexbox-Containern */
    flex-direction: column; /* Inhalt vertikal anordnen */
    justify-content: space-between; /* Inhalt streckt sich, Buttons kleben am unteren Rand */
}

.event-item:hover, .product-item:hover, .kiosk-order-item:hover { /* Profile-Card ist anders */
    transform: translateY(-5px); /* Leichter "Lift"-Effekt */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.event-item h3, .product-item h3, .kiosk-order-item strong { /* Profile-Card h2 ist anders */
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.3rem;
    word-break: break-word; /* WICHTIG: Lange Namen brechen um */
    overflow-wrap: break-word; /* Moderne Alternative */
}

.event-info p, .product-info p {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start; /* Icons oben ausrichten */
    gap: 10px;
    word-break: break-word; /* WICHTIG: Text in Infos bricht um */
    overflow-wrap: break-word;
}

.event-info i, .product-info i {
    color: var(--primary-color);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0; /* Icon schrumpft nicht */
}

.event-actions, .product-actions {
    margin-top: auto; /* Schiebt die Buttons an den unteren Rand der Karte */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Buttons können umbrechen */
    gap: 10px;
}

/* Spezifische Anpassung für den Bestell-Button in Produktkarten */
.product-actions form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Formular nimmt volle Breite ein */
    flex-wrap: wrap; /* ERMÖGLICHT UMBRUCH von Menge-Input und Button */
}
.product-actions input[type="number"] {
    width: 80px; /* Feste Breite für die Menge */
    flex-shrink: 0; /* Verhindert Schrumpfen */
}
.product-actions button[type="submit"] {
    flex-grow: 1; /* Bestell-Button füllt den restlichen Platz aus */
    min-width: 120px; /* Mindestbreite, damit er nicht zu klein wird */
    white-space: normal; /* ERLAUBT UMBRUCH des Button-Texts */
    text-align: center;
}


/* --- 7. Formular Styling --- */
.form-container {
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 500;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="datetime-local"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 16px;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-light);
}

textarea {
    height: 120px;
    resize: vertical; /* Nur vertikal skalierbar */
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Checkbox etwas größer */
    accent-color: var(--primary-color); /* Farbe der Checkbox */
}

/* Passwort-Anforderungen (in Popups) */
.password-requirements {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.requirement {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.requirement i {
    font-size: 0.7em; /* Icon etwas kleiner */
}

.requirement.valid {
    color: var(--success-color);
}

/* --- 8. Nachrichten-Boxen --- */
.message {
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Leichter Schatten für Nachrichten */
}

.message-success {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success-color);
    border-left: 4px solid var(--success-color);
}

.message-error {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--error-color);
    border-left: 4px solid var(--error-color);
}

.message-info {
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--info-color);
    border-left: 4px solid var(--info-color);
}

/* --- 9. Popup Styling --- */
.popup {
    display: none; /* Standardmäßig versteckt, wird mit JS auf 'flex' gesetzt */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Halbdurchsichtiger Hintergrund */
    z-index: 1000; /* Liegt über allem anderen */
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0; /* Für Fade-In Animation */
    animation: fadeInPopup 0.3s forwards; /* Anwendung der Animation */
    overflow-y: auto; /* Scrollbar für den gesamten Popup-Container, wenn Inhalt zu groß ist */
    -webkit-overflow-scrolling: touch; /* Verbessertes Scrollverhalten auf iOS */
}

@keyframes fadeInPopup {
    from { opacity: 0; }
    to { opacity: 1; }
}

.popup-content {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 12px;
    width: 450px;
    max-width: 100%; /* Passt sich kleinen Bildschirmen an */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; /* Padding und Border werden in der Gesamtbreite berücksichtigt */
    transform: translateY(-20px); /* Startposition für Slide-In */
    animation: slideInPopup 0.3s forwards;
    max-height: 90vh; /* Maximal 90% der Viewport-Höhe */
    overflow-y: auto; /* Scrollbar für den Inhalt des Popups, wenn er überläuft */
}

@keyframes slideInPopup {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.popup .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: var(--secondary-text);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup .close:hover {
    color: var(--error-color);
    transform: rotate(90deg); /* Animation beim Schließen */
}

.popup h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    text-align: center;
}

.popup-footer {
    margin-top: 20px;
    text-align: center;
    color: var(--secondary-text);
}

.popup-footer a {
    color: var(--primary-color);
    text-decoration: none;
}

/* --- 10. Footer Styling --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--card-background);
    color: var(--secondary-text);
    margin-top: auto; /* Klebt den Footer am unteren Ende des Viewports */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
}

/* --- 11. Profilbild & QR-Code Styling --- */
/* Dies ist die universelle Regel für alle Profilbilder und Avatare */
/* HINWEIS: display: block; ist hier entscheidend für die Zentrierung und Box-Modell-Verhalten */
.profile-avatar, .user-avatar, .profile-picture-small, .participant-avatar {
    border-radius: 50%; /* Rundes Bild standardmäßig */
    object-fit: cover; /* Bild füllt den Container und wird beschnitten */
    object-position: center center; /* Zentriert das Bild */
    border: 3px solid var(--primary-color); /* Standard-Border */
    box-shadow: var(--shadow);
    display: block; /* NEU: Wichtig für margin: auto und feste Größen */
    margin: 0 auto; /* Zentriert das Bild horizontal */
}

/* Spezifische Größen und Ränder für Avatare */
.profile-avatar { /* Größerer Avatar auf der Profilseite */
    width: 120px;
    height: 120px;
    margin-bottom: 15px;
    box-shadow: 0 0 0 5px rgba(122, 66, 244, 0.1);
}

.user-card .user-avatar { /* Anpassung für User-Karten in der Liste */
    width: 90px;
    height: 90px;
    margin-bottom: 15px; /* Abstand zur Überschrift im Karten-Kontext */
    border: 3px solid var(--secondary-color); /* Andere Border-Farbe für User-Karten */
}

.profile-picture-small { /* Kleinere Bilder, z.B. in Listen/Popups */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    flex-shrink: 0;
    margin: 0; /* Überschreibt margin:auto für Listenelemente, da sie in Flexbox sind */
}

/* Spezielle Regeln für Lost & Found Bilder */
.lost-found-image {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px; /* Rechteckige Bilder mit abgerundeten Ecken */
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    /* Hinweis: object-fit etc. sind bereits in der universellen Regel oben definiert */
    /* Hier keine margin:0 auto; da es 100% Breite hat und zentriert wird durch align-items: center im Parent */
}


.qr-code-container {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}
.qr-code-container img {
    max-width: 180px; /* Sicherstellen, dass QR-Code nicht überläuft */
    height: auto;
    border: 5px solid white;
    box-shadow: var(--shadow);
}

/* --- 12. Kiosk & Bestellungen Styling --- */
.kiosk-order-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.kiosk-order-item {
    background-color: var(--card-background);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-left: 5px solid var(--info-color); /* Standard für ausstehend */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kiosk-order-item.completed {
    border-left-color: var(--success-color);
    opacity: 0.7; /* Leicht gedimmt, wenn erledigt */
}

.kiosk-order-item p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* Erlaubt dem Inhalt in Flexbox zu schrumpfen */
}
.kiosk-order-item p strong {
    flex-shrink: 0; /* Verhindert, dass der Label-Text zu stark schrumpft */
}
.kiosk-order-item p span {
    word-break: break-word; /* Erzwingt Zeilenumbruch auch innerhalb von Wörtern */
}

.kiosk-order-item .order-status {
    font-weight: bold;
    color: var(--error-color);
}
.kiosk-order-item.completed .order-status {
    color: var(--success-color);
}
.kiosk-order-item .action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap; /* Buttons können umbrechen */
}
.kiosk-order-item .action-buttons .btn {
    width: auto;
    padding: 8px 15px;
    font-size: 0.9em;
    margin: 0; /* Überschreibt globalen Margin */
    flex-grow: 1; /* Buttons gleichmäßig verteilen */
}

/* --- 13. Admin/Mod Event Management Styling (Tabs) --- */
.tab-navigation {
    display: flex;
    justify-content: flex-start;
    border-bottom: 2px solid var(--border-color);
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab-link {
    padding: 12px 20px;
    text-decoration: none;
    color: var(--secondary-text);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: -2px; /* Überlappt die Border leicht, um eine saubere Linie zu erzeugen */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1; /* Tabs füllen den verfügbaren Platz aus */
    text-align: center; /* Text zentrieren */
}

.tab-link:hover {
    color: var(--primary-hover);
    border-bottom-color: var(--primary-light);
}

.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    border-top-left-radius: 0; /* Passt optisch zum aktiven Tab */
}

/* Styling für Event-Teilnehmerliste (im Admin-Bereich und Popup) */
.event-participant-list .event-item,
.participant-item { /* Unified styling for list items in admin & popup */
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 10px;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leichter Schatten */
}

/* Spezifische Border-Farbe für Admin-Liste nach Status */
.event-participant-list .event-item.pending {
    border-left: 4px solid var(--info-color);
}
.event-participant-list .event-item.approved {
    border-left: 4px solid var(--success-color);
}
.event-participant-list .event-item.rejected {
    border-left: 4px solid var(--error-color);
}

.event-participant-list .participant-info { /* Im Admin-Panel */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-participant-list .participant-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1em;
    margin-bottom: 5px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.participant-name-display { /* Nur im Popup, für den formatierten Namen */
    font-weight: 600;
    color: var(--primary-color); /* Lila wie die Primary-Farbe */
    font-size: 1.1em;
    flex-grow: 1;
    word-break: break-word;
    overflow-wrap: break-word;
}

.event-participant-list .participant-status {
    font-size: 0.9em;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}

.event-participant-list .participant-status.status-pending {
    color: var(--error-color);
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--error-color);
}

.event-participant-list .participant-status.status-approved {
    color: var(--success-color);
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--success-color);
}

.event-participant-list .participant-status.status-rejected {
    color: var(--error-color);
    background-color: rgba(244, 67, 54, 0.1);
    border: 1px solid var(--error-color);
}

.participant-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.participant-actions .btn {
    margin: 0;
    width: auto;
    padding: 8px 12px;
    font-size: 0.85em;
    white-space: nowrap;
}

/* --- 14. Styling für User List Seite (user_list.php) --- */
.user-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsives Grid */
    gap: 20px;
    margin-top: 20px;
}

.user-card-link {
    text-decoration: none; /* Link-Unterstreichung entfernen */
    color: inherit; /* Textfarbe vom Eltern-Element erben */
}

.user-card {
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Inhalt */
    text-align: center;
    height: 100%; /* Wichtig, damit alle Karten die gleiche Höhe haben im Grid */
}

.user-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* user-avatar wird jetzt von der allgemeinen .profile-avatar-Regel beeinflusst */
.user-card .user-avatar { /* Spezifische Anpassungen für user-card, überschreibt die Standardgröße von .profile-avatar */
    width: 90px;
    height: 90px;
    margin-bottom: 15px; /* Abstand zur Überschrift im Karten-Kontext */
    border: 3px solid var(--secondary-color); /* Andere Border-Farbe für User-Karten */
}

.user-card h3 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em;
}

.user-bio {
    color: var(--secondary-text);
    font-size: 0.95em;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow bio to take available space */
    overflow: hidden; /* Verhindert Überlauf */
    text-overflow: ellipsis; /* Fügt ... hinzu, wenn Text abgeschnitten wird */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Zeigt maximal 3 Zeilen */
    -webkit-box-orient: vertical;
    line-height: 1.4em; /* Zeilenhöhe für die Abschneidefunktion */
    max-height: 4.2em; /* 3 Zeilen * 1.4em */
}

.user-bio.no-bio {
    font-style: italic;
    color: #a0a0a0;
}

/* --- NEU: Styling für Lost & Found Seiten --- */
.lost-found-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.lost-found-item {
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--info-color); /* Blaue Akzentlinie für Lost&Found */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.lost-found-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.lost-found-image { /* Spezifische Styling für Lost & Found Bilder */
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px; /* Rechteckige Bilder mit abgerundeten Ecken */
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.lost-found-item h4 {
    color: var(--primary-color);
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.lost-found-item p {
    font-size: 0.95em;
    color: var(--text-color);
    margin-bottom: 8px;
}

.lost-found-item .timestamp {
    font-size: 0.8em;
    color: var(--secondary-text);
    margin-top: auto; /* Klebt den Timestamp nach unten */
}

.lost-found-item a {
    color: var(--info-color);
    text-decoration: none;
    font-weight: 500;
}
.lost-found-item a:hover {
    text-decoration: underline;
}

/* --- NEU: Styling für Fahrtangebote --- */
.ride-offer-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ride-offer-item {
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--success-color); /* Grüne Akzentlinie für Angebote */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.ride-offer-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.ride-offer-item h4 {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.ride-offer-item p {
    font-size: 0.95em;
    color: var(--text-color);
    margin-bottom: 5px;
}

.ride-offer-item p strong {
    color: var(--primary-color);
}

.ride-offer-item a {
    color: var(--info-color);
    text-decoration: none;
    font-weight: 500;
}
.ride-offer-item a:hover {
    text-decoration: underline;
}

/* --- 15. Responsive Anpassungen --- */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .site-title { /* Zentrierung des Titels auf Mobilgeräten */
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .header-buttons {
        margin-top: 0;
        width: 100%;
        justify-content: space-around;
        gap: 8px;
    }
    
    .btn {
        margin: 0;
        flex-grow: 1;
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Dropdown auf Mobilgeräten */
    .dropdown {
        width: 100%;
    }
    .dropdown-toggle {
        width: 100%; /* Der Menü-Button füllt die Breite */
    }
    .dropdown-content {
        position: static; /* Nicht mehr absolut positioniert */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        transform: none;
        margin-top: 10px; /* Abstand zum Button */
        background-color: var(--background-color); /* Angepasster Hintergrund */
    }
    .dropdown-content a {
        padding: 10px 15px;
    }


    h1 { font-size: 1.6rem; margin-bottom: 0; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .section-header h3 { margin-bottom: 15px; }
    .section-header .btn { width: auto; }

    .event-list, .product-list, .order-list, .user-list-grid,
    .lost-found-list-grid, .ride-offer-list-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf kleinen Geräten */
    }

    .popup-content { padding: 20px; }
    .tab-navigation { flex-direction: column; justify-content: center; margin-bottom: 15px; }
    .tab-link { width: 100%; margin: 5px 0; font-size: 0.9em; padding: 10px 15px; }


    .event-participant-list .event-item,
    .participant-item { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
    .event-participant-list .participant-info { align-items: center; }
    .event-participant-list .profile-picture-small { margin-bottom: 10px; }
    .participant-actions { width: 100%; margin-top: 10px; }
    .participant-name-display { text-align: center; }
}

@media (max-width: 480px) {
    .container { padding: 10px; }
    h1 { font-size: 1.4rem; }
    .section-header h3 { font-size: 1.3rem; }
    .tab-link { font-size: 0.85em; padding: 8px 10px; }
    .profile-header-info { flex-direction: column; text-align: center; }
    .profile-header-info img { margin: 0 auto 15px; }
}
.static-content {
    background-color: var(--card-background);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.static-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}
.static-content h3:first-child {
    margin-top: 0;
}
/* --- Frutiger Aero Fortschrittsbalken (Event-Seite) --- */

.progress-bar-container {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    height: 28px;
    margin-top: 20px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* Leichter Innenschatten für Tiefe */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 20px;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Weichere Animation */
    position: relative;
    overflow: hidden;

    /* Haupt-Farbverlauf (Lila) */
    background: linear-gradient(to bottom, var(--primary-light), var(--primary-color));
}

/* Glanz-Effekt und animierte Streifen */
.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 1. Glanz-Schicht (oben hell, nach unten transparent) */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.05) 50%,
        rgba(0, 0, 0, 0.05) 51%,
        rgba(0, 0, 0, 0.2) 100%
    ),
    /* 2. Animierte diagonale Streifen */
    repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );

    background-size: 200% 200%;
    animation: moveStripes 2s linear infinite;
}

/* --- 16. Galerie Styling --- */

.gallery-page-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
    background-color: var(--card-background);
    border-radius: 15px;
    box-shadow: var(--shadow);
}
.gallery-page-header h1 {
    color: var(--primary-color);
    margin-bottom: 10px;
}
.gallery-page-header p {
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.event-gallery-section {
    margin-bottom: 40px;
}

.event-gallery-title {
    color: var(--primary-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.photo-thumbnail {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}
.photo-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox/Modal Styling */
#lightboxPopup .lightbox-content {
    display: flex;
    flex-direction: row;
    max-width: 90vw;
    width: 1200px;
    height: 80vh;
    padding: 0;
}
.lightbox-image-container {
    flex: 3;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0 12px;
}
#lightboxImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-details {
    flex: 1;
    padding: 25px;
    background-color: var(--card-background);
    overflow-y: auto;
    border-radius: 0 12px 12px 0;
}

#lightboxInfo .uploader-info {
    font-weight: bold;
    color: var(--secondary-text);
}
#lightboxInfo .caption-info {
    font-style: italic;
    padding: 10px;
    background-color: var(--background-color);
    border-radius: 5px;
}

#lightboxTags h4 {
    color: var(--primary-color);
    margin-top: 20px;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-item {
    background-color: var(--primary-light);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 0.9em;
}

.tagging-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
#tagSearchInput {
    width: 100%;
    margin-bottom: 10px;
}
#tagSearchResults {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}
.tag-search-result {
    padding: 8px 12px;
    cursor: pointer;
}
.tag-search-result:hover {
    background-color: var(--background-color);
}

@media (max-width: 992px) {
    #lightboxPopup .lightbox-content {
        flex-direction: column;
        height: 90vh;
    }
    .lightbox-image-container { border-radius: 12px 12px 0 0; }
    .lightbox-details { border-radius: 0 0 12px 12px; }
}
/* --- 17. Kiosk-Rezept-Styling --- */
.recipe-toggle-btn {
    width: 100%;
    margin-top: 10px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.recipe-details {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-top: none;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
}
.recipe-details h5 {
    color: var(--primary-color);
    margin-top: 10px;
    margin-bottom: 5px;
}
.recipe-details ul {
    list-style: none;
    padding-left: 0;
}
.recipe-details li {
    padding: 3px 0;
}
.recipe-details p {
    line-height: 1.5;
}
.ingredient-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.ingredient-row .ingredient-select { flex: 2; }
.ingredient-row .quantity-input { flex: 1; }
/* ================================
   KIOSK DESIGN SYSTEM - PURPLE FULLWIDTH
   ================================ */

/* === VARIABLES === */
:root {
  --kiosk-purple-primary: #8b5cf6;
  --kiosk-purple-secondary: #a78bfa;
  --kiosk-purple-light: #c4b5fd;
  --kiosk-purple-dark: #7c3aed;
  --kiosk-purple-bg: rgba(139, 92, 246, 0.08);
  --kiosk-purple-border: rgba(139, 92, 246, 0.2);
  --kiosk-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  --kiosk-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* === MAIN CONTAINER - FORCES FULL WIDTH === */
.kiosk-order-item {
  /* Vollbreite erzwingen */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  
  /* Styling */
  background: var(--card-background);
  border: 2px solid var(--kiosk-purple-border);
  border-radius: 12px;
  box-shadow: var(--kiosk-shadow);
  
  /* Flex für innere Struktur */
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
  
  transition: all 0.3s ease;
}

.kiosk-order-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--kiosk-shadow-hover);
  border-color: var(--kiosk-purple-primary);
}

/* === ORDER HEADER === */
.kiosk-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  box-sizing: border-box;
  
  background: var(--kiosk-purple-bg);
  border: 1px solid var(--kiosk-purple-border);
  border-radius: 8px;
  
  flex-shrink: 0;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.order-info strong { 
  font-size: 1.2em;
  font-weight: 700;
  color: var(--kiosk-purple-primary);
}

.order-info span { 
  color: var(--text-light);
  font-size: 0.9em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === PRODUCT DETAILS === */
.order-item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  box-sizing: border-box;
  gap: 20px;
  
  background: var(--card-background);
  border: 2px solid var(--kiosk-purple-border);
  border-radius: 10px;
  border-left: 6px solid var(--kiosk-purple-primary);
  
  flex-shrink: 0;
}

.product-name { 
  font-size: 1.3em;
  font-weight: 800;
  color: var(--kiosk-purple-dark);
  flex: 1;
}

.credit-cost { 
  font-size: 1.4em;
  font-weight: 900;
  color: var(--kiosk-purple-primary);
  font-family: 'SF Mono', Monaco, monospace;
  
  padding: 12px 18px;
  background: var(--kiosk-purple-bg);
  border: 2px solid var(--kiosk-purple-border);
  border-radius: 8px;
  
  flex-shrink: 0;
}

/* === META INFORMATION === */
.order-meta {
  width: 100%;
  padding: 14px 18px;
  box-sizing: border-box;
  
  background: rgba(139, 92, 246, 0.04);
  border-left: 4px solid var(--kiosk-purple-primary);
  border-radius: 6px;
  
  font-size: 0.9em;
  color: var(--text-light);
  font-style: italic;
  
  flex-shrink: 0;
}

/* === ACTION BUTTONS === */
.action-buttons {
  display: flex;
  width: 100%;
  gap: 16px;
  box-sizing: border-box;
  
  padding-top: 20px;
  border-top: 2px solid var(--kiosk-purple-border);
  
  flex-shrink: 0;
}

.action-buttons form {
  flex: 1;
  width: 100%;
}

.action-buttons .btn {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  
  font-weight: 600;
  font-size: 1em;
  color: white;
  
  background: var(--kiosk-purple-primary);
  border: 2px solid var(--kiosk-purple-primary);
  border-radius: 8px;
  
  transition: all 0.3s ease;
}

.action-buttons .btn:hover {
  background: var(--kiosk-purple-dark);
  border-color: var(--kiosk-purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.action-buttons .btn:active {
  transform: translateY(0);
}

/* === RECIPE DETAILS === */
#recipeDetailsContainer {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  
  background: var(--card-background);
  border: 2px solid var(--kiosk-purple-border);
  border-radius: 12px;
  box-shadow: var(--kiosk-shadow);
}

#recipeDetailsContainer h5 {
  color: var(--kiosk-purple-primary);
  font-size: 1.3em;
  font-weight: 700;
  margin: 20px 0 12px 0;
  width: 100%;
  
  padding-bottom: 8px;
  border-bottom: 2px solid var(--kiosk-purple-border);
  box-sizing: border-box;
}

#recipeDetailsContainer ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 16px 0;
  box-sizing: border-box;
  
  background: var(--kiosk-purple-bg);
  border: 1px solid var(--kiosk-purple-border);
  border-radius: 8px;
  overflow: hidden;
}

#recipeDetailsContainer li {
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kiosk-purple-border);
  box-sizing: border-box;
  
  transition: background-color 0.2s ease;
}

#recipeDetailsContainer li:last-child {
  border-bottom: none;
}

#recipeDetailsContainer li:hover {
  background: rgba(139, 92, 246, 0.12);
}

#recipeDetailsContainer p {
  width: 100%;
  line-height: 1.6;
  font-size: 0.95em;
  margin: 16px 0;
  padding: 16px 20px;
  box-sizing: border-box;
  
  background: var(--kiosk-purple-bg);
  border: 1px solid var(--kiosk-purple-border);
  border-radius: 8px;
}

/* === FORCE FULL WIDTH ON PARENT CONTAINERS === */
.kiosk-order-item,
.kiosk-order-item > *,
#recipeDetailsContainer,
#recipeDetailsContainer > * {
  max-width: none !important;
}

/* Flexbox Parent Overrides */
.kiosk-order-item {
  align-self: stretch !important;
  justify-self: stretch !important;
  flex-grow: 1 !important;
  flex-basis: 100% !important;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
  .order-item-details {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .kiosk-order-item {
    padding: 18px !important;
  }
  
  .kiosk-order-header {
    padding: 14px 16px;
  }
  
  .order-item-details {
    padding: 18px 20px;
  }
  
  .product-name {
    font-size: 1.1em;
  }
  
  .credit-cost {
    font-size: 1.2em;
    padding: 10px 14px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  #recipeDetailsContainer {
    padding: 20px 18px !important;
  }
}

@media (max-width: 480px) {
  .kiosk-order-item {
    padding: 16px !important;
  }
  
  .kiosk-order-header {
    padding: 12px 14px;
  }
  
  .order-item-details {
    padding: 16px 18px;
  }
  
  .action-buttons .btn {
    min-height: 44px;
    font-size: 0.95em;
  }
  
  #recipeDetailsContainer {
    padding: 18px 16px !important;
  }
}

/* === FOCUS STATES === */
.kiosk-order-item:focus-within {
  outline: 3px solid var(--kiosk-purple-primary);
  outline-offset: 2px;
}

.action-buttons .btn:focus {
  outline: 3px solid var(--kiosk-purple-primary);
  outline-offset: 2px;
}
/* Kiosk Bar Status */
.bar-status-control {
    margin-top: 15px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.status-indicator {
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 8px;
    color: white;
}
.status-indicator.open { background-color: var(--success-color); }
.status-indicator.closed { background-color: var(--error-color); }

/* NEU: CSS für die Gefahrenzone und das Lösch-Popup */
.danger-zone {
    border-color: var(--error-color);
    background-color: rgba(244, 67, 54, 0.05);
}
.danger-zone h4 {
    color: var(--error-color);
}
.confirmation-phrase {
    background-color: var(--background-color);
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    color: var(--primary-color);
    border: 1px dashed var(--border-color);
    margin: 15px 0;
}
#finalDeleteBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
/* Happy Hour Preisdarstellung CSS */
/* Happy Hour Zwei-Kacheln Preisdarstellung */

/* Container für beide Preiskacheln */
.product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Alte Preis-Kachel (durchgestrichen) */
.price-tile-old {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: var(--text-light, #6c757d);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: line-through;
    position: relative;
    backdrop-filter: blur(5px);
}

.price-tile-old::before {
    content: "Vorher:";
    font-size: 0.7em;
    font-weight: 600;
    color: var(--text-light, #6c757d);
    display: block;
    margin-bottom: 2px;
    text-decoration: none;
}

/* Neue Preis-Kachel (hervorgehoben) */
.price-tile-new {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1.2em;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    position: relative;
    text-align: center;
    min-width: 120px;
}

.price-tile-new::before {
    content: "Happy Hour";
    font-size: 0.65em;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    opacity: 0.9;
}

/* Normale Preis-Kachel (ohne Happy Hour) */
.price-tile-normal {
    background: linear-gradient(135deg, var(--primary-color, #9575cd), #7e57c2);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1.2em;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(149, 117, 205, 0.3);
    text-align: center;
    min-width: 120px;
}

.price-tile-normal::before {
    content: "Preis";
    font-size: 0.65em;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
    opacity: 0.9;
}

/* Icons in den Kacheln */
.price-icon {
    margin-right: 6px;
    font-size: 0.8em;
}

/* Ersparnis Badge */
.savings-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: white;
    font-size: 0.6em;
    padding: 3px 6px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hover Effekte */
.price-tile-new:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

.price-tile-normal:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(149, 117, 205, 0.4);
}

/* Für kleinere Kacheln nebeneinander (optional) */
.price-tiles-horizontal {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.price-tiles-horizontal .price-tile-old {
    flex: 1;
    min-width: 80px;
    font-size: 0.8em;
    padding: 6px 8px;
}

.price-tiles-horizontal .price-tile-new {
    flex: 1.2;
    min-width: 90px;
    font-size: 1em;
    padding: 8px 10px;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .product-price {
        align-items: center;
        width: 100%;
    }
    
    .price-tile-old,
    .price-tile-new,
    .price-tile-normal {
        width: 100%;
        max-width: 200px;
        text-align: center;
    }
    
    .price-tiles-horizontal {
        flex-direction: column;
        width: 100%;
    }
    
    .price-tiles-horizontal .price-tile-old,
    .price-tiles-horizontal .price-tile-new {
        flex: none;
        width: 100%;
        max-width: 200px;
    }
}

/* Spezielle Klasse für Produktkarten */
.modern-product-card .product-price {
    margin-top: 10px;
}

/* Animation für neue Preise */
@keyframes happy-glow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    }
    50% {
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
    }
}

.price-tile-new {
    animation: happy-glow 3s ease-in-out infinite;
}
/* iOS Install Prompt */
.ios-prompt {
    position: fixed;
    bottom: 20px; /* Abstand von unten, damit der Pfeil auf die Leiste zeigt */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 10000;
    border: 1px solid rgba(0,0,0,0.1);
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode für das Popup */
[data-theme="dark"] .ios-prompt {
    background-color: rgba(30, 30, 30, 0.95);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}

.ios-prompt-content {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
}

.ios-app-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ios-text h4 {
    margin: 0 0 5px 0;
    color: var(--primary-color);
    font-size: 1.1em;
}

.ios-text p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.ios-text ol {
    padding-left: 20px;
    margin: 0;
    font-size: 0.9em;
}

.ios-text li {
    margin-bottom: 5px;
}

.close-ios {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

/* Der Pfeil, der auf den Safari-Button zeigt */
.ios-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .ios-arrow {
    border-top-color: rgba(30, 30, 30, 0.95);
}

@keyframes slideUp {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}