#dashboard-widgets .mymusikblog-dashboard-container h3 {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
#dashboard-widgets .mymusikblog-dashboard-container .published_posts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dashboard-widgets .mymusikblog-dashboard-container .published_posts li span:last-of-type {
  font-weight: bold;
}
#dashboard-widgets .category {
  margin-bottom: 1rem;
}
#dashboard-widgets .category h4 {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#dashboard-widgets .category h4 .read-more {
  cursor: pointer;
  font-weight: 300;
}
#dashboard-widgets .category.limited .item:nth-child(n+10) {
  display: none;
}
#dashboard-widgets .category .item .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#dashboard-widgets .category .item .title .count {
  font-weight: bold;
  margin-right: 0.5rem;
}
#dashboard-widgets .category .item .title .toggle {
  margin-left: auto;
  cursor: pointer;
}
#dashboard-widgets .category .item ul {
  margin-left: 1rem;
  margin-top: 5px;
  font-size: 10px;
  display: none;
}
#dashboard-widgets .category .item ul li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 3px 2px;
}
#dashboard-widgets .category .item ul li:nth-of-type(even) {
  background: #ebebeb;
}
#dashboard-widgets .category .item ul li .name {
  width: 25%;
}
#dashboard-widgets .category .item ul li .city {
  width: 15%;
}
#dashboard-widgets .category .item ul li .time {
  width: 25%;
}
#dashboard-widgets .category .item ul li .email {
  width: 35%;
}

/* ====================================================================
 * v1.03.3 — Heart-Button im User-Chart auf der „Mein MusikBlog"-Seite
 *
 * Verhalten ist nun parallel zum Bookmark-Button aus dem Plugin
 * „musikblog-tourdates": Klick wechselt den Button-Zustand, die
 * Chart-Zeile bleibt stehen. Steuerung läuft über das `data-action`-
 * Attribut, das das JS bei jedem Klick zwischen `remove_favorite`
 * (aktiv) und `add_favorite` (inaktiv) hin- und herschaltet.
 *
 *   data-action="remove_favorite"  → AKTIV   (orange, gefülltes Herz ♥)
 *   data-action="add_favorite"     → INAKTIV (weiß, Outline-Herz ♡)
 *
 * Theme-Markup bleibt unangetastet:
 *   <p class="favorite remove-favorite remove-only" data-action="…">
 *     <i class="icon-remove">&times;</i>
 *   </p>
 *
 * Die `<i class="icon-remove">`-Box wird in beiden Zuständen verborgen,
 * das Herz kommt per `::before` auf das `<p>`.
 * ==================================================================== */

/* --- Gemeinsame Basis: Layout + Größe identisch zu .mb-bookmark
       aus musikblog-tourdates (padding-basiert, kein festes width/height).
       Damit ergibt sich derselbe ~27×39 px Footprint wie bei den
       Termin-Buttons oberhalb der Charts. --- */
.charts__list .favorite.remove-favorite.remove-only,
.charts__item > .favorite.remove-favorite.remove-only {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-self: center !important;

    /* Wichtig: explizit alle Maß-Constraints zurücksetzen, damit das
       Elementor-/Theme-Default-`<p>` (full-width) nicht zurückkommt. */
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    border-radius: 0 !important;

    cursor: pointer !important;
    font-size: 1.05em !important;
    line-height: 1 !important;
    text-align: center !important;
    transition: background 120ms ease-in-out, color 120ms ease-in-out,
                border-color 120ms ease-in-out, opacity 120ms ease-in-out !important;
}

/* &times; aus dem Theme-Markup vollständig ausblenden. */
.charts__list .favorite.remove-favorite.remove-only > .icon-remove,
.charts__list .favorite.remove-favorite.remove-only .icon-remove {
    display: none !important;
}

/* --- Herz-Glyph: erbt die font-size 1.05em vom Parent — gleiches
       Glyph-Maß wie in .mb-bookmark__icon (Tourdates). --- */
.charts__list .favorite.remove-favorite.remove-only::before {
    display: inline-block !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- AKTIV-Zustand: orange Hintergrund, weißes gefülltes Herz ♥ --- */
.charts__list .favorite.remove-favorite.remove-only[data-action="remove_favorite"] {
    background: var(--e-global-color-secondary, #E36A34) !important;
    color: #ffffff !important;
    border: 1px solid var(--e-global-color-secondary, #E36A34) !important;
}
.charts__list .favorite.remove-favorite.remove-only[data-action="remove_favorite"]::before {
    content: "\2665" !important;
    color: #ffffff !important;
}

/* --- INAKTIV-Zustand: weißer Hintergrund, graue Border, oranges Outline-Herz ♡ --- */
.charts__list .favorite.remove-favorite.remove-only[data-action="add_favorite"] {
    background: #ffffff !important;
    color: var(--e-global-color-secondary, #E36A34) !important;
    border: 1px solid #d0d0d0 !important;
}
.charts__list .favorite.remove-favorite.remove-only[data-action="add_favorite"]::before {
    content: "\2661" !important;
    color: var(--e-global-color-secondary, #E36A34) !important;
}

/* --- Hover/Focus in beiden Zuständen: leichte Opazitätsabsenkung,
       kein transform → kein Layout-Shift in der Flex-Zeile. --- */
.charts__list .favorite.remove-favorite.remove-only:hover,
.charts__list .favorite.remove-favorite.remove-only:focus,
.charts__list .favorite.remove-favorite.remove-only:focus-visible {
    opacity: 0.85 !important;
    outline: none !important;
}

/* --------------------------------------------------------------------
 * Drag & Drop der Chart-Einträge — SortableJS (seit 1.05).
 *
 *   .mb-sortable-ghost  → Platzhalter/Drop-Zone (wo der Eintrag landet)
 *   .mb-sortable-chosen → der angefasste Eintrag (Original-Position)
 *   .mb-sortable-drag   → das mitziehende Klon-Element unter dem Finger
 *
 * Ziel: dezent, theme-konform, klare visuelle Rückmeldung auf Touch.
 * -------------------------------------------------------------------- */

/* Drop-Zone: dezent gepunktete Box statt sichtbarem Inhalt. */
#user-charts .mb-sortable-ghost,
.charts__list .mb-sortable-ghost {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px dashed rgba(0, 0, 0, 0.18) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
/* Inhalt der Drop-Zone ausblenden, damit nur die gepunktete Fläche bleibt. */
#user-charts .mb-sortable-ghost > *,
.charts__list .mb-sortable-ghost > * {
    visibility: hidden !important;
}

/* Angefasster Eintrag an Original-Position leicht ausgrauen. */
#user-charts .mb-sortable-chosen,
.charts__list .mb-sortable-chosen {
    opacity: 0.6 !important;
}

/* Mitziehendes Klon-Element: leicht angehoben mit Schatten — klares
   „ich hänge gerade am Finger"-Feedback auf Touch. */
#user-charts .mb-sortable-drag,
.charts__list .mb-sortable-drag {
    opacity: 0.95 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
    background: #ffffff !important;
}

/* Während des Ziehens Text-Markierung unterbinden (Touch + Desktop). */
#user-charts.sortable-dragging,
#user-charts .sortable-dragging {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* --------------------------------------------------------------------
 * Desktop-Affordance für D&D (1.10): auf Geräten mit echter Maus zeigen,
 * DASS die Zeile ziehbar ist — bevor man klickt (Discoverability).
 *   - cursor: grab über dem Ziehbereich (Index + Text), → grabbing beim
 *     Ziehen. Über Thumbnail/Herz bleibt es pointer (klickbar, nicht
 *     ziehbar).
 *   - dezenter Hover-Tint auf der Zeile = „interaktiv".
 * Nur unter @media (hover: hover), damit Touch (kein echter Hover) nicht
 * von Sticky-Hover-Effekten betroffen ist. Reine Paint-Eigenschaften
 * (cursor/background) — KEIN display/position/flex-Eingriff.
 * -------------------------------------------------------------------- */
@media (hover: hover) {
    .charts__list .charts__item {
        cursor: grab;
    }
    /* Thumbnail-Link + Herz sind klickbar, nicht ziehbar. */
    .charts__list .mb-thumb-link,
    .charts__list .favorite.remove-favorite.remove-only {
        cursor: pointer !important;
    }
    /* Zeile bei Hover dezent tönen + leicht „anheben" (Schatten) —
       Signal „interaktiv/greifbar" (Material/Apple-HIG-Hover-Hint). */
    .charts__list .charts__item:hover {
        background: rgba(0, 0, 0, 0.035);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    }
}

/* Beim aktiven Ziehen „grabbing"-Cursor (Original + Klon). */
.charts__list .mb-sortable-chosen,
.charts__list .mb-sortable-drag,
.charts__list .mb-sortable-chosen * {
    cursor: grabbing !important;
}

/* ====================================================================
 * v1.07.3 — Überdeckung Text/Herz behoben (am gerenderten DOM verifiziert).
 *
 * Befund (DevTools, live gemessen): Die Chart-Zeile wird von Elementor
 * gelayoutet — `.charts__item` ist `inline-flex; position:relative`, der
 * Button ist `position:absolute` am rechten Rand (~40px breit). Die
 * Text-Spalte `.meta` füllt die volle Zeilenbreite und lief damit ~45px
 * UNTER den absolut positionierten Button → Titel verdeckt.
 *
 * Fix (KEIN Eingriff in display/position/flex → D&D + Button-Zentrierung
 * bleiben unangetastet): Der Text-Cluster `.charts__meta` reserviert per
 * `padding-right` + `box-sizing:border-box` rechts Platz für die Button-
 * Zone. Verifiziert: Text-Rand stoppt dann ~15px vor dem Button.
 *
 * Gilt an ALLEN Breiten — die Überlappung ist strukturell (auch auf
 * Desktop messbar), nicht mobil-spezifisch.
 * ==================================================================== */

/* Button-Dead-Zone rechts reservieren (60px = ~40px Button + Rand/Gap). */
.charts__list .charts__meta {
    padding-right: 60px !important;
    box-sizing: border-box !important;
}

/* Titel-Link für D&D neutralisieren: der Titel ist ein <a>; auf iOS löst
   der Long-Press (= Drag-Start) sonst die Link-Vorschau aus. pointer-events
   :none nimmt dem Link Klick/Preview/Selektion — der Text bleibt sichtbar,
   die Touch-Geste geht an die Chart-Zeile (SortableJS). Theme-Markup bleibt
   unverändert. -webkit-touch-callout/user-select unterbinden zusätzlich
   die iOS-Callout-Box und Textmarkierung während des Ziehens. */
.charts__list .charts__album {
    pointer-events: none !important;
}
.charts__list .charts__item,
.charts__list .charts__item .meta {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Titel + Artist brechen um, jeweils max. 2 Zeilen mit „…". */
.charts__list .charts__album h4 {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.charts__list .charts__artist {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ====================================================================
 * Thumbnail-Link (1.08): Beitragsbild verlinkt auf den Artikel (öffnet
 * in neuem Tab). Per JS umschlossen mit <a class="mb-thumb-link">.
 *
 * Hover/Active/Focus nach WCAG 2.4.7 + Material/Apple-HIG-Empfehlung:
 *   - Hover:  ~+8 % Helligkeit + dezenter Scale/Shadow (Affordance)
 *   - Active: ~-17 % Helligkeit + Press-Scale → DEUTLICH stärker als
 *             Hover (klares „Klick registriert"-Feedback)
 *   - Focus:  sichtbarer Fokusring für Tastatur-Bedienung
 * ==================================================================== */
.charts__list .mb-thumb-link {
    display: inline-block !important;
    /* In der (Elementor-)Flex-Zeile NICHT schrumpfen: bei langem 2-zeiligem
       Titel zog der Wrapper sonst zusammen und stauchte das Bild. */
    flex: 0 0 auto !important;
    line-height: 0 !important;        /* kein Inline-Gap unter dem Bild */
    cursor: pointer !important;
    pointer-events: auto !important;  /* unabhängig vom neutralisierten Titel-Link */
    border-radius: 2px;
    overflow: hidden;
    -webkit-touch-callout: none;
    transition: filter 130ms ease-in-out, transform 130ms ease-in-out,
                box-shadow 130ms ease-in-out;
}
/* Thumbnail fix auf 70×70 (= Elementors max-width:70px), quadratisch
   beschnitten statt verzerrt. Verhindert die Stauchung (Flex-Druck) und
   den height:auto-Quirk (Bild ohne explizite width). */
.charts__list .mb-thumb-link img {
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
}
.charts__list .mb-thumb-link:hover {
    filter: brightness(1.08);
    transform: scale(1.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.charts__list .mb-thumb-link:active {
    filter: brightness(0.83);
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.charts__list .mb-thumb-link:focus-visible {
    outline: 2px solid var(--e-global-color-secondary, #E36A34);
    outline-offset: 2px;
}

/* Mobile: Schrift etwas kleiner für mehr Platz pro Zeile. */
@media (max-width: 600px) {
    .charts__list .charts__album h4 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }
    .charts__list .charts__artist {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
    }
}

/*# sourceMappingURL=style.css.map */