/* Grunddesign */
body { 
    font-family: 'Segoe UI', sans-serif; 
    background-color: #121212; 
    color: #eeeeee; 
    margin: 0; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.container { 
    width: 100%; 
    max-width: 850px; 
}

h1 { 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
    font-size: 1.5rem; 
    color: #FFC107; 
}

/* Video Bereich */
.video-wrapper { 
    background: #000; 
    border: 2px solid #333; 
    border-radius: 8px; 
    overflow: hidden; 
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: 15px;
}

video { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

/* Panels */
.info-panel,
.bee-panel { 
    background: #1e1e1e; 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid #333;
    margin-bottom: 15px;
}

.info-panel { 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#status-text { 
    font-weight: bold; 
    padding: 4px 10px;
    border-radius: 4px;
    background: #2a2a2a;
}

/* Bienenstock Stats */
.bee-stats-header {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding: 10px;
    background: #252525;
    border-radius: 6px;
}

.stat-item { 
    text-align: center; 
}

.stat-value { 
    font-size: 1.4rem; 
    font-weight: bold; 
    display: block; 
    color: #FFC107; 
}

.stat-label { 
    font-size: 0.8rem; 
    color: #888; 
    text-transform: uppercase; 
}

canvas { 
    width: 100% !important; 
    height: 300px !important; 
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Mobile */
@media (max-width: 600px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}