/* ═══════════════════════════════════════════════════════════════
   NM24.CSS — Zentrales Stylesheet für alle NM24-Apps
   NeuroMedia24 | neuromedia24-design.netlify.app
   Enthält: Mediathek Theme · Missing Overrides · Template Head Fix
   Version: 20260509
   ═══════════════════════════════════════════════════════════════ */

/* ─── NM24 MEDIATHEK THEME ─── */

/* ═══════════════════════════════════════════════════════════════
   NM24 MEDIATHEK THEME — Vollständiges Redesign 2026-05-08 v4
   Basis: NM24 Master Template (exakte Klassen aus App-Quellcode)
   ═══════════════════════════════════════════════════════════════ */

/* ── GRUNDFARBEN ─────────────────────────────────────────────── */
body, html { background: #EEF4FC !important; }
.app        { background: #EEF4FC !important; }
.content, .ms-content, .home-content { background: #EEF4FC !important; }

/* ── HEADER ─────────────────────────────────────────────────── */
.nm-header {
  background:    #D7E4F4 !important;
  height:        130px   !important;
  min-height:    130px   !important;
  max-height:    130px   !important;
  border-bottom: 4px solid rgba(0,32,96,0.15) !important;
}
/* Media-Query Override: verhindert 56px-Override */
@media (min-width: 600px) {
  .nm-header { min-height: 130px !important; height: 130px !important; }
}
@media (min-width: 900px) {
  .nm-header { min-height: 130px !important; height: 130px !important; }
}
.nm-header-inner { min-height: 130px !important; }

/* Titel */
.nm-title {
  color:          #002060 !important;
  font-size:      27px    !important;
  font-weight:    400     !important;
  letter-spacing: -0.2px  !important;
}
.nm-title span[style*="960000"],
.nm-title span[style*="color:red"] {
  color: #960000 !important;
}

/* Suchleiste */
.nm-header-search,
.nm-search-wrap input,
.search-wrap input {
  background:    #EEF2F8 !important;
  border:        1.5px solid rgba(0,32,96,0.20) !important;
  color:         #002060 !important;
}
.nm-header-search input::placeholder { color: rgba(0,32,96,0.50) !important; }

/* Hamburger */
.ms-menu-btn, .nm-hamburger {
  background: rgba(0,32,96,0.08) !important;
  color:      #002060 !important;
}
.ms-menu-btn svg, .nm-hamburger svg { stroke: #002060 !important; }

/* Flaggen-Buttons (rote Kreise, Text DE/US/ES) */
.flag-btn, .nm-flag-btn {
  width:         36px !important;
  height:        36px !important;
  border-radius: 50% !important;
  background:    rgba(150,0,0,0.12) !important;
  color:         #960000 !important;
  font-size:     12px !important;
  font-weight:   700 !important;
  border:        none !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
}
.flag-btn:hover, .nm-flag-btn:hover { background: #960000 !important; color: #fff !important; }
.flag-btn.active, .nm-flag-btn.active {
  background: #960000 !important;
  color:      #fff !important;
  box-shadow: 0 0 0 2px rgba(150,0,0,0.35) !important;
}

/* Icon-Buttons (Profil / Grid / Logout) */
.nm-iconbtn {
  width:         36px !important;
  height:        36px !important;
  border-radius: 50% !important;
  background:    #002060 !important;
  color:         #fff !important;
}
.nm-iconbtn:hover { background: #003080 !important; }

/* Headtools-Wrapper: kein Pill */
.nm-headtools, .nm-flags {
  background:    none !important;
  border:        none !important;
  border-radius: 0    !important;
  padding:       0    !important;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.ms-sidebar {
  background: #D3E0F2 !important;
  color:      #002060 !important;
}
.ms-sidebar * { border-color: rgba(0,32,96,0.12) !important; }

.ms-sb-title, .ms-sidebar-title, .ms-sidebar h3, .ms-sidebar h4 {
  color:          rgba(0,32,96,0.50) !important;
  font-size:      10px  !important;
  font-weight:    700   !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
}

.ms-nav-item {
  color:         #002060 !important;
  background:    transparent !important;
  border-radius: 8px !important;
}
.ms-nav-item:hover {
  background: rgba(0,32,96,0.07) !important;
  color:      #002060 !important;
}
.ms-nav-item.active {
  background: rgba(0,32,96,0.12) !important;
  color:      #002060 !important;
  font-weight: 600 !important;
}
.ms-nav-num { color: #002060 !important; font-weight: 700 !important; font-size: 14px !important; opacity: 1 !important; }
.ms-nav-label { color: #002060 !important; font-weight: 600 !important; font-size: 14px !important; }

/* Sidebar Footer Links */
.ms-sb-footer a, .ms-sidebar-footer a {
  color: rgba(0,32,96,0.60) !important;
}
.ms-sb-footer a:hover { color: #002060 !important; }
.ms-sb-footer { border-top-color: rgba(0,32,96,0.12) !important; }

/* ── SEITEN-HINTERGRUND & CONTENT ────────────────────────────── */
.home-spacer { background: #EEF4FC !important; }

/* ── KATEGORIE-KACHELN ───────────────────────────────────────── */
.category-card {
  background:      #E0E9F6 !important;
  background-image: none   !important;
  box-shadow:      0 2px 8px rgba(0,32,96,0.10) !important;
  border:          1px solid rgba(0,32,96,0.12)  !important;
}
.category-card::before,
.category-card::after { display: none !important; }

/* Nummer (z.B. "01") */
.category-card .num,
.category-card span.num {
  color:           #002060 !important;
  background:      none    !important;
  border-radius:   0       !important;
  width:           auto    !important;
  height:          auto    !important;
  font-size:       13px    !important;
  font-weight:     700     !important;
  display:         inline  !important;
}
/* Kategorie-Name */
.category-card .name,
.category-card span.name {
  color:      #002060 !important;
  font-size:  15px    !important;
  font-weight: 600    !important;
}
/* Beschreibung */
.category-card .cat-desc {
  color: rgba(0,32,96,0.60) !important;
}
/* Icon-Box */
.category-card .cat-icon {
  background:    rgba(0,32,96,0.10) !important;
  border-radius: 12px !important;
}
/* Progress-Balken Cyan per Template */
.category-card .cat-progress-fill,
.cat-progress-fill {
  background: #00E6B3 !important;
}
.category-card .cat-progress-bar {
  background: rgba(0,32,96,0.10) !important;
}

/* ── ZULETZT ANGESEHEN (recently-chip) ───────────────────────── */
.recently-chip {
  background:      #E0E9F6 !important;
  background-image: none   !important;
  box-shadow:      0 2px 6px rgba(0,32,96,0.10) !important;
  border:          1px solid rgba(0,32,96,0.12)  !important;
  color:           #002060 !important;
}
.recently-chip:hover {
  background: #D3DEEC !important;
  transform: translateY(-2px);
}
.recently-chip .chip-name {
  color: #002060 !important;
  font-weight: 600 !important;
}
.recently-chip .chip-time {
  color: rgba(0,32,96,0.55) !important;
  font-size: 11px !important;
}

/* ── MEDIA-TYPE BUTTONS (Videos, Hörbücher…) ─────────────────── */
.media-type-btn, .type-btn {
  background:    #DEE9F7 !important;
  color:         #002060 !important;
  border:        1px solid rgba(0,32,96,0.15) !important;
  border-radius: 10px !important;
}
.media-type-btn.active, .type-btn.active {
  background: #002060 !important;
  color:      #fff    !important;
}

/* ── BUTTONS (allgemein) ─────────────────────────────────────── */
.btn-primary, .btn-save, .btn-main,
button.btn:not(.btn-ghost):not(.btn-danger) {
  background: #002060 !important;
  color:      #fff    !important;
  border:     none    !important;
}
.btn-primary:hover, .btn-save:hover {
  background: #003080 !important;
}

/* ── FOOTER / TAB-BAR ────────────────────────────────────────── */
.tab-bar, .ms-tab-bar, .bottom-nav {
  background:  #D7E4F4 !important;
  border-top:  3px solid rgba(0,32,96,0.12) !important;
}
.tab-btn, .tab-btn svg { color: rgba(0,32,96,0.55) !important; stroke: rgba(0,32,96,0.55) !important; }
.tab-btn.active, .tab-btn.active svg { color: #002060 !important; stroke: #002060 !important; }

/* ── COLLECTION MODAL ────────────────────────────────────────── */
.col-dialog, .collection-modal, .playlist-dialog {
  background: #DEE9F7 !important;
}
.col-check:checked, .collection-check:checked {
  background: #002060 !important;
  border-color: #002060 !important;
}

/* ── NOTIZ-PANEL ─────────────────────────────────────────────── */
.notiz-panel, .note-panel {
  background: #DEE9F7 !important;
  border:     1px solid rgba(0,32,96,0.15) !important;
}
.notiz-panel textarea:focus, .note-panel textarea:focus {
  border-color: #002060 !important;
  outline: none !important;
}

/* ── STAR / FAVORIT ──────────────────────────────────────────── */
.star-btn.active, .fav-btn.active { color: #F5A623 !important; }

/* ── LOGIN-SCREEN ────────────────────────────────────────────── */
.login-overlay, .login-screen, .auth-screen {
  background: #D7E4F4 !important;
}
.login-title { color: #002060 !important; }

/* ── MOBILE ANPASSUNGEN ──────────────────────────────────────── */
@media (max-width: 768px) {
  .nm-header { height: 70px !important; min-height: 70px !important; max-height: 70px !important; }
  .nm-title  { font-size: 20px !important; }
}
/* Footer ausblenden (Tab-Bar ist die Navigation) */
.nm-footer, #appFooter { display: none !important; }



/* ─── NM24 MISSING OVERRIDES ─── */

/* ══════════════════════════════════════════════════════════════════
   NM24 MEDIATHEK — Fehlende Overrides (Ergänzung zu NM24_MEDIATHEK_THEME)
   Eingefügt: 2026-05-08 — Status-Bar, Breadcrumb, Welcome, Heroes, Search
   ══════════════════════════════════════════════════════════════════ */

/* ── STATUS BAR (iOS-Leiste oben) ────────────────────────────────── */
.status-bar {
  background: #D7E4F4 !important;
  color:      #002060 !important;
}

/* ── BREADCRUMB BAR (Leiste unter dem Header) ────────────────────── */
.breadcrumb-bar {
  background: #D7E4F4 !important;
  color:      #002060 !important;
}
.breadcrumb-bar * { color: #002060 !important; }
.breadcrumb-bar a { color: rgba(0,32,96,0.70) !important; }

/* ── WELCOME SECTION (Begrüßungsbereich Startseite) ──────────────── */
.welcome {
  background:       #DEE9F7 !important;
  background-image: none    !important;
  color:            #002060 !important;
}
.welcome h2 { color: #002060 !important; }
.welcome p  { color: rgba(0,32,96,0.65) !important; opacity: 1 !important; }

/* ── Format-Chips: Desktop hellblauer Hintergrund → dunkle Icons ── */
@media (min-width: 769px) {
  .format-chip {
    color: #002060 !important;
    background: rgba(0,32,96,0.07) !important;
    border-color: rgba(0,32,96,0.15) !important;
  }
  .format-chip svg {
    color: #002060 !important;
    stroke: #002060 !important;
  }
  .format-chip .fmt-label { color: #002060 !important; }
}

/* ── CATEGORY HERO (dunkelblauer Kopfbereich Kategorieseite) ─────── */
.category-hero {
  background:       #D7E4F4 !important;
  background-image: none    !important;
  color:            #002060 !important;
}
.category-hero h2,
.category-hero h3  { color: #002060 !important; }
.category-hero p   { color: rgba(0,32,96,0.65) !important; opacity: 1 !important; }
.category-hero .num-badge {
  background: rgba(0,32,96,0.10) !important;
  color:      #002060 !important;
}
/* Back-Button / Pfeil im category-hero */
.category-hero button,
.category-hero .back-btn {
  background: rgba(0,32,96,0.10) !important;
  color:      #002060 !important;
}

/* ── QUESTION HERO (Kopfbereich Frage-Detailseite) ───────────────── */
.question-hero {
  background:       #D7E4F4 !important;
  background-image: none    !important;
  color:            #002060 !important;
}
.question-hero h2,
.question-hero h3  { color: #002060 !important; }
.question-hero .meta { color: rgba(0,32,96,0.65) !important; opacity: 1 !important; }
.question-hero button,
.question-hero .back-btn {
  background: rgba(0,32,96,0.10) !important;
  color:      #002060 !important;
}

/* ── VIEWER HERO (Kopfbereich Content-Viewer) ────────────────────── */
.viewer-hero {
  background:       #D7E4F4 !important;
  background-image: none    !important;
  color:            #002060 !important;
}
.viewer-hero h2,
.viewer-hero h3  { color: #002060 !important; }
.viewer-hero .type {
  background: rgba(0,32,96,0.10) !important;
  color:      #002060 !important;
}
.viewer-hero button,
.viewer-hero .back-btn {
  background: rgba(0,32,96,0.10) !important;
  color:      #002060 !important;
}

/* ── SEARCH HERO (Suchbereich Suchseite) ─────────────────────────── */
.search-hero {
  background:       #DEE9F7 !important;
  background-image: none    !important;
  color:            #002060 !important;
}
.search-main input {
  background:   rgba(0,32,96,0.06) !important;
  color:        #002060 !important;
  border:       1.5px solid rgba(0,32,96,0.20) !important;
  border-radius: 8px !important;
}
.search-main input::placeholder { color: rgba(0,32,96,0.45) !important; }
.search-main svg,
.search-main .search-icon {
  color:  rgba(0,32,96,0.55) !important;
  stroke: rgba(0,32,96,0.55) !important;
}

/* ── PLAYLIST-ICON (kleines Quadrat in Playlist-Chip) ────────────── */
.playlist-chip .pl-icon {
  background:       rgba(0,32,96,0.12) !important;
  background-image: none !important;
  border-radius:    10px !important;
}
.playlist-chip .pl-icon svg { color: #002060 !important; stroke: #002060 !important; }

/* ── SECTION-HEADER / SECTION TITLE BARS ─────────────────────────── */
.section-header {
  background: transparent !important;
  color:      #002060 !important;
}
.section-header * { color: #002060 !important; }

/* ── KATEGORIE HOVER (war dunkelblaues Gradient) ─────────────────── */
.category-card:hover {
  background:       #D3DEEC !important;
  background-image: none    !important;
}

/* ── SEARCH-RESULT: NM24 Farben Normal/Hover ─────────────────────────── */
.search-result {
  background:  #E0E9F6 !important;
  border-color: rgba(0,32,96,0.12) !important;
}
.search-result:hover, .search-result:active {
  background:  #D3DEEC !important;
  transform:   none    !important;
}
.search-result::before { background: #002060 !important; }

/* ── NOTE-CARD .note-head: NM24 Normal #E0E9F6 ──────────────────────── */
.note-head {
  background: #E0E9F6 !important;
  color:      #002060 !important;
}

/* ── PLAYLIST-CHIP HOVER ──────────────────────────────────────────── */
.playlist-chip:hover { border-color: #002060 !important; }
/* Footer ausblenden (Tab-Bar ist die Navigation) */
.nm-footer, #appFooter { display: none !important; }



/* ─── NM24 TEMPLATE HEAD FIX ─── */


/* ── Logo im Header ausblenden ── */
#nmHeaderLogo { display: none !important; }

/* ── Header: Positioning-Kontext ── */
.nm-header { position: relative !important; }

/* ── Brand: absolut links ── */
.nm-brand {
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: none !important;
}

/* ── Headtools: absolut rechts ── */
.nm-headtools {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Content-Area: füllt den Rest nach dem Sidebar-Spacer ── */
.nm-header-content-area {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 100% !important;
}

/* ── Content-Inner: Suchleiste mit Puffer zu Brand + Headtools ── */
.nm-header-content-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 130px !important;
  padding: 0 210px 0 250px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* ── Suchleiste: füllt den ganzen Content-Inner Bereich ── */
.nm-header-search {
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: #EEF2F8 !important;
  border: 1.5px solid rgba(0,32,96,0.20) !important;
}

/* ── Hamburger: nur Mobile ── */
@media (min-width: 769px) {
  .nm-hamburger { display: none !important; }
}

/* ── NM-FOOTER: Template-konform (nur Desktop) ── */
.nm-footer {
  height: 70px !important;
  background: #D9E4F2 !important;
  border-top: 6px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  padding-left: 0 !important;
}
.nm-footer-left {
  width: 380px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}
.nm-footer-left a {
  color: rgba(0,32,96,0.70) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color .15s !important;
}
.nm-footer-left a:hover { color: #002060 !important; }
.nm-footer-right {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}
.nm-footer-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
}
/* Footer auf Mobile ausblenden (Tab-Bar übernimmt) */
@media (max-width: 768px) {
  .nm-footer { display: none !important; }
}

/* ── Headtools: zwei Gruppen mit größerem Abstand ── */
.nm-headtools {
  gap: 14px !important;
}
.nm-headtools .nm-flags,
.nm-headtools > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── Schriftzug: Farben ── */
.nm-title {
  color: #002060 !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* ── SIDEBAR: Flex-Column damit Footer am Bottom klebt ── */
.ms-sidebar {
  display: flex !important;
  flex-direction: column !important;
}
.ms-sb-nav {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* ── Sidebar-Footer: am absoluten Bottom, kein Margin auto nötig ── */
.ms-sb-footer {
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(0,32,96,0.12) !important;
  padding: 14px 20px 90px !important;
  margin-top: 0 !important;
}

/* ── Sidebar-Einträge: mit Icon wie im Template ── */
.ms-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px !important;
}
.ms-nav-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.ms-nav-num {
  font-size: 13px !important;
  opacity: 1 !important;
  color: #002060 !important;
  min-width: 14px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.ms-nav-label {
  flex: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #002060 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── KATEGORIEN-Header in Sidebar ── */
.ms-sb-title {
  padding: 18px 20px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: rgba(0,32,96,0.45) !important;
}

/* ── Mittlere Fensterbreite: Flags ausblenden bevor sie ins Suchfeld rutschen ── */
@media (min-width: 769px) and (max-width: 1150px) {
  .nm-flags { display: none !important; }
}

/* ── Mobile Header ── */
@media (max-width: 768px) {
  /* Sidebar-Spacer auf Mobile ausblenden */
  .nm-header-sidebar-space { display: none !important; }
  .nm-flags { display: none !important; }
  .nm-header-content-inner {
    padding: 0 16px !important;
    height: 70px !important;
    max-width: none !important;
    justify-content: space-between !important;
  }
  .nm-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .nm-headtools {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  .nm-header-search { display: none !important; }
}

/* ── APP SWITCHER ── */
.app-switcher-popup {
  position: fixed !important;
  top: 134px !important;
  right: 16px !important;
  z-index: 9990 !important;
  background: #EBF3FD !important;
  border: 1px solid rgba(0,32,96,0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,32,96,0.16), 0 2px 8px rgba(0,32,96,0.10) !important;
  padding: 18px 20px 20px !important;
  min-width: 520px !important;
  max-width: 640px !important;
}
.app-switcher-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: rgba(0,32,96,0.45) !important;
  margin-bottom: 14px !important;
}
.app-switcher-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
}
.app-switcher-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 6px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 150ms !important;
  text-align: center !important;
}
.app-switcher-item.app-active:hover { background: rgba(0,32,96,0.08) !important; }
.app-switcher-item.app-current { background: rgba(0,32,96,0.08) !important; cursor: default !important; }
.app-switcher-item.app-soon { opacity: 0.40 !important; cursor: not-allowed !important; }
.app-switcher-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: #002060 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.app-switcher-name { font-size: 11px !important; font-weight: 500 !important; color: #002060 !important; white-space: nowrap !important; line-height: 1.2 !important; }
.app-switcher-badge { font-size: 9px !important; font-weight: 700 !important; color: #002060 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
.app-switcher-soon-badge { font-size: 9px !important; font-weight: 600 !important; color: rgba(0,32,96,0.50) !important; letter-spacing: 0.4px !important; }
@media (max-width: 768px) {
  .app-switcher-popup { min-width: 0 !important; width: calc(100vw - 24px) !important; right: 12px !important; left: 12px !important; }
  .app-switcher-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Footer ausblenden (Tab-Bar ist die Navigation) */
.nm-footer, #appFooter { display: none !important; }


/* ── TAB-BAR Icons zentriert ── */
.tab-bar{justify-content:center !important;align-items:flex-end !important;}
#nm-legal-bar{position:fixed !important;bottom:0 !important;left:0 !important;width:380px !important;height:81px !important;display:flex !important;align-items:flex-end !important;padding:0 0 8px 24px !important;gap:10px !important;z-index:91 !important;background:var(--nm-sidebar-bg,#D7E4F4) !important;box-sizing:border-box !important;}
#nm-legal-bar a{font-size:11px !important;color:#002060 !important;text-decoration:none !important;white-space:nowrap !important;}
#nm-legal-bar a:hover{text-decoration:underline !important;}
@media(max-width:768px){#nm-legal-bar{display:none !important;}}

/* FORMAT-CHIPS: keine Buttons */
.format-chip,.formats-bar .format-chip{background:#DEE9F7 !important;border:none !important;box-shadow:none !important;cursor:default !important;pointer-events:none !important;color:#002060 !important;}
.format-chip:hover,.formats-bar .format-chip:hover{background:#DEE9F7 !important;border:none !important;transform:none !important;}
.formats-bar{border-top:none !important;border-bottom:none !important;}

/* COLLECTIONS */
.playlist-chip{background:#E0E9F6 !important;border:1px solid rgba(0,32,96,0.12) !important;box-shadow:0 2px 8px rgba(0,32,96,0.10) !important;}
.playlist-chip:hover,.playlist-chip:focus,.playlist-chip:active{background:#D3DEEC !important;border-color:rgba(0,32,96,0.20) !important;outline:none !important;box-shadow:0 4px 14px rgba(0,32,96,0.15) !important;}
.pl-rename.has-note{color:#E91E63 !important;}
.pl-rename svg{stroke-width:2.5 !important;width:18px !important;height:18px !important;}
.pl-delete{color:rgba(0,32,96,0.35) !important;}
.pl-delete:hover{color:#00E6B3 !important;background:rgba(0,230,179,0.12) !important;}
#collNoteModal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,20,70,0.30);align-items:center;justify-content:center;backdrop-filter:blur(2px);}
#collNoteModal.open{display:flex !important;}
#collNoteBox{background:#DEE9F7;border-radius:16px;padding:0;width:min(90vw,420px);box-shadow:0 8px 40px rgba(0,32,96,0.22);overflow:hidden;}
#collNoteHeader{background:#002060;color:#fff;padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;}
#collNoteHeader svg{flex-shrink:0;opacity:0.85;}
#collNoteTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#collNoteBody{padding:16px 20px 20px;}
#collNoteSaving{font-size:11px;color:rgba(0,32,96,0.55);min-height:16px;margin-bottom:6px;}
#collNoteArea{width:100%;min-height:120px;padding:12px 14px;border:none;border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box;color:#002060;line-height:1.6;background:#C8D8EF;}
#collNoteArea:focus{background:#BED0E8 !important;}
#collNoteActions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;}
.coll-note-btn{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:opacity 0.15s;}
.coll-note-close{background:rgba(0,32,96,0.12);color:#002060;}
.coll-note-close:hover{background:rgba(0,32,96,0.20);}
.recently-chip{padding:14px 16px !important;gap:14px !important;min-width:0 !important;overflow:hidden !important;}
.r-chip-icon{width:65px;height:65px;flex-shrink:0;border-radius:10px;overflow:hidden;background:rgba(0,32,96,0.08);}
.r-chip-icon img{width:52px;height:52px;object-fit:cover;display:block;}
.recently-chip .chip-text{display:flex !important;flex-direction:column !important;gap:3px !important;min-width:0 !important;flex:1 !important;}
.recently-chip .chip-name{font-size:13px !important;font-weight:700 !important;color:#002060 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.recently-chip .chip-sub{font-size:12px !important;color:rgba(0,32,96,0.70) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
/* ── HEADER: RUNDE FLAGGEN + HOVER-LIFT ── */
.nm-flags .flag-btn{background:none !important;border:2.5px solid transparent !important;padding:1px !important;width:34px !important;height:34px !important;font-size:0 !important;line-height:0 !important;transition:transform 0.18s ease,box-shadow 0.18s ease !important;}
.nm-flags .flag-btn.active{border-color:rgba(255,255,255,0.80) !important;background:none !important;box-shadow:0 0 0 2px rgba(0,32,96,0.35) !important;}
.nm-flags .flag-btn:hover,.nm-flags .flag-btn:focus{background:none !important;color:inherit !important;transform:translateY(-3px) !important;box-shadow:0 6px 14px rgba(0,10,40,0.40) !important;}
.nm-iconbtn{transition:transform 0.18s ease,box-shadow 0.18s ease !important;}
.nm-iconbtn:hover{background:#002060 !important;transform:translateY(-3px) !important;box-shadow:0 6px 14px rgba(0,10,40,0.40) !important;}
.pl-name{color:#002060 !important;font-weight:600 !important;}
.pl-count{color:rgba(0,32,96,0.55) !important;}
.pl-icon{background:rgba(0,32,96,0.10) !important;border-radius:12px !important;}
.playlists-header h3{color:#002060 !important;font-weight:600 !important;}
.note-btn.has-note{color:#E91E63 !important;}
#notesToggle.has-note,.notes-toggle.has-note{color:#00E6B3 !important;}
.notes-indicator{background:#00E6B3 !important;}

/* RECENTLY-VIEWED CHIP-ICON: wie cat-icon */
.recently-chip .chip-icon{background:rgba(0,32,96,0.10) !important;border-radius:12px !important;}

/* RECENTLY-CHIP: Icon 64px wie Kategorie-Icons */
.recently-chip .chip-icon{width:64px !important;height:64px !important;flex-shrink:0 !important;}
.recently-chip .chip-icon img{width:64px !important;height:64px !important;border-radius:12px !important;object-fit:cover !important;}

.nm-footer{margin-left:380px;}
.r-chip-icon{width:66px!important;height:66px!important;border-radius:12px;object-fit:contain;}

.welcome{border-radius:16px !important;}

/* NOTE-CARD AKKORDEON — Farben nach Zustand */
.note-card {
  border-radius:    12px;
  margin-bottom:    10px;
  border:           1px solid rgba(0,32,96,0.15);
  box-shadow:       0 1px 4px rgba(0,32,96,0.08);
  overflow:         hidden;
}
.note-head {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 16px;
  cursor:      pointer;
  background:  var(--nm-card-bg);
  color:       var(--nm-blue);
  transition:  background 2s ease-in-out, color 2s ease-in-out;
}
.note-head-text {
  font-weight: 600;
  font-size:   14px;
  flex:        1;
  min-width:   0;
}
.note-chev {
  flex-shrink: 0;
  transition:  transform 2s ease-in-out;
}
/* Geöffnet: Kopfzeile dunkelblau + weiß */
.note-card.open .note-head {
  background: #002060;
  color:      #fff;
}
.note-card.open .note-chev {
  transform: rotate(180deg);
}
/* Inhalt */
.note-body {
  display:    block  !important;
  max-height: 0      !important;
  overflow:   hidden !important;
  transition: max-height 2s ease-in-out !important;
}

.note-body-inner {
  background:  #E0E9F6;
  color:       #002060;
  font-size:   14px;
  line-height: 1.6;
  white-space: pre-wrap;
  padding:     14px 16px;
  cursor:      pointer;
}

/* SOFT-ÖFFNUNGS-EFFEKT: 1.5s ease-in-out
   max-height 4500px → bei ~3000px Inhalt ca. 1s sichtbare Animation (3000/4500*1.5=1.0s)
   Nichts wird abgeschnitten, Softeffekt bleibt erhalten */
.topic-body {
  transition: max-height 1.5s ease-in-out !important;
}
.topic-accordion.open .topic-body {
  max-height: 4500px !important;
}
.note-body {
  display:    block  !important;
  max-height: 0      !important;
  overflow:   hidden !important;
  transition: max-height 0.5s ease-in-out !important;
}
.note-card.open .note-body {
  max-height: 4500px !important;
}
.note-chev {
  transition: transform 0.5s ease-in-out !important;
}

/* SEITEN-KARTEN: Hero vollrund (16px), 1200px, 61px Abstand zum Header */
/* margin-top 23px + breadcrumb-bar 38px = 61px visueller Abstand vom Header */
.category-hero,
.question-hero,
.viewer-hero,
.playlist-detail-header {
  border-radius: 16px  !important;
  max-width:     1200px !important;
  margin-top:    23px  !important;
  margin-left:   auto  !important;
  margin-right:  auto  !important;
  margin-bottom: 0     !important;
  border:        1px solid rgba(0,32,96,0.12) !important;
  box-shadow:    0 2px 8px rgba(0,32,96,0.10) !important;
}
/* FAVORITES LIST: 1200px zentriert */
.favorites-list {
  max-width:   1200px !important;
  margin-left: auto   !important;
  margin-right: auto  !important;
}
/* NOTIZEN: 61px Abstand zwischen Hero und Inhalt */
#notesList {
  padding-top: 61px !important;
}
/* ALLE CATEGORY-HEROES: Padding-Fix — verhindert calc()-Bug bei breiten Screens */
/* max-width:1200px + margin:auto kommen vom allgemeinen .category-hero-Rule → 1200px zentriert */
.category-hero {
  padding: 36px 32px !important;
}
/* INFO-BANNER: dunkelblau + weiße Schrift */
.info-banner {
  background:   #002060 !important;
  color:        #fff    !important;
  max-width:    1200px  !important;
  margin:       30px auto 0 !important;
  border-left:  1px solid rgba(0,32,96,0.20) !important;
  border-right: 1px solid rgba(0,32,96,0.20) !important;
  border-radius: 12px   !important;
}
.info-banner, .info-banner * { color: #fff !important; }
.info-banner svg { stroke: #fff !important; }
/* QUESTIONS-HELP-TEXT: ausgeblendet (Tutorial-Hinweis nicht benötigt) */
.questions-help-text { display: none !important; }
/* TRENNLINIE: hauchdünne Linie zwischen Hero und Content-Blöcken */
.questions-list, #topicBlock, .favorites-list {
  border-top: 1px solid rgba(0,32,96,0.08) !important;
}
/* ABSTÄNDE: 48px zwischen Info-Banner und Alle-öffnen-Leiste + Akkordeons */
#questionsList {
  margin-top: 48px !important;
}
/* QUESTION-CARDS: NM24 Farben Normal/Hover */
.question-card {
  background: #E0E9F6 !important;
  border-color: rgba(0,32,96,0.12) !important;
}
.question-card:hover:not(.disabled) {
  background: #D3DEEC !important;
  filter: none !important;
}
/* PLAYLIST-DETAIL-HEADER: Hero-Styling wie category-hero */
.playlist-detail-header {
  background:  #D7E4F4 !important;
  color:       #002060 !important;
  padding:     36px 32px !important;
  display:     block !important;
}
.playlist-detail-header h2,
.playlist-detail-header h3 {
  color:        #002060 !important;
  font-size:    24px !important;
  font-weight:  700 !important;
  letter-spacing: -0.3px !important;
  margin:       8px 0 0 !important;
  line-height:  1.3 !important;
}
.playlist-detail-header p {
  color:     rgba(0,32,96,0.65) !important;
  opacity:   1 !important;
  font-size: 14px !important;
  margin-top: 6px !important;
}
.playlist-detail-header .num-badge {
  display:        inline-block !important;
  background:     rgba(0,32,96,0.10) !important;
  color:          #002060 !important;
  padding:        4px 10px !important;
  border-radius:  6px !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: 0.5px !important;
  margin-bottom:  8px !important;
}
/* PLAYLIST-DETAIL-LIST: 1200px zentriert, 16px Abstand zum Hero */
#playlistDetailList {
  max-width:      1200px !important;
  margin-left:    auto   !important;
  margin-right:   auto   !important;
  margin-top:     16px   !important;
  display:        flex   !important;
  flex-direction: column !important;
}
/* PLAYLIST X-Button: Mintfarbe, kein Hintergrund, keine Border */
#playlistDetailList .pl-delete {
  color:      #00E6B3 !important;
  background: none    !important;
  border:     none    !important;
  padding:    4px     !important;
}
#playlistDetailList .pl-delete:hover {
  color:      #00c999 !important;
  background: none    !important;
}
/* STUDIO-RECS: Hover dunkelblau, Schrift weiß */
.studio-rec-card {
  transition: background 0.15s, border-color 0.15s !important;
}
.studio-rec-card:hover {
  background:    #002060 !important;
  border-color:  #002060 !important;
}
.studio-rec-card:hover .studio-rec-badge {
  background: rgba(255,255,255,0.20) !important;
  color:      #fff !important;
}
.studio-rec-card:hover .studio-rec-text {
  color: #fff !important;
}
/* INTER: einzige Schriftart */
body, input, button, textarea, select {
  font-family: 'Inter', sans-serif !important;
}
/* Akkordeon Studio-Recs Karten: Hintergrund #D7E4F4 via CSS erzwingen
   CSS !important schlägt inline-style — wirkt auch bei getriebenem SW-Cache */
.topic-body a[style*="padding:10px 14px"] { background-color: #D7E4F4 !important; }
.topic-body a[style*="padding:10px 14px"]:hover { background-color: #C8D5E8 !important; }
/* KEIN MAGENTA: collect-btn, note-btn, star-btn → Mint #00E6B3 */
.topic-head-right .collect-btn.in-collection,
.topic-head-right .collect-btn:hover,
.topic-accordion.open .topic-head .collect-btn.in-collection { color: #E91E63 !important; }
.topic-head-right .note-btn.has-note,
.topic-head-right .note-btn:hover,
.topic-accordion.open .topic-head .note-btn.has-note { color: #E91E63 !important; }
.topic-head-right .star-btn.favorited,
.topic-accordion.open .topic-head .star-btn.favorited { color: #ffd700 !important; }
.question-card .star-btn.favorited { color: #ffd700 !important; }
.question-card .star-btn.in-collection { color: #E91E63 !important; }
.question-card .star-btn:hover { color: #00E6B3 !important; }
/* TOPIC-OPEN-BTN: kein blauer Verlauf — flaches NM24-Dunkelblau */
.topic-open-btn {
  background: #002060 !important;
  background-image: none !important;
  box-shadow: 0 2px 8px rgba(0,32,96,0.20) !important;
}
.topic-open-btn:hover:not(:disabled) {
  background: #001640 !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(0,32,96,0.30) !important;
}
/* FORMAT-CHIPS: NM24 #E0E9F6 / #002060 Text / hover #D3DEEC */
.format-chip {
  background: #E0E9F6 !important;
  background-image: none !important;
  border-color: rgba(0,32,96,0.12) !important;
  color: #002060 !important;
}
.format-chip svg { color: #002060 !important; opacity: 1 !important; }
.format-chip:hover {
  background: #D3DEEC !important;
  background-image: none !important;
  border-color: rgba(0,32,96,0.20) !important;
  color: #002060 !important;
  transform: none !important;
}
.format-chip.chip-all {
  background: #002060 !important;
  background-image: none !important;
  border-color: #002060 !important;
  color: #fff !important;
}
.format-chip.chip-all svg { color: #fff !important; }
.format-chip.chip-all:hover {
  background: #001640 !important;
  border-color: #001640 !important;
}
/* STATS-BAR: weiße Zahlen → #002060 (jetzt auf hellem Hintergrund) */
.stat-num { color: #002060 !important; }
.stat-label { color: rgba(0,32,96,0.65) !important; }
.stats-bar { border-top-color: rgba(0,32,96,0.12) !important; }
/* ── TRANSFER STUDIO: NM24-Farben ────────────────────────────────────────── */
/* MODULE-CARD: weiß → #E0E9F6, Avatar kein Rot mehr */
.module-card {
  background: #E0E9F6 !important;
  border-color: rgba(0,32,96,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,32,96,0.08) !important;
}
.module-card:hover { background: #D3DEEC !important; }
.module-card .title { color: #002060 !important; }
.module-card .subtitle { color: rgba(0,32,96,0.65) !important; }
.module-card.a .avatar,
.module-card.b .avatar {
  background: #002060 !important;
  background-image: none !important;
}
/* MODULE-TOGGLE: grau → NM24 */
.module-toggle {
  background: #EEF4FC !important;
}
.module-toggle-btn {
  background: #D7E4F4 !important;
  color: #002060 !important;
}
.module-toggle-btn .dot {
  background: rgba(0,32,96,0.25) !important;
}
.module-toggle-btn.active[data-mod="A"],
.module-toggle-btn.active[data-mod="B"] {
  background: #002060 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0,32,96,0.25) !important;
}
.module-toggle-btn.active[data-mod="A"] .dot,
.module-toggle-btn.active[data-mod="B"] .dot { background: rgba(255,255,255,0.25) !important; }
.module-toggle-btn:hover:not(.active) { background: #C8D5E8 !important; }
/* BULK-BUTTONS: kein Gradient, kein Rot */
.bulk-btn.bulk-module,
.bulk-btn.bulk-question {
  background: #002060 !important;
  background-image: none !important;
  box-shadow: 0 2px 8px rgba(0,32,96,0.20) !important;
}
.bulk-btn.bulk-module:hover,
.bulk-btn.bulk-question:hover {
  background: #001640 !important;
}
/* FLAT-EX-CARD: weiß → #E0E9F6 */
.flat-ex-card {
  background: #E0E9F6 !important;
  border-color: rgba(0,32,96,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,32,96,0.08) !important;
}
.flat-ex-card.open { background: #D7E4F4 !important; }
.flat-ex-head .name { color: #002060 !important; }
.flat-ex-info { color: #002060 !important; }
.flat-ex-info em { color: rgba(0,32,96,0.65) !important; }
.flat-ex-chevron { color: rgba(0,32,96,0.55) !important; }
.flat-ex-head .num {
  background: #002060 !important;
  background-image: none !important;
}
/* VIDEO-PLACEHOLDER: kein Rot mehr im Gradient */
.video-placeholder {
  background-image: linear-gradient(135deg, #001640 0%, #002060 100%) !important;
}
/* ── CATEGORY-HERO + QUESTION-HERO: hell statt dunkelblau ───────────────── */
.category-hero,
.question-hero {
  background: #D7E4F4 !important;
  background-image: none !important;
  color: #002060 !important;
}
.category-hero h2, .category-hero h3, .category-hero p,
.question-hero h2, .question-hero .meta {
  color: #002060 !important;
  opacity: 1 !important;
}
.category-hero .num-badge,
.question-hero .num-badge {
  background: rgba(0,32,96,0.10) !important;
  color: #002060 !important;
}
/* WELCOME-SECTION: NM24 hellblau — sichtbar gegen Seitenhintergrund #EEF4FC */
.welcome {
  background: #DEE9F7 !important;
  background-image: none !important;
  color: #002060 !important;
  border-radius: 16px !important;
}
.welcome h2, .welcome p { color: #002060 !important; opacity: 1 !important; }
/* RECENTLY-CHIP: kein Gradient mehr */
.recently-chip {
  background: #E0E9F6 !important;
  background-image: none !important;
  color: #002060 !important;
}
.recently-chip .chip-name, .recently-chip .chip-sub,
.recently-chip .chip-time { color: #002060 !important; }
/* SIDEBAR NUMMERN: gleiche Größe wie Labels (14px) */
.ms-nav-num { font-size: 14px !important; }
/* CHAT-PANEL: heller Hintergrund für Nachrichten-Bereich */
#chatbotPanel { background: #EEF4FC !important; }
#chatbotPanel > div:first-child {
  background: #002060 !important;
  color: #fff !important;
  border-radius: 16px 16px 0 0 !important;
}
#chatMessages { background: #EEF4FC !important; }

/* ══════════════════════════════════════════════════════════════════
   MEDIATHEK FIX-BATCH 2026-05-09
   (1) rec-cat-label: Mint → dunkelblau
   (2) Notes-Accordion: max-height-Animation + NM24-Styling
   (3) #topicBlock: Kartenhintergrund im Fragedetail-Screen
   (4) #studioRecs: max-width 900px zentriert
   (5) Recommendations-H3: dunkelblau
   (6) Collection/Topic-Hero Spacing sichergestellt
   ══════════════════════════════════════════════════════════════════ */

/* REC-CAT-LABEL: MINT → dunkelblau (z.B. "FÜHRUNG", "ZUSAMMENARBEIT") */
.rec-cat-label {
  color: rgba(0,32,96,0.65) !important;
}

/* RECOMMENDATIONS "Das könnte dich auch interessieren" — Titel dunkelblau */
.recommendations-section h3 {
  color: #002060 !important;
  font-weight: 700 !important;
}

/* TOPIC-DETAIL SCREEN (#topicBlock): heller Karten-Hintergrund */
#topicBlock {
  background: #E0E9F6 !important;
  border-radius: 0 0 12px 12px !important;
  padding-bottom: 16px !important;
}

/* STUDIO-RECS: nicht voll breit — max 900px zentriert */
#studioRecs {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* NOTES-SECTION: NM24-Akkordeon-Effekt mit max-height-Transition */
.notes-toggle {
  background:   #E0E9F6 !important;
  border:       1px solid rgba(0,32,96,0.20) !important;
  color:        #002060 !important;
}
.notes-toggle:hover {
  background:   #D3DEEC !important;
  border-color: rgba(0,32,96,0.30) !important;
}
.notes-toggle.open {
  border-radius: 8px 8px 0 0 !important;
  border-bottom-color: transparent !important;
}
/* max-height Transition statt display:none/block */
.notes-body {
  display:    block !important;
  max-height: 0 !important;
  overflow:   hidden !important;
  transition: max-height 0.45s ease-in-out !important;
  background: #E0E9F6 !important;
  border:     1px solid rgba(0,32,96,0.20) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  margin-top: 0 !important;
}
.notes-body.open {
  max-height: 600px !important;
}
.notes-textarea {
  background:   #ffffff !important;
  border:       1.5px solid rgba(0,32,96,0.18) !important;
  border-radius: 8px !important;
  color:        #002060 !important;
  font-size:    14px !important;
  line-height:  1.55 !important;
  padding:      12px !important;
  margin:       12px !important;
  width:        calc(100% - 24px) !important;
  box-sizing:   border-box !important;
  resize:       vertical !important;
  min-height:   120px !important;
}
.notes-textarea:focus {
  border-color: rgba(0,32,96,0.40) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,32,96,0.10) !important;
}
.notes-status {
  font-size: 11px !important;
  color: rgba(0,32,96,0.50) !important;
  padding: 0 12px 10px !important;
  text-align: right !important;
}

/* PLAYLIST-DETAIL-HEADER: Sicherstellung 61px Abstand zum Header
   (38px Breadcrumb-Bar + 23px margin-top aus hero-Regel) */
.playlist-detail-header {
  margin-top: 23px !important;
}

/* TOPIC-HERO im Question-Screen: gleiche Abstands-Sicherung */
.question-hero {
  margin-top: 23px !important;
}