/* Inter Webfont wird über lokale lib/inter/inter.css geladen (DSGVO-konform) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 24, 48, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    letter-spacing: 1px;
}

html, body, main {
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #0a1830 0%, #152040 30%, #0d1525 100%);
    color: white;
}

/* Container volle Breite */
.tv-frame {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tv-screen {
    background: linear-gradient(135deg, #0a1830 0%, #152040 30%, #0d1525 100%);
    padding: 0 5px;
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tv-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(30, 60, 100, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.header h1 {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 1px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}


.clock {
    font-size: 28px;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
}

/* Bouquet Dropdown */
.bouquet-select {
    height: 36px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.bouquet-select:hover {
    background: rgba(255,255,255,0.15);
}

.bouquet-select option {
    background: #1a2a4a;
    color: white;
}

/* Content Grid: Links Senderliste (25%), Rechts Video (75%) */
.content,
.live-tv-content {
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 30px;
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 15px 10px;
}

/* Grid-Zeile auf den verfügbaren Platz begrenzen, damit die Senderliste die volle
   Höhe bis zum Footer nutzt und intern scrollt statt auf einem festen Wert zu enden.
   min-height: 0 hebt die automatische Mindesthöhe des Flex-Items auf – ohne sie
   würde der Bereich stattdessen auf Inhaltshöhe wachsen */
.live-tv-content {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

/* Channel List */
.channel-list-container {
    overflow-y: auto;
    padding-right: 10px;
}

.channel-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}

.channel-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    padding: 12px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 15px;
    animation: fadeIn 0.3s ease forwards;
    opacity: 0;
}

.channel-item:hover {
    background: rgba(255,255,255,0.05);
}

.channel-item.active {
    background: linear-gradient(90deg, rgba(40, 80, 140, 0.8) 0%, rgba(30, 60, 100, 0.4) 100%);
}

/* Animation delays for channel items */
.channel-item:nth-child(1) { animation-delay: 0.02s; }
.channel-item:nth-child(2) { animation-delay: 0.04s; }
.channel-item:nth-child(3) { animation-delay: 0.06s; }
.channel-item:nth-child(4) { animation-delay: 0.08s; }
.channel-item:nth-child(5) { animation-delay: 0.10s; }
.channel-item:nth-child(6) { animation-delay: 0.12s; }
.channel-item:nth-child(7) { animation-delay: 0.14s; }
.channel-item:nth-child(8) { animation-delay: 0.16s; }
.channel-item:nth-child(9) { animation-delay: 0.18s; }
.channel-item:nth-child(10) { animation-delay: 0.20s; }
.channel-item:nth-child(n+11) { animation-delay: 0.22s; }

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

.picon {
    width: 40px;
    height: 30px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
}

.channel-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.channel-name {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-item.active .channel-name {
    color: white;
}

.show-title {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-item.active .show-title {
    color: rgba(255,255,255,0.7);
}

/* Preview Section / Video Player */
.preview-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Video behält sein 16:9-Format auch dann, wenn das Fenster flacher ist als die Vorschau */
.preview-section .video-container {
    flex-shrink: 0;
}

.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a3050 0%, #0d1a30 100%);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
}


/* Player Stats Overlay */
.player-stats {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #0f0;
    font-family: monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    z-index: 100;
    transition: opacity 0.5s ease;
}

/* Recovery-Overlay (zentral, prominent) — sichtbar während automatischer Wiederverbindung,
   damit der Nutzer nicht denkt das System hängt und nicht ungewollt im UI weiterklickt. */
.player-recovery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 110;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.player-recovery-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #00b4d8;
    border-radius: 50%;
    animation: player-recovery-spin 1s linear infinite;
}

@keyframes player-recovery-spin {
    to { transform: rotate(360deg); }
}

.player-recovery-text {
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    max-width: 90%;
    line-height: 1.4;
}

.player-recovery-overlay.final .player-recovery-spinner {
    display: none;
}

.player-recovery-overlay.final .player-recovery-text {
    color: #ff6b6b;
    font-size: 20px;
}

/* Streaming-Modus Toggle */
.stream-mode-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    z-index: 100;
    font-size: 13px;
}

.stream-mode-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    transition: color 0.2s;
}

.stream-mode-toggle label:hover {
    color: white;
}

.stream-mode-toggle input[type="radio"] {
    accent-color: #4a90d9;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.stream-mode-toggle label:has(input:checked) {
    color: #4a90d9;
    font-weight: 500;
}

/* Preview Info */
.preview-info {
    padding: 10px 0;
}

.on-now {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.preview-title {
    font-size: 22px;
    font-weight: 400;
    color: white;
    margin-bottom: 15px;
}

.progress-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: rgba(255,255,255,0.6);
    border-radius: 2px;
    transition: width 1s linear;
}

.time-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    min-width: 45px;
}

/* Video.js Styling */
.video-js {
    width: 100%;
    height: 100%;
}

.video-js .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    height: 40px;
}

.video-js .vjs-big-play-button {
    display: none !important;
}

.video-js .vjs-play-progress {
    background: #4a90d9;
}

.video-js .vjs-live-control .vjs-live-display {
    background: #4a90d9;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: 600;
}

/* No Channels Message */
.no-channels {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 3rem;
    font-size: 1.1rem;
}

/* Scrollbar Styling */
.channel-list-container::-webkit-scrollbar {
    width: 6px;
}

.channel-list-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.channel-list-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.channel-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* App Footer */
.app-footer {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-copyright {
    color: rgba(255,255,255,0.3);
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: rgba(255,255,255,0.7);
}

/* Page Content Container */
.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* ==================== MEDIATHEK / RECORDINGS ==================== */

.recordings-page {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    min-height: 100vh;
    padding: 20px 30px;
}

/* Sidebar */
.sidebar {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.sidebar h2 {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    margin-top: 20px;
}

.sidebar h2:first-child {
    margin-top: 0;
}

.source-list,
.folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-list li,
.folder-list li {
    margin-bottom: 5px;
}

.source-list a,
.folder-list a {
    display: block;
    padding: 10px 15px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 14px;
}

.source-list a:hover,
.folder-list a:hover {
    background: rgba(255,255,255,0.05);
    color: white;
}

.source-list a.active,
.folder-list a.active {
    background: linear-gradient(90deg, rgba(40, 80, 140, 0.8) 0%, rgba(30, 60, 100, 0.4) 100%);
    color: white;
    font-weight: 500;
}

/* Main Content */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Player Section */
.player-section {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px;
}

.player-section .video-container {
    margin-bottom: 15px;
}

.player-section video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Now Playing */
.now-playing {
    padding: 15px 0 0 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.now-playing h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.now-playing p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

/* Recordings Section */
.recordings-section h2 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}

.recording-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recording-btn {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 15px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.recording-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.recording-btn.active {
    background: linear-gradient(90deg, rgba(40, 80, 140, 0.5) 0%, rgba(30, 60, 100, 0.3) 100%);
    border-color: rgba(74, 144, 217, 0.5);
}

.recording-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recording-title {
    font-size: 15px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.source-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.source-badge.vu {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.source-badge.filme {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

.source-badge.simpsons {
    background: rgba(255, 235, 59, 0.2);
    color: #ffeb3b;
}

.source-badge.3d {
    background: rgba(156, 39, 176, 0.2);
    color: #9c27b0;
}

.format-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.recording-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.recording-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.no-recordings {
    text-align: center;
    padding: 40px;
    color: rgba(255,255,255,0.4);
    font-size: 1.1rem;
}


/* ==================== RESPONSIVE ==================== */

@media (max-width: 1000px) {
    html, body, main {
        overflow: visible;
        height: auto;
    }

    .tv-screen {
        padding: 0;
        overflow: visible;
    }

    /* Header fixiert */
    .epg-page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: linear-gradient(135deg, #0a1830 0%, #152040 100%);
        padding: 10px 15px;
        margin-bottom: 0;
    }

    .header h1 {
        font-size: 24px;
    }

    .clock {
        font-size: 20px;
    }

    /* Seiteninhalt unter fixiertem Header */
    .page-content {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
        overflow: visible;
    }

    .content,
    .live-tv-content {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* Video + EPG-Bar fixiert unter Header */
    .preview-section {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 15;
        background: linear-gradient(135deg, #0a1830 0%, #152040 30%, #0d1525 100%);
        padding: 10px 15px;
        order: -1;
    }

    .preview-info {
        padding: 8px 0;
    }

    .preview-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .on-now {
        margin-bottom: 5px;
    }

    /* Kanalliste: scrollbar unter fixierten Elementen (margin-top statt position:fixed für Safari-Adressleiste) */
    /* margin-top = Video (56.25vw) + padding-top(8) + gap(15) + EPG-Bar(~85) + padding-bottom(10) + Puffer */
    .channel-list-container {
        max-height: none;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin-top: calc(56.25vw + 125px);
        padding: 0 15px 15px 15px;
    }

    /* Footer auf Mobile ausblenden */
    .app-footer {
        display: none;
    }

    /* Mediathek responsive */
    .recordings-page {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 20px;
    }

    .sidebar {
        max-height: none;
        padding: 15px;
    }

    .sidebar h2 {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    /* Uhrzeit ausblenden */
    .clock {
        display: none !important;
    }

    /* Kompakterer Header */
    .epg-page-header {
        padding: 10px 15px;
    }

    .header {
        padding: 8px 10px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
        gap: 8px;
    }

    .header h1 {
        font-size: 18px;
        flex-shrink: 0;
    }

    .header-right {
        gap: 8px;
    }

    .bouquet-select {
        height: 28px;
        padding: 0 10px;
        font-size: 12px;
        max-width: 150px;
    }

    /* Seiteninhalt unter kleinerem Header */
    .page-content {
        padding-top: calc(55px + env(safe-area-inset-top, 0px));
    }

    .preview-section {
        top: calc(55px + env(safe-area-inset-top, 0px));
        padding: 8px 10px;
    }

    .channel-list-container {
        margin-top: calc(56.25vw + 120px + env(safe-area-inset-top, 0px));
        padding: 0 10px 10px 10px;
    }

    .channel-item {
        grid-template-columns: 40px 1fr;
        padding: 10px;
        gap: 12px;
    }

    .show-title {
        font-size: 11px;
    }

    .stream-mode-toggle {
        font-size: 11px;
        padding: 6px 8px;
        gap: 8px;
    }

    .player-stats {
        font-size: 10px;
    }

    .preview-title {
        font-size: 16px;
    }

    .on-now {
        font-size: 10px;
    }

    /* Mediathek */
    .recording-btn {
        padding: 12px;
    }

    .recording-title {
        font-size: 14px;
    }

    .source-badge {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* Mobile Hochformat: Alle Elemente sichtbar + Reset der Landscape-Styles */
@media (max-width: 1000px) and (orientation: portrait) {
    .epg-page-header {
        display: flex !important;
    }

    .header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    }

    .channel-list-container {
        display: block !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    .preview-info {
        display: block !important;
    }

    .show-title {
        display: block !important;
        font-size: 11px !important;
        color: rgba(255,255,255,0.5) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .channel-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .tv-screen {
        padding: 0 !important;
        min-height: 100vh !important;
    }

    .page-content {
        overflow: visible !important;
    }

    .content,
    .live-tv-content {
        padding: 0 !important;
        height: auto !important;
    }

    .preview-section {
        position: fixed !important;
        top: calc(60px + env(safe-area-inset-top, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        padding: 10px 15px !important;
        z-index: 15 !important;
    }

    .video-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        border-radius: 4px !important;
    }

}

/* Kleinere Handys Hochformat */
@media (max-width: 600px) and (orientation: portrait) {
    .page-content {
        padding-top: calc(55px + env(safe-area-inset-top, 0px)) !important;
    }

    .preview-section {
        top: calc(55px + env(safe-area-inset-top, 0px)) !important;
        padding: 8px 10px !important;
    }

    .channel-list-container {
        margin-top: calc(56.25vw + 120px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* EPG-Seite Hochformat: Flex-Layout wie im Querformat, Header sichtbar */
@media (max-width: 1000px) and (orientation: portrait) {
    .tv-screen:has(.epg-main-container) .epg-page-header {
        position: static !important;
        flex-shrink: 0;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .page-content:has(.epg-main-container) {
        padding-top: 0 !important;
        overflow: hidden !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .page-content:has(.epg-main-container) .epg-footer-bar {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mobile Querformat: Nur Videoplayer */
@media (max-width: 1000px) and (orientation: landscape) {
    .header,
    .epg-page-header,
    .channel-list-container,
    .preview-info,
    .stream-mode-toggle,
    .player-stats,
    .app-footer {
        display: none !important;
    }

    .tv-screen {
        padding: 0;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .page-content {
        padding-top: 0 !important;
        overflow: hidden !important;
    }

    .content,
    .live-tv-content {
        padding-top: 0;
        height: 100vh;
        height: 100dvh;
    }

    .preview-section {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        z-index: 100;
    }

    .video-container {
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
        border-radius: 0;
    }

    /* Video.js Fluid-Modus überschreiben (setzt inline padding-top: 56.25% + height: 0) */
    .video-js {
        padding-top: 0 !important;
        height: 100% !important;
    }
}

/* Blazor Validation Styles */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ==================== EPG PAGE ==================== */

.epg-page-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #0a1830 0%, #152040 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.epg-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.epg-nav .nav-link {
    display: flex;
    align-items: center;
    opacity: 0.4;
    text-decoration: none;
    transition: opacity 0.2s;
    padding: 4px;
}

.epg-nav .nav-link:hover {
    opacity: 0.7;
}

.epg-nav .nav-link.active {
    opacity: 1;
    border-bottom: 2px solid white;
    padding-bottom: 2px;
}

/* Admin-Layout mit Seitenmenü */
.admin-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #1a2942 0%, #0f1829 100%);
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0;
    overflow-y: auto;
}

.admin-nav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 32px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.admin-nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.admin-nav-link.active {
    background: rgba(255,255,255,0.12);
    color: white;
    border-left: 3px solid #4a90d9;
    padding-left: 29px;
}

.admin-sidebar .bi {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.admin-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Responsive Admin-Layout */
@media (max-width: 768px) {
    .admin-sidebar {
        width: 180px;
    }

    .admin-nav-link {
        padding: 10px 16px 10px 24px;
        font-size: 0.85rem;
    }

    .admin-nav-link.active {
        padding-left: 21px;
    }
}

/* Bootstrap Icons */
.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Nav-Icons (größer als Admin-Sidebar-Icons) */
.nav-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.bi-broadcast {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0'/%3E%3C/svg%3E");
}

.bi-calendar3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

.bi-clock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 7.71z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

.bi-collection-play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3m2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1m2.765 5.576A.5.5 0 0 0 6 7v5a.5.5 0 0 0 .765.424l4-2.5a.5.5 0 0 0 0-.848z'/%3E%3Cpath d='M1.5 14.5A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5zm13-1a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5h-13A.5.5 0 0 0 1 6v7a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
}

.bi-pc-display {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V1zm1 13.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0m2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0M9.5 1a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM9 3.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0-.5.5M1.5 2A1.5 1.5 0 0 0 0 3.5v7A1.5 1.5 0 0 0 1.5 12H6v2h-.5a.5.5 0 0 0 0 1H7V3.5a.5.5 0 0 0-.5-.5h-5zM1 3.5a.5.5 0 0 1 .5-.5H6v8H1.5a.5.5 0 0 1-.5-.5v-7z'/%3E%3C/svg%3E");
}

.bi-gear-fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-people-fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E");
}

.bi-sliders {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z'/%3E%3C/svg%3E");
}

.bi-card-text {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/%3E%3Cpath d='M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-activity {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2z'/%3E%3C/svg%3E");
}

.bi-file-text-fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM5 4h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1zm0 2h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1z'/%3E%3C/svg%3E");
}

.bi-shield-exclamation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E");
}

.bi-check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

.bi-x-lg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}

.bi-unlock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h7V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2M3 8a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.bi-plus-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
}

.bi-bar-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
}

.bi-eye-slash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/%3E%3Cpath d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/%3E%3C/svg%3E");
}

.bi-envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z'/%3E%3C/svg%3E");
}

.bi-chevron-up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E");
}

.bi-chevron-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.bi-person-gear {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1zm3.63-4.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.182.315.876.876l-.074.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.316 1.182-.877.876l-.136-.074a.64.64 0 0 0-.921.382l-.043.149c-.181.612-1.049.612-1.23 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.182-.316-.876-.877l.074-.136a.64.64 0 0 0-.382-.921l-.148-.043c-.613-.181-.613-1.049 0-1.23l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.315-1.182.876-.876l.136.074a.64.64 0 0 0 .921-.382zM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0'/%3E%3C/svg%3E");
}

.bi-play-circle-fill {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/%3E%3C/svg%3E");
}

.bi-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
}

.epg-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: rgba(255,255,255,0.6);
}

.epg-main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* EPG Section */
.epg-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Zeitleiste */
.epg-timeline-wrapper {
    display: flex;
    flex-shrink: 0;
    background: #243352;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.epg-timeline-spacer {
    min-width: 90px;
    flex-shrink: 0;
    background: #1a2744;
}

.epg-timeline {
    flex: 1;
    display: flex;
    overflow-x: hidden;
    scrollbar-width: none;
}

.epg-timeline::-webkit-scrollbar {
    display: none;
}

.epg-time-slot {
    flex: 0 0 150px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    border-left: 1px solid rgba(255,255,255,0.1);
    background: #243352;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.epg-time-slot.new-day {
    background: #1a3a5a;
    border-left: 2px solid #00aacc;
}

.epg-time-slot .day-label {
    font-size: 10px;
    color: #00aacc;
    font-weight: 600;
    text-transform: uppercase;
}

.epg-time-slot .time-label {
    font-size: 14px;
}

/* EPG Grid */
.epg-grid-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: scroll;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #00aacc #1a2744;
}

/* Sichtbare Scrollbars für EPG Grid */
.epg-grid-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.epg-grid-container::-webkit-scrollbar-track {
    background: #1a2744;
    border-radius: 6px;
}

.epg-grid-container::-webkit-scrollbar-thumb {
    background: #00aacc;
    border-radius: 6px;
    border: 2px solid #1a2744;
}

.epg-grid-container::-webkit-scrollbar-thumb:hover {
    background: #00ccee;
}

.epg-grid-container::-webkit-scrollbar-corner {
    background: #1a2744;
}

.epg-grid {
    display: flex;
    flex-direction: column;
    min-width: max-content;
    position: relative;
}

.epg-channel-row {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 36px;
}

.epg-channel-row.odd {
    background: #1a2744;
}

.epg-channel-row.even {
    background: #1e2d4d;
}

.epg-channel-info {
    min-width: 90px;
    max-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    background: inherit;
    border-right: 1px solid rgba(255,255,255,0.1);
    position: sticky;
    left: 0;
    z-index: 5;
}

.epg-channel-logo {
    width: 70px;
    height: 28px;
    border-radius: 3px;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
}

.epg-channel-name-fallback {
    width: 70px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #2a3a5a, #1a2a4a);
}

/* Programme */
.epg-programs-container {
    display: flex;
    flex: 1;
    position: relative;
    align-items: stretch;
}

.epg-program {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    background: transparent;
    border-right: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    position: absolute;
    top: 0;
}

.epg-program:hover {
    background: rgba(255,255,255,0.1);
}

.epg-program.selected {
    background: #990000;
}

.epg-program.past {
    opacity: 0.5;
}

.epg-program.current {
    background: rgba(0, 170, 204, 0.2);
    border-left: 2px solid #00aacc;
}

.epg-program.current:hover {
    background: rgba(0, 170, 204, 0.3);
}

.epg-program-title {
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

/* Zeit-Indikator */
.epg-current-time-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #cc0000;
    z-index: 100;
    pointer-events: none;
}

.epg-current-time-indicator::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #cc0000;
    border-radius: 50%;
}

.epg-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: #00aacc;
    margin-bottom: 8px;
    line-height: 1.3;
}

.epg-detail-time-range {
    font-size: 14px;
    color: white;
    margin-bottom: 4px;
}

.epg-detail-duration {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 16px;
}

.epg-detail-description {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    overflow-y: auto;
}

/* Picon im Detail-Dialog */
.epg-dialog-picon {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Sendername im Detail-Dialog-Header */
.epg-dialog-channel-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header-Actions im Detail-Dialog */
.epg-dialog-header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

/* Timer-hinzufügen-Button im EPG-Detail */
.epg-timer-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    font-family: inherit;
}

.epg-timer-add-btn:hover:not(:disabled) {
    background: rgba(220, 50, 50, 0.25);
    border-color: #dc3232;
    color: #ff5555;
}

.epg-timer-add-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.epg-timer-add-btn.success {
    background: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: #28a745;
}

/* Record-Circle Icon */
.bi-record-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

.epg-timer-add-btn:hover:not(:disabled) .bi-record-circle {
    filter: brightness(0) invert(0.4) sepia(1) saturate(20) hue-rotate(0deg);
}

/* Check-Circle Icon */
.bi-check-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2328a745' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Footer */
.epg-footer-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #243352;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.epg-footer-btn {
    padding: 8px 24px;
    background: #2a3a5a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.epg-footer-btn:hover {
    background: #3a4a6a;
    border-color: #00aacc;
}

.epg-footer-btn.active {
    background: #00aacc;
    border-color: #00aacc;
    color: #000;
}

.epg-search-btn {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.epg-search-btn .bi-search {
    width: 16px;
    height: 16px;
}

/* EPG Suche */
.epg-search-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    margin-bottom: 12px;
}

.epg-search-input:focus {
    outline: none;
    border-color: #00aacc;
    box-shadow: 0 0 0 2px rgba(0,170,204,0.2);
}

.epg-search-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.epg-search-results {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.epg-search-result-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.epg-search-result-item:hover {
    background: rgba(0,170,204,0.15);
    border-color: rgba(0,170,204,0.3);
}

.epg-search-result-channel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
}

.epg-search-result-picon {
    width: 40px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    background: rgba(255,255,255,0.05);
}

.epg-search-result-title {
    font-size: 14px;
    font-weight: 500;
    color: white;
    margin-bottom: 2px;
}

.epg-search-result-time {
    font-size: 12px;
    color: #00aacc;
    margin-bottom: 4px;
}

.epg-search-result-excerpt {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.epg-search-result-item.past {
    opacity: 0.45;
}

.epg-search-result-item.past .epg-search-result-time {
    color: rgba(255,255,255,0.3);
}

.epg-search-no-results {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
}

/* EPG Responsive */
@media (max-width: 1000px) {
    .epg-page-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .epg-datetime {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .epg-time-slot {
        font-size: 12px;
        padding: 6px 8px;
    }

    .epg-timeline-spacer {
        min-width: 60px;
    }

    .epg-channel-info {
        min-width: 60px;
        max-width: 60px;
    }

    .epg-channel-logo {
        width: 50px;
        height: 22px;
    }

    .epg-channel-name-fallback {
        width: 50px;
        height: 22px;
        font-size: 7px;
    }

    .epg-footer-btn {
        padding: 6px 16px;
        font-size: 12px;
    }
}

/* ==================== TIMER PAGE ==================== */

.timer-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: rgba(255,255,255,0.6);
}

.timer-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: rgba(255,255,255,0.4);
}

.timer-empty-icon {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
}

.timer-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.timer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timer-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto auto;
    gap: 15px;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background 0.2s;
}

.timer-row:hover {
    background: rgba(255,255,255,0.08);
}

.timer-row.timer-running {
    border-left-color: #4caf50;
    background: rgba(76,175,80,0.08);
}

.timer-row.timer-disabled {
    opacity: 0.5;
}

.timer-picon {
    width: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-picon-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.timer-info {
    min-width: 0;
}

.timer-title {
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timer-channel {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

.timer-description {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.timer-long-description {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 500px;
}

.timer-schedule {
    text-align: right;
    white-space: nowrap;
}

.timer-date {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.timer-time {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.timer-duration {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

.timer-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 100px;
}

.timer-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timer-badge-waiting {
    background: rgba(33,150,243,0.2);
    color: #64b5f6;
}

.timer-badge-running {
    background: rgba(76,175,80,0.2);
    color: #81c784;
}

.timer-badge-finished {
    background: rgba(158,158,158,0.2);
    color: #bdbdbd;
}

.timer-badge-disabled {
    background: rgba(255,152,0,0.2);
    color: #ffb74d;
}

.timer-badge-repeat {
    background: rgba(156,39,176,0.2);
    color: #ce93d8;
}

.timer-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.timer-action-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-action-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.timer-action-edit:hover {
    border-color: rgba(102,126,234,0.4);
    background: rgba(102,126,234,0.1);
}

.timer-action-delete:hover {
    border-color: rgba(244,67,54,0.4);
    background: rgba(244,67,54,0.1);
}

.timer-action-icon {
    width: 1rem;
    height: 1rem;
}

.bi-pencil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325'/%3E%3C/svg%3E");
}

.bi-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23aaa' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
    .timer-row {
        grid-template-columns: 45px 1fr;
        gap: 10px;
    }

    .timer-schedule,
    .timer-status {
        grid-column: 2;
    }

    .timer-schedule {
        text-align: left;
    }

    .timer-status {
        flex-direction: row;
        align-items: center;
    }

    .timer-description {
        max-width: 200px;
    }
}

/* ==================== MEDIATHEK PAGE (Netflix-Style Browse) ==================== */

.mediathek-browse {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Sticky Topbar mit Suchleiste --- */
.mediathek-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 12px 20px;
    background: rgba(13, 26, 48, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.mediathek-search-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 480px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 0 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mediathek-search-pill:focus-within {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74,144,217,0.2);
}

.mediathek-search-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.4;
    flex-shrink: 0;
    margin-right: 8px;
}

.mediathek-search-input {
    flex: 1;
    padding: 9px 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.mediathek-search-input::placeholder { color: rgba(255,255,255,0.3); }

.mediathek-search-clear {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.mediathek-search-clear:hover { color: #fff; }

/* --- Scrollbarer Container für Genre-Zeilen --- */
.mediathek-rows {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 20px 0;
}

.mediathek-rows::-webkit-scrollbar { width: 6px; }
.mediathek-rows::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.mediathek-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* --- Leerer Zustand --- */
.mediathek-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.4);
    padding: 60px 40px;
}
.mediathek-empty-icon { width: 3rem; height: 3rem; opacity: 0.4; }

/* --- Genre-Zeile --- */
.mediathek-row {
    padding: 8px 0 12px 0;
}

.mediathek-row-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin: 0 0 8px 20px;
    letter-spacing: 0.3px;
}

.mediathek-row-wrapper {
    position: relative;
}

/* --- Horizontaler Scroll-Container --- */
.mediathek-row-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 4px 20px 4px 20px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.mediathek-row-scroll::-webkit-scrollbar { display: none; }
.mediathek-row-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Scroll-Pfeil-Buttons --- */
.mediathek-scroll-btn {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 40px;
    background: rgba(0,0,0,0.6);
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mediathek-scroll-left { left: 0; border-radius: 0 4px 4px 0; }
.mediathek-scroll-right { right: 0; border-radius: 4px 0 0 4px; }

.mediathek-row-wrapper:hover .mediathek-scroll-btn { opacity: 1; }
.mediathek-row-wrapper.scroll-at-start .mediathek-scroll-left,
.mediathek-row-wrapper.scroll-at-end .mediathek-scroll-right { display: none; }
.mediathek-scroll-btn:hover { background: rgba(0,0,0,0.8); color: #fff; }

/* --- Film-Card (feste Breite, horizontal scrollbar) --- */
.mediathek-card {
    flex-shrink: 0;
    width: 170px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-align: left;
    padding: 0;
    color: inherit;
    font-family: inherit;
}

.mediathek-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border-color: rgba(74,144,217,0.3);
    z-index: 1;
}

.mediathek-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    background: linear-gradient(135deg, #1a3050 0%, #0d1a30 100%);
    overflow: hidden;
}

.mediathek-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mediathek-card-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mediathek-card-no-poster .bi { width: 2.5rem; height: 2.5rem; opacity: 0.2; }

.mediathek-card-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mediathek-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-3d { background: rgba(156,39,176,0.85); color: #fff; }
.badge-quality { background: rgba(33,150,243,0.85); color: #fff; }

.mediathek-card-score {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    color: #ffc107;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}

.mediathek-card-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mediathek-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mediathek-card-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    display: flex;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mediathek-card-fsk {
    margin-top: 2px;
}

.mediathek-fsk-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
}
.fsk-0  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.fsk-6  { background: rgba(255,235,59,0.2); color: #ffeb3b; }
.fsk-12 { background: rgba(255,152,0,0.2); color: #ff9800; }
.fsk-16 { background: rgba(244,67,54,0.2); color: #f44336; }
.fsk-18 { background: rgba(211,47,47,0.3); color: #ef5350; }

/* --- Detail Dialog --- */
.mediathek-detail-dialog {
    max-height: 85vh;
}

.mediathek-detail-content {
    padding: 0 !important;
}

.mediathek-detail-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: 400px;
}

.mediathek-detail-left {
    padding: 20px;
    background: rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mediathek-detail-poster img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.mediathek-detail-no-poster {
    aspect-ratio: 2/3;
    border-radius: 6px;
}

.mediathek-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mediathek-detail-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}

.mediathek-detail-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mediathek-detail-link {
    color: #4a90d9;
    text-decoration: none;
    font-size: 0.82rem;
}
.mediathek-detail-link:hover { color: #6aafef; text-decoration: underline; }

.mediathek-detail-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mediathek-detail-genre-tag {
    padding: 3px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
}

.mediathek-detail-right {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mediathek-detail-titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mediathek-detail-title-row {
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}

.mediathek-detail-lang {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
    min-width: 55px;
    text-align: right;
    flex-shrink: 0;
}

.mediathek-detail-description {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.65;
}

.mediathek-detail-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.mediathek-detail-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mediathek-file-btn {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.8);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.mediathek-file-btn:hover {
    background: rgba(74,144,217,0.1);
    border-color: rgba(74,144,217,0.3);
}

.mediathek-file-btn.active {
    background: rgba(74,144,217,0.2);
    border-color: rgba(74,144,217,0.4);
}

.mediathek-file-type {
    font-weight: 600;
    font-size: 0.72rem;
    color: #4a90d9;
    text-transform: uppercase;
}

.mediathek-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mediathek-file-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}

.mediathek-detail-player {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

/* Loading-Spinner auf dem Player-Container (sichtbar ab Render, vor Video.js-Init) */
.mediathek-detail-player::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: #4a90d9;
    border-radius: 50%;
    animation: mediathek-spin 0.8s linear infinite;
    z-index: 10;
    pointer-events: none;
}

.mediathek-detail-player:has(.vjs-has-started)::after {
    display: none;
}

@keyframes mediathek-spin {
    to { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (max-width: 1000px) {
    .mediathek-detail-layout {
        grid-template-columns: 1fr;
    }

    .mediathek-detail-left {
        flex-direction: row;
        gap: 15px;
        align-items: flex-start;
    }

    .mediathek-detail-poster {
        max-width: 120px;
        flex-shrink: 0;
    }

    .mediathek-card { width: 145px; }
    .mediathek-row-scroll { gap: 10px; }
}

@media (max-width: 600px) {
    .mediathek-card { width: 125px; }
    .mediathek-card-info { padding: 8px; }
    .mediathek-card-title { font-size: 0.78rem; }
    .mediathek-row-scroll { gap: 8px; padding: 4px 12px; }
    .mediathek-row-title { margin-left: 12px; font-size: 0.9rem; }
    .mediathek-topbar { padding: 10px 12px; }
    .mediathek-scroll-btn { display: none; }
}

/* ==================== ADMIN PAGE ==================== */

.admin-content {
    flex: 1;
    padding: 20px 15px;
    overflow-y: auto;
}

.admin-content h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 20px;
    color: white;
}

/* ==================== LEGAL PAGES (Impressum, Datenschutz) ==================== */

.legal-content {
    flex: 1;
    padding: 20px 25%;
    overflow-y: auto;
}

.legal-content h2 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    color: white;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.9);
}

.legal-section {
    margin-bottom: 25px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-content p {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-content ul {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin: 12px 0;
    padding-left: 25px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content strong {
    color: rgba(255,255,255,0.9);
}

@media (max-width: 1200px) {
    .legal-content {
        padding: 20px 15%;
    }
}

@media (max-width: 800px) {
    .legal-content {
        padding: 20px 5%;
    }
}

/* ==================== PLACEHOLDER ==================== */

.page-placeholder {
    color: rgba(255,255,255,0.5);
    font-size: 16px;
}

/* ==================== ADMIN BEREICH ==================== */

/* Admin-Seiten Container */
.admin-page {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

.admin-page h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Einheitlicher Font im Admin-Bereich — Browser-Default für <code> (monospace) überschreiben,
   damit IP-Adressen, Schlüssel etc. mit Inter gerendert werden wie der restliche Text.
   Inline-style="font-family: monospace" (z.B. Stack-Traces in TraceLogs) bleibt davon unberührt. */
.admin-page code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* Admin-Filterleiste */
.admin-filter-bar {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.admin-filter-search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.admin-filter-input {
    width: 100%;
    padding: 8px 35px 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.875rem;
}

.admin-filter-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.2);
}

.admin-filter-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.admin-filter-input option {
    background: #1a2942;
    color: #fff;
}

.admin-filter-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
}

.admin-filter-clear:hover {
    color: #fff;
}

.admin-filter-dates {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-filter-dates label {
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
}

.admin-filter-date {
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.875rem;
}

.admin-filter-date:focus {
    outline: none;
    border-color: #667eea;
}

/* Admin-Buttons */
.admin-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.admin-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}

.admin-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.15);
}

.admin-btn-secondary:hover {
    background: rgba(255,255,255,0.12);
}

.admin-btn-danger {
    background: rgba(244,67,54,0.15);
    color: #f44336;
    border: 1px solid rgba(244,67,54,0.3);
}

.admin-btn-danger:hover {
    background: rgba(244,67,54,0.25);
}

.admin-btn-success {
    background: rgba(76,175,80,0.15);
    color: #4caf50;
    border: 1px solid rgba(76,175,80,0.3);
}

.admin-btn-success:hover {
    background: rgba(76,175,80,0.25);
}

.admin-btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
    min-width: auto;
}

/* Icon-only Variante — quadratisch, kompakt, Icon zentriert. Mit .admin-btn-sm noch kleiner. */
.admin-btn-icon {
    padding: 6px;
    width: 32px;
    height: 32px;
    justify-content: center;
    gap: 0;
}

.admin-btn-icon.admin-btn-sm {
    padding: 4px;
    width: 26px;
    height: 26px;
}

.admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Hervorhebung für unbenannte Geräte */
.unnamed-device td {
    background: rgba(255,152,0,0.05);
}

.text-muted {
    color: rgba(255,255,255,0.4);
}

/* Admin-Tabellen */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.admin-table th {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-table td {
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
}

.admin-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

.admin-table .actions {
    display: flex;
    gap: 8px;
}

/* Status-Badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge-active {
    background: rgba(76,175,80,0.15);
    color: #4caf50;
}

.status-badge-inactive {
    background: rgba(158,158,158,0.15);
    color: #9e9e9e;
}

.status-badge-locked {
    background: rgba(244,67,54,0.15);
    color: #f44336;
}

.status-badge-pending {
    background: rgba(255,152,0,0.15);
    color: #ff9800;
}

/* Log-Level Farben */
.log-level-trace { color: #9e9e9e; }
.log-level-debug { color: #64b5f6; }
.log-level-info { color: #4caf50; }
.log-level-warning { color: #ff9800; }
.log-level-error { color: #f44336; }
.log-level-critical { color: #d32f2f; background: rgba(211,47,47,0.1); padding: 2px 6px; border-radius: 4px; }

/* Admin-Dialog */
.admin-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

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

.admin-dialog {
    background: linear-gradient(135deg, #1a2942 0%, #0f1829 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: slideUp 0.2s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

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

.admin-dialog-small { width: 400px; }
.admin-dialog-medium { width: 600px; }
.admin-dialog-large { width: 900px; }

.admin-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-dialog-header h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.admin-dialog-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.admin-dialog-close:hover {
    color: #fff;
}

.admin-dialog-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.admin-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Admin-Formular */
.admin-form-group {
    margin-bottom: 16px;
}

.admin-form-group label {
    display: block;
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
    margin-bottom: 6px;
}

.admin-form-group label.required::after {
    content: " *";
    color: #f44336;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.2);
}

.admin-form-input::placeholder,
.admin-form-textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

.admin-form-select {
    cursor: pointer;
}

.admin-form-select option {
    background: #1a2942;
}

.admin-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.admin-form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.admin-form-error {
    color: #f44336;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Admin-Benachrichtigungen */
.admin-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-alert-info {
    background: rgba(33,150,243,0.1);
    border: 1px solid rgba(33,150,243,0.3);
    color: #2196f3;
}

.admin-alert-success {
    background: rgba(76,175,80,0.1);
    border: 1px solid rgba(76,175,80,0.3);
    color: #4caf50;
}

.admin-alert-warning {
    background: rgba(255,152,0,0.1);
    border: 1px solid rgba(255,152,0,0.3);
    color: #ff9800;
}

.admin-alert-error {
    background: rgba(244,67,54,0.1);
    border: 1px solid rgba(244,67,54,0.3);
    color: #f44336;
}

/* Admin-Karten (für gruppierte Inhalte) */
.admin-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 16px;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}

.admin-card-header h4 {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}

.admin-card-toggle {
    color: rgba(255,255,255,0.5);
    transition: transform 0.2s;
}

.admin-card-toggle.collapsed {
    transform: rotate(-90deg);
}

/* Eingabefeld mit integriertem Icon-Button rechts innerhalb (z.B. Passwort-Sichtbarkeit).
   Der Button schwebt absolut über dem rechten Rand des Inputs, der Input bekommt rechts
   genug Padding, damit der Text nicht unter dem Button verschwindet. */
.admin-input-with-icon {
    position: relative;
}

.admin-input-with-icon .admin-form-input {
    padding-right: 40px;
}

.admin-input-icon-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.2s, background 0.2s;
}

.admin-input-icon-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.06);
}

.admin-input-icon-btn:focus-visible {
    outline: 2px solid rgba(102,126,234,0.5);
    outline-offset: 1px;
    opacity: 1;
}

/* Toggle-Switch für Admin-Formulare — höhere Spezifität, weil .admin-form-group label
   das label sonst auf display: block + margin-bottom: 6px zurücksetzt. */
.admin-form-group .admin-toggle,
.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}

.admin-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: rgba(255,255,255,0.15);
    border-radius: 22px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.admin-toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.admin-toggle input[type="checkbox"]:checked + .admin-toggle-slider {
    background: #4caf50;
}

.admin-toggle input[type="checkbox"]:checked + .admin-toggle-slider::after {
    transform: translateX(18px);
}

.admin-toggle input[type="checkbox"]:focus-visible + .admin-toggle-slider {
    outline: 2px solid rgba(76,175,80,0.5);
    outline-offset: 2px;
}

.admin-card-content {
    padding: 16px;
}

.admin-card-content.collapsed {
    display: none;
}

/* Leer-Zustand */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.5);
}

.admin-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* Responsive Admin */
@media (max-width: 768px) {
    .admin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-filter-search {
        max-width: none;
    }

    .admin-filter-dates {
        flex-wrap: wrap;
    }

    .admin-dialog-small,
    .admin-dialog-medium,
    .admin-dialog-large {
        width: 95%;
        margin: 10px;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
    }
}

/* === VPN-Hinweis Popup === */
.vpn-hint-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.vpn-hint-dialog {
    background: linear-gradient(135deg, #1a2942 0%, #0f1829 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.2s ease;
    width: 400px;
    max-width: 90vw;
    padding: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}

.vpn-hint-dialog h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 16px 0 12px;
}

.vpn-hint-dialog p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 20px;
}

.vpn-hint-icon {
    font-size: 2.5rem;
}

.vpn-hint-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    margin-bottom: 20px;
}

.vpn-hint-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.vpn-hint-btn {
    background: #2196f3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 32px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.vpn-hint-btn:hover {
    background: #1976d2;
}