/* ============================================================
   HornyHearts — Premium-Minimal Dark Theme
   Ruhig & hochwertig: kaum Linien, randlose Flaechen, viel Luft,
   feine Typografie. Rot NUR fuer die primaere Aktion.
   ============================================================ */
:root {
    --hh-red:#e0163a; --hh-red-d:#c01230;
    --hh-bg:#0b0b0d; --hh-surface:#141416; --hh-surface2:#1a1a1d;
    --hh-line:rgba(255,255,255,.06);
    --hh-text:#f2f2f3; --hh-muted:rgba(242,242,243,.58); --hh-faint:rgba(242,242,243,.40);
}

html, body { background:var(--hh-bg) !important; color:var(--hh-text) !important; }
body::before { content:none !important; background:none !important; }

/* ---- Header / Sidebar / Footer: flach, nur Haarlinien ---- */
header.header, #site-header, #site-header-responsive {
    background:var(--hh-bg) !important; border-bottom:1px solid var(--hh-line) !important;
    box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.fixed-sidebar, .fixed-sidebar-left, [class*="sidebar"] {
    background:var(--hh-bg) !important; border-right:1px solid var(--hh-line) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
footer, .footer, .footer--dark, #footer-hornyhearts, #footer-iboys { background:var(--hh-bg) !important; border-top:1px solid var(--hh-line) !important; box-shadow:none !important; }
.footer .widget, .footer .w-about, .footer .w-list { background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ---- Karten: abgehoben durch Flaeche, KEINE Rahmen, weicher Radius ---- */
.ui-block, .card, .widget, .crumina-module, .crumina-info-box, .block-action,
.ui-block-content, .profile-section, .post, .hentry, .more-dropdown,
.bg-white, section.bg-white, .bg-section, .bg-section2, .bg-section3, .bg-section6,
.testimonial-item, .swiper-slide-promo, .notification-list > li {
    background:var(--hh-surface) !important; border:0 !important; border-radius:10px !important;
    box-shadow:none !important; color:var(--hh-text) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.content-bg-wrap, .background-cover, .main-section, .container-bg { background:transparent !important; }

/* ---- Typografie: fein, ruhig ---- */
h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6, .heading-title, .title, .author-title,
.post-title, .info-box-title { color:#fff !important; font-weight:600 !important; letter-spacing:-.01em; }
.display-4 { font-weight:600 !important; letter-spacing:-.02em !important; }
/* Sektions-Labels: klein, dezent, NICHT rot */
.ui-block-title { border-bottom:1px solid var(--hh-line) !important; }
.ui-block-title h6, .ui-block-title-small h6 { color:var(--hh-faint) !important; text-transform:uppercase; letter-spacing:.14em; font-size:11.5px; font-weight:500 !important; }
p, .heading-text, .text-c-grey, .post-text, label, .author-subtitle,
.card-text, .info-box-text, .control-block, td { color:var(--hh-muted) !important; line-height:1.7; }
a, .c-primary, .link-find-friend { color:var(--hh-text) !important; }
a:hover { color:#fff !important; }
.text-c-white { color:#fff !important; }

/* ---- Inputs: minimal ---- */
.form-control, input[type=text], input[type=email], input[type=password],
input[type=date], input[type=search], input[type=number], select, textarea,
.bootstrap-select > .dropdown-toggle {
    background:var(--hh-surface2) !important; border:1px solid var(--hh-line) !important;
    color:#fff !important; border-radius:8px !important; box-shadow:none !important;
}
.form-control::placeholder { color:var(--hh-faint) !important; }
.form-control:focus, select:focus, textarea:focus { border-color:rgba(255,255,255,.25) !important; box-shadow:none !important; background:var(--hh-surface2) !important; color:#fff !important; }
select option { background:#141416; color:#fff; }

/* ---- Buttons: primaer = Rot (einziges lautes Element), sekundaer dezent ---- */
.btn { border-radius:8px !important; box-shadow:none !important; font-weight:500 !important; letter-spacing:0; }
.btn-primary, .btn-danger, .bg-primary, .bg-red { background:var(--hh-red) !important; border:0 !important; color:#fff !important; }
.btn-primary:hover, .btn-danger:hover, .bg-red:hover, .bg-primary:hover { background:var(--hh-red-d) !important; color:#fff !important; }
.btn-secondary, .btn-outline-secondary, .bg-blue, .bg-purple, .bg-green, .bg-yellow, .bg-facebook, .view-all {
    background:transparent !important; border:1px solid var(--hh-line) !important; color:var(--hh-text) !important;
}
.btn-secondary:hover, .bg-blue:hover, .bg-purple:hover, .bg-green:hover, .bg-yellow:hover { background:rgba(255,255,255,.04) !important; }
.btn-control { box-shadow:none !important; }

/* ---- Linke Icon-Sidebar ---- */
.left-menu-icon, .fixed-sidebar a, .menu-icon a { color:var(--hh-muted) !important; }
.left-menu > li > a:hover { background:rgba(255,255,255,.03) !important; }

/* ---- Tabs: feiner Unterstrich (Pille sitzt auf dem <li>) ---- */
ul.cat-list-bg-style { background:transparent !important; border-bottom:1px solid var(--hh-line) !important; padding:0 !important; margin:8px 0 26px !important; }
ul.cat-list-bg-style li.cat-list__item { background:transparent !important; background-color:transparent !important; border-radius:0 !important; overflow:visible !important; margin:0 2px !important; border-bottom:2px solid transparent !important; }
ul.cat-list-bg-style li.cat-list__item.active { background:transparent !important; background-color:transparent !important; border-bottom:2px solid var(--hh-red) !important; }
ul.cat-list-bg-style li.cat-list__item a { background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:var(--hh-muted) !important; padding:12px 16px !important; font-weight:500 !important; letter-spacing:.02em; }
ul.cat-list-bg-style li.cat-list__item.active a { color:#fff !important; }
ul.cat-list-bg-style li.cat-list__item a:hover { background:transparent !important; color:#fff !important; }
.tabs__item, .nav-tabs .nav-link, .nav-pills .nav-link { color:var(--hh-muted) !important; background:transparent !important; border:0 !important; border-radius:0 !important; }
.tabs__item.active, .nav-tabs .nav-link.active, .nav-pills .nav-link.active { background:transparent !important; color:#fff !important; border-bottom:2px solid var(--hh-red) !important; }

/* ---- Alerts: dezent ---- */
.alert { border-radius:8px !important; background:var(--hh-surface2) !important; border:1px solid var(--hh-line) !important; border-left:2px solid var(--hh-red) !important; color:var(--hh-text) !important; }
.alert-success { border-left-color:#3ddc84 !important; }
.alert-danger  { border-left-color:#ff5c7a !important; }
.alert-warning { border-left-color:#f5b301 !important; }

/* ---- Sonstiges ---- */
hr, .divider { border-color:var(--hh-line) !important; }
.alert-image, img[src*="img/flat/"], img[src*="usererror"], img[src*="hearthand"], img[src*="icon_download"] { display:none !important; }  /* Cartoon-Maskottchen/Clipart weg (relative + absolute Pfade) */
.olympus-chat { background:var(--hh-surface) !important; border:1px solid var(--hh-line) !important; box-shadow:none !important; }
.olympus-chat .olympus-chat-title { color:#fff !important; }
.fixed-sidebar-right .sidebar--small { background:var(--hh-bg) !important; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* ============================================================
   iBoys-Box Aktionskarten (Account: Spotlight/Fakecheck/Standort/Credits)
   -> dunkel mit farbiger Akzent-Kante statt heller Pastell-BG
   ============================================================ */
.iboys-box { background:#141416 !important; box-shadow:none !important; border:0 !important; border-radius:10px !important; color:var(--hh-text) !important; }
.iboys-box--spotlight { background:#171416 !important; border-left:3px solid var(--hh-red) !important; }
.iboys-box--premium   { background:#141714 !important; border-left:3px solid #3ddc84 !important; }
.iboys-box--profile, .iboys-box--blue, .iboys-box--lightBlue { background:#131517 !important; border-left:3px solid #378add !important; }
.iboys-box--credits, .iboys-box--yellow, .iboys-box--premiumVip { background:#17150f !important; border-left:3px solid #f5b301 !important; }
.iboys-box h1, .iboys-box h2, .iboys-box h3, .iboys-box h4, .iboys-box h5, .iboys-box h6, .iboys-box .title { color:#fff !important; }
.iboys-box p, .iboys-box span, .iboys-box .text--subtle, .iboys-box div { color:var(--hh-muted) !important; }
.iboys-box .btn, .iboys-box .btn * { color:#fff !important; }

/* ============================================================
   Mitglieder / Suche-Seite (/search): dunkle Karten, lesbare Namen,
   kein Pastell-Navbar-Leak, kein Stray-Unterstrich bei Sektionstiteln
   ============================================================ */
/* Ergebnis-Karten dunkel statt #fff (iboys.css) */
.user-card { background:var(--hh-surface) !important; border:0 !important; border-radius:10px !important; box-shadow:none !important; }
.user-card__caption { background:transparent !important; }
/* Mitgliedsname lesbar (schlaegt das inline color:user_color) */
.user-card .user-card__info-name_ { color:#fff !important; }
.user-card .user-card__info-secondary, .user-card .user-card__info-location { color:var(--hh-muted) !important; }
/* Sektionstitel-"Tab" (z.B. "Wer ist online?") darf NICHT den roten Tab-Unterstrich erben */
.calendar-events-tabs.nav-tabs .nav-link.active, .calendar-events-tabs .nav-link.active { border-bottom:0 !important; background:transparent !important; color:#fff !important; }
/* Bootstrap-Light-Navbar nicht durchschlagen lassen */
.navbar.bg-light, .navbar-light.bg-light { background:transparent !important; box-shadow:none !important; }
.navbar .nav-link { color:var(--hh-muted) !important; }
.navbar .nav-link:hover { color:#fff !important; }

/* ============================================================
   Modulübergreifend (Forum/Gruppen/Voting/Events/Account):
   Light-Theme-Leaks -> dunkel, DB-gefärbte Namen lesbar
   ============================================================ */
/* Autoren-/Mitgliedsnamen lesbar (schlägt inline color:user_color) */
.author-name, .post__author-name, .open-topic-table .author-name, .create-group .author-name { color:var(--hh-text) !important; }
.author-name:hover, .post__author-name:hover { color:#fff !important; }
/* Pastell-/Bunt-Flächen auf Dark ausrichten */
.bg-edit, .voting-bg, .bg-orange, .bg-blue-light, .light-bg, .bg-section-light { background:var(--hh-surface2) !important; }
/* Bunte Sekundär-Buttons dezent dunkel statt Blau/Grün (Rot bleibt der Primäraktion vorbehalten) */
.btn-blue, .btn-green { background:var(--hh-surface2) !important; border:1px solid var(--hh-line) !important; color:#fff !important; box-shadow:none !important; }
.btn-blue:hover, .btn-green:hover { background:rgba(255,255,255,.06) !important; color:#fff !important; }
/* Moderator-/Badge-Text nicht near-black auf Dark */
.author-content .country, .post__author-date, .author-date { color:var(--hh-muted) !important; }

/* ============================================================
   Profil-Seite Feinschliff
   ============================================================ */
/* DB-gefärbte Namen lesbar (schlägt inline color:user_color) */
.profile-section .author-name, .top-header-author .h4, .author-name, .names-people-likes a, .ed-options .author-name { color:var(--hh-text) !important; }
/* Persönlichkeits-/Vorlieben-Balken in Markenrot statt Bootstrap-Bunt */
.skills-item-meter { background:var(--hh-surface2) !important; }
.skills-item-meter-active, .skills-item-meter-active.bg-success, .skills-item-meter-active.bg-yellow, .skills-item-meter-active.bg-primary { background:var(--hh-red) !important; }
/* Blaue irs-Slider -> rot */
.range-slider--blue .irs-bar, .range-slider--blue .irs-bar-edge, .range-slider--blue .irs-from, .range-slider--blue .irs-to, .range-slider--blue .irs-single, .range-slider--blue .irs-handle, .range-slider--blue .irs-handle.state_hover, .range-slider--blue .irs-handle:hover { background:var(--hh-red) !important; border-color:var(--hh-red) !important; }
/* Bunte Bootstrap-Utility-Buttons dezent (Rot bleibt Primäraktion) */
.btn-control.bg-blue, .btn-control.bg-yellow, .btn-control.bg-green, .btn-control.bg-success, .btn-control.bg-purple, .btn-control.bg-facebook, .btn.bg-facebook { background:var(--hh-surface2) !important; border-color:var(--hh-line) !important; color:var(--hh-text) !important; }
.btn-control.bg-blue:hover, .btn-control.bg-green:hover, .btn-control.bg-purple:hover, .btn.bg-facebook:hover { background:rgba(255,255,255,.06) !important; }
/* Weiße Partner-Karten -> dunkel */
.author-date.bg-white { background:var(--hh-surface2) !important; color:var(--hh-text) !important; }
.author-date.bg-white a { color:var(--hh-text) !important; }
/* Blaue Akzente (Edit-Stifte etc.) -> Markenrot */
.text-c-blue { color:var(--hh-red) !important; }
/* Detail-Werte klar lesbar */
.ui-block .field-value, .profile-section .field-value { color:var(--hh-text) !important; }

/* ============================================================
   Profil-Seite — Aesthetik-Layer
   ============================================================ */
/* Cover: sanfter Verlauf unten, damit Name/Avatar immer lesbar sind */
.top-header-favorit .top-header-thumb { position:relative; height:360px !important; }
.top-header-favorit .top-header-thumb::after { content:""; position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(to top, rgba(11,11,13,.92) 0%, rgba(11,11,13,.45) 50%, rgba(11,11,13,0) 100%); pointer-events:none; z-index:1; }
.top-header-favorit #top-cover { height:360px !important; width:100% !important; object-fit:cover !important; object-position:center 38%; filter:saturate(1.06) contrast(1.02); }
/* Avatar MUSS vor der .profile-section schweben (gleicher z-index -> Section uebermalt
   die unteren ~40px -> Avatar sah "halb abgeschnitten" aus). Hoeher stacken. */
.top-header-favorit .top-header-author { z-index:10 !important; }
.top-header-favorit .author-thumb { position:relative; z-index:10 !important; }
.top-header-favorit .profile-section { z-index:2 !important; }

/* Avatar: groesser, klarer Ring, weicher Schatten */
.top-header-favorit .author-thumb { width:132px !important; height:132px !important; border-radius:50% !important; border:3px solid var(--hh-bg) !important; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 12px 34px rgba(0,0,0,.6) !important; overflow:hidden !important; background:var(--hh-surface2); }
.top-header-favorit .author-thumb img { width:100% !important; height:100% !important; border-radius:50% !important; object-fit:cover; }

/* Name + Standort: groesser, mit Schatten ueber dem Cover */
.top-header-favorit .author-content { padding-bottom:8px; }
.top-header-favorit .author-content .author-name { font-size:27px !important; font-weight:700 !important; letter-spacing:-.015em; text-shadow:0 2px 14px rgba(0,0,0,.65); line-height:1.1; }
.top-header-favorit .author-content .country { color:rgba(255,255,255,.74) !important; text-shadow:0 1px 10px rgba(0,0,0,.6); font-size:13px; margin-top:4px; }

/* Profil-Tabs: ruhige Unterstrich-Navigation mit klarer Aktiv-Markierung */
.profile-menu { border-bottom:1px solid var(--hh-line) !important; }
.profile-menu li a { color:var(--hh-muted) !important; font-weight:500 !important; letter-spacing:.01em; padding:15px 6px !important; border-bottom:2px solid transparent !important; background:transparent !important; transition:color .15s ease; }
.profile-menu li a:hover { color:#fff !important; }
.profile-menu li a.active { color:#fff !important; border-bottom-color:var(--hh-red) !important; }

/* Sektion-Header: ruhig, weisser Text + rotes Icon + feine Haarlinie, klarer Rhythmus */
.ui-block-content h4 { font-size:15px !important; font-weight:600 !important; letter-spacing:.02em; color:#fff !important; margin-top:32px !important; margin-bottom:0 !important; }
.ui-block-content h4 i { color:var(--hh-red) !important; opacity:.92; }
.ui-block-content h4 + hr { margin:12px 0 14px !important; border:0 !important; border-top:1px solid var(--hh-line) !important; }

/* Detail-Zeilen: ruhiges Spec-Sheet mit Haarlinie + dezentem Hover */
.ui-block-content .col-12 > .row:has(p.field-value) { align-items:center; padding:9px 8px; margin:0; border-radius:8px; transition:background .12s ease; }
.ui-block-content .col-12 > .row:has(p.field-value):hover { background:rgba(255,255,255,.025); }
.ui-block-content .col-12 > .row:has(p.field-value) > div > p:not(.field-value) { color:var(--hh-muted) !important; margin:0; font-weight:500; }
.ui-block-content .col-12 > .row:has(p.field-value) p.field-value { margin:0; }
.ui-block-content .col-12 > .row:has(p.field-value) p i { width:20px; text-align:center; color:var(--hh-faint) !important; margin-right:8px; }

/* Platzhalter-Text dezent + kursiv (recede gegenueber echten Werten) */
.ui-block-content .text-c-grey { color:var(--hh-faint) !important; font-style:italic; }

/* ============================================================
   Foto-Alben (/profile/<name>/albums): Karten dunkel statt Pastell-Weiss
   ============================================================ */
.photo-album-item {
    background:var(--hh-surface) !important;
    border:0 !important;            /* killt #e6ecf5 (main.css) UND inline border:#845bc5 (kein !important) */
    border-radius:10px !important;
    overflow:hidden !important;
    box-shadow:none !important;
    min-height:250px !important;
}
.photo-album-item .content { background:transparent !important; color:var(--hh-text) !important; }   /* war der grell-weisse Caption-Block */
.photo-album-item .title, .photo-album-item .content .title, .photo-album-item .title.h5, .photo-album-item .content .h5 { color:#fff !important; }
.photo-album-item .sub-title { color:var(--hh-muted) !important; }   /* 'Aktualisiert vor einiger Zeit' lesbar */
.photo-album-item .photo-div, .photo-item .photo-div { background-color:var(--hh-surface2) !important; }
.photo-album-item .overlay-dark, .photo-item .overlay-dark { background:rgba(11,11,13,.35) !important; }
.photo-album-item .friend-count .h6, .photo-album-item .friend-count-item .h6 { color:var(--hh-text) !important; }
.photo-album-item .friend-count .title, .photo-album-item .friend-count-item .title { color:var(--hh-faint) !important; }
.photo-album-item.create-album { background:transparent !important; border:2px dashed var(--hh-line) !important; }
.btn-purple { background:var(--hh-surface2) !important; border:1px solid var(--hh-line) !important; color:#fff !important; box-shadow:none !important; }