/* =========================================================
   HSB RELATIONS / MEMBER PROFILE
   passend zum Miami/PulsePad Profil
   Einbau: ganz unten in member_profile_hsb_miami_v1.css
   ========================================================= */

/* altes Rela-Design neutralisieren */
relabox,
.relas-wrap,
.relas-content,
.rela-card,
.rela-tab-request {
  all: unset;
  box-sizing: border-box !important;
}

relabox,
.hsb-relas-wrap,
.hsb-relas-wrap * {
  box-sizing: border-box !important;
}

.hsb-relas-wrap {
  width: 100% !important;
  display: block !important;
  color: #4d4540 !important;
  font-family: Arial, sans-serif !important;
}

.hsb-relas-titleline {
  min-height: 82px !important;
  margin-bottom: 18px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(143,200,193,.16), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(245,180,172,.14), transparent 32%),
    rgba(255,253,249,.94) !important;
  border: 1px solid rgba(191,157,132,.22) !important;
  box-shadow: 0 12px 26px rgba(118,92,70,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.hsb-relas-titleline:before,
.hsb-relas-titleline:after {
  content: "" !important;
  width: 190px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(233,141,136,.38), transparent) !important;
  position: absolute !important;
  top: 50% !important;
}

.hsb-relas-titleline:before { left: 34px !important; }
.hsb-relas-titleline:after { right: 34px !important; }

.hsb-relas-titleline span {
  color: #9a705b !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.hsb-relas-titleline small {
  margin-top: 6px !important;
  color: #e98d88 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.hsb-relas-content {
  width: 100% !important;
  max-height: 540px !important;
  overflow: auto !important;
  padding: 2px 8px 2px 2px !important;
  display: grid !important;
  gap: 14px !important;
}

.hsb-relas-content > b,
.hsb-relas-content > strong,
.hsb-relas-content > center,
.hsb-relas-content > .rela-kat,
.hsb-relas-content > .rela_cat,
.hsb-relas-content > .kat_titel {
  width: fit-content !important;
  min-width: 92px !important;
  margin: 8px auto 0 !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,253,249,.96) !important;
  border: 1px solid rgba(191,157,132,.22) !important;
  color: #9a705b !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 18px rgba(118,92,70,.07) !important;
}

.hsb-rela-card {
  width: 100% !important;
  min-height: 126px !important;
  padding: 13px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, rgba(255,253,249,.94), rgba(255,248,242,.86)),
    radial-gradient(circle at 100% 0%, rgba(143,200,193,.12), transparent 28%) !important;
  border: 1px solid rgba(191,157,132,.22) !important;
  box-shadow: 0 12px 26px rgba(118,92,70,.08) !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  overflow: hidden !important;
  position: relative !important;
}

.hsb-rela-card:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 5px !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(180deg, #e98d88, #8fc8c1) !important;
}

.hsb-rela-avatar {
  width: 92px !important;
  height: 100px !important;
  align-self: center !important;
  padding: 5px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(135deg, rgba(143,200,193,.28), rgba(245,180,172,.20)),
    #fff !important;
  border: 1px solid rgba(191,157,132,.18) !important;
}

.hsb-rela-avatar img,
.hsb-rela-avatar a img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  filter: saturate(.92) contrast(.96) !important;
}

.hsb-rela-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hsb-rela-name {
  margin-bottom: 7px !important;
  color: #579b94 !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: .11em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.hsb-rela-name a {
  color: #579b94 !important;
  text-decoration: none !important;
}

.hsb-rela-meta {
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

.hsb-rela-tag,
.hsb-rela-sort {
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.hsb-rela-tag {
  background: rgba(233,141,136,.14) !important;
  border: 1px solid rgba(233,141,136,.24) !important;
  color: #e98d88 !important;
}

.hsb-rela-sort {
  background: rgba(143,200,193,.13) !important;
  border: 1px solid rgba(143,200,193,.22) !important;
  color: #579b94 !important;
}

.hsb-rela-text {
  max-height: 74px !important;
  overflow: auto !important;
  padding-right: 7px !important;
  color: #665d57 !important;
  font-size: 10.5px !important;
  line-height: 1.6 !important;
  text-align: justify !important;
}

.hsb-rela-request {
  margin-top: 18px !important;
  padding: 16px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,180,172,.16), transparent 32%),
    rgba(255,248,242,.90) !important;
  border: 1px solid rgba(233,141,136,.22) !important;
  box-shadow: 0 12px 26px rgba(118,92,70,.08) !important;
}

.hsb-rela-request-title {
  min-height: 36px !important;
  margin-bottom: 14px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,253,249,.86) !important;
  border: 1px solid rgba(191,157,132,.18) !important;
  color: #9a705b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.hsb-rela-request-title i { color: #e98d88 !important; }

.hsb-rela-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.hsb-rela-row { min-width: 0 !important; }
.hsb-rela-row-full { grid-column: 1 / -1 !important; }

.hsb-rela-row label {
  margin: 0 0 6px !important;
  color: #9a705b !important;
  display: block !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.hsb-rela-row small {
  margin-top: 5px !important;
  color: #9a8376 !important;
  display: block !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

.hsb-rela-row input[type="text"],
.hsb-rela-row textarea,
.hsb-rela-row select,
.hsb-rela-inputs select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 38px !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(191,157,132,.22) !important;
  color: #4d4540 !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  outline: none !important;
}

.hsb-rela-row textarea {
  min-height: 130px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}

.hsb-rela-inputs {
  padding: 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(191,157,132,.18) !important;
  color: #665d57 !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
}

.hsb-rela-inputs label {
  color: #665d57 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.hsb-rela-submit {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
}

.hsb-rela-submit input[type="submit"],
#rela_button {
  min-height: 34px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #e98d88, #f5b4ac) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 10px 20px rgba(233,141,136,.18) !important;
}

.hsb-relas-content::-webkit-scrollbar,
.hsb-rela-text::-webkit-scrollbar {
  width: 5px !important;
}

.hsb-relas-content::-webkit-scrollbar-track,
.hsb-rela-text::-webkit-scrollbar-track {
  background: rgba(191,157,132,.10) !important;
  border-radius: 999px !important;
}

.hsb-relas-content::-webkit-scrollbar-thumb,
.hsb-rela-text::-webkit-scrollbar-thumb {
  background: rgba(233,141,136,.55) !important;
  border-radius: 999px !important;
}

@media (max-width: 760px) {
  .hsb-relas-titleline:before,
  .hsb-relas-titleline:after {
    display: none !important;
  }

  .hsb-rela-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .hsb-rela-avatar {
    margin: 0 auto !important;
  }

  .hsb-rela-meta {
    justify-content: center !important;
  }

  .hsb-rela-form-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Sortierungsfelder wieder benutzbar machen */
input.rela.sort,
input[name="sort"] {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(191,157,132,.28) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #4d4540 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Tabellenzelle darf das Sortierungsfeld nicht zusammendrücken */
td:has(> input.rela.sort),
td:has(> input[name="sort"]) {
    width: 80px !important;
    min-width: 80px !important;
    padding: 4px 8px !important;
}

/* =========================================================
   SUNSET AVENUE – RELATIONS LIGHT FINAL FIX
   Kleine Kategorie-Auswahl und kompakter Anfragebereich
   ========================================================= */

/* Kategorie-Radios wieder als kleine Auswahlfelder */
.hsb-rela-inputs input[type="radio"],
.hsb-rela-inputs input.rela_button.kat {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  display: inline-block !important;
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  margin: 0 5px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: -2px !important;
  cursor: pointer !important;
  accent-color: #e98d88;
}

.hsb-rela-inputs input[type="radio"]:first-child,
.hsb-rela-inputs input.rela_button.kat:first-child {
  margin-left: 0 !important;
}

/* Helle Kategoriebox kompakter und ruhiger */
.hsb-rela-inputs {
  min-height: 38px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(191,157,132,.18) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.66) !important;
  color: #665d57 !important;
  line-height: 2 !important;
}

/* Anfragebox weniger hoch */
.hsb-rela-request {
  margin-top: 14px !important;
  padding: 13px !important;
  border-radius: 18px !important;
}

.hsb-rela-request-title {
  min-height: 30px !important;
  margin-bottom: 10px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
}

/* Sortierung schmal, Kategorien erhalten mehr Platz */
.hsb-rela-form-grid {
  grid-template-columns: minmax(100px,.42fr) minmax(0,1fr) !important;
  gap: 10px !important;
}

.hsb-rela-row input.rela.sort,
.hsb-rela-row input[name="sort"],
input.rela.sort,
input[name="sort"] {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(191,157,132,.24) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.92) !important;
  color: #4d4540 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* Kommentarbox kompakter */
.hsb-rela-row textarea {
  min-height: 90px !important;
}

/* Senden-Button kleiner */
.hsb-rela-submit {
  margin-top: 11px !important;
}

.hsb-rela-submit input[type="submit"],
#rela_button {
  min-height: 31px !important;
  padding: 0 18px !important;
  font-size: 7px !important;
  box-shadow: 0 7px 16px rgba(233,141,136,.15) !important;
}

/* Tabellenzelle darf das Sortierungsfeld nicht zusammendrücken */
td:has(> input.rela.sort),
td:has(> input[name="sort"]) {
  width: 76px !important;
  min-width: 76px !important;
  padding: 4px 7px !important;
}

@media (max-width:760px) {
  .hsb-rela-form-grid {
    grid-template-columns:1fr !important;
  }
}