/* ===== HemdoMania Mobile Style ===== */
/* WICHTIG: style.css muss als separater <link> VOR dieser Datei im HTML stehen.
   @import blockiert das Rendering und verdoppelt die Ladezeit.
   In mobile_index.php einfügen:
   <link rel="stylesheet" href="style.css?v=...">
   <link rel="stylesheet" href="mobile_style.css?v=...">
*/

/* ===== RESET ===== */
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
    -webkit-tap-highlight-color: transparent;
}

/* ===== TOP BAR (Pfeil · Logo-Slideshow · Profil) ===== */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr 44px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-sizing: border-box;
}

/* Wrapper Nav-Pfeil links */
.top-bar-left {
    display: flex;
    align-items: center;
}

/* Nav-Pfeil links */
.top-nav-arrow {
    width: 44px; height: 44px;
    border: none;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
}
.top-nav-arrow:active { background: rgba(255,255,255,0.16); transform: scale(0.92); }
.top-nav-arrow img { width: 22px; height: 22px; object-fit: contain; }

/* HemdoMania Logo mittig = Teilen-Button */
.top-logo-wrap {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    /* Reset, falls als <button> verwendet */
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.2s;
}
.top-logo-share:active {
    transform: scale(0.94);
    opacity: 0.85;
}
.top-logo-wrap .top-logo {
    /* Neues Logo ca. 3:1 -> bei 26px Hoehe rund 78px breit. */
    max-height: 26px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.top-logo-share-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
}
.top-logo-share:hover .top-logo-share-label,
.top-logo-share:active .top-logo-share-label {
    color: var(--orange);
}

/* Profil rechts */
.top-profile-btn {
    width: 44px; height: 44px;
    border: 2px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.2s;
}
.top-profile-btn:active { transform: scale(0.92); border-color: #fc6e51; }
.top-profile-btn img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ===== FIXED LAYOUT: PLAYER ===== */
/* Top-Bar 56px, unten 62px für die Bottom-Bar */
.mobile-player-wrap {
    position: fixed;
    top: calc(56px + var(--status-bar-height, 0px));
    left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    z-index: 1;
    background: #000;
    overflow: hidden;
}

/* ===== PLAYER MEDIA (füllt Wrapper komplett) ===== */
.mobile-player-wrap #playerMedia,
.mobile-player-wrap .player-media {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: #000;
    overflow: hidden;
}
.mobile-player-wrap #playerMedia video,
.mobile-player-wrap .player-media video {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    background: #000;
}
.mobile-player-wrap #playerMedia img,
.mobile-player-wrap .player-media img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}
.mobile-player-wrap .text-post-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 76px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a00 100%);
}

/* ===== PLAYER OVERLAYS (mobile angepasst) ===== */
.mobile-player-wrap .player-info-overlay {
    position: absolute !important;
    bottom: 28px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 50px 84px 14px 14px;
    background: transparent !important;
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}
.mobile-player-wrap .player-info-overlay * { pointer-events: auto; }
/* Progress-Bar sitzt ganz unten im Player */
.mobile-player-wrap .player-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    z-index: 22;
}

/* ===== BOTTOM BAR (fest, wie Top-Bar) ===== */
.mobile-bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px env(safe-area-inset-bottom, 0px) 8px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 20;
    box-sizing: border-box;
}
.mbottom-btn {
    flex: 1;
    height: 100%;
    max-width: 72px;
    border: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 0 4px;
    transition: transform 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
}
.mbottom-btn:active {
    transform: scale(0.92);
}
/* Icon-Kreis */
.mbottom-btn img {
    width: 48px; height: 48px;
    padding: 10px;
    object-fit: contain;
    display: block;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    box-sizing: border-box;
    transition: background 0.2s, box-shadow 0.2s;
}
.mbottom-btn:active img {
    background: rgba(255,255,255,0.18);
}
/* Senden/Chat-Icon */
.mbottom-btn-send img {
    padding: 12px;
}
/* Label unter dem Icon */
.mbottom-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    line-height: 1;
    letter-spacing: 0.2px;
    max-width: 64px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Like-Button bei aktivem Zustand */
.mbottom-btn-like.liked img {
    background: rgba(252,110,81,0.25);
    box-shadow: 0 0 14px rgba(252,110,81,0.4);
}

/* ===== PANEL UPLOAD ===== */
.panel-upload-float {
    position: absolute;
    bottom: 88px; left: 12px;
    background: linear-gradient(135deg, #fc6e51, #ff8a70);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 5px;
    z-index: 15;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(252,110,81,0.4);
}
.panel-upload-float.visible { display: flex; }

/* ===== LOADER ===== */
#app-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #000 0%, #1a0a00 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s;
}
.loader-logo { width: 170px; height: auto; object-fit: contain; margin-bottom: 40px; }
.loader-spinner {
    width: 42px; height: 42px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #fc6e51;
    border-right-color: #00f2ff;
    border-radius: 50%;
    animation: hmSpin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes hmSpin { to { transform: rotate(360deg); } }
.loader-text { color: rgba(255,255,255,0.7); font-size: 14px; }
.loader-progress {
    width: 160px; height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
}
.loader-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fc6e51, #00f2ff);
    width: 0%;
    transition: width 0.3s;
}

/* ===== NAV PANEL (2-Ebenen) ===== */
.mnav-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 398;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mnav-backdrop.open { display: block; animation: mnavFade 0.2s ease; }
@keyframes mnavFade { from { opacity: 0; } to { opacity: 1; } }

.mnav-panel {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 340px);
    height: 100%;
    background: rgba(14,14,14,0.98);
    border-right: 1px solid rgba(255,255,255,0.08);
    z-index: 400;
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0,0,0,0.6);
    overflow: hidden;
}
.mnav-panel.open { transform: translateX(0); }

.mnav-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, rgba(252,110,81,0.12), rgba(0,0,0,0.3));
}
.mnav-logo { height: 26px; width: auto; max-width: 60%; object-fit: contain; }
.mnav-close {
    width: 36px; height: 36px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mnav-close:active { background: rgba(255,255,255,0.16); }

/* Levels (die zwei Ebenen) */
.mnav-level {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 20px;
    display: block;
}
.mnav-level-1 {
    display: block;
}
.mnav-level-1.hidden { display: none; }
.mnav-level-2 {
    display: none;
    animation: mnavSlideIn 0.22s ease;
}
.mnav-level-2.active { display: block; }
@keyframes mnavSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mnav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 12px 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.mnav-back:active { background: rgba(255,255,255,0.1); }

/* Nav-Items */
.mnav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    cursor: pointer;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    transition: background 0.12s;
}
.mnav-item:active { background: rgba(255,255,255,0.07); }

.mnav-icon {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.mnav-icon img {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
}
.mnav-emoji {
    font-size: 18px;
    line-height: 1;
    background: rgba(255,255,255,0.04);
}

.mnav-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mnav-title { font-size: 14px; font-weight: 600; }
.mnav-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }

.mnav-chevron {
    margin-left: auto;
    color: rgba(255,255,255,0.4);
    font-size: 20px;
    font-weight: 300;
    padding-right: 4px;
}

/* Stories prominent (ganz oben in Ebene 1) */
.mnav-stories {
    margin: 4px 10px 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fc6e51 0%, #ff8c00 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(252,110,81,0.35);
}
.mnav-stories:active { filter: brightness(0.9); background: linear-gradient(135deg, #fc6e51 0%, #ff8c00 100%); }
.mnav-stories .mnav-title { color: #fff; font-weight: 700; }
.mnav-stories .mnav-sub { color: rgba(255,255,255,0.85); }
.mnav-stories-icon {
    background: rgba(255,255,255,0.22);
    border-radius: 50%;
}
.mnav-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.6);
}

/* Highlight (Login, Panel, Logout etc.) */
.mnav-highlight {
    background: linear-gradient(135deg, rgba(252,110,81,0.12) 0%, rgba(255,140,0,0.06) 100%);
    border-left: 3px solid #fc6e51;
    padding-left: 15px;
}
.mnav-highlight .mnav-title { color: #fc6e51; }

.mnav-participate {
    margin: 6px 10px;
    border: 1px solid rgba(252,110,81,0.3);
    background: rgba(252,110,81,0.08);
    border-radius: 12px;
}

/* Mehr-Button dezent hervorheben */
.mnav-item-more {
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.mnav-item-more .mnav-title { color: rgba(255,255,255,0.95); font-weight: 700; }

/* Legal Links */
.mnav-legal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: center;
    padding: 18px 14px 14px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.mnav-legal-row a {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
}
.mnav-legal-row a:active { color: rgba(255,255,255,0.6); }

/* ===== FULLSCREEN ===== */
body.fullscreen-mode .top-bar,
body.fullscreen-mode .mobile-bottom-actions { display: none !important; }
body.fullscreen-mode .mobile-player-wrap { top: 0 !important; bottom: 0 !important; }
body.fullscreen-mode .mobile-player-wrap .player-info-overlay { bottom: 0 !important; }
body.fullscreen-mode .mobile-player-wrap .player-progress { bottom: 0 !important; }

/* ===== AUTOPLAY NEXT OVERLAY (mobile) ===== */
.autoplay-next-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: fadeInOverlay 0.3s ease;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
.autoplay-next-box {
    text-align: center;
    padding: 24px 20px;
    max-width: 280px;
}
.autoplay-next-text {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.autoplay-next-text span {
    color: #fc6e51;
    font-weight: 700;
    font-size: 18px;
}
.autoplay-next-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.autoplay-next-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}
.autoplay-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.autoplay-btn-skip {
    background: linear-gradient(135deg, #fc6e51, #ff8a70);
    color: #fff;
}
.autoplay-btn-cancel {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
}
.autoplay-progress-ring {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}
.autoplay-progress-fill {
    height: 100%;
    background: #fc6e51;
    width: 0%;
    transition: width 0.3s linear;
    border-radius: 2px;
}

/* ===== SEARCH RESULT ITEMS (mobile Sicherung) ===== */
.search-overlay-results {
    max-height: 50vh;
    overflow-y: auto;
    text-align: left;
    -webkit-overflow-scrolling: touch;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.search-result-item:active { background: rgba(252,110,81,0.15); }
.search-result-thumb {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-no-results {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}

/* ===== KLEINE SCREENS ===== */
@media (max-width: 360px) {
    .top-bar { grid-template-columns: auto 1fr 40px; gap: 8px; padding: 0 10px; }
    .top-nav-arrow, .top-profile-btn { width: 40px; height: 40px; }
    .top-nav-arrow img { width: 20px; height: 20px; }
    .top-logo-wrap .top-logo { max-height: 24px; max-width: 130px; }
    .top-logo-share-label { font-size: 8px; }
    .mobile-bottom-actions { gap: 32px; height: 100px; padding-top: 12px; }
    .mbottom-btn { width: 56px; height: auto; }
    .mbottom-btn img { width: 56px; height: 56px; padding: 10px; }
    .mbottom-btn-send img { padding: 13px; }
    .mbottom-label { font-size: 10px; }
}

/* ===== VIDEO OVERLAY BANNER ===== */
#videoOverlayBanner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateY(12px);
    width: 200px;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#videoOverlayBanner.vob-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: auto;
}
.vob-inner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.65);
    background: #000;
    cursor: pointer;
}
.vob-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}
.vob-timer-bar {
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    background: rgba(255,140,0,0.9);
    width: 100%;
    transform-origin: left center;
}
.vob-close {
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.vob-close:hover { background: rgba(220,50,0,0.85); }
.vob-badge {
    position: absolute;
    bottom: 5px; left: 7px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* ===== BOTTOM-SHEET MODALS (Comment + Contact) ===== */
/* Overlay: Backdrop bleibt voll, aber Inhalt wird unten ausgerichtet */
#commentModal.modal-overlay,
#contactModal.modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    background: rgba(0,0,0,0.6);
    /* Backdrop sanft einblenden */
    transition: background 0.25s ease;
}

/* Die eigentliche Sheet-Box: volle Breite, abgerundet oben, slide-up von unten */
#commentModal .modal-box.comment-box,
#contactModal .modal-box.contact-box {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 24px 24px 0 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.6);
    /* Slide-up beim Öffnen */
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#commentModal.modal-overlay.active .modal-box.comment-box,
#contactModal.modal-overlay.active .modal-box.contact-box {
    transform: translateY(0);
}

/* Optionaler kleiner Drag-Handle oben */
#commentModal .modal-box.comment-box::before,
#contactModal .modal-box.contact-box::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    pointer-events: none;
    z-index: 10;
}

/* Comment-Box: Content-Padding kompensiert den Drag-Handle */
#commentModal .modal-box.comment-box {
    max-height: 85vh;
}
#commentModal .modal-box.comment-box .comment-head {
    padding-top: 22px;
}

/* Contact-Box: gleiches Bottom-Sheet-Look */
#contactModal .modal-box.contact-box {
    padding: 28px 20px 20px 20px;
    max-height: 85vh;
    overflow-y: auto;
}

/* Close-Button auf Bottom-Sheets sauber positionieren */
#commentModal .modal-close,
#contactModal .modal-close {
    top: 14px; right: 14px;
}

/* ===== MINI-FOOTER (Impressum · Datenschutz · ©) ===== */
.mobile-mini-footer {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px env(safe-area-inset-bottom, 0px) 12px;
    background: rgba(0,0,0,0.96);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    z-index: 25;
    box-sizing: content-box;
    white-space: nowrap;
    overflow: hidden;
}
.mobile-mini-footer a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}
.mobile-mini-footer a:active,
.mobile-mini-footer a:hover {
    color: var(--orange);
}
.mobile-mini-footer .mmf-sep {
    color: rgba(255,255,255,0.2);
}
.mobile-mini-footer .mmf-copy {
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.2px;
}
/* Im Vollbild verstecken (passt zur bestehenden Logik der Bottom-Actions) */
body.fullscreen-mode .mobile-mini-footer { display: none !important; }

/* ===== Video Author Modal - Posts Grid ===== */
.author-modal-posts-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--orange);
    margin: 0 0 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 16px;
}
.author-modal-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.author-modal-post-item {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    transition: transform 0.15s, background 0.15s;
}
.author-modal-post-item:hover { transform: scale(1.04); background: rgba(255,255,255,0.12); }
.amp-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.amp-thumb-text {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #1a1a2e;
}
.amp-title {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    padding: 4px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.amp-load-more {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 4px;
    padding: 10px 0;
    background: rgba(252,110,81,0.12);
    border: 1px solid rgba(252,110,81,0.35);
    border-radius: 8px;
    color: #fc6e51;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.amp-load-more:hover { background: rgba(252,110,81,0.22); border-color: #fc6e51; }

/* ===== Mobile Autor-Button über Herz ===== */
.mbottom-btn-author { padding: 4px; }
.mbottom-author-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.25);
    transition: border-color 0.2s;
}
.mbottom-btn-author:active .mbottom-author-pic { border-color: var(--orange); }

/* ===== FAVORITEN-BUTTON (Bottom-Actions) ===== */
.mbottom-btn-fav {
    position: relative;
}
.mbottom-fav-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    position: relative;
    transition: background 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.mbottom-btn-fav:active .mbottom-fav-wrap {
    background: rgba(255,255,255,0.18);
}
.mbottom-btn-fav.fav-active .mbottom-fav-wrap {
    background: rgba(255,215,0,0.15);
    box-shadow: 0 0 16px rgba(255,215,0,0.35);
}

/* Burst-Partikel-Ring beim Hinzufügen */
.mbottom-fav-burst {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
@keyframes favBurstRing {
    0%   { box-shadow: 0 0 0 0px rgba(255,215,0,0.7); opacity: 1; }
    100% { box-shadow: 0 0 0 24px rgba(255,215,0,0); opacity: 0; }
}
@keyframes favStarPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.mbottom-btn-fav.fav-burst-play .mbottom-fav-burst {
    animation: favBurstRing 0.6s ease-out forwards;
}
.mbottom-btn-fav.fav-burst-play #favIcon {
    animation: favStarPop 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Responsive: bei breiten Displays etwas mehr Innenabstand */
@media (min-width: 400px) {
    .mobile-bottom-actions { padding-left: 16px; padding-right: 16px; }
}

/* ===== PLUS-BUTTON (5. Button, Mitte) ===== */
.mbottom-btn-plus {
    text-decoration: none;
}
.mbottom-btn-plus img {
    /* Orangefarbener Glow für den Plus-Button */
    background: rgba(252,110,81,0.18) !important;
    box-shadow: 0 0 0 2px rgba(252,110,81,0.45);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.mbottom-btn-plus:active img {
    background: rgba(252,110,81,0.35) !important;
    box-shadow: 0 0 0 3px rgba(252,110,81,0.7);
    transform: scale(0.92);
}

/* ===== CHAT-BUTTON ===== */
.mbottom-btn-chat img {
    padding: 14px;
}

/* Wrapper für Icon + Badge */
.mbottom-chat-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mbottom-chat-wrap img {
    width: 48px;
    height: 48px;
}

/* Unread-Badge */
.chat-unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    background: #fc6e51;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #000;
    line-height: 1;
    animation: badgePulse 1.8s ease-in-out infinite;
    z-index: 2;
}
@keyframes badgePulse {
    0%   { box-shadow: 0 0 0 2px #000, 0 0 0 0px rgba(252,110,81,0.7); }
    50%  { box-shadow: 0 0 0 2px #000, 0 0 0 6px rgba(252,110,81,0); }
    100% { box-shadow: 0 0 0 2px #000, 0 0 0 0px rgba(252,110,81,0); }
}

/* ===== CHAT PANEL (Slide-in von rechts) ===== */
.chat-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 300;
    pointer-events: none;
    transition: background 0.3s ease;
}
.chat-panel-backdrop.open {
    background: rgba(0,0,0,0.55);
    pointer-events: auto;
}

.chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 360px);
    background: #111;
    z-index: 301;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.7);
    border-left: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.chat-panel.open {
    transform: translateX(0);
}

/* Header */
.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    background: rgba(252,110,81,0.08);
    flex-shrink: 0;
}
.chat-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.chat-panel-close {
    width: 32px; height: 32px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.chat-panel-close:active { background: rgba(255,255,255,0.2); }

/* Sections */
.chat-panel-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-panel-section-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 16px 6px;
    flex-shrink: 0;
}

/* Online-Liste */
.chat-online-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.chat-online-loading {
    padding: 24px 16px;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    text-align: center;
}
.chat-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.chat-user-item:active { background: rgba(255,255,255,0.07); }
.chat-user-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.chat-user-info { flex: 1; min-width: 0; }
.chat-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-user-status {
    font-size: 11px;
    color: #4cd964;
    margin-top: 2px;
}
.chat-user-unread {
    background: #fc6e51;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.chat-no-users {
    padding: 24px 16px;
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}

/* Aktiver Chat */
.chat-active-section { overflow: hidden; }
.chat-panel-back-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.chat-panel-back {
    border: none;
    background: transparent;
    color: #fc6e51;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}
.chat-active-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-msg {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.chat-msg-out {
    align-self: flex-end;
    background: #fc6e51;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-in {
    align-self: flex-start;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-bottom-left-radius: 4px;
}
.chat-msg-time {
    font-size: 10px;
    opacity: 0.55;
    margin-top: 3px;
    text-align: right;
}
.chat-msg-in .chat-msg-time { text-align: left; }
.chat-msg-empty {
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    text-align: center;
    margin-top: 30px;
}

/* Input-Zeile */
.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.4);
    flex-shrink: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.chat-input {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    padding: 9px 14px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus { border-color: rgba(252,110,81,0.6); }
.chat-input::placeholder { color: rgba(255,255,255,0.3); }
.chat-send-btn {
    width: 40px; height: 40px;
    border: none;
    background: #fc6e51;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}
.chat-send-btn:active { background: #e05a3e; transform: scale(0.92); }

/* Gast-Nachricht */
.chat-guest-section {
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    gap: 16px;
    text-align: center;
}
.chat-guest-msg {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* ===== ICON-WRAP + COUNT-BADGE (Kommentare & Like) ===== */
.mbottom-icon-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mbottom-icon-wrap img {
    width: 48px;
    height: 48px;
}
.mbottom-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: #fc6e51;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(10,10,10,0.96);
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* ===== CHAT STATUS ONLINE/OFFLINE ===== */
.chat-status-online  { color: #4cd964; font-size: 11px; margin-top: 2px; }
.chat-status-offline { color: rgba(255,255,255,0.3); font-size: 11px; margin-top: 2px; }

/* ===================================================================
   Chat-Tabs, Freunde & User-Suche
   =================================================================== */

/* Tabs */
.chat-tabs {
    display: none; /* per JS auf flex gesetzt wenn eingeloggt */
    flex-direction: row;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 12px;
    flex-shrink: 0;
}
.chat-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    font-family: inherit;
}
.chat-tab--active {
    color: #fc6e51;
    border-bottom-color: #fc6e51;
}
.chat-tab:hover:not(.chat-tab--active) {
    color: rgba(255,255,255,0.8);
}

/* Suchfeld */
.chat-search-wrap {
    padding: 10px 12px 6px;
    width: 100%;
    flex-shrink: 0;
}
.chat-search-input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    padding: 8px 14px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s;
}
.chat-search-input:focus { border-color: #fc6e51; }
.chat-search-input::placeholder { color: rgba(255,255,255,0.3); }

/* Profil-Link im User-Item */
.chat-user-profile-link {
    color: rgba(255,255,255,0.3);
    font-size: 15px;
    margin-left: 6px;
    text-decoration: none;
    flex-shrink: 0;
    transition: color .12s;
}
.chat-user-profile-link:hover { color: #fc6e51; }
.chat-user-avatar { cursor: pointer; }

/* Aktiver Chat-Header mit Avatar + Profil-Link */
.chat-active-name-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    flex: 1;
    overflow: hidden;
}
.chat-active-name-link:hover .chat-active-name { color: #fc6e51; }
.chat-active-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fc6e51;
    flex-shrink: 0;
}

/* ===== BENACHRICHTIGUNGS-DROPDOWN (Info-Icon oben rechts) ===== */
/* Badge für neue Nachrichten / Freundschaftsanfragen - deutlich sichtbar */
.top-notif-badge {
    box-sizing: border-box;
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #ff2d2d;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Weißer Ring trennt das Badge klar vom Icon und vom Video dahinter */
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 8px rgba(255,45,45,0.8);
    z-index: 3;
    pointer-events: none;
    animation: hmNotifPulse 1.8s ease-in-out infinite;
}
@keyframes hmNotifPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 8px rgba(255,45,45,0.8); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 14px rgba(255,45,45,1); }
}
.notif-backdrop {
    position: fixed; inset: 0; z-index: 1099; background: transparent;
}
.notif-dropdown {
    position: absolute; top: 56px; right: 8px; z-index: 1100;
    width: 300px; max-width: calc(100vw - 16px);
    max-height: 70vh; overflow-y: auto;
    background: #1c1c1c; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    -webkit-overflow-scrolling: touch;
}
.notif-dropdown-header {
    padding: 14px 16px 10px; font-size: 15px; font-weight: 700;
    color: #fff; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.notif-dropdown-section { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.notif-dropdown-section:last-child { border-bottom: none; }
.notif-dropdown-label {
    padding: 4px 16px 8px; font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .03em;
}
.notif-empty {
    padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,0.35); text-align: center;
}
.notif-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; transition: background .12s;
}
.notif-item--clickable { cursor: pointer; }
.notif-item--clickable:hover { background: rgba(255,255,255,0.05); }
.notif-item-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
}
.notif-item-name {
    flex: 1; font-size: 14px; color: #fff; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-count {
    background: #fc6e51; color: #fff; font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notif-accept-btn {
    background: #fc6e51; color: #fff; border: none; border-radius: 16px;
    font-size: 12px; font-weight: 700; padding: 6px 14px; cursor: pointer;
    flex-shrink: 0; font-family: inherit; transition: opacity .15s;
}
.notif-accept-btn:hover { opacity: .85; }
.notif-accept-btn:disabled { opacity: .5; cursor: default; }

/* ===== Logo etwas nach links verschieben ===== */
.top-bar .top-logo-wrap {
    align-items: flex-start;   /* statt zentriert -> linksbündig in der Spalte */
    margin-left: -8px;          /* zusätzlicher Versatz nach links */
}
.top-bar .top-logo-share-label {
    align-self: flex-start;
    padding-left: 2px;
}

/* ===== FIX: Top-Bar rechte Spalte breiter (Info + Uploader nebeneinander) ===== */
/* Ursache der Stauchung: Grid reservierte rechts nur Platz für EIN Icon (44px).
   Mit Info-Icon + Uploader-Profil werden jetzt ~72px gebraucht. */
.top-bar {
    grid-template-columns: auto 1fr auto !important;
}
@media (max-width: 360px) {
    .top-bar {
        grid-template-columns: auto 1fr auto !important;
        gap: 6px; padding: 0 10px;
    }
}
/* Inline-Styles der neuen Buttons NICHT von alten .top-profile-btn-Regeln
   überschreiben lassen – feste, nicht stauchbare Kreisform erzwingen. */
.top-bar .top-notif-btn,
.top-bar .top-profile-btn {
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    box-sizing: border-box;
}
/* Nur das Profilbild braucht den runden Beschnitt.
   Beim Info-Button würde overflow:hidden das Benachrichtigungs-Badge
   am Kreisrand abschneiden -> es muss überstehen dürfen. */
.top-bar .top-profile-btn {
    overflow: hidden;
}
.top-bar .top-notif-btn {
    overflow: visible !important;
}
.top-bar .top-profile-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    aspect-ratio: 1 / 1;
    background: none !important;
}
.top-bar .top-notif-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    aspect-ratio: 1 / 1;
}
.top-bar .top-profile-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* ===== MELDE-MODAL ===== */
.report-modal-overlay { padding: 16px; }
.report-modal-box {
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    padding: 24px 20px 20px;
}
.report-textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 16px; /* >=16px verhindert iOS-Zoom beim Fokus */
    font-family: inherit;
    padding: 13px 14px;
    resize: vertical;
    min-height: 96px;
    box-sizing: border-box;
    line-height: 1.5;
}
.report-textarea:focus {
    outline: none;
    border-color: #fc6e51;
    background: rgba(255,255,255,0.09);
}
.report-textarea::placeholder { color: rgba(255,255,255,0.4); }

.report-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}
.report-send-btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border-radius: 12px;
}
.report-cancel-btn {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
}

/* ===== REDESIGN 2026-07: Video-Side-Actions + Bottom-Nav + Mediathek-Panel ===== */

/* --- Video Side Actions (Kommentare/Like/Favorit als vertikaler Stack rechts im Video) --- */
.video-side-actions {
    position: absolute;
    right: 10px;
    bottom: 60px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    pointer-events: auto;
}
.vside-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.15s;
}
.vside-btn:active { transform: scale(0.9); }
.vside-icon-wrap { position: relative; display: flex; }
.vside-btn img, .vside-btn svg {
    width: 40px; height: 40px;
    padding: 8px;
    object-fit: contain;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    box-sizing: border-box;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.vside-btn-like.liked img {
    background: rgba(252,110,81,0.35);
    box-shadow: 0 0 14px rgba(252,110,81,0.5);
}
.vside-btn-more svg {
    width: 40px; height: 40px;
    padding: 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    box-sizing: border-box;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.vside-label {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* --- Bottom-Nav (Home / Suche / Post / Eigene Posts / Profil) --- */
.mbottom-nav-item img {
    width: 24px; height: 24px;
    padding: 0;
    background: none;
    border-radius: 0;
}
.mbottom-nav-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1.5px solid rgba(255,255,255,0.6);
}
.mbottom-nav-icon-grid { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.mbottom-plus-circle {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fc6e51, #ff8a70);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(252,110,81,0.4);
}

/* --- Mnav-Divider (Trennlinie im geschrumpften Mehr-Menue) --- */
.mnav-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 8px 16px;
}

/* --- Mediathek Panel (Eigene Posts, Slide-in von rechts) --- */
.mediathek-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 300;
    pointer-events: none;
    transition: background 0.3s ease;
}
.mediathek-backdrop.open {
    background: rgba(0,0,0,0.55);
    pointer-events: auto;
}
.mediathek-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(92vw, 420px);
    background: #111;
    z-index: 301;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0,0,0,0.7);
    border-left: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
}
.mediathek-panel.open { transform: translateX(0); }
.mediathek-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    background: rgba(252,110,81,0.08);
    flex-shrink: 0;
}
.mediathek-title { font-size: 17px; font-weight: 700; color: #fff; }
.mediathek-close {
    width: 32px; height: 32px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.mediathek-close:active { background: rgba(255,255,255,0.2); }
.mediathek-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 24px;
}
.mediathek-empty {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    text-align: center;
    padding: 50px 10px;
}

/* ===== MEDIATHEK "Mehr laden" Button ===== */
.mediathek-loadmore {
    display: block;
    width: 100%;
    margin: 16px 0 4px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.mediathek-loadmore:active { background: rgba(255,255,255,0.14); }

/* ===== VIDEO-FILTER SCHIEBEREGLER (im Nav-Panel) ===== */
.mnav-filter-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: default;
}
.mnav-filter-item .mnav-label { flex: 1; }
.filter-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
    margin-left: auto;
}
.filter-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.filter-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.18);
    border-radius: 28px;
    transition: background 0.25s;
}
.filter-switch-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.filter-switch input:checked + .filter-switch-slider {
    background: linear-gradient(135deg, #ff6b00, #ff8c00);
}
.filter-switch input:checked + .filter-switch-slider::before {
    transform: translateX(24px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS-LEISTE  (liegt fix direkt unter der Top-Bar / dem Logo)
   Sie wird nur eingeblendet, wenn es aktive Statusmeldungen gibt –
   JS setzt dazu display:flex bzw. display:none auf #statusBar.
   ═══════════════════════════════════════════════════════════════════════════ */
.status-bar {
    position: fixed;
    top: 56px;                      /* exakt unter der 56px hohen Top-Bar */
    left: 0; right: 0;
    z-index: 99;                    /* knapp unter der Top-Bar (100) */
    display: flex;
    align-items: center;
    padding: 7px 10px;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-sizing: border-box;
    animation: statusBarIn 0.35s ease;
}

@keyframes statusBarIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Horizontal scrollbare Spur mit den einzelnen Meldungen */
.status-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.status-track::-webkit-scrollbar { display: none; }

/* Eine einzelne Statusmeldung */
.status-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 78vw;
    padding: 5px 12px 5px 5px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #f0f0f0;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.status-chip:active { transform: scale(0.96); background: rgba(255,255,255,0.09); }

.status-chip img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--orange, #fc6e51);
}

/* Kleine Bildvorschau im Chip bei einem Foto-Status */
.status-chip-thumb {
    width: 26px; height: 26px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: none;
}

.status-chip-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.status-chip-name {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.status-chip-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

/* Farbvarianten – müssen zu den Farben in status.php passen */
.status-chip.c-orange img { border-color: #fc6e51; }
.status-chip.c-blau   img { border-color: #4a9eff; }
.status-chip.c-gruen  img { border-color: #3ec97a; }
.status-chip.c-lila   img { border-color: #a970ff; }
.status-chip.c-rot    img { border-color: #ff4d5e; }
.status-chip.c-grau   img { border-color: #8a8a8a; }

.status-chip.c-orange { background: rgba(252,110,81,0.13); border-color: rgba(252,110,81,0.30); }
.status-chip.c-blau   { background: rgba(74,158,255,0.13); border-color: rgba(74,158,255,0.30); }
.status-chip.c-gruen  { background: rgba(62,201,122,0.13); border-color: rgba(62,201,122,0.30); }
.status-chip.c-lila   { background: rgba(169,112,255,0.13); border-color: rgba(169,112,255,0.30); }
.status-chip.c-rot    { background: rgba(255,77,94,0.13);  border-color: rgba(255,77,94,0.30); }
.status-chip.c-grau   { background: rgba(255,255,255,0.07); }

/* Eigener Status bekommt einen kleinen Marker */
.status-chip.is-own .status-chip-name::after { content: " · du"; }

/* ── Detail-Overlay ─────────────────────────────────────────────────────── */
.status-detail {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.status-detail-card {
    width: 100%;
    max-width: 420px;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.status-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.status-detail-head img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--orange, #fc6e51);
    flex-shrink: 0;
}
.status-detail-name { font-size: 15px; font-weight: 700; color: #f0f0f0; }
.status-detail-time { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.status-detail-close {
    margin-left: auto;
    border: none; background: none;
    color: rgba(255,255,255,0.55);
    font-size: 26px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
/* Vollbild des Fotos im Detail-Overlay */
.status-detail-image {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
    margin-bottom: 12px;
    display: block;
}

.status-detail-text {
    font-size: 15px;
    line-height: 1.5;
    color: #f0f0f0;
    white-space: pre-wrap;
    word-break: break-word;
}
.status-detail-delete {
    margin-top: 16px;
    width: 100%;
    padding: 11px;
    border: 1px solid rgba(255,77,94,0.4);
    border-radius: 10px;
    background: rgba(255,77,94,0.12);
    color: #ff8a95;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.status-detail-delete:active { background: rgba(255,77,94,0.2); }


/* Video-Antwort: anklickbare Feed-Karte */
.video-reply-reference {
    position: absolute;
    z-index: 24;
    top: 14px;
    left: 14px;
    width: min(390px, calc(100% - 92px));
    padding: 10px;
    border: 1px solid rgba(252,110,81,.58);
    border-radius: 15px;
    background: rgba(20,24,34,.93);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
    color: #fff;
}
.video-reply-main,
.video-reply-actions button {
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.video-reply-main {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    background: transparent;
}
.video-reply-reference-icon { font-size: 23px; line-height: 1; flex: 0 0 auto; }
.video-reply-copy { display: grid; min-width: 0; gap: 2px; }
.video-reply-copy strong { color: #fc6e51; font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.video-reply-title { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-reply-author { color: rgba(255,255,255,.72); font-size: 12px; }
.video-reply-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.video-reply-actions button {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(255,255,255,.09);
    font-size: 12px;
    font-weight: 700;
}
.video-reply-actions button:hover,
.video-reply-actions button:focus-visible,
.video-reply-main:hover .video-reply-title { background: rgba(252,110,81,.2); outline: none; }
.video-reply-main:hover .video-reply-title { background: transparent; color: #ff947d; }
.video-reply-open { margin-left: auto; }
@media (max-width: 700px) {
    .video-reply-reference { top: 10px; left: 9px; width: calc(100% - 78px); padding: 9px; border-radius: 13px; }
    .video-reply-author { display: none; }
    .video-reply-actions { gap: 5px; }
    .video-reply-actions button { padding: 6px 8px; font-size: 11px; }
    .video-reply-open { margin-left: 0; }
}


/* Modal mit allen Video-Antworten */
body.video-replies-modal-open { overflow: hidden; }
.video-replies-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.video-replies-modal.is-open { opacity: 1; pointer-events: auto; }
.video-replies-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,8,14,.78);
    backdrop-filter: blur(8px);
}
.video-replies-modal-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 36px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(252,110,81,.48);
    border-radius: 22px;
    background: #171b24;
    color: #fff;
    box-shadow: 0 28px 80px rgba(0,0,0,.58);
    transform: translateY(14px) scale(.985);
    transition: transform .18s ease;
}
.video-replies-modal.is-open .video-replies-modal-panel { transform: translateY(0) scale(1); }
.video-replies-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.video-replies-modal-kicker {
    display: block;
    margin-bottom: 3px;
    color: #fc6e51;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.video-replies-modal-header h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.video-replies-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}
.video-replies-modal-close:hover { background: rgba(252,110,81,.28); }
.video-replies-modal-list {
    overflow-y: auto;
    padding: 12px;
    overscroll-behavior: contain;
}
.video-reply-modal-item {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.video-reply-modal-item + .video-reply-modal-item { margin-top: 7px; }
.video-reply-modal-item:hover,
.video-reply-modal-item:focus-visible {
    border-color: rgba(252,110,81,.46);
    background: rgba(252,110,81,.12);
    outline: none;
}
.video-reply-modal-thumb {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(252,110,81,.88), rgba(255,140,80,.45));
    font-size: 20px;
}
.video-reply-modal-copy { min-width: 0; display: grid; gap: 3px; }
.video-reply-modal-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.video-reply-modal-copy span { color: rgba(255,255,255,.72); font-size: 12px; }
.video-reply-modal-copy small { color: rgba(255,255,255,.48); font-size: 11px; }
.video-reply-modal-open-icon { color: #fc6e51; font-size: 27px; text-align: center; }
.video-replies-modal-empty { padding: 36px 18px; color: rgba(255,255,255,.68); text-align: center; }
@media (max-width: 700px) {
    .video-replies-modal { padding: 0; align-items: end; }
    .video-replies-modal-panel {
        width: 100%;
        max-height: 88vh;
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
    }
    .video-replies-modal-header { padding: 17px 16px 14px; }
    .video-replies-modal-header h2 { font-size: 18px; }
    .video-replies-modal-list { padding: 9px; }
}

/* HemdoMania eigene Aktions-Icons */
.hm-action-icon, .hm-sidebar-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}
.hm-sidebar-icon { flex: 0 0 24px; }
.video-reply-reference-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}


/* ==========================================================================
   BENACHRICHTIGUNGEN - modernisiert, in der Akzentfarbe (#fc6e51)
   Ueberschreibt bewusst die aelteren Regeln weiter oben in dieser Datei.
   ========================================================================== */

/* --- Glocken-Icon --- */
.hm-notif-btn { position: relative; overflow: visible !important; }
.hm-notif-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0;
    color: var(--orange, #fc6e51);
    transition: transform .25s ease, color .2s ease;
}
.right-ctrl-btn .hm-notif-ico { width: 18px; height: 18px; }
.hm-notif-ico svg { width: 100%; height: 100%; display: block; }
.hm-notif-btn:hover .hm-notif-ico { transform: scale(1.1); color: var(--orange-light, #ff8a70); }

/* Zustand "es liegt etwas an" */
.hm-notif-btn.has-new .hm-notif-ico {
    animation: hmBellSwing 3s ease-in-out infinite;
    transform-origin: 50% 16%;
    filter: drop-shadow(0 0 6px rgba(252,110,81,.55));
}
@keyframes hmBellSwing {
    0%, 70%, 100% { transform: rotate(0deg); }
    73% { transform: rotate(12deg); }
    77% { transform: rotate(-10deg); }
    81% { transform: rotate(7deg); }
    85% { transform: rotate(-4deg); }
    89% { transform: rotate(2deg); }
}

/* --- Badge in Akzentfarbe statt Signalrot --- */
.top-notif-badge {
    background: linear-gradient(135deg, #fc6e51, #ff8a70) !important;
    box-shadow: 0 0 0 1px rgba(252,110,81,.45), 0 2px 10px rgba(252,110,81,.7) !important;
    font-variant-numeric: tabular-nums;
    animation: hmNotifPulseAccent 2.2s ease-in-out infinite !important;
}
@keyframes hmNotifPulseAccent {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px rgba(252,110,81,.45), 0 2px 10px rgba(252,110,81,.7); }
    50%      { transform: scale(1.13); box-shadow: 0 0 0 1px rgba(252,110,81,.45), 0 2px 16px rgba(252,110,81,1); }
}

/* --- Dropdown --- */
.notif-dropdown {
    background: rgba(20,20,20,.97) !important;
    border: 1px solid rgba(252,110,81,.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overscroll-behavior: contain;
}
.notif-dropdown-header {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(180deg, rgba(24,24,24,.99), rgba(24,24,24,.93));
    border-bottom: 1px solid rgba(252,110,81,.2) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.notif-dropdown-title { display: inline-flex; align-items: center; gap: 8px; }
.notif-dropdown-title::before {
    content: ''; width: 4px; height: 16px; border-radius: 3px;
    background: linear-gradient(180deg, #fc6e51, #ff8a70);
    flex-shrink: 0;
}
.notif-readall {
    background: rgba(252,110,81,.14); color: #fc6e51;
    border: 1px solid rgba(252,110,81,.32); border-radius: 999px;
    font-family: inherit; font-size: 11px; font-weight: 700;
    padding: 5px 11px; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s;
}
.notif-readall:hover { background: rgba(252,110,81,.26); color: #ff8a70; }

/* --- Abschnitts-Ueberschriften mit kleinem Akzent-Icon --- */
.notif-dropdown-label { display: flex; align-items: center; gap: 7px; }
.notif-lbl-ico { width: 14px; height: 14px; color: #fc6e51; flex-shrink: 0; }

/* --- Eintraege --- */
.notif-item { border-radius: 10px; }
.notif-item--new {
    background: linear-gradient(90deg, rgba(252,110,81,.13), rgba(252,110,81,0) 72%);
    box-shadow: inset 3px 0 0 #fc6e51;
}
.notif-item--clickable:hover { background: rgba(252,110,81,.16) !important; }
.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item-body .notif-item-name { flex: none; font-weight: 600; }
.notif-item-text {
    font-size: 12px; color: rgba(255,255,255,.6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-meta {
    font-size: 11px; color: rgba(255,255,255,.34);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-count {
    background: linear-gradient(135deg, #fc6e51, #ff8a70) !important;
    box-shadow: 0 2px 8px rgba(252,110,81,.4);
}
.notif-accept-btn {
    background: linear-gradient(135deg, #fc6e51, #ff8a70) !important;
    box-shadow: 0 2px 10px rgba(252,110,81,.35);
    transition: transform .15s, opacity .15s;
}
.notif-accept-btn:hover { transform: translateY(-1px); }

/* --- Like-Eintraege --- */
.notif-like-ico {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #fff;
    background: linear-gradient(135deg, rgba(252,110,81,.9), rgba(255,138,112,.75));
    box-shadow: 0 2px 10px rgba(252,110,81,.35);
}
.notif-like-plus {
    background: rgba(252,110,81,.16); color: #fc6e51;
    border: 1px solid rgba(252,110,81,.35); border-radius: 999px;
    font-size: 11px; font-weight: 800; padding: 3px 9px; flex-shrink: 0;
}

/* Auf dem Handy liegt das Badge ueber dem Video - heller Ring haelt es lesbar */
.top-notif-badge { border: 2px solid #fff !important; }
.top-bar .hm-notif-ico { width: 24px; height: 24px; }