/*
 * EasySocial Wireframe Theme → YOOtheme Pro Override
 * musicalradio.de Design-Integration
 *
 * Basis: Wireframe-Theme (nutzt CSS-Variablen statt hardcoded Werte)
 *
 * Farben aus YOOtheme Pro:
 *   Hintergrund:  #1A0A0B (dunkelrot)
 *   Primary:      #DD0C15 (rot)
 *   Akzent/Links: #FFA200 (orange)
 *   Text:         #FFFFFF (weiss)
 *   Font:         Open Sans
 *
 * Button-Farben kommen aus EasySocial-Konfiguration:
 *   Primary:  #DD0C15 / #FFA200 (bereits korrekt)
 *   Success:  #4fc251 / #ffffff (bereits korrekt)
 *   Danger:   #f65b5b / #ffffff (bereits korrekt)
 *   Standard: #ffffff / #333333 (wird hier fuer Dark-Theme ueberschrieben)
 */


/* ============================================================
   1. VOLLSTAENDIGER CSS-VARIABLEN OVERRIDE
   Wireframe definiert alle Farben ueber --si-* Variablen.
   Hier wird die gesamte Farbpalette auf Dunkelrot/Orange gemappt.
   ============================================================ */

#es#es {

    /* --- Grundfarben --- */
    --si-body: #1A0A0B;
    --si-dark: #1A0A0B;
    --si-light: #250d0e;
    --si-overlay: rgba(0, 0, 0, 0.7);

    /* --- Grauskala → Dunkelrot-Skala ---
       Wireframe original: 100=#fff ... 900=#1d1d1d (hell→dunkel)
       Hier invertiert fuer Dark-Theme: 100=dunkelster ... 900=hellster
    */
    --si-basic--100: #2a0f10;
    --si-basic--200: #250d0e;
    --si-basic--300: #3a1215;
    --si-basic--400: #4a181c;
    --si-basic--500: #EA6468;
    --si-basic--600: #e09396;
    --si-basic--700: #ecb6b8;
    --si-basic--800: #f5d3d4;
    --si-basic--900: #FFFFFF;

    /* --- Typografie --- */
    --si-font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    --si-root-font-size: 16px;
    --si-line-height: 1.5;
    --si-line-height--sm: 1.3;

    /* --- UI --- */
    --si-ui-link: #FFA200;
    --si-ui-radius: 4px;
    --si-ui-radius--sm: 2px;
    --si-ui-radius--lg: 8px;

    /* --- Spacing (Wireframe-Defaults beibehalten) --- */
    --si-spacing: 8px;
    --si-spacing--no: 0;

    /* --- Toolbar → Dunkelrot --- */
    --si-toolbar-bg: #1A0A0B;
    --si-toolbar-text: #FFFFFF;
    --si-toolbar-border: #3a1215;
    --si-toolbar-border-hover: #FFA200;
    --si-toolbar-border-active: #FFA200;
    --si-toolbar-dropdown-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);

    /* --- Primary → Rot (aus EasySocial-Konfig) ---
       Basis-States werden NICHT ueberschrieben, da korrekt aus Konfig.
       Nur die Varianten/Shades fuer Hintergruende etc.
    */
    --si-primary-100: rgba(221, 12, 21, 0.08);
    --si-primary-200: rgba(221, 12, 21, 0.2);
    --si-primary-300: #DD0C15;
    --si-primary-400: #b00a11;

    /* Primary Outline-Varianten (fuer Ghost-Buttons) */
    --si-primary--outline-bg: transparent;
    --si-primary--outline-border: #DD0C15;
    --si-primary--outline-text: #FFA200;
    --si-primary--outline-hover-bg: #DD0C15;
    --si-primary--outline-hover-border: #DD0C15;
    --si-primary--outline-hover-text: #FFA200;
    --si-primary--outline-active-bg: #b00a11;
    --si-primary--outline-active-border: #b00a11;
    --si-primary--outline-active-text: #FFA200;
    --si-primary--outline-disabled-bg: transparent;
    --si-primary--outline-disabled-border: #3a1215;
    --si-primary--outline-disabled-text: rgba(255, 255, 255, 0.4);

    /* Primary Disabled */
    --si-primary--disabled-bg: rgba(221, 12, 21, 0.3);
    --si-primary--disabled-border: #3a1215;
    --si-primary--disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Success → Gruen (aus EasySocial-Konfig, Shades anpassen) --- */
    --si-success-100: rgba(79, 194, 81, 0.08);
    --si-success-200: rgba(79, 194, 81, 0.2);
    --si-success-300: #4fc251;
    --si-success-400: #3da83f;

    --si-success--disabled-bg: rgba(79, 194, 81, 0.3);
    --si-success--disabled-border: #3a1215;
    --si-success--disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Danger → Rot (aus EasySocial-Konfig, Shades anpassen) --- */
    --si-danger-100: rgba(246, 91, 91, 0.08);
    --si-danger-200: rgba(246, 91, 91, 0.2);
    --si-danger-300: #f65b5b;
    --si-danger-400: #e04444;

    --si-danger--disabled-bg: rgba(246, 91, 91, 0.3);
    --si-danger--disabled-border: #3a1215;
    --si-danger--disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Warning → Gold passend zum Akzent --- */
    --si-warning: #FFA200;
    --si-warning-100: rgba(254, 191, 0, 0.08);
    --si-warning-200: rgba(254, 191, 0, 0.25);
    --si-warning-300: #FFA200;
    --si-warning-400: #cc8200;

    --si-warning--disabled-bg: rgba(254, 191, 0, 0.3);
    --si-warning--disabled-border: #3a1215;
    --si-warning--disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Info → Blau-Ton --- */
    --si-info: #EA6468;
    --si-info-100: rgba(100, 132, 234, 0.08);
    --si-info-200: rgba(100, 132, 234, 0.25);
    --si-info-300: #EA6468;
    --si-info-400: #e24e52;

    --si-info--disabled-bg: rgba(100, 132, 234, 0.3);
    --si-info--disabled-border: #3a1215;
    --si-info--disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Default-Button → Dunkelrot-Umrandung, weisser Text --- */
    --si-default--outline-bg: transparent;
    --si-default--outline-border: #DD0C15;
    --si-default--outline-text: #FFFFFF;
    --si-default--outline-hover-bg: #FFA200;
    --si-default--outline-hover-border: #FFA200;
    --si-default--outline-hover-text: #DD0C15;
    --si-default--outline-active-bg: #cc8200;
    --si-default--outline-active-border: #cc8200;
    --si-default--outline-active-text: #DD0C15;
    --si-default--outline-disabled-bg: rgba(1, 11, 38, 0.6);
    --si-default--outline-disabled-border: #3a1215;
    --si-default--outline-disabled-text: rgba(255, 255, 255, 0.4);

    /* --- Answer (Umfragen etc.) --- */
    --si-answer--bg: rgba(221, 12, 21, 0.1);
    --si-answer--border: #3a1215;
    --si-answer--text: #FFFFFF;

    /* --- Social Media Buttons (Farben leicht abgedunkelt) --- */
    --si-fb: #1877f2;
    --si-fb--bg: #1877f2;
    --si-fb--border: #1877f2;
    --si-fb--text: #FFFFFF;
    --si-fb--hover-bg: #1565c0;
    --si-fb--hover-border: #1565c0;
    --si-fb--hover-text: #FFFFFF;

    --si-twitter: #1da1f2;
    --si-twitter--bg: #1da1f2;
    --si-twitter--border: #1da1f2;
    --si-twitter--text: #FFFFFF;
    --si-twitter--hover-bg: #0d8bd9;
    --si-twitter--hover-border: #0d8bd9;
    --si-twitter--hover-text: #FFFFFF;

    --si-linkedin: #0077b5;
    --si-linkedin--bg: #0077b5;
    --si-linkedin--border: #0077b5;
    --si-linkedin--text: #FFFFFF;
    --si-linkedin--hover-bg: #005e93;
    --si-linkedin--hover-border: #005e93;
    --si-linkedin--hover-text: #FFFFFF;

    /* --- Prioritaeten --- */
    --si-priority-low: #EA6468;
    --si-priority-normal: #4fc251;
    --si-priority-urgent: #f65b5b;
}


/* ============================================================
   2. GRUNDLEGENDE ANPASSUNGEN
   ============================================================ */

#es#es,
#es#es.es-main {
    background: transparent !important;
    color: #FFFFFF;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

#es#es a {
    color: #FFA200;
    transition: color 0.15s ease;
}

#es#es a:hover,
#es#es a:focus {
    color: #fff;
    text-decoration: none;
}

#es#es h1, #es#es h2, #es#es h3, #es#es h4, #es#es h5, #es#es h6,
#es#es .es-stream-title,
#es#es .es-profile-header__title {
    color: #FFFFFF;
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

#es#es .es-profile-header__title a {
    color: #FFFFFF !important;
}

#es#es .es-profile-header__meta a {
    color: #FFA200 !important;
}

/* Absaetze und allgemeiner Text */
#es#es p,
#es#es span,
#es#es li,
#es#es label,
#es#es .o-small,
#es#es .o-muted {
    color: #FFFFFF;
}

#es#es .o-muted {
    color: #e09396 !important;
}


/* ============================================================
   3. STANDARD-BUTTON FIX (weiss auf dunkel geht nicht)
   Nur Default-Buttons, Primary/Success/Danger kommen aus Konfig
   ============================================================ */

#es#es .btn-es,
#es#es .btn-es-default {
    background: transparent;
    border: 1px solid #DD0C15;
    color: #FFFFFF;
    border-radius: 4px;
    transition: all 0.15s ease;
}

#es#es .btn-es:hover,
#es#es .btn-es-default:hover {
    background: #FFA200;
    border-color: #FFA200;
    color: #DD0C15;
}

/* Disabled Buttons */
#es#es .btn-es[disabled],
#es#es .btn-es.disabled,
#es#es .btn-es-default[disabled],
#es#es .btn-es-default.disabled {
    background: rgba(1, 11, 38, 0.6);
    border-color: #3a1215;
    color: rgba(255, 255, 255, 0.4);
    opacity: 0.6;
}


/* ============================================================
   4. CARDS / PANELS / WIDGETS
   ============================================================ */

#es#es .es-side-widget,
#es#es .es-data-wrapper,
#es#es .es-dialog-container,
#es#es .es-apps-item,
#es#es .o-card,
#es#es .o-box {
    background: rgba(221, 12, 21, 0.1);
    border: 1px solid #3a1215;
    border-radius: 8px;
    padding: 16px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

#es#es .es-side-widget__hd,
#es#es .o-card__hd {
    border-bottom: 1px solid #3a1215;
    color: #FFA200;
}

#es#es .es-side-widget__title {
    color: #FFA200 !important;
}

#es#es .es-side-widget__icon,
#es#es .es-side-widget__icon.t-text--muted {
    color: #FFFFFF !important;
}

#es#es .es-side-widget a,
#es#es .es-side-widget a.t-text--muted,
#es#es .es-side-widget .o-nav__link.t-text--muted {
    color: #FFFFFF !important;
}

#es#es .es-side-widget .o-nav__item.t-text--muted {
    color: #FFFFFF !important;
}

#es#es .es-side-widget a:hover,
#es#es .es-side-widget a.t-text--muted:hover,
#es#es .es-side-widget .o-nav__link.t-text--muted:hover {
    color: #FFA200 !important;
}


/* ============================================================
   5. STREAM / ACTIVITY FEED
   ============================================================ */

body #es#es .es-stream-item,
body #es#es li.es-stream-item {
    background: rgba(1, 11, 38, 0.45) !important;
    border: 1px solid #3a1215 !important;
    border-top: 1px solid #3a1215 !important;
    box-shadow: none !important;
    margin-bottom: 16px;
    border-radius: 8px;
    padding: 20px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

body #es#es .es-stream-item:hover,
body #es#es li.es-stream-item:hover {
    border-color: rgba(221, 12, 21, 0.5) !important;
}

#es#es .es-stream-content {
    color: #FFFFFF;
}

#es#es .es-stream-meta,
#es#es .es-stream-meta a {
    color: #EA6468;
}

#es#es .es-stream-meta a:hover {
    color: #FFA200;
}

#es#es .es-stream-actions a,
#es#es .es-stream-action-wrap a,
#es#es .es-actions-list a,
#es#es .action-title-comments a {
    color: #FFFFFF;
    transition: color 0.15s ease;
}

#es#es .es-stream-actions a:hover,
#es#es .es-stream-action-wrap a:hover {
    color: #FFA200;
}

/* Story-Textfeld (Posting-Box) */
#es#es .es-story-textfield,
#es#es .es-story-textbox,
#es#es .es-story-form,
#es#es .mentions-textfield {
    background: rgba(1, 11, 38, 0.4) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
    border-radius: 4px;
    font-size: 15px !important;
    padding: 12px 14px !important;
}

#es#es .es-story-textfield:focus,
#es#es .es-story-textbox:focus {
    border-color: #FFA200 !important;
}

/* Story-Textarea spezifisch (hat dunkelgraue Schrift) */
body #es#es textarea.es-story-textfield {
    color: #FFFFFF !important;
    font-size: 15px !important;
}

body #es#es textarea.es-story-textfield::placeholder,
body #es#es .mentions textarea.es-story-textfield::placeholder,
body #es#es textarea[data-story-textfield]::placeholder {
    color: #FFA200 !important;
}

/* Mentions-Overlay: Reply-Tag (Benutzername beim Antworten) */
body #es#es .mentions > div > span {
    background: transparent !important;
    color: transparent !important;
}

/* Mentions-Autocomplete: Emoji/Smiley-Vorschläge beim Tippen */
body #es#es .mentions-autocomplete-inner {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .mentions-autocomplete-inner li {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .mentions-autocomplete-inner li:hover,
body #es#es .mentions-autocomplete-inner li.active {
    background: rgba(221, 12, 21, 0.3) !important;
}

/* Kommentare */
#es#es .es-comment-item,
#es#es .es-comment-form {
    background: rgba(221, 12, 21, 0.05);
    border-color: #3a1215;
}

#es#es .es-comment-content {
    color: #FFFFFF;
}


/* ============================================================
   6. PROFIL
   ============================================================ */

#es#es .es-profile-header {
    background: linear-gradient(to bottom, #1A0A0B, #DD0C15);
    border-radius: 4px;
    overflow: hidden;
}

#es#es .es-profile-header-nav {
    background: rgba(1, 11, 38, 0.8);
    border-bottom: 1px solid #3a1215;
}

#es#es .es-profile-header-nav__link {
    color: #EA6468;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

#es#es .es-profile-header-nav__link:hover,
#es#es .es-profile-header-nav__link.active {
    color: #FFA200;
    border-bottom-color: #FFA200;
}

body #es#es .es-profile-data-table,
body #es#es table.es-profile-data-table,
body #es#es .es-profile-data-table thead,
body #es#es .es-profile-data-table tbody {
    background: transparent !important;
    background-color: transparent !important;
}

body #es#es .es-profile-data-table td,
body #es#es .es-profile-data-table th,
body #es#es .es-profile-data-table tr {
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
    background: transparent !important;
    background-color: transparent !important;
}

body #es#es .es-profile-data-table thead tr th {
    background: rgba(221, 12, 21, 0.15) !important;
}

body #es#es .es-profile-data-table .profile-data-label {
    color: #FFFFFF !important;
    background: transparent !important;
}

body #es#es .es-profile-data-table .profile-data-info,
body #es#es .es-profile-data-table .profile-data-info__data,
body #es#es .es-profile-data-table .profile-data-info__content,
body #es#es .es-profile-data-table .profile-data-info__content a,
body #es#es .es-profile-data-table .profile-data-info a {
    color: #FFFFFF !important;
    background: transparent !important;
}

body #es#es .es-profile-data-table p {
    color: #EA6468 !important;
}

/* Profil-Info-Bereiche */
body #es#es .es-profile-about,
body #es#es .es-profile-info {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 4px;
}


/* ============================================================
   7. FORMULARE
   ============================================================ */

#es#es .form-control,
#es#es .o-form-control,
#es#es input[type="text"],
#es#es input[type="email"],
#es#es input[type="password"],
#es#es input[type="search"],
#es#es input[type="url"],
#es#es input[type="number"],
#es#es textarea,
#es#es select {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px !important;
    padding: 10px 14px !important;
    transition: border-color 0.15s ease;
}

#es#es .form-control:focus,
#es#es .o-form-control:focus,
#es#es input[type="text"]:focus,
#es#es input[type="email"]:focus,
#es#es input[type="password"]:focus,
#es#es input[type="search"]:focus,
#es#es input[type="url"]:focus,
#es#es input[type="number"]:focus,
#es#es textarea:focus,
#es#es select:focus {
    border-color: #FFA200 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(254, 191, 0, 0.2);
}

#es#es .form-control::placeholder,
#es#es .o-form-control::placeholder,
#es#es input::placeholder,
#es#es textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Checkbox/Radio */
#es#es input[type="checkbox"],
#es#es input[type="radio"] {
    accent-color: #FFA200;
}

/* Select Dropdowns */
#es#es select option {
    background: #1A0A0B;
    color: #FFFFFF;
}


/* ============================================================
   8. TOOLBAR / NAVIGATION
   ============================================================ */

#es#es .es-toolbar,
.xes-toolbar {
    background: #1A0A0B !important;
    border-bottom: 1px solid #3a1215;
}

#es#es .es-toolbar a {
    color: #EA6468;
}

#es#es .es-toolbar a:hover,
#es#es .es-toolbar a.active {
    color: #FFA200;
}

/* Toolbar-Badges/Counter */
#es#es .es-toolbar .o-badge {
    background: #FFA200;
    color: #1A0A0B;
}

/* Toolbar Search */
#es#es .es-toolbar input[type="text"],
#es#es .es-toolbar input[type="search"] {
    background: rgba(1, 11, 38, 0.6);
    border: 1px solid #3a1215;
    color: #FFFFFF;
}


/* ============================================================
   9. DROPDOWNS / POPOVER
   ============================================================ */

#es#es .es-dropdown-menu,
#es#es .popbox-dropdown,
#es#es .o-dropdown {
    background: #1A0A0B;
    border: 1px solid #3a1215;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

#es#es .es-dropdown-menu a,
#es#es .o-dropdown a {
    color: #FFFFFF;
}

#es#es .es-dropdown-menu a:hover,
#es#es .o-dropdown a:hover {
    background: rgba(221, 12, 21, 0.3);
    color: #FFA200;
}

/* Dropdown-Divider */
#es#es .es-dropdown-menu .divider,
#es#es .o-dropdown .o-divider {
    border-color: #3a1215;
}


/* ============================================================
   10. ALERTS / NOTICES
   ============================================================ */

#es#es .alert,
#es#es .o-alert {
    border-radius: 4px;
    border: 1px solid;
}

#es#es .alert-info,
#es#es .o-alert--info {
    background: rgba(100, 132, 234, 0.15);
    border-color: #EA6468;
    color: #FFFFFF;
}

#es#es .alert-success,
#es#es .o-alert--success {
    background: rgba(79, 194, 81, 0.15);
    border-color: #4fc251;
    color: #FFFFFF;
}

#es#es .alert-warning,
#es#es .o-alert--warning {
    background: rgba(254, 191, 0, 0.15);
    border-color: #FFA200;
    color: #FFFFFF;
}

#es#es .alert-danger,
#es#es .alert-error,
#es#es .o-alert--danger {
    background: rgba(246, 91, 91, 0.15);
    border-color: #f65b5b;
    color: #FFFFFF;
}

#es#es .alert-empty,
#es#es .o-alert--empty {
    background: rgba(221, 12, 21, 0.1);
    border-color: #3a1215;
    color: #EA6468;
}


/* ============================================================
   11. CONVERSATIONS / MESSAGING
   ============================================================ */

#es#es .es-convo-item {
    border-bottom: 1px solid #3a1215;
}

#es#es .es-convo-item:hover {
    background: rgba(221, 12, 21, 0.15);
}

#es#es .es-convo-item.active {
    background: rgba(221, 12, 21, 0.25);
    border-left: 3px solid #FFA200;
}

#es#es .es-convo-content,
#es#es .es-convo-message {
    color: #FFFFFF;
}

#es#es .es-convo-sidebar {
    background: rgba(1, 11, 38, 0.4);
    border-right: 1px solid #3a1215;
}

/* Chat-Bubbles */
#es#es .es-convo-bubble {
    background: rgba(221, 12, 21, 0.15);
    border: 1px solid #3a1215;
    color: #FFFFFF;
    border-radius: 8px;
}

#es#es .es-convo-bubble--mine {
    background: rgba(221, 12, 21, 0.3);
    border-color: #DD0C15;
}


/* ============================================================
   12. NOTIFICATIONS
   ============================================================ */

#es#es .es-noti__item {
    background: rgba(1, 11, 38, 0.6) !important;
    border-bottom: 1px solid #3a1215;
    transition: background 0.15s ease;
}

#es#es .es-noti__item:hover {
    background: rgba(221, 12, 21, 0.15) !important;
}

#es#es .es-noti__item.is-unread {
    background: rgba(254, 191, 0, 0.05) !important;
    border-left: 3px solid #FFA200;
}

/* Noti-Aktions-Buttons (X / Löschen) */
#es#es .es-noti__item .btn.btn-es-danger-o {
    background: transparent !important;
    border-color: #3a1215 !important;
    color: #FFA200 !important;
}

#es#es .es-noti__item .btn.btn-es-danger-o:hover {
    background: rgba(220, 53, 69, 0.2) !important;
    border-color: #dc3545 !important;
}

/* Noti-Seitenansicht (Benachrichtigungen-Seite) */
#es#es .es-noti-list-wrap {
    background: rgba(1, 11, 38, 0.4) !important;
}

#es#es .es-noti__context,
#es#es .es-noti__excerpt {
    color: #FFFFFF !important;
}

/* Mehr laden Button */
#es#es .es-noti-loadmore,
#es#es a[data-es-noti-loadmore] {
    color: #FFA200 !important;
}


/* ============================================================
   13. BADGES / LABELS / TAGS
   ============================================================ */

#es#es .badge,
#es#es .o-badge,
#es#es .o-label {
    background: #FFA200;
    color: #1A0A0B;
    font-weight: 600;
    border-radius: 10px;
}

#es#es .o-tag {
    background: rgba(221, 12, 21, 0.2);
    border: 1px solid #3a1215;
    color: #FFFFFF;
    border-radius: 4px;
}


/* ============================================================
   14. MODALS / DIALOGS
   ============================================================ */

#es#es .es-dialog-container,
#es#es .o-modal__content {
    background: #1A0A0B;
    border: 1px solid #3a1215;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

#es#es .o-modal__overlay {
    background: rgba(0, 0, 0, 0.7);
}

#es#es .o-modal__hd {
    border-bottom: 1px solid #3a1215;
    color: #FFFFFF;
}

#es#es .o-modal__ft {
    border-top: 1px solid #3a1215;
}

/* EasySocial Dialog (eigenes #es#es.es-dialog Element) */
#es#es.es-dialog .es-dialog-modal {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#es#es.es-dialog .es-dialog-header {
    background: #1A0A0B !important;
    border-bottom: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es.es-dialog .es-dialog-title {
    color: #FFFFFF !important;
}

#es#es.es-dialog .es-dialog-close-button,
#es#es.es-dialog .es-dialog-back-button,
#es#es.es-dialog .es-dialog-close-button i,
#es#es.es-dialog .es-dialog-back-button i {
    color: #EA6468 !important;
}

#es#es.es-dialog .es-dialog-close-button:hover,
#es#es.es-dialog .es-dialog-close-button:hover i {
    color: #FFA200 !important;
}

#es#es.es-dialog .es-dialog-body {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

#es#es.es-dialog .es-dialog-container {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

#es#es.es-dialog .es-dialog-content,
#es#es.es-dialog .es-dialog-content p {
    color: #FFFFFF !important;
}

#es#es.es-dialog .es-dialog-footer {
    background: #1A0A0B !important;
    border-top: 1px solid #3a1215 !important;
}

#es#es.es-dialog .es-dialog-footer-content {
    background: transparent !important;
}

#es#es.es-dialog .es-dialog-footer div {
    background: transparent !important;
}

/* Dialog Buttons */
#es#es.es-dialog .btn-es-default-o {
    background: transparent !important;
    border: 1px solid #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es.es-dialog .btn-es-default-o:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

#es#es.es-dialog .btn-es-danger-o {
    background: transparent !important;
    border: 1px solid #f65b5b !important;
    color: #f65b5b !important;
}

#es#es.es-dialog .btn-es-danger-o:hover {
    background: #f65b5b !important;
    border-color: #f65b5b !important;
    color: #FFFFFF !important;
}


/* ============================================================
   15. TABELLEN
   ============================================================ */

#es#es table th {
    background: rgba(221, 12, 21, 0.2);
    color: #FFA200;
    border-color: #3a1215;
}

#es#es table td {
    border-color: #3a1215;
    color: #FFFFFF;
}

#es#es table tr:hover td {
    background: rgba(221, 12, 21, 0.1);
}

#es#es table thead {
    border-bottom: 2px solid #3a1215;
}


/* ============================================================
   16. MEDIA / PHOTOS / ALBUMS / FILES
   ============================================================ */

#es#es .es-album-content,
#es#es .es-media-item,
#es#es .es-photo-item,
#es#es .es-file-item {
    background: rgba(1, 11, 38, 0.4);
    border: 1px solid #3a1215;
    border-radius: 4px;
    overflow: hidden;
}

#es#es .es-media-item:hover,
#es#es .es-photo-item:hover {
    border-color: rgba(221, 12, 21, 0.5);
}


/* ============================================================
   17. REGISTRATION / LOGIN
   ============================================================ */

#es#es .es-login-form,
#es#es .es-register-box__form {
    background: rgba(1, 11, 38, 0.6);
    border: 1px solid #3a1215;
    border-radius: 4px;
    padding: 24px;
}


/* ============================================================
   18. GRUPPEN / EVENTS / SEITEN
   ============================================================ */

#es#es .es-group-item,
#es#es .es-event-item,
#es#es .es-page-item {
    background: rgba(1, 11, 38, 0.6);
    border: 1px solid #3a1215;
    border-radius: 4px;
}

#es#es .es-group-item:hover,
#es#es .es-event-item:hover,
#es#es .es-page-item:hover {
    border-color: rgba(221, 12, 21, 0.5);
}

#es#es .es-group-header,
#es#es .es-event-header,
#es#es .es-page-header {
    background: linear-gradient(to bottom, #1A0A0B, #DD0C15);
}


/* ============================================================
   19. MITGLIEDER-LISTE / USER-ITEMS
   ============================================================ */

#es#es .es-member-item,
#es#es .es-user-item {
    background: rgba(1, 11, 38, 0.4);
    border: 1px solid #3a1215;
    border-radius: 4px;
}

#es#es .es-member-item:hover,
#es#es .es-user-item:hover {
    border-color: rgba(221, 12, 21, 0.5);
    background: rgba(221, 12, 21, 0.1);
}


/* ============================================================
   20. TABS / PILLS / NAVIGATION
   ============================================================ */

#es#es .o-tabs__item {
    color: #EA6468;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

#es#es .o-tabs__item:hover,
#es#es .o-tabs__item.is-active {
    color: #FFA200;
    border-bottom-color: #FFA200;
}

#es#es .o-nav__item {
    color: #EA6468;
}

#es#es .o-nav__item:hover,
#es#es .o-nav__item.is-active {
    color: #FFA200;
}

/* Filter-Nav / Subnav */
#es#es .es-filter-nav a,
#es#es .es-subnav a {
    color: #EA6468;
    transition: color 0.15s ease;
}

#es#es .es-filter-nav a:hover,
#es#es .es-filter-nav a.active,
#es#es .es-subnav a:hover,
#es#es .es-subnav a.active {
    color: #FFA200;
}


/* ============================================================
   21. PAGINATION
   ============================================================ */

#es#es .o-pagination a,
#es#es .es-pagination a {
    color: #EA6468;
    border: 1px solid #3a1215;
    background: transparent;
    border-radius: 4px;
    transition: all 0.15s ease;
}

#es#es .o-pagination a:hover,
#es#es .es-pagination a:hover {
    color: #FFA200;
    border-color: #FFA200;
}

#es#es .o-pagination .is-active,
#es#es .es-pagination .active a {
    background: #DD0C15;
    border-color: #DD0C15;
    color: #FFA200;
}


/* ============================================================
   22. TOOLTIPS / POPOVER
   ============================================================ */

#es#es .o-tooltip {
    background: #1A0A0B;
    border: 1px solid #3a1215;
    color: #FFFFFF;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}


/* ============================================================
   23. PROGRESS BARS / LOADING
   ============================================================ */

#es#es .o-progress {
    background: #3a1215;
    border-radius: 4px;
}

#es#es .o-progress__bar {
    background: #DD0C15;
}

#es#es .es-loading,
#es#es .o-spinner {
    color: #FFA200;
}


/* ============================================================
   24. AVATARE / BILDER
   ============================================================ */

#es#es .o-avatar {
    border: 2px solid #3a1215;
}

#es#es .o-avatar:hover {
    border-color: #FFA200;
}


/* ============================================================
   25. DIVIDER / TRENNLINIEN
   ============================================================ */

#es#es hr,
#es#es .o-divider {
    border-color: #3a1215;
}


/* ============================================================
   26. POINTS / LEADERBOARD
   ============================================================ */

#es#es .es-points-item,
#es#es .es-leaderboard-item {
    background: rgba(1, 11, 38, 0.4);
    border: 1px solid #3a1215;
    border-radius: 4px;
}

#es#es .es-points-value {
    color: #FFA200;
    font-weight: 600;
}


/* ============================================================
   27. POLLS / UMFRAGEN
   ============================================================ */

#es#es .es-poll-item {
    background: rgba(221, 12, 21, 0.1);
    border: 1px solid #3a1215;
    border-radius: 4px;
}

#es#es .es-poll-bar {
    background: #DD0C15;
    border-radius: 4px;
}

#es#es .es-poll-result {
    color: #FFA200;
}


/* ============================================================
   28. SCROLLBAR (Webkit)
   ============================================================ */

#es#es ::-webkit-scrollbar {
    width: 6px;
}

#es#es ::-webkit-scrollbar-track {
    background: #1A0A0B;
}

#es#es ::-webkit-scrollbar-thumb {
    background: #3a1215;
    border-radius: 3px;
}

#es#es ::-webkit-scrollbar-thumb:hover {
    background: #DD0C15;
}


/* ============================================================
   29. SELECTION / FOCUS
   ============================================================ */

#es#es ::selection {
    background: #DD0C15;
    color: #FFFFFF;
}

#es#es *:focus-visible {
    outline: 2px solid #FFA200;
    outline-offset: 2px;
}


/* ============================================================
   30. RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
    #es#es .es-container__sidebar {
        border-top: 1px solid #3a1215;
        margin-top: 16px;
        padding-top: 16px;
    }
}


/* ============================================================
   31. WIREFRAME-SPEZIFISCHE KORREKTUREN
   Das Wireframe-Theme nutzt var(--si-basic--*) fuer fast alle
   Hintergruende und Borders. Durch den Override in Sektion 1
   werden diese automatisch dunkelrot. Hier kommen nur
   Korrekturen fuer Stellen, die trotzdem noch helle Werte
   haben koennten (z.B. inline-styles oder spezifische Klassen).
   ============================================================ */

/* Body/Wrapper-Hintergrund transparent machen */
#es#es .es-wrap,
#es#es .es-container,
#es#es .es-main-content {
    background: transparent;
}

/* Sicherstellen, dass alle Bereiche mit var(--si-body) dunkel sind */
#es#es [style*="background"],
#es#es .si-bg-body {
    background-color: var(--si-body);
}

/* Wireframe: Input-Gruppen */
#es#es .o-input-group__addon {
    background: rgba(221, 12, 21, 0.15);
    border: 1px solid #3a1215;
    color: #FFFFFF;
}

/* Wireframe: Breadcrumb */
#es#es .o-breadcrumb a {
    color: #EA6468;
}

#es#es .o-breadcrumb a:hover {
    color: #FFA200;
}

#es#es .o-breadcrumb__separator {
    color: #3a1215;
}

/* Wireframe: Empty State */
#es#es .o-empty {
    color: #EA6468;
}

#es#es .o-empty__icon {
    color: #FFFFFF !important;
}

/* Wireframe: Close-Button */
#es#es .o-close {
    color: #EA6468;
}

#es#es .o-close:hover {
    color: #FFA200;
}


/* ============================================================
   32. HARDCODED WEISS/GRAU FIXES
   Diese Klassen haben im Wireframe-Theme hardcoded helle
   Hintergruende die nicht ueber CSS-Variablen gesteuert werden.
   Ermittelt per Live-Inspektion auf beta.musicalradio.de/community
   ============================================================ */

/* --- Stream Filter Bar (oben, grauer Balken) --- */
#es#es .es-stream-filter-bar {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px solid #3a1215;
    color: #FFFFFF;
}

/* --- Default-Outline Buttons (weiss mit grauer Border) --- */
#es#es .btn-es-default-o {
    background: transparent !important;
    border: 1px solid #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es .btn-es-default-o:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* --- Avatar Container (weisser Hintergrund-Ring) --- */
#es#es .o-avatar-v2 {
    background: transparent !important;
}

/* --- Story Panel (Posting Box) --- */
#es#es .es-story-panel-button__label {
    background: rgba(221, 12, 21, 0.1) !important;
    color: #FFFFFF !important;
}

#es#es .es-story-panel-button__shape {
    background: rgba(221, 12, 21, 0.15) !important;
    border-color: #3a1215 !important;
    color: #EA6468 !important;
}

#es#es .es-story-body {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es .es-story-panel {
    background: rgba(1, 11, 38, 0.4) !important;
    border: 1px solid #3a1215 !important;
}

#es#es .es-story-form__hd {
    background: transparent !important;
    border-color: #3a1215 !important;
}

/* --- Album/Photo Upload Button --- */
#es#es .es-album-upload-button,
#es#es .es-photo-upload-item {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px dashed #3a1215 !important;
    color: #EA6468 !important;
}

/* --- Form Controls (Wireframe hardcoded weiss) --- */
body #es#es .o-form-control {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
}

body #es#es .o-form-control:focus {
    border-color: #FFA200 !important;
    box-shadow: 0 0 0 2px rgba(254, 191, 0, 0.2) !important;
}

/* --- Story Link Textbox --- */
#es#es .es-story-link-textbox {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

/* --- Story Meta Button --- */
#es#es .es-story-meta-button {
    background: transparent !important;
    border-color: #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es .es-story-meta-button:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* --- Stream Actions Bar (Gefaellt mir / Kommentieren) --- */
#es#es .es-actions__item {
    background: transparent !important;
    color: #EA6468 !important;
}

#es#es .es-actions__item:hover {
    color: #FFA200 !important;
}

#es#es .es-actions__item-stats,
#es#es .es-actions__item-comment {
    background: transparent !important;
}

/* --- Reaction Stats --- */
#es#es .es-reaction-stats {
    background: transparent !important;
    color: #EA6468 !important;
}

/* --- Stream Header (grauer Balken "hat den Beitrag...") --- */
#es#es .es-stream-header {
    background: rgba(221, 12, 21, 0.08) !important;
    color: #EA6468 !important;
    border-color: #3a1215 !important;
}

#es#es .es-stream-header a {
    color: #FFA200 !important;
}

/* --- Kommentar-Bereich --- */
#es#es .es-comments-wrap {
    background: rgba(1, 11, 38, 0.4) !important;
    border-color: #3a1215 !important;
}

#es#es .es-comments-control__load {
    background: transparent !important;
    color: #EA6468 !important;
}

#es#es .es-comments-control__load:hover {
    color: #FFA200 !important;
}

#es#es .es-form-comment {
    background: rgba(1, 11, 38, 0.4) !important;
    border-color: #3a1215 !important;
}

body #es#es .es-form-comment textarea,
body #es#es .es-form-comment input,
body #es#es .es-comments-form textarea,
body #es#es .es-comments-form input,
body #es#es .es-comments-form .es-form textarea,
body #es#es .es-comments-form .es-form input,
body #es#es .es-comments-form .o-form-control,
body #es#es .es-form-comment .o-form-control {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
}

body #es#es .es-form-comment textarea::placeholder,
body #es#es .es-comments-form textarea::placeholder,
body #es#es .es-comments-form .es-form textarea::placeholder,
body #es#es .es-comments-form .o-form-control::placeholder,
body #es#es textarea[data-comments-form-input]::placeholder {
    color: #FFA200 !important;
    font-size: 15px !important;
}

/* --- Image Container --- */
#es#es .es-img-container__wrap {
    background: rgba(1, 11, 38, 0.4) !important;
}

/* --- Placeholder Shimmer (Loading) --- */
#es#es .ph-item {
    background: rgba(221, 12, 21, 0.1) !important;
    border-color: #3a1215 !important;
}

#es#es .ph-avatar,
#es#es .ph-col-12,
#es#es .ph-col-2,
#es#es .ph-col-4,
#es#es .ph-col-6,
#es#es .ph-col-8,
#es#es .ph-col-10,
#es#es .ph-row > div {
    background: rgba(221, 12, 21, 0.2) !important;
}

/* --- Progress Bar (Upload etc.) --- */
#es#es .progress,
#es#es .progress-striped,
#es#es .upload-progress {
    background: #3a1215 !important;
}

#es#es .progress .bar,
#es#es .progress-bar {
    background: #DD0C15 !important;
}

/* --- Conversation Compose --- */
#es#es .es-convo-compose {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
}

/* --- Insert Button --- */
#es#es .insert-button {
    background: transparent !important;
    border-color: #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es .insert-button:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}


/* ============================================================
   33. GRAUER TEXT FIXES
   Wireframe nutzt hardcoded Grau-Toene fuer diverse Texte
   ============================================================ */

/* Muted/Meta Text → Blau statt Grau */
#es#es .t-text--muted,
#es#es .es-bleed--top,
#es#es .o-small,
#es#es [class*="t-text--muted"] {
    color: #EA6468 !important;
}

/* Stream-spezifische graue Texte */
#es#es .es-stream-filter-bar .btn,
#es#es .es-stream-filter-bar select {
    color: #FFFFFF !important;
}

/* Kommentar-Meta (Datum, Antworten etc.) */
#es#es .es-comment-meta,
#es#es .es-comment-meta a {
    color: #EA6468 !important;
}

#es#es .es-comment-meta a:hover {
    color: #FFA200 !important;
}

#es#es .es-comment-item-reply-wrap a {
    color: #FFFFFF !important;
}

#es#es .es-comment-item-reply-wrap a:hover {
    color: #FFA200 !important;
}

/* Allgemeine graue Utility-Klassen */
#es#es .text-muted,
#es#es .text-secondary {
    color: #EA6468 !important;
}


/* ============================================================
   34. INLINE-STYLE OVERRIDES (Hohe Spezifitaet)
   EasySocial generiert inline <style>-Bloecke mit !important
   aus der Komponenten-Konfiguration (Standard-Button = weiss).
   Wir nutzen body #es#es fuer hoehere Spezifitaet.
   ============================================================ */

/* Standard-Buttons: EasySocial-Konfig setzt weiss mit !important.
   Am besten: In EasySocial-Konfig Standard-Button auf #1A0A0B/#FFFFFF aendern.
   Falls das nicht reicht, hier mit body #es#es ueberschreiben: */
body #es#es .btn-es-default,
body #es#es .es-mobile-filter-slider__btn {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid #DD0C15 !important;
}

body #es#es .btn-es-default:hover,
body #es#es .es-mobile-filter-slider__btn:hover {
    background: #FFA200 !important;
    color: #DD0C15 !important;
    border-color: #FFA200 !important;
}

body #es#es .btn-es-default-o,
body #es#es .btn-es-default-o:hover,
body #es#es .btn-es-default-o:active,
body #es#es .btn-es-default-o:focus {
    background: transparent !important;
    color: #FFFFFF !important;
    border-color: #DD0C15 !important;
}

body #es#es .btn-es-default-o:hover {
    background: #FFA200 !important;
    color: #DD0C15 !important;
    border-color: #FFA200 !important;
}

/* --- Kommentar-Formular (weisser Kasten) --- */
body #es#es .es-form {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-comments-form .es-form {
    background: rgba(1, 11, 38, 0.4) !important;
    border: 1px solid #3a1215 !important;
}

/* --- GIF-Input (weisser Kasten) --- */
body #es#es .es-input-gif {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-input-gif::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* --- Dropdown (Neuigkeiten etc. - weisser Kasten) --- */
body #es#es .popbox-dropdown,
body #es#es .popbox--dropdown,
body #es#es .es-popbox-dropdown,
body #es#es .o-dropdown-menu,
body #es#es .dropdown-menu {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
}

body #es#es .popbox-dropdown a,
body #es#es .dropdown-menu a,
body #es#es .dropdown-menu li {
    color: #FFFFFF !important;
    background: transparent !important;
}

body #es#es .popbox-dropdown a:hover,
body #es#es .dropdown-menu a:hover,
body #es#es .dropdown-menu li:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

/* --- Story Meta Buttons (Icons in Posting Box) --- */
body #es#es .es-story-meta-button {
    background: transparent !important;
    color: #FFFFFF !important;
    border-color: #DD0C15 !important;
}

body #es#es .es-story-meta-button i,
body #es#es .es-story-meta-button span {
    color: #FFFFFF !important;
}


/* --- Stream Published Notice (weisse Box oben im Stream-Item) --- */
body #es#es .es-stream-published,
body #es#es .es-stream-published-notice {
    background: rgba(221, 12, 21, 0.1) !important;
    color: #EA6468 !important;
    border-color: #3a1215 !important;
}

body #es#es .es-stream-published a {
    color: #FFA200 !important;
}

/* --- Reactions Popup (weiss) --- */
body #es#es .es-reactions-pop {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

/* --- Avatar V2 Borders (weisse/graue Raender) --- */
body #es#es .o-avatar-v2 {
    background: transparent !important;
    border-color: transparent !important;
}

body #es#es .o-avatar-v2__content {
    border-color: #3a1215 !important;
}

/* --- Avatar Hover Popup / User Mini-Profil --- */
body #es#es .popbox-tooltip,
body #es#es .popbox--tooltip,
body #es#es .es-profile-popbox,
body #es#es .es-popbox-content,
body #es#es .es-user-popbox,
body #es#es .popbox__content,
body #es#es [data-popbox-content] {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    color: #FFFFFF !important;
}

body #es#es .popbox-tooltip a,
body #es#es .popbox--tooltip a,
body #es#es .popbox__content a {
    color: #FFA200 !important;
}

body #es#es .popbox-tooltip .btn,
body #es#es .popbox__content .btn {
    border-color: #DD0C15 !important;
}

/* Popbox innere Elemente — nur Hintergruende transparent, Text bleibt */
body #es#es .popbox-tooltip div,
body #es#es .popbox-tooltip span,
body #es#es .popbox-tooltip ul,
body #es#es .popbox-tooltip li,
body #es#es .popbox-tooltip section,
body #es#es .popbox--tooltip div,
body #es#es .popbox--tooltip span,
body #es#es .popbox--tooltip ul,
body #es#es .popbox--tooltip li,
body #es#es .popbox--tooltip section,
body #es#es .popbox__content div,
body #es#es .popbox__content span,
body #es#es .popbox__content ul,
body #es#es .popbox__content li,
body #es#es .popbox__content section,
body #es#es [data-popbox-content] div,
body #es#es [data-popbox-content] span,
body #es#es [data-popbox-content] ul,
body #es#es [data-popbox-content] li,
body #es#es [data-popbox-content] section {
    background-color: transparent !important;
}

/* Popbox Text lesbar machen */
body #es#es .popbox-tooltip,
body #es#es .popbox-tooltip *,
body #es#es .popbox--tooltip,
body #es#es .popbox--tooltip *,
body #es#es .popbox__content,
body #es#es .popbox__content *,
body #es#es [data-popbox-content],
body #es#es [data-popbox-content] * {
    color: #FFFFFF !important;
}

body #es#es .popbox-tooltip a,
body #es#es .popbox--tooltip a,
body #es#es .popbox__content a,
body #es#es [data-popbox-content] a {
    color: #FFA200 !important;
}

/* Popbox Stats (Freunde, Alben etc.) */
body #es#es [data-popbox-content] .es-stat,
body #es#es [data-popbox-content] .o-stat,
body #es#es .popbox__content .es-stat,
body #es#es .popbox__content .o-stat {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 4px !important;
}

/* Popbox Footer (Buttons) */
body #es#es [data-popbox-content] .btn,
body #es#es .popbox__content .btn {
    background: transparent !important;
    border-color: #DD0C15 !important;
    color: #FFFFFF !important;
}

body #es#es [data-popbox-content] .btn:hover,
body #es#es .popbox__content .btn:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* --- Filter Dropdown Hover Fix --- */
body #es#es .popbox-dropdown a:hover,
body #es#es .popbox-dropdown li:hover > a,
body #es#es .dropdown-menu a:hover,
body #es#es .dropdown-menu li:hover > a {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

/* Aktiver Filter-Eintrag */
body #es#es .popbox-dropdown .active > a,
body #es#es .popbox-dropdown .is-active > a,
body #es#es .dropdown-menu .active > a {
    background: rgba(221, 12, 21, 0.2) !important;
    color: #FFA200 !important;
}


/* ============================================================
   35. SIDEBAR-WIDGETS MIT BLUR
   ============================================================ */

#es#es .es-side-widget,
#es#es .es-data-wrapper,
#es#es .es-apps-item,
#es#es .o-card,
#es#es .o-box {
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 8px;
}


/* ============================================================
   36. GLOBALER FALLBACK
   ============================================================ */

#es#es [class*="es-"] {
    border-color: #3a1215;
}


/* ============================================================
   37. MEMBER CARDS & USERS VIEW
   Mitglieder-Karten auf der Benutzer-Uebersichtsseite
   ============================================================ */

/* --- Card Container --- */
#es#es .es-card {
    background: rgba(1, 11, 38, 0.45);
    border: 1px solid #3a1215;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Card Body (Name, Freunde-Info) --- */
#es#es .es-card__bd {
    background: rgba(1, 11, 38, 0.6) !important;
    color: #FFFFFF;
}

#es#es .es-card__bd.es-card--border {
    border-top: 1px solid #3a1215;
}

/* --- Card Footer (Buttons) --- */
#es#es .es-card__ft {
    background: rgba(1, 11, 38, 0.5) !important;
    color: #FFFFFF;
}

#es#es .es-card__ft.es-card--border {
    border-top: 1px solid #3a1215;
}

/* --- Card Title (Username) --- */
#es#es .es-card__title a {
    color: #FFA200 !important;
}

#es#es .es-card__title a:hover {
    color: #FFFFFF !important;
}

/* --- Card Meta (Freunde-Anzahl etc.) --- */
#es#es .es-card__meta {
    color: #EA6468;
}

#es#es .es-card__meta a {
    color: #EA6468 !important;
}

#es#es .es-card__meta a:hover {
    color: #FFA200 !important;
}

/* --- Card Avatar --- */
#es#es .es-card__avatar {
    background: transparent;
}

/* --- Snackbar (Filter/Sortier-Leiste) --- */
#es#es .es-snackbar2 {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px solid #3a1215;
    border-radius: 8px;
    color: #FFFFFF;
    padding: 12px 16px;
}

#es#es .es-snackbar2__title {
    color: #FFFFFF;
}

#es#es .es-snackbar2__actions {
    color: #FFFFFF;
}

/* --- Popdown Button (Sortierung) --- */
#es#es .btn-popdown {
    background: transparent !important;
    border: 1px solid #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es .btn-popdown:hover {
    border-color: #FFA200 !important;
    color: #FFA200 !important;
}

#es#es .btn-popdown b {
    color: #FFFFFF;
}

#es#es .btn-popdown__caret {
    color: #EA6468;
}

/* --- Popdown Dropdown-Menue --- */
#es#es .dropdown-menu--popdown {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px;
}

#es#es .dropdown-menu--popdown a {
    color: #FFFFFF !important;
}

#es#es .dropdown-menu--popdown a:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

#es#es .dropdown-menu--popdown .active > a {
    background: rgba(221, 12, 21, 0.2) !important;
    color: #FFA200 !important;
}

#es#es .dropdown-menu--popdown__desp {
    color: #EA6468;
}

/* --- Sidebar Tabs --- */
#es#es .o-tabs__item {
    color: #FFFFFF;
}

#es#es .o-tabs__link {
    color: #FFFFFF !important;
    transition: color 0.15s ease;
}

#es#es .o-tabs__link:hover {
    color: #FFA200 !important;
}

#es#es .o-tabs__item.active .o-tabs__link,
#es#es .o-tabs__item.active a {
    color: #FFA200 !important;
    font-weight: 600;
    background: transparent !important;
    background-color: transparent !important;
}

#es#es .o-tabs__item.active {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- Sidebar "Neuen Filter erstellen" Button --- */
#es#es .btn-create {
    background: #DD0C15 !important;
    border-color: #DD0C15 !important;
    color: #FFFFFF !important;
}

#es#es .btn-create:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* --- Conversations Compose Button --- */
#es#es .btn--es-conversations-compose {
    background: transparent !important;
    border: 1px solid #DD0C15 !important;
    color: #EA6468 !important;
}

#es#es .btn--es-conversations-compose:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* --- Pagination --- */
#es#es .es-pagination-footer {
    color: #FFFFFF;
}

#es#es .o-pagination {
    color: #FFFFFF;
}

#es#es .o-pagination li a {
    background: transparent !important;
    border: 1px solid #3a1215;
    color: #EA6468 !important;
    border-radius: 4px;
    transition: all 0.15s ease;
}

#es#es .o-pagination li a:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    border-color: #DD0C15;
    color: #FFA200 !important;
}

#es#es .o-pagination li.active span {
    background: #DD0C15 !important;
    border: 1px solid #DD0C15;
    color: #FFFFFF !important;
    border-radius: 4px;
}

#es#es .o-pagination .disabled a,
#es#es .o-pagination .previousItem.disabled,
#es#es .o-pagination .nextItem.disabled {
    color: #3a1215 !important;
    border-color: #3a1215;
    opacity: 0.5;
}

/* --- Cards Grid Spacing --- */
#es#es .es-cards {
    gap: 0;
}

/* --- Horizontal List Dividers (Meta-Bereich) --- */
#es#es .g-list--horizontal.has-dividers--right li + li::before {
    color: #3a1215;
}

/* --- ES HR (Trennlinie in Sidebar) --- */
#es#es .es-hr,
#es#es hr {
    border-color: #3a1215;
}

/* --- Card Footer Stats (Views, Likes, Comments) --- */
#es#es .es-card__ft .g-list-inline,
#es#es .es-card__ft .g-list-inline li {
    color: #EA6468 !important;
    background: transparent !important;
}

#es#es .es-card__ft .g-list-inline i {
    color: #EA6468;
}

/* --- "Alle Videos anzeigen" u.ae. Island-Links --- */
#es#es .es-island {
    background: rgba(221, 12, 21, 0.1) !important;
    border: 1px solid #3a1215;
    border-radius: 0 0 8px 8px;
    color: #FFFFFF;
}

#es#es .es-island a {
    color: #FFA200 !important;
}

#es#es .es-island a:hover {
    color: #FFFFFF !important;
}

/* --- Smiley Popup --- */
body #es#es .es-input-smiley__popup {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
}

body #es#es .es-input-smiley__popup::before,
body #es#es .es-input-smiley__popup::after {
    border-top-color: #1A0A0B !important;
    border-bottom-color: #1A0A0B !important;
}

body #es#es .es-smileys li {
    background: transparent !important;
}

body #es#es .es-smileys li:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    border-radius: 4px;
}

/* Emoji-Bilder im Kommentartext: kein weißer Hintergrund */
body #es#es img.emoji {
    background: transparent !important;
}

body #es#es .es-input-smiley__close {
    color: #f65b5b !important;
}

/* --- Module-Wrapper (z.B. Video-Module auf Seiten) --- */
#es#es .mod-es {
    background: transparent;
    color: #FFFFFF;
}

/* --- Card Action Group (3-Punkte Menu oben rechts) --- */
#es#es .es-card__action-group {
    background: transparent;
}

#es#es .es-card__admin-action .btn {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}


/* ============================================================
   39. STORY SELECTION POPBOX (Post an: Gruppen/Seiten)
   ============================================================ */

.es-story-selection-popbox,
.popbox-content .es-story-selection-popbox {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

/* Header (Post an: + Suchfeld) */
.es-story-selection-popbox__hd,
.es-story-selection-popbox .es-story-selection-popbox__hd,
.popbox-content .es-story-selection-popbox__hd {
    background: #1A0A0B !important;
    border-bottom: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

.es-story-selection-popbox__hd label,
.es-story-selection-popbox__hd .o-control-label {
    color: #FFFFFF !important;
}

.es-story-selection-popbox__hd .o-form-group,
.es-story-selection-popbox__hd .o-form-horizontal {
    background: transparent !important;
}

/* Tabs (Gruppen / Seiten) */
.es-story-selection-popbox__tabs,
.es-story-selection-popbox .es-story-selection-popbox__tabs,
.popbox-content .es-story-selection-popbox__tabs {
    background: #1A0A0B !important;
    border-bottom: 1px solid #3a1215 !important;
}

/* Tabs und alle Kinder transparent */
.es-story-selection-popbox__tabs *,
.es-story-selection-popbox__tabs ul,
.es-story-selection-popbox__tabs li,
.es-story-selection-popbox__tabs a,
.es-story-selection-popbox__tabs .o-tabs,
.es-story-selection-popbox__tabs .o-tabs--horizontal,
.es-story-selection-popbox__tabs .o-tabs__item,
.es-story-selection-popbox__tabs .o-tabs__item.active,
.es-story-selection-popbox__tabs .o-tabs__link {
    background: transparent !important;
    background-color: transparent !important;
}

.es-story-selection-popbox__tabs .o-tabs__link {
    color: #EA6468 !important;
}

.es-story-selection-popbox__tabs .o-tabs__item.active .o-tabs__link {
    color: #FFA200 !important;
    border-bottom: 2px solid #FFA200 !important;
}

/* Content (Liste) */
.es-story-selection-popbox__content {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

/* Empty State in Popbox */
.es-story-selection-popbox .o-empty {
    background: transparent !important;
    color: #EA6468 !important;
}

.es-story-selection-popbox .o-empty__icon {
    color: #FFA200 !important;
}

.es-story-selection-popbox .o-empty__text {
    color: #FFFFFF !important;
}

/* List Items und alle Kinder */
.es-story-selection-popbox .es-list,
.es-story-selection-popbox .es-list__item,
.es-story-selection-popbox .es-list-item,
.es-story-selection-popbox .es-list-item__context,
.es-story-selection-popbox .es-list-item__media,
.es-story-selection-popbox__content .es-list,
.es-story-selection-popbox__content .es-list__item,
.es-story-selection-popbox__content .es-list-item,
.es-story-selection-popbox__content *,
.es-story-selection-popbox .es-list * {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

.es-story-selection-popbox .es-list__item:hover,
.es-story-selection-popbox .es-list-item:hover,
.es-story-selection-popbox__content .es-list__item:hover,
.es-story-selection-popbox__content .es-list-item:hover {
    background: rgba(221, 12, 21, 0.3) !important;
}

.es-story-selection-popbox .es-list-item__title {
    color: #FFFFFF !important;
}

/* Footer (Auf eigener Timeline posten) */
.es-story-selection-popbox__ft {
    background: rgba(221, 12, 21, 0.1) !important;
    border-top: 1px solid #3a1215 !important;
}

.es-story-selection-popbox__ft a {
    color: #FFA200 !important;
}

.es-story-selection-popbox__ft a:hover {
    color: #FFFFFF !important;
}

/* Popbox Container selbst (wird oft direkt in body gerendert) */
.popbox--story-select .popbox-content,
[data-popbox-component="popbox--story-select"] .popbox-content {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
}


/* ============================================================
   38. POLLS (Umfragen im Stream)
   ============================================================ */

/* --- Polls Container --- */
#es#es .es-stream-embed.is-polls,
#es#es .stream-polls .es-stream-embed {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 8px;
    padding: 16px;
    color: #FFFFFF;
}

/* --- Polls Title --- */
#es#es .es-polls__title {
    color: #FFA200 !important;
}

/* --- Polls List Container --- */
#es#es .es-polls__list {
    background: transparent !important;
    color: #FFFFFF;
}

/* --- Polls Item (einzelne Antwort-Option) --- */
#es#es .es-polls__item {
    background: rgba(221, 12, 21, 0.08) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
    color: #FFFFFF;
}

#es#es .es-polls__item label {
    color: #FFFFFF !important;
}

#es#es .es-polls__item label div {
    color: #FFFFFF;
}

/* --- Polls Progress Bar --- */
#es#es .es-polls__progress.progress {
    background: #3a1215 !important;
    border-radius: 4px;
    overflow: hidden;
}

#es#es .es-polls__progress .progress-bar,
#es#es .es-polls__progress .progress-bar-primary {
    background: linear-gradient(90deg, #4a0a0c 0%, #8b0d12 45%, #DD0C15 70%, #FF4D4D 100%) !important;
}

/* --- Polls Count (Stimmen) --- */
#es#es .es-polls__count {
    color: #EA6468 !important;
}

#es#es .es-polls__count:hover {
    color: #FFA200 !important;
}

/* --- Polls Info Text (abgelaufen etc.) --- */
#es#es .es-stream-embed.is-polls .t-fs--sm {
    color: #EA6468 !important;
}

/* --- Polls Footer (Einfache Auswahl etc.) --- */
#es#es .es-stream-embed.is-polls .t-text--right {
    color: #EA6468 !important;
}

/* --- Checkbox in Polls --- */
#es#es .es-polls__item.o-checkbox input[type="checkbox"] {
    accent-color: #FFA200;
}

/* --- Play/Stop SVG Icons in Polls (UIkit Icons, schwarze Strokes) --- */
#es#es .es-polls__item .uk-icon svg,
#es#es .es-stream-embed.is-polls .uk-icon svg {
    color: #EA6468;
}

#es#es .es-polls__item .uk-icon svg line,
#es#es .es-polls__item .uk-icon svg path,
#es#es .es-polls__item .uk-icon svg polygon,
#es#es .es-polls__item .uk-icon svg circle,
#es#es .es-stream-embed.is-polls .uk-icon svg line,
#es#es .es-stream-embed.is-polls .uk-icon svg path,
#es#es .es-stream-embed.is-polls .uk-icon svg polygon,
#es#es .es-stream-embed.is-polls .uk-icon svg circle {
    stroke: #EA6468 !important;
}

#es#es .es-polls__item .uk-icon:hover svg line,
#es#es .es-polls__item .uk-icon:hover svg path,
#es#es .es-polls__item .uk-icon:hover svg polygon,
#es#es .es-polls__item .uk-icon:hover svg circle {
    stroke: #FFA200 !important;
}

/* Stream Embed (eingebettete Inhalte - Links, Videos etc.) */
#es#es .es-stream-embed,
#es#es .es-stream-embed--border {
    background: rgba(1, 11, 38, 0.4) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
}

#es#es .es-stream-embed__context,
#es#es .es-stream-embed__title,
#es#es .es-stream-embed__desc {
    color: #FFFFFF !important;
    background: transparent !important;
}

#es#es .es-stream-embed__title a {
    color: #FFA200 !important;
}

#es#es .es-stream-embed__meta {
    color: #EA6468 !important;
    background: transparent !important;
}

#es#es .es-stream-embed__meta a {
    color: #EA6468 !important;
}


/* ============================================================
   40. LOGIN BOX
   ============================================================ */

/* Login-Box Container (rechte Seite) */
body #es#es .es-login-box__form-wrap {
    background: rgba(1, 11, 38, 0.8) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 8px !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    color: #FFFFFF !important;
}

body #es#es .es-login-box__form {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .es-login-box__form-title {
    color: #FFFFFF !important;
}

/* Login-Box Message (linke Seite - Registrierung) */
body #es#es .es-login-box__msg {
    color: #FFFFFF !important;
}

body #es#es .es-login-box__msg-title {
    color: #FFFFFF !important;
}

body #es#es .es-login-box__msg-desc {
    color: #FFFFFF !important;
}

/* Float-Label Inputs (ueberall in der Login-Box) */
body #es#es .es-login-box .o-form-group--float,
body #es#es .es-login-box .o-form-group--float.is-filled,
body #es#es .es-login-box .o-form-group--float.is-focused,
body #es#es .o-form-group--float {
    background: transparent !important;
    background-color: transparent !important;
}

body #es#es .es-login-box .o-float-label__input,
body #es#es .es-login-box .o-form-control,
body #es#es .es-login-box input.o-form-control,
body #es#es .es-login-box .o-form-group--float .o-form-control,
body #es#es .es-login-box .o-form-group--float.is-filled .o-form-control,
body #es#es .es-login-box .o-form-group--float.is-focused .o-form-control,
body #es#es .o-float-label__input {
    background: rgba(1, 11, 38, 0.6) !important;
    background-color: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-login-box .o-float-label__input:focus,
body #es#es .es-login-box .o-form-control:focus,
body #es#es .o-float-label__input:focus {
    border-color: #FFA200 !important;
    box-shadow: 0 0 0 2px rgba(254, 191, 0, 0.2) !important;
}

/* Float Labels */
body #es#es .es-login-box .o-form-group--float .o-control-label,
body #es#es .es-login-box .o-form-group--float.is-filled .o-control-label,
body #es#es .es-login-box .o-form-group--float.is-focused .o-control-label,
body #es#es .o-form-group--float .o-control-label {
    color: #FFA200 !important;
}

/* Fehler-Hinweise (Registrierung) */
body #es#es .es-login-box .es-fields-error-note {
    color: #f65b5b !important;
}

/* Checkbox (Angemeldet bleiben) */
body #es#es .es-login-box .o-checkbox label {
    color: #FFFFFF !important;
}

/* Primary Outline Button (Anmelden) */
body #es#es .btn-es-primary-o {
    background: transparent !important;
    border: 1px solid #DD0C15 !important;
    color: #FFA200 !important;
}

body #es#es .btn-es-primary-o:hover {
    background: #FFA200 !important;
    border-color: #FFA200 !important;
    color: #DD0C15 !important;
}

/* HR in Login */
body #es#es .es-login-box hr {
    border-color: #3a1215 !important;
}

/* Links (Mitgliedsname/Passwort vergessen) */
body #es#es .es-login-box a {
    color: #FFA200 !important;
}

body #es#es .es-login-box a:hover {
    color: #FFFFFF !important;
}

/* Fieldset transparent */
body #es#es .es-login-box fieldset {
    background: transparent !important;
}

/* Register-Mini Felder (linke Seite) */
body #es#es .es-login-box .es-register-mini-field {
    background: transparent !important;
}

body #es#es .es-login-box .register-wrap {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Alle Inputs in der gesamten Login-Box (Login + Registrierung)
   OPAK damit Autofill und normale Felder gleich aussehen */
body #es#es .es-login-box input.o-form-control,
body #es#es .es-login-box input.o-float-label__input,
body #es#es .es-login-box input.is-static,
body #es#es .es-login-box .o-form-control.is-static,
body #es#es .es-login-box .o-float-label__input.is-static,
body #es#es .es-login-box input[type="text"],
body #es#es .es-login-box input[type="password"],
body #es#es .es-login-box input[type="email"] {
    background: #1A0A0B !important;
    background-color: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0 30px #1A0A0B inset !important;
}

body #es#es .es-login-box input[type="text"]:focus,
body #es#es .es-login-box input[type="password"]:focus,
body #es#es .es-login-box input[type="email"]:focus {
    border-color: #FFA200 !important;
    box-shadow: 0 0 0 2px rgba(254, 191, 0, 0.2) !important;
}

/* Alle Labels in der Login-Box */
body #es#es .es-login-box .o-control-label {
    color: #FFA200 !important;
}

/* Chrome Autofill Override */
#es#es input:-webkit-autofill,
#es#es input:-webkit-autofill:hover,
#es#es input:-webkit-autofill:focus,
#es#es input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1A0A0B inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: #FFFFFF !important;
}

/* ============================================================
   41. CONVERSATIONS / NACHRICHTEN
   ============================================================ */

/* Haupt-Container */
body #es#es .es-convo {
    background: rgba(1, 11, 38, 0.45) !important;
    background-color: rgba(1, 11, 38, 0.45) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

/* Sidebar */
body #es#es .es-convo__sidebar {
    background: rgba(1, 11, 38, 0.6) !important;
    background-color: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
}

/* Sidebar Tabs (Unterhaltungen / Anfragen) */
body #es#es .es-convo-sidebar-tab .o-nav__link,
body #es#es .es-convo__sidebar-hd .o-nav__link {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .es-convo-sidebar-tab .o-nav__link:hover,
body #es#es .es-convo-sidebar-tab .o-nav__item.active .o-nav__link {
    color: #FFA200 !important;
    background: transparent !important;
}

/* Sidebar Items (Konversations-Einträge) */
body #es#es .es-convo__sidebar-item {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-convo__sidebar-item.is-active,
body #es#es .es-convo__sidebar-item:hover {
    background: rgba(221, 12, 21, 0.15) !important;
    background-color: rgba(221, 12, 21, 0.15) !important;
}

body #es#es .es-convo__sidebar-item.is-unread {
    background: rgba(221, 12, 21, 0.1) !important;
}

body #es#es .es-convo__sidebar-item.is-unread.is-active {
    background: rgba(221, 12, 21, 0.2) !important;
}

/* Sidebar Item Texte */
body #es#es .es-convo__sidebar-item-name,
body #es#es .es-convo__sidebar-item-content,
body #es#es .es-convo__sidebar-item-date {
    color: #FFFFFF !important;
}

body #es#es .es-convo__sidebar-item-content {
    color: #EA6468 !important;
}

/* Suche in Sidebar */
body #es#es .es-convo__search-input-wrap input,
body #es#es .es-convo__search-input {
    background: rgba(1, 11, 38, 0.6) !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

/* Chat-Bereich / Content */
body #es#es .es-convo__content,
body #es#es .es-convo__content-hd,
body #es#es .es-convo__content-bd,
body #es#es .es-convo__content-ft {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

/* Chat Header */
body #es#es .es-convo__content-hd {
    border-bottom-color: #3a1215 !important;
}

/* Nachrichten-Bubbles */
body #es#es .es-convo__message,
body #es#es .es-convo__bubble {
    background: rgba(221, 12, 21, 0.15) !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

body #es#es .es-convo__bubble--mine,
body #es#es .es-convo__message--mine .es-convo__bubble {
    background: rgba(221, 12, 21, 0.3) !important;
}

/* Message Meta (Zeit etc.) */
body #es#es .es-convo__message-date,
body #es#es .es-convo__message-meta {
    color: #EA6468 !important;
}

/* Chat Input / Footer */
body #es#es .es-convo__content-ft textarea,
body #es#es .es-convo__reply-input,
body #es#es .es-convo__content-ft input,
body #es#es textarea.es-convo-composer__textarea,
body #es#es .es-convo-composer__textarea {
    background: rgba(1, 11, 38, 0.6) !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
    padding: 10px 12px !important;
}

/* Typing Indicator */
body #es#es .es-convo-typing {
    background: transparent !important;
    background-color: transparent !important;
    color: #EA6468 !important;
}

/* Upload-Bereich */
body #es#es .es-upload-wrapper {
    background: rgba(1, 11, 38, 0.45) !important;
    background-color: rgba(1, 11, 38, 0.45) !important;
    border-color: #3a1215 !important;
}

body #es#es .es-upload-wrapper__attachment-list {
    background: transparent !important;
    background-color: transparent !important;
}

/* Avatar Mobile Fallback */
body #es#es .es-convo .o-avatar-v2__mobile {
    background: #3a1215 !important;
}

/* Buttons in Convo */
body #es#es .es-convo .btn-default,
body #es#es .es-convo .btn.btn-default {
    background: rgba(1, 11, 38, 0.6) !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

body #es#es .es-convo .btn-default:hover {
    background: rgba(221, 12, 21, 0.2) !important;
    color: #FFA200 !important;
}

/* Attached/Magnify Icon */
body #es#es .es-convo__attached-magnify-icon {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Neue Nachricht Button */
body #es#es .es-convo__sidebar-btn-new {
    color: #FFA200 !important;
}

/* Dropdown in Convo */
body #es#es .es-convo .dropdown-menu {
    background: #1A0A0B !important;
    border-color: #3a1215 !important;
}

body #es#es .es-convo .dropdown-menu a {
    color: #FFFFFF !important;
}

body #es#es .es-convo .dropdown-menu a:hover {
    background: rgba(221, 12, 21, 0.2) !important;
    color: #FFA200 !important;
}

/* Convo Links */
body #es#es .es-convo a {
    color: #FFFFFF !important;
}

body #es#es .es-convo__content-hd a {
    color: #FFA200 !important;
}

/* Nachrichtentext (es-convo-text) — war rgb(51,51,51) */
body #es#es .es-convo-text,
body #es#es .es-convo-text *,
body #es#es .es-convo__content-bd div,
body #es#es .es-convo__content-bd span,
body #es#es .es-convo__content-bd p {
    color: #FFFFFF !important;
}

/* Links in Nachrichten — gold */
body #es#es .es-convo-text a,
body #es#es .es-convo__content-bd a:not(.btn):not(.es-privacy-toggle):not(.o-avatar-v2__anchor),
body #es#es .es-convo__content a[href*="http"] {
    color: #FFA200 !important;
}

/* Sidebar Item Titel (Benutzernamen) — weiß */
body #es#es .es-convo__sidebar-item-title,
body #es#es .es-convo__sidebar-item-title * {
    color: #FFFFFF !important;
}

/* Sidebar Item Datum */
body #es#es .es-convo__sidebar-item .t-lg-mb--xs,
body #es#es .es-convo__sidebar-item-date,
body #es#es .es-convo__sidebar-item [class*="date"],
body #es#es .es-convo__sidebar-item .o-small {
    color: #EA6468 !important;
}

/* Edit/Pencil Icon im Header */
body #es#es .es-convo__content-hd-edit,
body #es#es .es-convo__content-hd-edit i,
body #es#es .es-convo__content-hd .fa-pencil-alt {
    color: #FFFFFF !important;
}

body #es#es .es-convo__content-hd-edit:hover,
body #es#es .es-convo__content-hd-edit:hover i {
    color: #FFA200 !important;
}

/* Ellipsis/Dropdown Button */
body #es#es .es-convo .btn-convo-dropdown,
body #es#es .es-convo .btn-convo-dropdown i,
body #es#es .es-convo .fa-ellipsis-h {
    color: #FFFFFF !important;
}

/* Attached File Size */
body #es#es .es-convo__attached-size {
    color: #EA6468 !important;
}

/* Username in Chat-Nachrichten */
body #es#es .es-convo__message-name,
body #es#es .es-convo__message-name a {
    color: #FFA200 !important;
}


/* ============================================================
   42. STORY FOOTER / META-BEREICHE (Posting-Box)
   Mood, GIF-Browser, Freunde-Tagging, Hintergrund-Auswahl
   ============================================================ */

/* Story Footer Container */
body #es#es .es-story-footer {
    background: transparent !important;
}

/* Story Meta Contents (Container fuer Mood, GIF, Friends, BG) */
body #es#es .es-story-meta-contents {
    background: #1A0A0B !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-story-meta-content {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

/* --- Freunde-Tagging (Textboxlist) --- */
body #es#es .es-story-friends-textbox,
body #es#es .es-story-friends-textbox.textboxlist,
body #es#es .es-story-friends .textboxlist,
body #es#es .textboxlist {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-textField,
body #es#es .textboxlist input[type="text"] {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-textField::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Ausgewaehlte Tags in Textboxlist */
body #es#es .textboxlist-item {
    background: rgba(221, 12, 21, 0.25) !important;
    border: 1px solid #DD0C15 !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-itemContent {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-itemRemoveButton {
    color: #f65b5b !important;
    background: transparent !important;
}

body #es#es .textboxlist-itemRemoveButton:hover {
    color: #FFFFFF !important;
}

/* --- Stimmung/Mood --- */
body #es#es .es-story-mood {
    background: #1A0A0B !important;
}

body #es#es .es-story-mood-form {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

body #es#es .es-story-mood-textbox {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-story-mood-textbox td {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .es-story-mood-verb,
body #es#es .es-story-mood-verb span {
    color: #FFA200 !important;
    background: rgba(221, 12, 21, 0.15) !important;
}

body #es#es .es-story-mood-presets {
    background: #1A0A0B !important;
}

body #es#es .es-story-mood-presets ul {
    background: transparent !important;
}

body #es#es .es-story-mood-preset {
    color: #FFFFFF !important;
    background: transparent !important;
}

body #es#es .es-story-mood-preset:hover {
    background: rgba(221, 12, 21, 0.2) !important;
}

body #es#es .es-story-mood-remove-button {
    color: #f65b5b !important;
}

/* --- GIF-Browser --- */
body #es#es .es-story-giphy,
body #es#es .es-story-giphy-wrapper {
    background: #1A0A0B !important;
}

body #es#es .es-gif-browser,
body #es#es .es-gif-browser.is-story,
body #es#es span.es-gif-browser {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
}

body #es#es .ed-giphy {
    background: #1A0A0B !important;
}

body #es#es .es-gif-browser__input-search {
    background: transparent !important;
}

body #es#es .es-gif-browser__input-search::before {
    display: none !important;
}

body #es#es .es-gif-browser__result {
    background: #1A0A0B !important;
}

body #es#es .es-gif-browser__result-label {
    color: #EA6468 !important;
}

body #es#es .es-gif-browser__result-footer {
    background: #1A0A0B !important;
}

body #es#es .es-gif-list-container {
    background: transparent !important;
}

body #es#es .es-gif-list {
    background: transparent !important;
}

body #es#es .es-gif-list li {
    background: transparent !important;
}

body #es#es .es-gif-holder {
    border-color: #3a1215 !important;
}

body #es#es .es-powered-by-giphy {
    background: transparent url('/images/seitenelemente/giphy.png') no-repeat !important;
    background-size: contain !important;
}

body #es#es .es-giphy-wrapper {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
}

/* --- Hintergrund-Auswahl (BG-Select) --- */
body #es#es .es-story-bg-menu {
    background: #1A0A0B !important;
}

body #es#es .es-story-bg-menu__item {
    background: transparent !important;
}

/* --- Story Meta Buttons (Icons unter Textarea) --- */
body #es#es .es-story-meta-buttons {
    background: transparent !important;
}

/* --- Story Actions (Teilen-Button Bereich) --- */
body #es#es .es-story-actions {
    background: transparent !important;
}

/* --- Privacy Dropdown --- */
body #es#es .es-privacy-menu {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

body #es#es .es-privacy-menu li {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .es-privacy-menu li a {
    color: #FFFFFF !important;
}

body #es#es .es-privacy-menu li:hover,
body #es#es .es-privacy-menu li:hover a {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

body #es#es .es-privacy-menu li.active a {
    color: #FFA200 !important;
}

body #es#es .es-privacy-toggle {
    color: #EA6468 !important;
}

body #es#es .es-privacy-custom-form,
body #es#es .es-privacy-field-form {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

/* --- Textboxlist Autocomplete Dropdown (Userauswahl) --- */
body #es#es .textboxlist-autocomplete,
body #es#es .textboxlist-autocomplete-inner {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-menu {
    background: #1A0A0B !important;
}

body #es#es .textboxlist-menuItem,
body #es#es .textboxlist-menu li {
    background: transparent !important;
    color: #FFFFFF !important;
}

body #es#es .textboxlist-menuItem:hover,
body #es#es .textboxlist-menu li:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

body #es#es .textboxlist-autocomplete-loading {
    background: #1A0A0B !important;
}

body #es#es .textboxlist-autocomplete-empty {
    background: #1A0A0B !important;
    color: #EA6468 !important;
}

body #es#es .textboxlist-autocomplete-empty-text {
    color: #EA6468 !important;
}

/* --- Story Meta Button Active State --- */
body #es#es .es-story-meta-button.active {
    background: rgba(221, 12, 21, 0.25) !important;
    border-color: #FFA200 !important;
    color: #FFA200 !important;
}

body #es#es .es-story-meta-button.active i,
body #es#es .es-story-meta-button.active span {
    color: #FFA200 !important;
}

/* --- Neue Updates vom Feed --- */
body #es#es .es-stream-notice,
body #es#es [data-stream-notice] {
    background: rgba(221, 12, 21, 0.15) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}


/* ============================================================
   43. FOTO-POPUP (Lightbox / Media Browser)
   ============================================================ */

/* --- Photo-Item: overflow visible damit Footer-Sidebar sichtbar --- */
#es#es.es-photo-popup .es-photo-item {
    overflow: visible !important;
}

/* --- Footer (rechte Sidebar mit Kommentaren) --- */
#es#es.es-photo-popup .es-photo-footer,
body #es#es.es-photo-popup .es-photo-footer {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
    border-left: 1px solid #3a1215 !important;
}

/* --- Foto-Owner & Album-Info --- */
#es#es.es-photo-popup .es-photo-owner,
#es#es.es-photo-popup .es-photo-owner a,
#es#es.es-photo-popup .es-photo-album,
#es#es.es-photo-popup .es-photo-album a {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-photo-owner a:hover,
#es#es.es-photo-popup .es-photo-album a:hover {
    color: #FFA200 !important;
}

/* --- Foto-Titel & Datum --- */
#es#es.es-photo-popup .es-photo-title,
#es#es.es-photo-popup .es-photo-title a,
#es#es.es-photo-popup .es-media-title,
#es#es.es-photo-popup .es-media-title a {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-photo-title a:hover,
#es#es.es-photo-popup .es-media-title a:hover {
    color: #FFA200 !important;
}

#es#es.es-photo-popup .es-photo-date,
#es#es.es-photo-popup .es-photo-date a,
#es#es.es-photo-popup .es-time-lapse,
#es#es.es-photo-popup .es-time-lapse a,
#es#es.es-photo-popup .es-media-info small,
#es#es.es-photo-popup .es-media-info small a {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-photo-date a:hover,
#es#es.es-photo-popup .es-time-lapse a:hover {
    color: #FFA200 !important;
}

/* --- Kommentar-Bereich im Popup --- */
#es#es.es-photo-popup .es-comments-wrap {
    background: rgba(1, 11, 38, 0.4) !important;
    border-color: #3a1215 !important;
}

#es#es.es-photo-popup .es-comments-control__load,
#es#es.es-photo-popup .es-comments-control__stats {
    background: transparent !important;
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-comment-content {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-comment__author,
#es#es.es-photo-popup .es-comment__author a {
    color: #FFA200 !important;
}

#es#es.es-photo-popup .es-comment-item-date,
#es#es.es-photo-popup .es-comment-item-date a {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-comment-item-date a:hover {
    color: #FFA200 !important;
}

/* Kommentar-Antworten-Link */
#es#es.es-photo-popup .es-comment-item-reply-wrap a {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-comment-item-reply-wrap a:hover {
    color: #FFA200 !important;
}

/* Kommentar-Aktions-Toggle (Chevron) */
#es#es.es-photo-popup .es-comment-actions-toggle {
    color: #EA6468 !important;
}

/* Mentions im Kommentar */
#es#es.es-photo-popup .mentions-user,
#es#es.es-photo-popup .mentions-hashtag {
    color: #FFA200 !important;
}

/* Alle Antworten ansehen */
#es#es.es-photo-popup .es-comment-item-loadreply a {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-comment-item-loadreply a:hover {
    color: #FFA200 !important;
}

/* --- Kommentar-Formular im Popup --- */
#es#es.es-photo-popup .es-comments-form {
    background: transparent !important;
}

#es#es.es-photo-popup .es-comments-form .es-form {
    background: rgba(1, 11, 38, 0.4) !important;
    border: 1px solid #3a1215 !important;
}

#es#es.es-photo-popup .es-comments-form textarea,
#es#es.es-photo-popup .es-comments-form input,
#es#es.es-photo-popup .es-comments-form .o-form-control {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-comments-form textarea::placeholder,
#es#es.es-photo-popup .es-comments-form .o-form-control::placeholder {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-comments-form__footer .btn {
    background: rgba(221, 12, 21, 0.2) !important;
    border-color: #3a1215 !important;
    color: #FFA200 !important;
}

#es#es.es-photo-popup .es-comments-form__footer .btn:hover {
    background: #DD0C15 !important;
    color: #FFA200 !important;
}

/* --- Attachment-Icons (Kamera, GIF, Smiley) --- */
#es#es.es-photo-popup .es-form-attach label,
#es#es.es-photo-popup .es-input-photo,
#es#es.es-photo-popup .es-input-gif,
#es#es.es-photo-popup .es-input-smiley {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-input-smiley__popup {
    background: #1A0A0B !important;
    border-color: #3a1215 !important;
}

/* --- Reaktionen / Likes --- */
#es#es.es-photo-popup .es-reaction-option__link {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-reaction-option__link:hover {
    color: #FFA200 !important;
}

/* --- Privacy-Toggle im Popup --- */
#es#es.es-photo-popup .es-privacy-toggle {
    color: #EA6468 !important;
}

/* --- Dropdown-Menues im Popup --- */
#es#es.es-photo-popup .dropdown-menu {
    background: #250d0e !important;
    border-color: #3a1215 !important;
}

#es#es.es-photo-popup .dropdown-menu li a {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .dropdown-menu li a:hover {
    background: rgba(221, 12, 21, 0.25) !important;
    color: #FFA200 !important;
}

#es#es.es-photo-popup .dropdown-menu .divider {
    border-color: #3a1215 !important;
    background: #3a1215 !important;
}

/* --- Header / Navigation im Popup --- */
#es#es.es-photo-popup .es-photo-header {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .btn-photo-popup-nav-item {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .btn-photo-popup-nav-item:hover {
    color: #FFA200 !important;
}

/* --- Close-Button --- */
#es#es.es-photo-popup .es-photo-close-button,
#es#es.es-photo-popup .es-photo-popup-close a {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-photo-close-button:hover,
#es#es.es-photo-popup .es-photo-popup-close a:hover {
    color: #FFA200 !important;
}

/* --- Foto-Formular (Titel/Caption bearbeiten) --- */
#es#es.es-photo-popup .es-photo-form-fields input,
#es#es.es-photo-popup .es-photo-form-fields textarea {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-photo-form-fields input::placeholder,
#es#es.es-photo-popup .es-photo-form-fields textarea::placeholder {
    color: #EA6468 !important;
}

/* --- Foto-Meta (Datum-Formular) --- */
#es#es.es-photo-popup .es-photo-meta-field {
    color: #EA6468 !important;
}

#es#es.es-photo-popup .es-photo-date-form {
    background: #250d0e !important;
    border-color: #3a1215 !important;
}

#es#es.es-photo-popup .es-photo-date-form input,
#es#es.es-photo-popup .es-photo-date-form select {
    background: rgba(1, 11, 38, 0.6) !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

/* --- Tag-Hinweis --- */
#es#es.es-photo-popup .es-photo-hint {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

/* --- Gemeldet-Hinweis --- */
#es#es.es-photo-popup .es-comment-reported {
    color: #EA6468 !important;
}

/* --- Privacy-Menues im Popup --- */
#es#es.es-photo-popup .es-privacy-menu {
    background: #250d0e !important;
    border-color: #3a1215 !important;
}

#es#es.es-photo-popup .es-privacy-menu a {
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .es-privacy-menu a:hover {
    color: #FFA200 !important;
}

#es#es.es-photo-popup .es-privacy-menu .active a {
    color: #FFA200 !important;
}

/* --- Allgemeine Links im Footer --- */
#es#es.es-photo-popup .es-photo-footer a {
    color: #FFA200 !important;
}

/* --- Tag-Liste (leer) --- */
#es#es.es-photo-popup .es-photo-tag-list-dropdown {
    background: #250d0e !important;
    border-color: #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es.es-photo-popup .empty-tags-hint {
    color: #EA6468 !important;
}


/* ============================================================
   44. FOTO-DETAILSEITE (Standalone /fotos/fotos/...)
   ============================================================ */

/* --- Foto-Content Hintergrund (überschreibt #eee aus style.min.css) --- */
#es#es .es-photo-item .es-photo-content {
    background: #1A0A0B !important;
}

/* --- Footer (Sidebar mit Kommentaren auf Detailseite) --- */
#es#es .es-photo-item .es-photo-footer {
    background: #1A0A0B !important;
    color: #FFFFFF !important;
    border-left: 1px solid #3a1215 !important;
}

/* --- Foto-Owner & Album-Info --- */
#es#es .es-photo-item .es-photo-owner,
#es#es .es-photo-item .es-photo-owner a,
#es#es .es-photo-item .es-photo-album,
#es#es .es-photo-item .es-photo-album a {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .es-photo-owner a:hover,
#es#es .es-photo-item .es-photo-album a:hover {
    color: #FFA200 !important;
}

/* --- Foto-Titel & Datum --- */
#es#es .es-photo-item .es-photo-title,
#es#es .es-photo-item .es-photo-title a,
#es#es .es-photo-item .es-media-title,
#es#es .es-photo-item .es-media-title a {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .es-photo-title a:hover,
#es#es .es-photo-item .es-media-title a:hover {
    color: #FFA200 !important;
}

#es#es .es-photo-item .es-photo-date,
#es#es .es-photo-item .es-photo-date a,
#es#es .es-photo-item .es-time-lapse,
#es#es .es-photo-item .es-time-lapse a,
#es#es .es-photo-item .es-media-info small,
#es#es .es-photo-item .es-media-info small a {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-photo-date a:hover,
#es#es .es-photo-item .es-time-lapse a:hover {
    color: #FFA200 !important;
}

/* --- Kommentar-Bereich --- */
#es#es .es-photo-item .es-comments-wrap {
    background: rgba(1, 11, 38, 0.4) !important;
    border-color: #3a1215 !important;
}

#es#es .es-photo-item .es-comments-control__load,
#es#es .es-photo-item .es-comments-control__stats {
    background: transparent !important;
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-comment-content {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .es-comment__author,
#es#es .es-photo-item .es-comment__author a {
    color: #FFA200 !important;
}

#es#es .es-photo-item .es-comment-item-date,
#es#es .es-photo-item .es-comment-item-date a {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-comment-item-date a:hover {
    color: #FFA200 !important;
}

/* Kommentar-Antworten-Link */
#es#es .es-photo-item .es-comment-item-reply-wrap a {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-comment-item-reply-wrap a:hover {
    color: #FFA200 !important;
}

/* Kommentar-Aktions-Toggle */
#es#es .es-photo-item .es-comment-actions-toggle {
    color: #EA6468 !important;
}

/* Mentions im Kommentar */
#es#es .es-photo-item .mentions-user,
#es#es .es-photo-item .mentions-hashtag {
    color: #FFA200 !important;
}

/* Alle Antworten ansehen */
#es#es .es-photo-item .es-comment-item-loadreply a {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-comment-item-loadreply a:hover {
    color: #FFA200 !important;
}

/* --- Kommentar-Formular --- */
#es#es .es-photo-item .es-comments-form {
    background: transparent !important;
}

#es#es .es-photo-item .es-comments-form .es-form {
    background: rgba(1, 11, 38, 0.4) !important;
    border: 1px solid #3a1215 !important;
}

#es#es .es-photo-item .es-comments-form textarea,
#es#es .es-photo-item .es-comments-form input,
#es#es .es-photo-item .es-comments-form .o-form-control {
    background: rgba(1, 11, 38, 0.6) !important;
    border: 1px solid #3a1215 !important;
    color: #FFFFFF !important;
}

#es#es .es-photo-item .es-comments-form textarea::placeholder,
#es#es .es-photo-item .es-comments-form .o-form-control::placeholder {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-comments-form__footer .btn {
    background: rgba(221, 12, 21, 0.2) !important;
    border-color: #3a1215 !important;
    color: #FFA200 !important;
}

#es#es .es-photo-item .es-comments-form__footer .btn:hover {
    background: #DD0C15 !important;
    color: #FFA200 !important;
}

/* --- Attachment-Icons --- */
#es#es .es-photo-item .es-form-attach label,
#es#es .es-photo-item .es-input-photo,
#es#es .es-photo-item .es-input-gif,
#es#es .es-photo-item .es-input-smiley {
    color: #EA6468 !important;
}

/* --- Reaktionen / Likes --- */
#es#es .es-photo-item .es-reaction-option__link {
    color: #EA6468 !important;
}

#es#es .es-photo-item .es-reaction-option__link:hover {
    color: #FFA200 !important;
}

/* --- Privacy-Toggle --- */
#es#es .es-photo-item .es-privacy-toggle {
    color: #EA6468 !important;
}

/* --- Dropdown-Menues --- */
#es#es .es-photo-item .dropdown-menu {
    background: #250d0e !important;
    border-color: #3a1215 !important;
}

#es#es .es-photo-item .dropdown-menu li a {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .dropdown-menu li a:hover {
    background: rgba(221, 12, 21, 0.25) !important;
    color: #FFA200 !important;
}

#es#es .es-photo-item .dropdown-menu .divider {
    border-color: #3a1215 !important;
    background: #3a1215 !important;
}

/* --- Header / Navigation --- */
#es#es .es-photo-item .es-photo-header {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .btn-photo-popup-nav-item {
    color: #FFFFFF !important;
}

#es#es .es-photo-item .btn-photo-popup-nav-item:hover {
    color: #FFA200 !important;
}

/* --- Allgemeine Links im Footer --- */
#es#es .es-photo-item .es-photo-footer a {
    color: #FFA200 !important;
}


/* ============================================================
   45. PUNKTEVERLAUF / TIMELINE
   ============================================================ */

#es#es .es-timeline__content {
    background: rgba(221, 12, 21, 0.08) !important;
    border: 1px solid #3a1215 !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
}

#es#es .es-timeline__content * {
    color: #FFFFFF !important;
}

#es#es .es-timeline__content .es-muted,
#es#es .es-timeline__content .o-small,
#es#es .es-timeline__content time {
    color: #EA6468 !important;
}

/* Timeline-Dot (gruen -> gold) */
#es#es .es-timeline__dot {
    background: #DD0C15 !important;
    border: 2px solid #FFA200 !important;
}

/* Timeline-Linie */
#es#es .es-timeline__line,
#es#es .es-timeline::before {
    background: #3a1215 !important;
}


/* ============================================================
   46. LEADERBOARD TABELLE (Aktivste Benutzer)
   ============================================================ */

#es#es .view-leaderboard thead {
    background: rgba(221, 12, 21, 0.15) !important;
}

#es#es .view-leaderboard thead th {
    background: transparent !important;
    color: #FFA200 !important;
    border-color: #3a1215 !important;
}

#es#es .view-leaderboard tbody tr {
    background: transparent !important;
    border-color: #3a1215 !important;
}

#es#es .view-leaderboard tbody tr:hover {
    background: rgba(221, 12, 21, 0.1) !important;
}

#es#es .view-leaderboard tbody td {
    color: #FFFFFF !important;
    border-color: #3a1215 !important;
}

#es#es .view-leaderboard table {
    border-color: #3a1215 !important;
}


/* ============================================================
   47. STAGE / CURTAIN (Oberer Bereich auf Leaderboard, Punkte, Abzeichen)
   ============================================================ */

#es#es .es-stage__curtain {
    background-image: linear-gradient(#1A0A0B 50%, transparent 50%) !important;
    background-color: transparent !important;
}

#es#es .es-stage__curtain.es-bleed--top {
    background-image: linear-gradient(#1A0A0B 50%, transparent 50%) !important;
}

#es#es .es-stage__title {
    color: #FFA200 !important;
}

#es#es .es-stage__desc {
    color: #FFFFFF !important;
}

#es#es .es-stage__desc label {
    color: #FFFFFF !important;
}

#es#es .es-stage__desc a {
    color: #FFA200 !important;
}


/* ============================================================
   48. FORMULAR-AKTIONSLEISTE (Abbrechen / Speichern)
   ============================================================ */

#es#es .es-forms__actions,
#es#es .o-form-actions {
    background: rgba(26, 10, 11, 0.6) !important;
    border-top: 1px solid #3a1215 !important;
}


/* ============================================================
   49. DATEPICKER
   ============================================================ */

#es#es .datepicker {
    background: #1A0A0B !important;
    border: 1px solid #3a1215 !important;
    border-radius: 4px !important;
}

#es#es .datepicker table {
    background: transparent !important;
}

#es#es .datepicker thead th,
#es#es .datepicker .switch,
#es#es .datepicker .prev,
#es#es .datepicker .next {
    background: transparent !important;
    color: #FFFFFF !important;
}

#es#es .datepicker thead th:hover,
#es#es .datepicker .switch:hover,
#es#es .datepicker .prev:hover,
#es#es .datepicker .next:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

#es#es .datepicker .dow {
    color: #EA6468 !important;
}

#es#es .datepicker td.day,
#es#es .datepicker span.month,
#es#es .datepicker span.year {
    background: transparent !important;
    color: #FFFFFF !important;
}

#es#es .datepicker td.day:hover,
#es#es .datepicker span.month:hover,
#es#es .datepicker span.year:hover {
    background: rgba(221, 12, 21, 0.3) !important;
    color: #FFA200 !important;
}

#es#es .datepicker td.day.old,
#es#es .datepicker td.day.new,
#es#es .datepicker span.year.old {
    color: #EA6468 !important;
}

#es#es .datepicker td.day.active,
#es#es .datepicker span.month.active,
#es#es .datepicker span.year.active {
    background: #DD0C15 !important;
    color: #FFA200 !important;
}

#es#es .datepicker td.day.disabled,
#es#es .datepicker span.month.disabled,
#es#es .datepicker span.year.disabled {
    color: rgba(234, 100, 104, 0.4) !important;
}

#es#es .datepicker td.day.today {
    background: rgba(255, 162, 0, 0.15) !important;
    color: #FFA200 !important;
}