/* ================================================
   HUMANITAS
   ================================================ */

/* -- Alle SVG-Logos ausblenden -- */
.logo--wordmark,
.logo--icon svg,
.logo svg,
a .logo--icon {
  display: none !important;
}

/* -- Icon-Logo ersetzen (Sidebar, Login) -- */
a .logo.logo--icon,
.logo.logo--icon {
  display: block !important;
  background: url('/humanitas_m_logo.png') no-repeat center / contain !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden;
}
a .logo.logo--icon img,
.logo.logo--icon img {
  display: none !important;
}

/* -- Wordmark-Logo ersetzen (Navigation, Startseite) -- */
.navigation-panel__logo a,
a .logo--wordmark,
.logo--wordmark {
  display: block !important;
  background: url('/humanitas_m_logo.png') no-repeat left center / contain !important;
  height: 42px !important;
  width: 180px !important;
  overflow: hidden;
}
.navigation-panel__logo a svg,
a .logo--wordmark use,
.logo--wordmark use {
  display: none !important;
}

/* -- Startseiten-Logo (nicht eingeloggt) -- */
.brand__tagline ~ .logo,
.hero-widget__img .logo {
  display: block !important;
  background: url('/humanitas_m_logo.png') no-repeat center / contain !important;
  width: 60px !important;
  height: 60px !important;
}

/* -- Farbschema Humanitas (Slate + Olive) -- */
/* Akzentfarbe: Buttons, aktive Links */
.button,
.button--primary,
a.button,
.status__action-bar__button.active,
.icon-button.active,
.notification__filter-bar button.active::after,
.column-header__button.active {
  background-color: #3d5a6e !important;
  border-color: #3d5a6e !important;
}
.button:hover,
.button--primary:hover {
  background-color: #4a6b7a !important;
}

/* Aktive Navigation */
.column-link--transparent.active,
.navigation-panel a.active,
.navigation-panel__logo a {
  color: #8fb04a !important;
}

/* Notification-Badge */
.icon-with-badge__badge {
  background: #6b8f3c !important;
}

/* Links */
.status__content a,
.reply-indicator__content a {
  color: #5a7d8e !important;
}

/* Publier-Button / Compose */
.compose-form__publish-button-wrapper .button {
  background-color: #6b8f3c !important;
}
.compose-form__publish-button-wrapper .button:hover {
  background-color: #5a8232 !important;
}

/* Focus */
:focus-visible {
  outline-color: #3d5a6e !important;
}

/* Compose textarea */
.compose-form .autosuggest-textarea__textarea:focus {
  border-color: #3d5a6e !important;
}
/* =========================================================
   Account role badges
   ========================================================= */

.account__header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.account__header__badges .account-role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
}

.account__header__badges .account-role svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
  opacity: 0.95;
}

.account__header__badges .account-role span {
  display: inline-flex;
  align-items: center;
}

.account__header__badges .account-role__domain {
  opacity: 0.72;
  font-weight: 500;
  font-size: 0.78rem;
  padding-left: 0.2rem;
}

/* =========================================================
   Role-specific styling via data-account-role-id
   1 = Moderator
   2 = Admin
   3 = Owner
   4 = Member
   5 = Verified Professional
   6 = Organization Account
   7 = Trust Officer
   ========================================================= */

/* Moderator */
.account__header__badges .account-role[data-account-role-id="1"] {
  background: rgba(70, 130, 255, 0.16);
  color: #9fc3ff;
  border-color: rgba(70, 130, 255, 0.34);
}

/* Admin */
.account__header__badges .account-role[data-account-role-id="2"] {
  background: rgba(181, 99, 255, 0.18);
  color: #d7b3ff;
  border-color: rgba(181, 99, 255, 0.35);
}

/* Owner */
.account__header__badges .account-role[data-account-role-id="3"] {
  background: rgba(255, 82, 82, 0.18);
  color: #ffb3b3;
  border-color: rgba(255, 82, 82, 0.34);
}

/* Member */
.account__header__badges .account-role[data-account-role-id="4"] {
  background: rgba(140, 148, 170, 0.16);
  color: #d6dbea;
  border-color: rgba(140, 148, 170, 0.28);
}

/* Verified Professional */
.account__header__badges .account-role[data-account-role-id="5"] {
  background: rgba(31, 191, 117, 0.18);
  color: #86efb7;
  border-color: rgba(31, 191, 117, 0.35);
}

/* Organization Account */
.account__header__badges .account-role[data-account-role-id="6"] {
  background: rgba(0, 184, 212, 0.18);
  color: #94f0ff;
  border-color: rgba(0, 184, 212, 0.34);
}

/* Trust Officer */
.account__header__badges .account-role[data-account-role-id="7"] {
  background: rgba(245, 165, 36, 0.18);
  color: #ffd38a;
  border-color: rgba(245, 165, 36, 0.34);
}

/* =========================================================
   Optional: slightly stronger prominence on profile headers
   ========================================================= */

.account__header__badges .account-role[data-account-role-id="5"],
.account__header__badges .account-role[data-account-role-id="6"],
.account__header__badges .account-role[data-account-role-id="7"] {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.account-role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Basis: eigenes Icon statt Standard-SVG */
.account__header__badges .account-role[data-account-role-id="6"] svg,
.account__header__badges .account-role[data-account-role-id="7"] svg,
.account__header__badges .account-role[data-account-role-id="1"] svg,
.account__header__badges .account-role[data-account-role-id="2"] svg,
.account__header__badges .account-role[data-account-role-id="3"] svg {
  display: none;
}

.account__header__badges .account-role[data-account-role-id="6"]::before,
.account__header__badges .account-role[data-account-role-id="7"]::before,
.account__header__badges .account-role[data-account-role-id="1"]::before,
.account__header__badges .account-role[data-account-role-id="2"]::before,
.account__header__badges .account-role[data-account-role-id="3"]::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.account__header__badges .account-role[data-account-role-id="6"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M120-120v-720h440v160h280v560H120Zm80-80h120v-120h80v120h80v-560H200v560Zm360 0h200v-400H560v400ZM280-520h120v-120H280v120Zm0 160h120v-120H280v120Zm360 0h80v-120h-80v120Zm0-160h80v-120h-80v120Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M120-120v-720h440v160h280v560H120Zm80-80h120v-120h80v120h80v-560H200v560Zm360 0h200v-400H560v400ZM280-520h120v-120H280v120Zm0 160h120v-120H280v120Zm360 0h80v-120h-80v120Zm0-160h80v-120h-80v120Z'/></svg>");
}

.account__header__badges .account-role[data-account-role-id="7"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M480-80q-139-35-229.5-160T160-520v-240l320-120 320 120v240q0 155-90.5 280T480-80Zm0-84q104-33 172-126.5T720-520v-184l-240-90-240 90v184q0 136 68 229.5T480-164Zm0-316Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M480-80q-139-35-229.5-160T160-520v-240l320-120 320 120v240q0 155-90.5 280T480-80Zm0-84q104-33 172-126.5T720-520v-184l-240-90-240 90v184q0 136 68 229.5T480-164Zm0-316Z'/></svg>");
}

.account__header__badges .account-role[data-account-role-id="1"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/></svg>");
}

.account__header__badges .account-role[data-account-role-id="2"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m370-80-16-128q-13-5-24.5-12T306-236l-119 50-90-156 103-78q-2-14-2-30t2-30L97-558l90-156 119 50q12-9 23.5-16t24.5-12l16-128h220l16 128q13 5 24.5 12T654-664l119-50 90 156-103 78q2 14 2 30t-2 30l103 78-90 156-119-50q-12 9-23.5 16T606-208L590-80H370Zm110-280q58 0 99-41t41-99q0-58-41-99t-99-41q-58 0-99 41t-41 99q0 58 41 99t99 41Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='m370-80-16-128q-13-5-24.5-12T306-236l-119 50-90-156 103-78q-2-14-2-30t2-30L97-558l90-156 119 50q12-9 23.5-16t24.5-12l16-128h220l16 128q13 5 24.5 12T654-664l119-50 90 156-103 78q2 14 2 30t-2 30l103 78-90 156-119-50q-12 9-23.5 16T606-208L590-80H370Zm110-280q58 0 99-41t41-99q0-58-41-99t-99-41q-58 0-99 41t-41 99q0 58 41 99t99 41Z'/></svg>");
}

.account__header__badges .account-role[data-account-role-id="3"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M160-200 80-720l200 120 200-280 200 280 200-120-80 520H160Zm91-80h458l42-274-116 70-155-217-155 217-116-70 42 274Zm229-201Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'><path d='M160-200 80-720l200 120 200-280 200 280 200-120-80 520H160Zm91-80h458l42-274-116 70-155-217-155 217-116-70 42 274Zm229-201Z'/></svg>");
}

.account__header__badges .account-role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.account__header__badges .account-role > span:first-of-type {
  font-weight: 700;
}

.account__header__badges .account-role__domain {
  opacity: 0.7;
  font-size: 0.78rem;
}

.account__header__badges .account-role__domain {
  display: none!important;
}

.account-role {
    border-radius: 999px!important;
    padding: 2px 8px!important;
    font-size: 0.75rem!important;
    font-weight: 500!important;
}

/* Organisation hervorheben */
.account-role[data-account-role-id="6"] {
    background: rgba(0, 180, 120, 0.15)!important;
    border: 1px solid rgba(0, 180, 120, 0.4)!important;
}

/* Trust Officer */
.account-role[data-account-role-id="7"] {
    background: rgba(0, 120, 255, 0.15)!important;
    border: 1px solid rgba(0, 120, 255, 0.4)!important;
}
*/