/* ============================================
   MfN Videoarchiv – Custom Branding & Lesbarkeit
   Version 7.6.0 – Umfassendes Lesbarkeits-Update
   ============================================ */

/* Logo */
.logo { min-width: 180px !important; }
.logo img { width: auto !important; max-height: 32px !important; min-width: 120px !important; }


/* ============================================
   GLOBALE TYPOGRAFIE
   Bessere Lesbarkeit durch optimierte Abstände
   ============================================ */

/* Grundlegende Textoptimierung */
body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Besserer Zeilenabstand für Fließtext */
.media-content-description,
.item-description,
p,
.text-content {
    line-height: 1.6 !important;
}


/* ============================================
   DARK HEADER & SIDEBAR OVERRIDES
   Weiße Schrift auf dunklem Hero-Hintergrund
   ============================================ */

/* Header: transparent mit Blur */
.page-header {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Header-Text und Icons weiß */
.page-header .header-right .circle-icon-button .material-icons,
.page-header .header-right .user-icon-wrap .material-icons {
    color: #fff !important;
}
.page-header .header-right .user-name {
    color: #fff !important;
}

/* Suchfeld: dunkler Hintergrund, helle Schrift */
.page-header .search-field input[type="text"],
.page-header .search-field input[type="search"] {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 6px !important;
}
.page-header .search-field input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}
.page-header .search-field input:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    outline: none !important;
}
.page-header .search-field .search-submit,
.page-header .search-field button {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
.page-header .search-field .search-submit .material-icons {
    color: #fff !important;
}

/* Sidebar: semi-transparent dunkel */
.page-sidebar {
    background-color: rgba(18, 18, 18, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Sidebar-Links */
.page-sidebar .link-item a,
.page-sidebar .nav-item a,
.page-sidebar li a {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 16px !important;
    border-radius: 4px !important;
    transition: background 0.15s, color 0.15s !important;
}
.page-sidebar .link-item a:hover,
.page-sidebar .nav-item a:hover,
.page-sidebar li a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.page-sidebar .link-item .material-icons,
.page-sidebar .link-item i,
.page-sidebar .nav-item .material-icons,
.page-sidebar li .material-icons,
.page-sidebar li i {
    color: rgba(255, 255, 255, 0.6) !important;
}
.page-sidebar .link-item a:hover .material-icons,
.page-sidebar .link-item a:hover i,
.page-sidebar li a:hover .material-icons,
.page-sidebar li a:hover i {
    color: #fff !important;
}
.page-sidebar .nav-menu-active-item a,
.page-sidebar li.active a {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Sidebar Gruppen-Titel */
.page-sidebar .nav-menu span,
.page-sidebar .sidebar-nav-title {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.72em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Sidebar Trennlinien & Footer */
.page-sidebar hr,
.page-sidebar .nav-menu > nav > ul,
.page-sidebar .sidebar-nav-inner,
.page-sidebar .sidebar-nav {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.page-sidebar .sidebar-footer,
.page-sidebar .sidebar-footer a {
    color: rgba(255, 255, 255, 0.35) !important;
}
.page-sidebar .sidebar-bottom-link {
    color: rgba(255, 255, 255, 0.45) !important;
}
.page-sidebar .theme-switch-label {
    color: rgba(255, 255, 255, 0.65) !important;
}


/* ============================================
   STARTSEITE – Kategorien & Zuletzt hochgeladen
   ============================================ */

/* Clip-Count Badge in Kategorie-Karten: DUNKLE Schrift auf hellem Badge */
.category-card-count {
    color: #555 !important;
    background: #f0f0f0 !important;
    font-weight: 500 !important;
}

/* Kategorie-Karten: subtilerer Hover, bessere Schatten */
.category-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.category-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.category-card-title {
    font-size: 0.95em !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}
.category-card-info {
    padding: 11px 14px !important;
    background: #fff !important;
}

/* "Zuletzt hochgeladen" – Überschrift & Clip-Infos (heller Bereich) */
#page-home .items-list-header h2,
#page-home .items-list-header h3,
#page-home .items-list-header h3 a,
#page-home .media-list-header h2,
#page-home .media-list-header h3,
#page-home .media-list-header h3 a,
#latest-section-wrap .items-list-header h3 a {
    color: #333 !important;
}
#page-home .items-list-header h3 a:hover,
#latest-section-wrap .items-list-header h3 a:hover {
    color: #111 !important;
}

/* Video-Titel und Meta-Infos im hellen Bereich */
#page-home .item-title,
#page-home .item-title a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}
#page-home .item-title a:hover {
    color: #000 !important;
}
#page-home .item-meta,
#page-home .item-author,
#page-home .item-author a,
#page-home .item-views,
#page-home .item-date {
    color: #555 !important;
    font-size: 0.85em !important;
}

/* Load-more Button */
#page-home button.load-more,
#latest-section-wrap button.load-more {
    color: #444 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    transition: all 0.15s !important;
}
#page-home button.load-more:hover,
#latest-section-wrap button.load-more:hover {
    color: #111 !important;
    border-color: #999 !important;
    background: rgba(0,0,0,0.04) !important;
}


/* ============================================
   VIDEO-DETAIL-SEITE (media.html)
   Weißer Content-Bereich für gute Lesbarkeit
   ============================================ */

/* Content-Bereich unter dem Player: weißer Hintergrund */
.media-content-wrap,
.video-content-wrap {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 12px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
}

/* Video-Titel */
.media-content-info .media-title,
.video-title,
h1.media-title {
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 1.4em !important;
    line-height: 1.35 !important;
}

/* Video-Beschreibung */
.media-content-description,
.media-description {
    color: #333 !important;
    font-size: 0.95em !important;
    line-height: 1.65 !important;
}

/* Meta-Infos (Autor, Datum, Views) */
.media-content-info .media-author,
.media-content-info .media-author a,
.media-content-info .media-date,
.media-content-info .media-views {
    color: #555 !important;
    font-size: 0.88em !important;
}
.media-content-info .media-author a:hover {
    color: #222 !important;
}

/* Action-Buttons (Favorit, Teilen etc.) */
.media-actions-wrap .action-btn,
.media-actions-wrap button {
    color: #444 !important;
    transition: color 0.15s !important;
}
.media-actions-wrap .action-btn:hover,
.media-actions-wrap button:hover {
    color: #111 !important;
}

/* Kommentar-Bereich */
.comments-section,
.media-comments-wrap {
    background: #fff !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
}
.comment-text {
    color: #333 !important;
    line-height: 1.55 !important;
}
.comment-author,
.comment-author a {
    color: #222 !important;
    font-weight: 600 !important;
}
.comment-date {
    color: #888 !important;
    font-size: 0.82em !important;
}


/* ============================================
   SUCHSEITE & LISTEN-SEITEN
   Konsistente Lesbarkeit auf allen Unterseiten
   ============================================ */

/* Suchseite: Content-Bereich hell */
.search-results-wrap,
.items-list-wrap,
.search-inner {
    background: rgba(255,255,255,0.97) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 12px auto !important;
    max-width: 1200px !important;
}

/* Suchergebnis-Titel & Infos */
.items-list-wrap .item-title a,
.search-results-wrap .item-title a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
}
.items-list-wrap .item-title a:hover,
.search-results-wrap .item-title a:hover {
    color: #000 !important;
}
.items-list-wrap .item-meta,
.items-list-wrap .item-author a,
.items-list-wrap .item-views,
.items-list-wrap .item-date,
.search-results-wrap .item-meta,
.search-results-wrap .item-author a {
    color: #555 !important;
}

/* Such-Header ("X Ergebnisse für ...") */
.search-results-header,
.search-results-header h1,
.search-results-header h2 {
    color: #222 !important;
}


/* ============================================
   PROFIL-SEITEN & PLAYLISTS
   ============================================ */

/* Profil-Bereich */
.profile-wrap,
.profile-banner-wrap,
.profile-content-wrap {
    background: rgba(255,255,255,0.97) !important;
    border-radius: 8px !important;
}
.profile-content-wrap {
    padding: 20px !important;
}
.profile-username,
.profile-name {
    color: #111 !important;
    font-weight: 700 !important;
}
.profile-description {
    color: #444 !important;
    line-height: 1.55 !important;
}

/* Playlist-Seite */
.playlist-wrap,
.playlist-content {
    background: rgba(255,255,255,0.97) !important;
    border-radius: 8px !important;
    padding: 16px !important;
}
.playlist-title {
    color: #111 !important;
    font-weight: 700 !important;
}
.playlist-description {
    color: #444 !important;
}


/* ============================================
   UPLOAD-SEITE
   ============================================ */

.upload-wrap,
.add-media-wrap {
    background: rgba(255,255,255,0.97) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    max-width: 800px !important;
    margin: 20px auto !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.upload-wrap h1,
.add-media-wrap h1 {
    color: #111 !important;
}
.upload-wrap label,
.add-media-wrap label {
    color: #333 !important;
    font-weight: 500 !important;
}


/* ============================================
   PLAYLIST CREATE BUTTON
   ============================================ */

.create-playlist-buttons .create-btn {
    background-color: #fff !important;
    color: #111 !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    letter-spacing: 0.02em !important;
    font-size: 14px !important;
    border: 1.5px solid #ddd !important;
}
.create-playlist-buttons .create-btn:hover {
    background-color: #f5f5f5 !important;
    border-color: #bbb !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
}

.save-to-popup {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}


/* ============================================
   SIDEBAR-OVERLAY FIX
   ============================================ */

.page-sidebar-content-overlay {
    display: none !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    .page-sidebar.open ~ .page-sidebar-content-overlay,
    .page-sidebar-content-overlay.visible {
        display: block !important;
        pointer-events: auto !important;
    }
}


/* ============================================
   MOBILE-OPTIMIERUNGEN
   ============================================ */

@media (max-width: 768px) {
    /* Kategorien: 2 Spalten statt Auto-Fill */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .category-card-title {
        font-size: 0.85em !important;
    }
    .category-card-count {
        font-size: 0.72em !important;
    }
    
    /* Überschriften kleiner */
    #categories-section h2 {
        font-size: 1.15em !important;
    }
    #latest-section-wrap h2 {
        font-size: 1.1em !important;
    }
    
    /* Video-Titel auf Detail-Seite */
    .media-content-info .media-title,
    h1.media-title {
        font-size: 1.15em !important;
    }
    
    /* Content-Wraps: weniger Padding */
    .media-content-wrap,
    .video-content-wrap,
    .search-results-wrap,
    .items-list-wrap,
    .upload-wrap,
    .add-media-wrap {
        padding: 14px !important;
        border-radius: 6px !important;
    }
}

@media (max-width: 480px) {
    /* Kategorien: 1 Spalte auf kleinen Handys */
    .categories-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================
   FOKUS-STYLES (Barrierefreiheit)
   ============================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid rgba(46, 80, 144, 0.7) !important;
    outline-offset: 2px !important;
}

/* Sidebar: Focus-Style auf dunklem Hintergrund */
.page-sidebar a:focus-visible {
    outline-color: rgba(255, 255, 255, 0.6) !important;
}