/* ========================================= */
/* --- Grundlegendes Design & AURORA BG --- */
/* ========================================= */

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    color: #e0d0c0; 
    margin: 0; 
    padding: 25px 15px; 
    min-height: 100vh; 
    position: relative;
    
    /* NEU: Dunkler Hintergrund als Basis für Aurora */
    background-color: #0f0a06; 
    overflow-x: hidden; /* Verhindert Scrollbalken durch die Blobs */
}

/* WICHTIG: Das alte body::before mit dem Wallpaper wurde hier gelöscht! */

/* --- AURORA ANIMATION (Die bewegenden Blobs) --- */
.aurora-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px); /* Macht die Kreise zu weichem Nebel */
    opacity: 0.6;
    z-index: -1; /* Hinter dem Inhalt */
    animation: float 20s infinite ease-in-out;
}

/* Blob 1: Gold/Braun (Oben Links) */
.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: #d4b483;
    animation-delay: 0s;
}

/* Blob 2: Tiefes Kaffee-Rot/Braun (Unten Rechts) */
.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: #4a2c20;
    animation-delay: -5s;
}

/* Blob 3: Akzent (Mittig wandernd) */
.blob-3 {
    top: 40%;
    left: 40%;
    width: 40vw;
    height: 40vw;
    background: #6f4e37; 
    animation-delay: -10s;
    opacity: 0.4;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* --- TYPOGRAFIE --- */
h1 { font-family: "Times New Roman", serif; color: #d4b483; font-weight: normal; font-size: 2.8rem; margin-bottom: 5px; text-align: center; letter-spacing: 1px; padding-top: 25px; }
.subtitle { text-align: center; color: #d4b483; font-family: "Times New Roman", serif; font-size: 1.2rem; margin-bottom: 20px; position: relative; }
.subtitle::after { content: ''; display: block; width: 50px; height: 2px; background: #d4b483; margin: 15px auto 0; opacity: 0.6; }

/* --- Navigation (Pill Style) --- */
.navbar {
    position: relative; z-index: 1000;
    width: 95%; max-width: 600px; margin: 0 auto 30px auto;
    background: rgba(44, 30, 22, 0.85); backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 180, 131, 0.3); border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    display: flex; justify-content: space-between; align-items: center; padding: 4px;
}
.nav-link {
    color: #e0d0c0; text-decoration: none; 
    font-size: 0.65rem; /* Perfekt für 5 Buttons */
    padding: 10px 2px; 
    letter-spacing: 0px;
    text-transform: uppercase; font-weight: bold; border-radius: 40px; transition: all 0.3s ease;
    flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav-link.active { background-color: #d4b483; color: #2c1e16; box-shadow: 0 2px 10px rgba(212, 180, 131, 0.3); }

/* --- HEADER BUTTONS (Oben Links & Rechts) --- */
.header-btn-style {
    position: fixed; top: 20px; z-index: 1100;
    background: rgba(44, 30, 22, 0.85); backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 180, 131, 0.3); border-radius: 30px;
    color: #d4b483; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
    padding: 8px 15px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s ease; text-decoration: none; display: flex; align-items: center;
}
.header-btn-style:active { transform: scale(0.95); background: #d4b483; color: #2c1e16; }

.logout-btn { right: 15px; } /* Rechts */
.stats-btn { left: 15px; }   /* Links */

/* --- Status Ampel --- */
.status-container { text-align: center; margin-bottom: 25px; min-height: 40px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 20px; font-weight: bold; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.status-loading { background: rgba(255, 255, 255, 0.1); border: 1px solid #aaa; color: #aaa; }
.status-open { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; color: #10b981; }
.status-closed { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; color: #ef4444; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-green { background-color: #10b981; box-shadow: 0 0 10px #10b981; }
.dot-red { background-color: #ef4444; box-shadow: 0 0 10px #ef4444; }
.shop-closed-mode { opacity: 0.4; pointer-events: none; filter: grayscale(100%); transition: all 0.5s; }

/* --- UI Elemente --- */
.news-banner { background: rgba(212, 180, 131, 0.1); border: 1px solid rgba(212, 180, 131, 0.5); color: #e0d0c0; padding: 12px 15px; margin: 0 auto 30px auto; max-width: 600px; border-radius: 12px; text-align: center; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 12px; backdrop-filter: blur(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.news-badge { background: #d4b483; color: #2c1e16; font-weight: bold; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; letter-spacing: 1px; white-space: nowrap; }

.bean-card { background: linear-gradient(145deg, rgba(40, 30, 25, 0.9), rgba(20, 15, 10, 0.9)); border: 1px solid rgba(212, 180, 131, 0.4); padding: 20px; border-radius: 12px; margin: 0 auto 40px auto; max-width: 600px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
.bean-card::before { content: ''; position: absolute; top: -50px; left: -50px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%); }
.bean-label { color: #d4b483; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; opacity: 0.8; }
.bean-name { font-family: "Times New Roman", serif; font-size: 1.6rem; color: #fff; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.bean-desc { color: #a09085; font-size: 0.9rem; margin-bottom: 15px; font-style: italic; }
.intensity-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 0.8rem; color: #d4b483; font-weight: bold; letter-spacing: 1px;}
.progress-bar-bg { width: 120px; height: 6px; background: rgba(212, 180, 131, 0.2); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: #d4b483; width: 70%; box-shadow: 0 0 10px rgba(212, 180, 131, 0.5); }

.menu-list { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; padding-bottom: 50px; }
.coffee-card { background: rgba(40, 30, 25, 0.7); border: 1px solid rgba(212, 180, 131, 0.2); border-radius: 12px; padding: 20px 25px; cursor: pointer; transition: all 0.2s ease; text-align: left; position: relative; backdrop-filter: blur(5px); }
.coffee-card:active { transform: scale(0.96); background: rgba(60, 45, 35, 0.9); border-color: rgba(212, 180, 131, 0.8); }
.name { font-size: 1.3rem; font-weight: 500; color: #fff; margin-bottom: 12px; }
.desc { font-size: 0.95rem; color: #a09085; line-height: 1.5; margin-bottom: 20px; }
.strength-container { display: flex; align-items: center; font-size: 0.75rem; color: #d4b483; letter-spacing: 1.5px; text-transform: uppercase; }
.dots { margin-left: 10px; letter-spacing: 3px; font-size: 1rem; }
.dot-filled { color: #d4b483; } .dot-empty { color: rgba(212, 180, 131, 0.2); }

/* --- Modals --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(8px); animation: fadeIn 0.3s; }
.modal-box { background: #2c1e16; border: 2px solid #d4b483; padding: 25px; border-radius: 15px; text-align: center; width: 90%; max-width: 350px; box-shadow: 0 0 30px rgba(212, 180, 131, 0.2); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-height: 90vh; overflow-y: auto; }
.modal-title { color: #d4b483; font-family: "Times New Roman", serif; font-size: 1.6rem; margin: 0 0 15px 0; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-label { display: block; color: #a09085; font-size: 0.85rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.modal-input, .modal-select { width: 100%; padding: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid #d4b483; border-radius: 8px; color: white; font-size: 1rem; outline: none; box-sizing: border-box; }
.modal-select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4b483'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; }
.checkbox-group { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; border: 1px solid rgba(212, 180, 131, 0.1); }
.checkbox-item { display: flex; align-items: center; gap: 12px; cursor: pointer; color: white; font-size: 1rem; }
.checkbox-item input { accent-color: #d4b483; width: 20px; height: 20px; cursor: pointer; }
input[type=range] { width: 100%; -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #d4b483; margin-top: -8px; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: rgba(212, 180, 131, 0.3); border-radius: 2px; }
.range-value { float: right; color: #d4b483; font-weight: bold; }
.radio-group { display: flex; gap: 10px; }
.radio-label { flex: 1; text-align: center; padding: 10px; border: 1px solid rgba(212, 180, 131, 0.5); border-radius: 8px; cursor: pointer; color: #a09085; transition: 0.2s; }
input[type="radio"] { display: none; }
input[type="radio"]:checked + .radio-label { background: #d4b483; color: #2c1e16; font-weight: bold; border-color: #d4b483; }
.modal-btn { background: #d4b483; color: #2c1e16; border: none; padding: 12px 30px; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; width: 100%; margin-top: 10px; }

/* Geschlossen-Info */
.closed-info-box { display: none; background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #fca5a5; padding: 15px; margin: 0 auto 30px auto; max-width: 600px; border-radius: 12px; text-align: center; backdrop-filter: blur(5px); animation: fadeIn 0.5s; }
.bot-link { color: #d4b483; font-weight: bold; text-decoration: underline; cursor: pointer; }

#status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #ef4444; color: white; padding: 12px 25px; border-radius: 30px; display: none; z-index: 100; font-weight: bold; text-align: center; width: 80%; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- CHATBOT --- */
.chat-toggle { position: fixed; bottom: 80px; right: 20px; background: #d4b483; color: #2c1e16; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 2000; transition: transform 0.2s; }
.chat-toggle:active { transform: scale(0.9); }
.chat-window { position: fixed; bottom: 150px; right: 20px; width: 300px; height: 450px; background: #2c1e16; border: 2px solid #d4b483; border-radius: 15px; display: none; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 2000; overflow: hidden; animation: popIn 0.3s; }
.chat-header { background: #d4b483; color: #2c1e16; padding: 10px; font-weight: bold; text-align: center; display: flex; justify-content: space-between; align-items: center; }
.close-chat { cursor: pointer; font-size: 1.2rem; }
.chat-messages { flex: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.message { max-width: 80%; padding: 8px 12px; border-radius: 10px; font-size: 0.9rem; line-height: 1.4; }
.bot-msg { background: rgba(255,255,255,0.1); color: #ddd; align-self: flex-start; border-bottom-left-radius: 0; }
.user-msg { background: #d4b483; color: #2c1e16; align-self: flex-end; border-bottom-right-radius: 0; }
.chat-input-area { padding: 10px; border-top: 1px solid rgba(212, 180, 131, 0.3); display: flex; gap: 5px; }
.chat-input { flex: 1; padding: 10px; border-radius: 5px; border: none; outline: none; }
.chat-send { background: #d4b483; border: none; padding: 0 15px; border-radius: 5px; cursor: pointer; font-size: 1.2rem; }

/* --- DAMPF & SCHNEE --- */
.steam-particle { position: fixed; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; pointer-events: none; z-index: 10000; animation: steamRise 1.5s ease-out forwards; filter: blur(4px); }
@keyframes steamRise { 0% { transform: translateY(0) scale(0.5); opacity: 0.6; } 100% { transform: translateY(-150px) scale(3); opacity: 0; } }
#snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.snowflake { position: absolute; background-color: white; border-radius: 50%; opacity: 0.8; pointer-events: none; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translateY(-10vh) translateX(0); opacity: 1; } 100% { transform: translateY(105vh) translateX(20px); opacity: 0.3; } }

/* --- LIVE STATUS BANNER --- */
#live-status-card {
    display: none; /* Erstmal unsichtbar */
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 400px;
    background: #2c2c2c; border-radius: 15px; padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 2000;
    border: 2px solid #555; text-align: center;
    animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.status-icon { font-size: 2rem; display: block; margin-bottom: 5px; }
.status-title { font-weight: bold; font-size: 1.1rem; color: #fff; margin-bottom: 5px; display: block; }
.status-desc { color: #aaa; font-size: 0.85rem; }

/* Status Farben */
.ls-new { border-color: #888; }
.ls-preparing { border-color: #f59e0b; background: radial-gradient(circle, rgba(245, 158, 11, 0.1), #2c2c2c); }
.ls-ready { border-color: #10b981; background: radial-gradient(circle, rgba(16, 185, 129, 0.1), #2c2c2c); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }

/* Animation für "In Arbeit" */
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.pulse-anim { animation: pulse-yellow 2s infinite; }

/* --- FOOTER (Kombiniert: Chic & Funktional) --- */
footer {
    margin-top: 60px;
    padding: 40px 20px 120px 20px;
    text-align: center;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
    border-top: 1px solid rgba(212, 180, 131, 0.1);
    color: #888;
    font-size: 0.85rem;
    font-family: "Times New Roman", serif;
    letter-spacing: 1px;
}

.footer-user {
    font-family: sans-serif;
    font-size: 0.8rem;
    margin-bottom: 10px;
    color: #ccc;
}

.footer-links {
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 0.75rem;
}

.footer-link {
    color: #d4b483;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s;
    opacity: 0.8;
}
.footer-link:hover { color: #fff; opacity: 1; text-decoration: underline; }

/* Herzschlag Animation */
.pulse-emoji {
    display: inline-block;
    animation: heartbeat 2s infinite ease-in-out;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* --- FAVORITEN SECTION --- */
#fav-section {
    display: none; /* Erstmal versteckt, bis Favoriten da sind */
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(212, 180, 131, 0.2);
    animation: fadeIn 0.5s;
}

.section-title {
    font-family: "Times New Roman", serif;
    color: #d4b483;
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Das Herz auf der Karte */
.fav-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10; /* Über dem Karten-Klick */
    transition: transform 0.2s, color 0.2s;
    color: rgba(255, 255, 255, 0.3); /* Standard: Grau/Transparent */
}
.fav-btn:hover { transform: scale(1.2); }

/* Wenn markiert */
.fav-active {
    color: #ef4444; /* Rot */
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* ========================================= */
/* --- BOHNEN SEITE STYLES --- */
/* ========================================= */

.content-container { padding: 0 20px 60px 20px; max-width: 700px; margin: 0 auto; }

/* Produktbild */
.product-stage { text-align: center; margin-bottom: 30px; background: radial-gradient(circle, rgba(212, 180, 131, 0.15) 0%, rgba(0,0,0,0) 70%); padding: 20px; border-radius: 20px; }
.product-img { max-width: 250px; width: 100%; height: auto; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); transition: transform 0.3s ease; }
.product-img:hover { transform: scale(1.05); }

.bean-title { font-family: "Times New Roman", serif; font-size: 2rem; color: #fff; text-align: center; margin-bottom: 5px; }
.bean-sub { text-align: center; color: #d4b483; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 30px; }

.bean-text { line-height: 1.6; color: #ddd; margin-bottom: 30px; text-align: justify; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 10px; border-left: 3px solid #d4b483; }

/* Mischverhältnis Balken */
.ratio-box { margin-bottom: 30px; }
.ratio-label { text-align: center; margin-bottom: 10px; font-weight: bold; color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.ratio-bar { height: 25px; width: 100%; background: #333; border-radius: 12px; overflow: hidden; display: flex; border: 1px solid rgba(255,255,255,0.1); }

/* 100% Arabica Style */
.arabica-full { width: 100%; background-color: #8d6e63; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: white; font-weight: bold; letter-spacing: 1px; }

/* Aroma Profil */
.aroma-section { margin-bottom: 40px; background: rgba(255,255,255,0.03); padding: 20px; border-radius: 12px; }
.aroma-row { display: flex; align-items: center; margin-bottom: 12px; }
.aroma-name { width: 100px; font-size: 0.85rem; color: #d4b483; font-weight: bold; }
.aroma-bar-bg { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.aroma-fill { height: 100%; background: #d4b483; border-radius: 4px; }

/* Highlight Farben */
.fill-intense { background: #b91c1c; box-shadow: 0 0 10px rgba(185, 28, 28, 0.6); } 

/* Daten Tabelle */
.data-grid { display: grid; grid-template-columns: 1fr; gap: 10px; font-size: 0.9rem; }
.data-row { display: flex; justify-content: space-between; padding: 12px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); }
.data-label { color: #aaa; }
.data-val { color: #fff; text-align: right; font-weight: bold; }

/* Tags */
.flavor-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.tag { background: rgba(212, 180, 131, 0.2); border: 1px solid #d4b483; color: #d4b483; padding: 5px 15px; border-radius: 20px; font-size: 0.85rem; text-transform: uppercase; }

/* ========================================= */
/* --- MASCHINE SEITE STYLES --- */
/* ========================================= */

.machine-title { font-family: "Times New Roman", serif; font-size: 1.8rem; color: #fff; margin-bottom: 10px; text-align: center; }

.machine-desc { color: #ccc; line-height: 1.6; text-align: center; margin-bottom: 25px; font-size: 1rem; }

/* Das Bild der Maschine */
.machine-img-wrapper { background: radial-gradient(circle, rgba(212, 180, 131, 0.1) 0%, rgba(0,0,0,0) 70%); padding: 20px; margin-bottom: 30px; text-align: center; }
.machine-img { width: 100%; max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(212, 180, 131, 0.3); }

/* Technische Daten Grid */
.specs-title { color: #d4b483; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 15px; border-bottom: 1px solid rgba(212, 180, 131, 0.3); padding-bottom: 5px; }

.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 40px; }

.spec-item { background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); }

.spec-label { display: block; font-size: 0.75rem; color: #d4b483; text-transform: uppercase; margin-bottom: 5px; }

.spec-value { font-size: 1.1rem; font-weight: bold; color: #fff; }

/* --- 3D TILT EFFEKT --- */
.coffee-card {
    /* Wichtig für 3D */
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: transform 0.1s ease-out; /* Sehr schnell, damit es der Maus folgt */
}

/* Ein Glanz-Effekt, der über die Karte huscht */
.coffee-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(125deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%);
    border-radius: 12px;
    opacity: 0; /* Erstmal unsichtbar */
    transition: opacity 0.3s;
    pointer-events: none;
}

.coffee-card:hover::after {
    opacity: 1;
}

/* Damit der Inhalt (Text) etwas über dem Hintergrund schwebt */
.coffee-card .name, 
.coffee-card .desc, 
.coffee-card .fav-btn {
    transform: translateZ(20px); /* Schwebt 20px vor dem Hintergrund */
}

/* ========================================= */
/* --- VIEW TRANSITIONS (Seitenübergänge) --- */
/* ========================================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    /* Dauer der Animation: 0.5 Sekunden ist schön weich */
    animation-duration: 0.5s; 
    /* Ein sanfteres Starten und Stoppen der Bewegung */
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================= */
/* --- GLÄSER SEITE STYLES --- */
/* ========================================= */

.glass-hero {
    width: 100%; border-radius: 15px; border: 1px solid rgba(212, 180, 131, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-bottom: 30px;
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border-left: 4px solid #d4b483;
}

.info-title {
    font-family: "Times New Roman", serif;
    font-size: 1.5rem; color: #fff; margin-bottom: 10px;
}

.info-text {
    line-height: 1.6; color: #ddd; font-size: 0.95rem; text-align: justify;
}

.highlight { color: #d4b483; font-weight: bold; }

/* Grid für Detailansicht */
.glass-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;
    margin-top: 40px;
}

/* Auf Handy untereinander */
@media (max-width: 600px) {
    .glass-detail-grid { grid-template-columns: 1fr; }
}

.detail-img {
    width: 100%; border-radius: 15px; border: 1px solid rgba(212, 180, 131, 0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
    margin-bottom: 10px; padding-left: 20px; position: relative; color: #ccc;
}
.feature-list li::before {
    content: "•"; color: #d4b483; font-weight: bold; position: absolute; left: 0;
}

/* ========================================= */
/* --- FEEDBACK / GÄSTEBUCH STYLES --- */
/* ========================================= */

/* Eingabe-Bereich */
.input-card {
    background: rgba(44, 30, 22, 0.8);
    border: 1px solid #d4b483;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.feedback-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(212, 180, 131, 0.5);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    resize: none;
    margin-bottom: 10px;
    outline: none;
    font-family: inherit;
}

.send-btn {
    background: #d4b483; color: #2c1e16; border: none;
    padding: 10px 20px; border-radius: 20px; font-weight: bold;
    text-transform: uppercase; cursor: pointer; float: right;
    transition: transform 0.2s;
}
.send-btn:active { transform: scale(0.95); }

/* Nachrichten Liste */
.message-list { display: flex; flex-direction: column; gap: 15px; }

.msg-card {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #d4b483;
    padding: 15px;
    border-radius: 0 10px 10px 0;
    animation: slideInRight 0.5s ease;
}

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

.msg-header {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: #d4b483; margin-bottom: 5px;
    text-transform: uppercase; font-weight: bold;
}

.msg-time { color: #888; font-size: 0.7rem; font-weight: normal; }
.msg-body { font-size: 1rem; line-height: 1.4; color: #eee; }

/* ========================================= */
/* --- SCROLL REVEAL ANIMATION ✨ --- */
/* ========================================= */

/* Startzustand: Unsichtbar und etwas weiter unten */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px); /* 30px nach unten verschoben */
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1); /* Weiche Bewegung */
    will-change: opacity, transform; /* Performance-Optimierung */
}

/* Endzustand: Sichtbar und an Originalposition */
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional: Elemente sollen nacheinander reinkommen (Staggering) */
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.2s; }

/* ========================================= */
/* --- STERNE BEWERTUNG SYSTEM ⭐ --- */
/* ========================================= */

/* Die Box für den Durchschnitt ganz oben */
.rating-summary {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 180, 131, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.avg-score {
    font-family: "Times New Roman", serif;
    font-size: 3.5rem;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 20px rgba(212, 180, 131, 0.4);
}

.avg-stars { color: #d4b483; font-size: 1.5rem; margin: 5px 0; letter-spacing: 5px; }
.avg-count { color: #888; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

/* Sterne Eingabe (Klickbar) */
.star-input-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
}

.star-btn {
    font-size: 2rem;
    color: #444; /* Inaktiv: Grau */
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}

.star-btn:hover { transform: scale(1.2); }
.star-btn.active { color: #d4b483; text-shadow: 0 0 10px rgba(212, 180, 131, 0.6); }

/* Sterne in der Nachrichten-Liste */
.msg-rating { color: #d4b483; font-size: 0.9rem; margin-top: 2px; }

/* ========================================= */
/* --- STEMPELKARTE (Gamification) 🎫 --- */
/* ========================================= */

.stamp-card {
    background: linear-gradient(135deg, #2c1e16 0%, #1a120b 100%);
    border: 1px solid rgba(212, 180, 131, 0.4);
    border-radius: 15px;
    padding: 20px;
    margin: 0 auto 30px auto;
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* Goldener Schimmer Effekt */
.stamp-card::before {
    content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(212, 180, 131, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.stamp-header {
    display: flex; justify-content: space-between;
    font-weight: bold; color: #fff; margin-bottom: 15px;
    text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;
}

.stamp-grid {
    display: flex; justify-content: space-between; gap: 8px;
    margin-bottom: 15px;
}

.stamp-circle {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(212, 180, 131, 0.3);
    background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: rgba(255,255,255,0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wenn abgestempelt */
.stamp-circle.active {
    background: #d4b483;
    border-color: #d4b483;
    color: #2c1e16;
    box-shadow: 0 0 10px rgba(212, 180, 131, 0.6);
    transform: scale(1.1);
}

.stamp-footer {
    text-align: center; font-size: 0.8rem; color: #aaa; font-style: italic;
}

/* KONFETTI ANIMATION TEILCHEN */
.confetti {
    position: fixed; width: 10px; height: 10px;
    background-color: #f2d74e;
    z-index: 9999;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ========================================= */
/* --- TOAST NOTIFICATIONS (Kein Alert mehr) --- */
/* ========================================= */

#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Klicks gehen durch */
}

.toast {
    background: rgba(44, 30, 22, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(212, 180, 131, 0.3);
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    
    /* Animation beim Einblenden */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Farben für Erfolg und Fehler */
.toast.error { border-color: #ef4444; color: #fca5a5; }
.toast.success { border-color: #10b981; color: #a7f3d0; }


/* ========================================= */
/* --- STATISTIK / WRAPPED 📊 --- */
/* ========================================= */

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.chart-card {
    background: rgba(30, 20, 15, 0.6);
    border: 1px solid rgba(212, 180, 131, 0.2);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
}

.big-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #10b981; /* Geld-Grün */
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    margin: 10px 0;
}

.stat-label {
    color: #aaa;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Canvas Größe kontrollieren */
canvas {
    max-width: 100%;
    height: auto;
}

/* Style für den Preislisten-Button */
        .price-link-btn {
            display: block;
            margin: 30px auto 0 auto;
            text-align: center;
            background: rgba(212, 180, 131, 0.1);
            border: 1px solid #d4b483;
            color: #d4b483;
            text-decoration: none;
            padding: 15px;
            border-radius: 30px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            max-width: 250px;
        }

        .price-link-btn:hover {
            background: #d4b483;
            color: #2c1e16;
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(212, 180, 131, 0.4);
        }

/* ========================================= */
/* --- HAMBURGER MENU & DROPDOWN 🍔 --- */
/* ========================================= */

/* Der Button mit den 3 Strichen (ersetzt den Logout Button) */
.hamburger-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    z-index: 2000;
    background: rgba(44, 30, 22, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 180, 131, 0.5);
    color: #d4b483;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

.hamburger-btn:active { transform: scale(0.9); }
.hamburger-btn:hover { background: rgba(212, 180, 131, 0.1); }

/* Das Dropdown Menü (versteckt) */
.dropdown-menu {
    position: absolute;
    top: 75px; /* Unter dem Button */
    right: 15px;
    width: 200px;
    background: rgba(30, 20, 15, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 180, 131, 0.3);
    border-radius: 15px;
    padding: 10px 0;
    z-index: 1999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    
    /* Animation Start-Status */
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none; /* Nicht klickbar wenn unsichtbar */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wenn Menü offen ist */
.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Die Links im Menü */
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: #e0d0c0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background: rgba(212, 180, 131, 0.1);
    border-left-color: #d4b483;
    color: #fff;
}

.menu-divider {
    height: 1px;
    background: rgba(212, 180, 131, 0.2);
    margin: 5px 0;
}

/* ========================================= */
/* --- TRINKGELD GLAS (Barista Style) --- */
/* ========================================= */

.tip-section {
    background: rgba(44, 30, 22, 0.85); /* Dunkles Braun */
    border: 1px solid rgba(212, 180, 131, 0.3); /* Goldener Rand */
    border-radius: 15px;
    padding: 20px;
    margin: 0 auto 30px auto;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
}

.tip-controls { flex: 1; padding-right: 20px; }

.tip-title {
    color: #d4b483; /* Gold */
    font-family: "Times New Roman", serif;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.tip-sub { color: #aaa; font-size: 0.85rem; margin-bottom: 15px; }

.tip-btn {
    background: linear-gradient(145deg, #d4b483, #bfa070);
    color: #2c1e16;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

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

/* --- DAS GLAS --- */
.tip-glass-container {
    position: relative;
    width: 70px;
    height: 90px;
    margin-right: 10px;
}

.glass-body {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: none; /* Oben offen */
    border-radius: 0 0 15px 15px;
    position: relative;
    overflow: hidden; /* Damit Münzen nicht rausgucken */
}

/* Lichtreflex auf dem Glas */
.glass-shine {
    position: absolute;
    top: 10%; right: 10%;
    width: 5px; height: 60%;
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
    pointer-events: none;
}

/* --- DIE MÜNZEN --- */
.dropped-coin {
    position: absolute;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #f39c12); /* Gold Verlauf */
    border: 1px solid #d35400;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    
    /* Startposition (wird per JS überschrieben) */
    top: -30px; 
    left: 20px;
    
    /* Animation */
    animation: dropIn 0.5s ease-out forwards;
}

/* Innerer Ring der Münze (Detail) */
.dropped-coin::after {
    content: "$"; /* Oder € */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #b76e00;
    font-weight: bold;
}

@keyframes dropIn {
    0% { top: -40px; opacity: 0; }
    60% { top: var(--target-top); } /* Aufprall */
    80% { top: calc(var(--target-top) - 5px); } /* Hüpfer */
    100% { top: var(--target-top); opacity: 1; transform: rotate(var(--rot)); }
}

/* ========================================= */
/* --- GLÜCKSRAD (DAILY SPIN) 🎡 --- */
/* ========================================= */

/* Das Overlay (Hintergrund abgedunkelt) */
.wheel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    z-index: 3000;
    display: none; /* Standardmäßig versteckt */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.wheel-overlay.open {
    display: flex;
    opacity: 1;
}

.wheel-content {
    background: #2c1e16;
    border: 2px solid #d4b483;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 0 50px rgba(212, 180, 131, 0.3);
}

.close-wheel {
    position: absolute; top: 10px; right: 15px;
    font-size: 1.5rem; color: #888; cursor: pointer;
}

/* Das Rad Design */
.wheel-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 20px auto;
}

.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 10;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

.the-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #d4b483;
    position: relative;
    overflow: hidden;
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); /* Coole Brems-Kurve */
    
    /* Die 4 Farben */
    background: conic-gradient(
        #f48fb1 0deg 90deg,   /* Rosa (Niete/Hug) - Segment 2 (Rechts Oben nach CSS Logik verschoben) */
        #ffb74d 90deg 180deg, /* Orange (Shot) - Segment 3 */
        #81c784 180deg 270deg,/* Grün (Joker) - Segment 4 */
        #4fc3f7 270deg 360deg /* Blau (Keks) - Segment 1 */
    );
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* Text in den Segmenten positionieren */
.wheel-segment {
    position: absolute;
    width: 50%; height: 50%;
    transform-origin: bottom right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-segment span {
    transform: rotate(-45deg); /* Text gerade rücken */
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-size: 1.1rem;
    margin-bottom: 20px; margin-right: 20px;
}

/* Positionierung der 4 Tortenstücke */
.seg-1 { top: 0; left: 0; background: #4fc3f7; transform: rotate(0deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); } /* Blau */
/* CSS Conic Gradient ist einfacher, wir nutzen das Gradient oben und positionieren nur den Text */
/* Korrektur: Wir nutzen absolute Positionierung für Text */

.wheel-segment {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
}

.seg-1 span { position: absolute; top: -80px; left: -80px; transform: rotate(-45deg); width: 100px; text-align: center; } /* Oben Links */
.seg-2 span { position: absolute; top: -80px; left: 10px; transform: rotate(45deg); width: 100px; text-align: center; } /* Oben Rechts */
.seg-3 span { position: absolute; top: 10px; left: 10px; transform: rotate(135deg); width: 100px; text-align: center; } /* Unten Rechts */
.seg-4 span { position: absolute; top: 10px; left: -80px; transform: rotate(225deg); width: 100px; text-align: center; } /* Unten Links */


.spin-button {
    background: linear-gradient(145deg, #d4b483, #8d6e63);
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.win-text {
    margin-top: 15px;
    font-size: 1.2rem;
    color: #d4b483;
    font-weight: bold;
    min-height: 30px;
}

/* ========================================= */
/* --- VISUAL COFFEE LAB 🧪 --- */
/* ========================================= */

.coffee-visualizer {
    display: flex;
    justify-content: center;
    margin: 20px 0 30px 0;
    position: relative;
}

.glass-cup {
    width: 100px;
    height: 130px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    border-radius: 0 0 15px 15px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Wir stapeln von oben nach unten, steuern aber die Höhe */
    justify-content: flex-end; /* Füllt sich von unten */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden; 
}

/* Die Flüssigkeiten */
.liquid {
    width: 100%;
    transition: height 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Smoothe Animation */
    height: 0%; /* Standard: Leer */
}

/* Farben der Schichten */
.foam { background: #fff8e1; opacity: 0.9; } /* Cremig */
.espresso { background: linear-gradient(to right, #3e2723, #4e342e); } /* Dunkel */
.water { background: rgba(100, 181, 246, 0.3); } /* Für Americano/Tee */
.milk { background: #ffffff; } /* Weiß */

/* Dampf Animation ♨️ */
.steam-container {
    position: absolute;
    top: -30px; left: 0; width: 100%; height: 30px;
    display: flex; justify-content: center; gap: 10px;
    opacity: 0; transition: opacity 0.5s;
}
.glass-cup.hot .steam-container { opacity: 0.6; }

.steam {
    width: 6px; height: 20px;
    background: #fff;
    border-radius: 10px;
    filter: blur(3px);
    animation: rise 2s infinite;
}
.s1 { animation-delay: 0s; }
.s2 { animation-delay: 0.5s; height: 25px; }
.s3 { animation-delay: 1s; }

@keyframes rise {
    0% { transform: translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}

/* ========================================= */
/* --- EISWÜRFEL ANIMATION 🧊 --- */
/* ========================================= */

.ice-cube {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3); /* Halbtransparenter Kern */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Heller Rand */
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    bottom: 30px; /* Endposition (schwimmend) */
    z-index: 10; /* Vor der Flüssigkeit */
    opacity: 0;
    animation: dropIce 0.6s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}

/* Zufällige Positionierung im Glas simulieren */
.ice-1 { left: 20px; animation-delay: 0.1s; transform: rotate(10deg); }
.ice-2 { left: 45px; bottom: 45px; animation-delay: 0.2s; transform: rotate(-15deg); }
.ice-3 { left: 30px; bottom: 20px; animation-delay: 0s; transform: rotate(5deg); }

@keyframes dropIce {
    0% { 
        transform: translateY(-150px) rotate(0deg); 
        opacity: 0; 
    }
    50% { 
        opacity: 1; 
    }
    100% { 
        transform: translateY(0) rotate(var(--rot, 10deg)); 
        opacity: 1; 
    }
}

/* ========================================= */
/* --- EXTRAS ANIMATIONEN (Sirup & Pille) --- */
/* ========================================= */

/* --- VANILLE SIRUP 💧 --- */
.syrup-drop {
    position: absolute;
    left: 50%;
    top: -20px;
    width: 8px;
    height: 15px;
    background: #FFD700; /* Goldgelb */
    border-radius: 50%;
    border-top-left-radius: 0;
    transform: translateX(-50%) rotate(45deg);
    opacity: 0.9;
    z-index: 15;
    animation: pourSyrup 1.5s ease-in forwards;
}

@keyframes pourSyrup {
    0% { top: -20px; height: 15px; opacity: 1; }
    40% { top: 60%; height: 25px; } /* Langziehen im Fall */
    60% { top: 70%; height: 10px; width: 15px; opacity: 0.8; } /* Aufprall */
    100% { top: 80%; opacity: 0; transform: translateX(-50%) scale(2); } /* Auflösen */
}

/* --- SÜSSSTOFF TABLETTE 💊 --- */
.sweetener-pill {
    position: absolute;
    left: 60%; /* Leicht versetzt */
    top: -20px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 15;
    animation: dropPill 2s ease-out forwards;
}

@keyframes dropPill {
    0% { top: -20px; transform: rotate(0deg); opacity: 1; }
    30% { top: 75%; transform: rotate(180deg); } /* Plumps */
    40% { top: 70%; } /* Kleiner Hüpfer nach oben (Auftrieb) */
    100% { top: 85%; transform: rotate(220deg) scale(0); opacity: 0; } /* Auflösen */
}

/* ========================================= */
/* --- DER DIGITALE KASSENZETTEL 🧾 --- */
/* ========================================= */

.receipt-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.receipt-paper {
    background: #fff;
    width: 300px;
    padding: 20px;
    color: #333;
    font-family: 'Courier New', Courier, monospace; /* Bon-Schriftart */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform-origin: top center;
    animation: printReceipt 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Der gezackte Rand unten (Sägezahn) */
.receipt-paper::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: #fff;
    /* CSS Magic für Zacken */
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), 
                      linear-gradient(-45deg, transparent 50%, #fff 50%);
    background-size: 20px 20px;
    background-repeat: repeat-x;
    background-position: left bottom;
    /* Damit es wie abgerissen aussieht, drehen wir es um */
    transform: rotate(180deg); 
}

/* Header */
.receipt-header {
    text-align: center;
    border-bottom: 2px dashed #ccc;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.receipt-logo { font-size: 2rem; margin-bottom: 5px; display: block; }
.receipt-title { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 1.2rem; }
.receipt-date { font-size: 0.8rem; color: #666; margin-top: 5px; }

/* Body */
.receipt-body { margin-bottom: 20px; font-size: 0.95rem; }
.receipt-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.receipt-row.bold { font-weight: bold; font-size: 1.1rem; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ccc; }

/* Footer */
.receipt-footer { text-align: center; font-size: 0.8rem; color: #666; margin-top: 20px; }
.barcode { font-family: 'Libre Barcode 39', sans-serif; font-size: 2.5rem; margin-top: 10px; opacity: 0.7; }

/* Button */
.receipt-btn {
    background: #2c1e16;
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    font-family: sans-serif; /* Button wieder normal */
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

@keyframes printReceipt {
    0% { transform: translateY(-100%) rotateX(-20deg); opacity: 0; }
    100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}

/* --- HISTORY MODAL --- */
.history-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.history-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 180, 131, 0.3);
    padding: 15px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item:hover {
    background: rgba(212, 180, 131, 0.1);
    transform: translateX(5px);
}

.hist-main { font-weight: bold; color: #fff; font-size: 1rem; }
.hist-date { font-size: 0.75rem; color: #888; margin-top: 4px; }
.hist-arrow { color: #d4b483; font-size: 1.2rem; }

/* --- LOGO STYLING --- */
.logo-container {
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

.hero-logo {
    max-width: 400px; /* Maximale Breite auf Desktop */
    width: 100%;      /* Auf Handy volle Breite */
    height: auto;     /* Seitenverhältnis beibehalten */
    border-radius: 20px; /* Runde Ecken für modernen Look */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Edler Schatten */
    border: 1px solid rgba(212, 180, 131, 0.2); /* Feiner goldener Rand */
    
    /* Optional: Damit es nahtlos übergeht, falls die Brauntöne leicht abweichen */
    /* mix-blend-mode: multiply; */ 
    /* (Das 'multiply' nur nutzen, wenn du das Bild ohne Hintergrund hast oder der Braunton 100% identisch ist) */
}
/* --- STEMPEL STYLE --- */
.receipt-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    
    font-size: 2.5rem;
    font-weight: 900;
    color: #d00000; /* Stempel-Rot */
    text-transform: uppercase;
    letter-spacing: 5px;
    
    border: 5px solid #d00000;
    padding: 10px 20px;
    border-radius: 10px;
    
    opacity: 0; /* Erstmal unsichtbar */
    pointer-events: none; /* Klicks gehen durch */
    z-index: 10;
    
    /* Mix-Blend sorgt dafür, dass der Text darunter "durchscheint" wie Tinte */
    mix-blend-mode: multiply; 
    
    /* Ein bisschen "Dreck"-Effekt für Realismus */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.5" /></svg>');
}

/* Wenn der Stempel aktiv ist */
.receipt-stamp.visible {
    animation: stamp-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Wuchtige Aufprall-Animation */
@keyframes stamp-animation {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) rotate(-15deg) scale(3); 
    }
    100% { 
        opacity: 0.7; /* Leicht transparent */
        transform: translate(-50%, -50%) rotate(-15deg) scale(1); 
    }
}