/* ============================================================
   I-Single Community – custom.css (Helix Ultimate / Joomla 5.x)
   Stand: SSOT / wartungsfreundlich / klar gegliedert
   ------------------------------------------------------------
   WICHTIG:
   - Startseite (.is-*) bleibt strikt getrennt vom CB-CSS
   - Profilbild-CSS gilt als FINAL → nur über Variablen “tunen”
   - Breakpoints (Dokumentation):
       XS Mobile  <= 575.98px
       Mobile     <= 767.98px
       Tablet      768–991.98px
       Desktop     >= 992px
   ============================================================

   INHALT
   00) TOKENS / GLOBAL BASICS (SSOT)
   10) OFFCANVAS (Helix) – Layout + Menu
   20) ICON-LOGIK (Top-Navi vs. Offcanvas) + CTA
   30) COMMUNITY BUILDER (CB)
       30.1 CB UserListT_5: Name + Alter in einer Zeile (>=576px)
       30.2 CB Profil: Warm Card Design (Tabs/Tabpane)
       30.3 CB Profil: AVATAR IM CANVAS (FINAL SSOT) ✅ NICHT ÄNDERN
   31) CB PROFIL – MOBILE FIXES (SSOT)
       31.1 Avatar Mobile (S22 safe) – über Variablen tunen
       31.2 Profil-Felder XS: Label + Wert nebeneinander (<576px)
       31.3 Progress: Mobile vollbreit + Checkliste sauber
   110) OFFCANVAS LOGIN + CB CONNECT (JS Hooks: .oc-remember-moved, .oc-passwrap)
   200) CB User List T_5 – Canvas/Overlay + Mobile 2-Spalten (SSOT)
   890) STARTSEITE – STEPS (SP Page Builder RAW HTML)
   900) STARTSEITE – TRUST & SAFETY (SP Page Builder RAW HTML)
   990) FOOTER – Links zentriert mit Punkten
   ============================================================ */


/* ============================================================
   00) TOKENS / GLOBAL BASICS (SSOT)
   Hinweis: Hier nur Variablen & globale Hintergründe.
   ============================================================ */

:root{
  /* Warmes CB-Design */
  --is-warm-bg: #fff7fb;
  --is-warm-border: rgba(237,20,125,.18);
  --is-text-soft: #5b5560;
  --is-text-strong: #2b2b2b;
  --is-shadow-main: 0 16px 40px rgba(0,0,0,0.10);
  --is-shadow-row: 0 8px 20px rgba(0,0,0,0.07);

  /* Neutraler Seitenhintergrund */
  --page-bg: var(--template-bg-light, #f0f4fb);

  /* (optional) CB Activity cards */
  --cb-card-radius: 14px;
  --cb-card-border: rgba(0,0,0,.08);
  --cb-card-bg: #fff;
  --cb-card-shadow: 0 8px 22px rgba(0,0,0,.06);
  --cb-muted: rgba(0,0,0,.58);
}

/* Stabiler Seitenhintergrund (gegen “Flicker”) */
html, body{
  background: var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}

#sp-main-body,
#sp-component,
.sp-page-wrapper,
.body-innerwrapper,
.body-wrapper{
  background: var(--page-bg) !important;
  background-color: var(--page-bg) !important;
  background-clip: padding-box;
}

#sp-main-body > .container,
#sp-main-body > .container-fluid,
#sp-component > .container,
#sp-component > .container-fluid{
  background: var(--page-bg) !important;
  background-color: var(--page-bg) !important;
}


/* ============================================================
   10) OFFCANVAS (HELIX) – Layout + Menu
   Hinweis: Basis-Öffnen/Schließen + typografische Regeln
   ============================================================ */

/* Basis: Offcanvas rein/raus */
.offcanvas-menu{
  transform: translateX(100%) !important;
  overflow: hidden;
}
body.offcanvas-active .offcanvas-menu,
.offcanvas-active .offcanvas-menu{
  transform: translateX(0) !important;
}

/* Desktop (>= 992px) */
@media (min-width: 992px){
  .offcanvas-menu{
    width: 400px !important;
    max-width: 400px !important;
  }

  .offcanvas-menu .offcanvas-inner{
    padding-left: 24px;
    padding-right: 24px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module > ul > li > a,
  .offcanvas-menu .offcanvas-inner .sp-module > ul > li > span{
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    padding: 12px 16px !important;
    font-weight: 600;
    letter-spacing: .2px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul ul > li > a,
  .offcanvas-menu .offcanvas-inner .sp-module ul ul > li > span{
    font-size: 1.15rem !important;
    line-height: 1.30 !important;
    padding: 8px 16px !important;
    opacity: .92;
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul ul{
    margin-top: 8px;
    padding-left: 14px;
    border-left: 1px solid rgba(0,0,0,.08);
  }

  .offcanvas-menu .offcanvas-inner .sp-module > ul > li{ margin: 6px 0; }

  .offcanvas-menu .offcanvas-inner .sp-module ul li > a{
    border-radius: 10px;
    transition: background-color .15s ease, padding-left .15s ease;
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul li > a:hover{
    background: rgba(0,0,0,.05);
    padding-left: 20px !important;
  }

  .offcanvas-menu .offcanvas-inner .sp-module li.current > a,
  .offcanvas-menu .offcanvas-inner .sp-module li.active > a{
    background: rgba(0,0,0,.08);
    font-weight: 600;
  }
}

/* Mobile/Tablet (<= 991.98px) */
@media (max-width: 991.98px){
  .offcanvas-menu{
    width: min(92vw, 420px) !important;
    max-width: 92vw !important;
  }

  .offcanvas-menu .offcanvas-inner{
    padding-left: 18px;
    padding-right: 18px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module > ul > li > a{
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    padding: 14px 14px !important;
    font-weight: 600;
    border-radius: 12px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul ul > li > a{
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    padding: 14px 14px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: 12px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul ul{
    margin-top: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(0,0,0,.10);
  }

  .offcanvas-menu .offcanvas-inner .sp-module ul li > a:active{
    background: rgba(0,0,0,.06);
  }

  .offcanvas-menu .offcanvas-inner .sp-module .menu-toggler{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    margin-left: 8px;
  }

  .offcanvas-menu .offcanvas-inner .sp-module + .sp-module{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .offcanvas-menu .mod-login-logout__login-avatar img{
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
  }

  .offcanvas-menu .logout-button .btn{
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .offcanvas-menu .mod-login-logout__options li a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,.03);
  }
}


/* ============================================================
   20) ICON-LOGIK (Top-Navi vs. Offcanvas) + CTA
   Hinweis: Icons nur im Offcanvas, CTA Button “Register”
   ============================================================ */

/* Top-Navigation: Icons ausblenden */
.sp-megamenu-wrapper a > span[class*="fa-"]{ display: none !important; }

/* Offcanvas: Icons anzeigen */
.offcanvas-inner a > span[class*="fa-"]{
  display: inline-block !important;
  margin-right: .6rem;
}

/* Offcanvas CTA Button */
.offcanvas-inner a.oc-register-btn,
.offcanvas-inner a.oc-register-btn:visited,
.offcanvas-inner a.oc-register-btn:focus,
.offcanvas-inner a.oc-register-btn:active{
  background-color: #2dae36 !important;
  border-color: #2dae36 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 14px;
}
.offcanvas-inner a.oc-register-btn{
  min-height: 48px;
  line-height: 24px;
  letter-spacing: .2px;
}


/* ============================================================
   30) COMMUNITY BUILDER (CB) – Listen + Profil
   ============================================================ */

/* ------------------------------------------------------------
   30.1 CB UserListT_5: Name + Alter in EINER Zeile (>=576px)
   Hinweis: Mobile kommt aus Block 200 (SSOT).
   ------------------------------------------------------------ */
@media (min-width: 576px){
  .cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBody{
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
  }

  .cbUserListDiv.cbUserListT_5
  .cbCanvasLayoutBody > .text-truncate.cbCanvasLayoutContent{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cbUserListDiv.cbUserListT_5
  .cbCanvasLayoutBody > .row.cbCanvasLayoutContent{
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;
  }

  .cbUserListDiv.cbUserListT_5 .cb-memberslist_test{
    margin: 0 !important;
    padding: 0 !important;
    color: #6c757d;
    white-space: nowrap !important;
  }

  .cbUserListDiv.cbUserListT_5 .cb-memberslist_test .cbUserListFieldLine{
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .cbUserListDiv.cbUserListT_5 .text-truncate.cbCanvasLayoutContent a{ font-weight: 600; }
  .cbUserListDiv.cbUserListT_5 .text-truncate.cbCanvasLayoutContent a::after{ content: ",\00a0"; }
}


/* ------------------------------------------------------------
   30.2 CB Profil – Warm Card Design (Tabs/Tabpane)
   Hinweis: Styles nur innerhalb com_comprofiler.
   ------------------------------------------------------------ */

body.com_comprofiler #sp-page-body,
body.com_comprofiler #sp-main-body,
body.com_comprofiler .sp-page-body,
body.com_comprofiler .sp-main-body,
body.com_comprofiler .sp-body-inner,
body.com_comprofiler .body-innerwrapper,
body.com_comprofiler .wrapper,
body.com_comprofiler .site,
body.com_comprofiler #sp-wrapper{
  background: transparent !important;
}

body.com_comprofiler .nav-tabs{
  border-bottom: none !important;
  gap: 8px !important;
}

body.com_comprofiler .nav-tabs .nav-link{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  color: #343a40 !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

body.com_comprofiler .nav-tabs .nav-link:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

body.com_comprofiler .nav-tabs .nav-link.active{
  border-color: rgba(237,20,125,.30) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

body.com_comprofiler .tab-content,
body.com_comprofiler .cbTabsContent,
body.com_comprofiler .cbTabContent,
body.com_comprofiler .cb_tab_content{
  background: transparent !important;
}

body.com_comprofiler .tab-pane.active,
body.com_comprofiler .cbTabPane.active,
body.com_comprofiler .cb_tab_pane.active{
  background: var(--is-warm-bg) !important;
  border: 1px solid var(--is-warm-border) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  box-shadow: var(--is-shadow-main) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.com_comprofiler .tab-pane.active::before,
body.com_comprofiler .cbTabPane.active::before,
body.com_comprofiler .cb_tab_pane.active::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  bottom: 16px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(237,20,125,.85), rgba(237,20,125,.20)) !important;
}


/* ------------------------------------------------------------
   30.3 CB Profil – AVATAR IM CANVAS (FINAL SSOT) ✅ NICHT ÄNDERN
   ------------------------------------------------------------
   >>> HIER deinen kompletten 30.3 Desktop/Tablet/Mobile Block einfügen.
   >>> Struktur NICHT ändern; nur über Variablen (Tuning) justieren.
   ------------------------------------------------------------ */


/* ============================================================
   31) CB PROFIL – MOBILE FIXES (SSOT)
   Hinweis: Diese Fixes sind bewusst “eng” gescoped.
   ============================================================ */

/* ------------------------------------------------------------
   31.1 AVATAR (Mobile) – S22 safe
   Stellschrauben:
     --cbm-left / --cbm-top / --cbm-lift / --cbm-avatar / --cbm-gap
   ------------------------------------------------------------ */
@media (max-width: 767.98px){
  body.com_comprofiler{
    --cbm-avatar: 110px;
    --cbm-left: 20px;
    --cbm-top: 5px;
    --cbm-lift: 122px;
    --cbm-gap: 18px;
  }

  body.com_comprofiler :is(.cbPosCanvasTop, .cbCanvasLayoutTop){
    position: relative !important;
    overflow: hidden !important;
  }

  body.com_comprofiler :is(.cbPosCanvasPhoto, .cbCanvasLayoutPhoto){
    position: absolute !important;
    left: var(--cbm-left) !important;
    top: var(--cbm-top) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(calc(-1 * var(--cbm-lift, 122px))) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
  }

  body.com_comprofiler :is(.cbPosCanvasPhoto, .cbCanvasLayoutPhoto) img.cbImgAvatar{
    width: var(--cbm-avatar) !important;
    height: var(--cbm-avatar) !important;
    object-fit: cover !important;
  }

  body.com_comprofiler .cbCanvasLayoutBody{
    padding-top: calc(var(--cbm-avatar) + 14px) !important;
    padding-left: calc(var(--cbm-avatar) + var(--cbm-gap)) !important;
  }
}

/* ------------------------------------------------------------
   31.2 Profilfelder XS (<576px): Label + Wert nebeneinander
   Markup: .cb_form_line + label + .cb_field
   ------------------------------------------------------------ */
@media (max-width: 575.98px){
  body.com_comprofiler .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line{
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    margin: 0 0 10px !important;
  }

  body.com_comprofiler .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line > label{
    flex: 0 0 38% !important;
    max-width: 38% !important;
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
    white-space: nowrap !important;
  }

  body.com_comprofiler .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line > .cb_field{
    flex: 1 1 auto !important;
    max-width: 62% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  body.com_comprofiler .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line .form-control-plaintext{
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}

/* ------------------------------------------------------------
   31.3 Progress (Mobile): wie Desktop vollbreit + Checkliste clean
   Kernhebel: align-items: stretch in der flex-column Kette
   ------------------------------------------------------------ */
@media (max-width: 767.98px){
  body.com_comprofiler .cbft_progress.cb_form_line,
  body.com_comprofiler .cbft_progress.cb_form_line > .cb_field,
  body.com_comprofiler .cbft_progress.cb_form_line > .cb_field.col-sm-12{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body.com_comprofiler #cbfv_164,
  body.com_comprofiler #cbfv_164 > div,
  body.com_comprofiler #cbfv_164 .cbProgress{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  body.com_comprofiler #cbfv_164 .cbProgressChecklist{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
}

/* Optional: Mobile Grid entzerren (2 Spalten, sehr klein 1 Spalte) */
@media (max-width: 575.98px){
  body.com_comprofiler #cbfv_164 .cbProgressChecklist{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 360px){
  body.com_comprofiler #cbfv_164 .cbProgressChecklist{
    grid-template-columns: 1fr !important;
  }
}

/* Optional: Items (Icon + Text) sauber ausrichten */
body.com_comprofiler #cbfv_164 .cbProgressChecklist > div{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  white-space: normal !important;
}


/* ============================================================
   110) OFFCANVAS LOGIN + CB CONNECT (JS Hooks)
   Hinweis: arbeitet mit custom.js (SSOT) – .oc-passwrap etc.
   ============================================================ */

.offcanvas-menu{
  --oc-radius: 14px;
  --oc-gap: 10px;
  --oc-border: rgba(0,0,0,.10);
  --oc-bg: rgba(255,255,255,.92);
  --oc-shadow: 0 10px 24px rgba(0,0,0,.10);
  --oc-focus: rgba(24,119,242,.12);
}

.offcanvas-menu .sp-module{ padding: 0 !important; }

.offcanvas-menu .mod-login-logout__login,
.offcanvas-menu .cbLoginForm,
.offcanvas-menu .cb_login,
.offcanvas-menu .cbLogin{
  background: var(--oc-bg);
  border: 1px solid var(--oc-border);
  border-radius: var(--oc-radius);
  padding: 14px;
  box-shadow: var(--oc-shadow);
}

.offcanvas-menu .mod-login-logout__login form,
.offcanvas-menu .cbLoginForm form,
.offcanvas-menu .cb_login form,
.offcanvas-menu .cbLogin form{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--oc-gap) !important;
}

.offcanvas-menu input[type="text"],
.offcanvas-menu input[type="email"],
.offcanvas-menu input[type="password"]{
  border-radius: var(--oc-radius) !important;
  padding: 12px 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #fff !important;
  height: auto !important;
}

.offcanvas-menu input[type="text"]:focus,
.offcanvas-menu input[type="email"]:focus,
.offcanvas-menu input[type="password"]:focus{
  outline: none !important;
  border-color: rgba(0,0,0,.28) !important;
  box-shadow: 0 0 0 4px var(--oc-focus) !important;
}

.offcanvas-menu .btn,
.offcanvas-menu button.btn,
.offcanvas-menu input[type="submit"].btn,
.offcanvas-menu button,
.offcanvas-menu input[type="submit"]{
  width: 100% !important;
  border-radius: var(--oc-radius) !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.offcanvas-menu button[type="submit"],
.offcanvas-menu input[type="submit"]{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

.offcanvas-menu a:not(.btn):not([role="button"]){ text-decoration: none; }
.offcanvas-menu a:not(.btn):not([role="button"]):hover{ text-decoration: underline; }

.offcanvas-menu .oc-passwrap{
  position: relative !important;
  width: 100% !important;
}

.offcanvas-menu .oc-passwrap input[type="password"],
.offcanvas-menu .oc-passwrap input[type="text"][name*="pass"]{
  padding-right: 52px !important;
}

.offcanvas-menu .oc-passwrap .input-password-toggle{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.10) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 12px !important;
  color: rgba(0,0,0,.90) !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Safety: falls Helix/CB mehrere Augen-Buttons erzeugt */
.offcanvas-menu .oc-passwrap .input-password-toggle:not(:last-of-type){
  display: none !important;
}

/* Remember-Me Block (per JS umgehängt) */
.offcanvas-menu .oc-remember-moved{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}


/* ============================================================
   200) CB User List T_5 – Canvas/Overlay + Mobile 2-Spalten (SSOT)
   Hinweis: Hier sitzt dein Mobile-Kachel-Design.
   ============================================================ */

#cbUserTable.cbUserListDiv.cbUserListT_5{ --is-card-r: 14px; }

/* Canvas “beruhigen” (Desktop/Tablet) */
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbCanvas{
  position: relative;
  overflow: hidden;
  display: block;
  filter: saturate(.40) brightness(.80) contrast(.95);
}
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbCanvas::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 2;
}
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbCanvas *{
  position: relative;
  z-index: 3;
}

#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBody{
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
}

#cbUserTable.cbUserListDiv.cbUserListT_5 img.cbImgAvatar,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbPict{
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  border-radius: 12px;
  background: #fff;
}

/* Karten-Radius konsistent */
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbUserListRow,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbUserListItem{
  border-radius: var(--is-card-r) !important;
  overflow: hidden !important;
  background-clip: padding-box;
}
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayout,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutTop,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutHeader,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutPhoto,
#cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBody{
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Mobile (<= 767.98px): Canvas AUS, Avatar dominant, Text darunter */
@media (max-width: 767.98px){
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutTop,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBackground,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbCanvas,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbImgCanvas,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbFullCanvas,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbThumbCanvas::after{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    content: none !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayout,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutHeader,
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBottom{
    overflow: visible !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBottom{
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    padding: 10px 10px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutPhoto{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: fit-content !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutPhoto img.cbImgAvatar{
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbCanvasLayoutBody{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 8px 10px 12px !important;
    margin: 0 !important;
    gap: 3px !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .text-truncate.cbCanvasLayoutContent a::after{
    content: "" !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cb-memberslist_test{
    margin-top: 0 !important;
    color: #6c757d !important;
  }
}

/* Portrait (XS) – 2 Spalten */
@media (max-width: 575.98px) and (orientation: portrait){
  #cbUserTable.cbUserListDiv.cbUserListT_5{
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbUserListRow{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 12px !important;
  }
}

/* Sehr kleine Geräte – 1 Spalte */
@media (max-width: 360px){
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbUserListRow{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ============================================================
   890) STARTSEITE – STEPS (SP Page Builder RAW HTML)
   Hinweis: Startseiten-Styles bleiben getrennt von CB.
   ============================================================ */

.is-steps{ padding: 24px 0; }

.is-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.is-card{
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 56px 26px 26px;
  text-align: left;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
}

/* Icon mittig (SSOT) */
.is-card__icon{
  position: absolute;
  top: -28px;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ff2f6d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
}

.is-card h3{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.is-card p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.72);
}

@media (max-width: 991px){
  .is-steps__grid{ grid-template-columns: 1fr; }
  .is-card{ padding: 54px 22px 24px; }
}


/* ============================================================
   900) STARTSEITE – TRUST & SAFETY (SP Page Builder RAW HTML)
   ============================================================ */

body .sppb-addon-content .is-trust{
  padding: clamp(18px, 3vw, 34px) 0 !important;
  background: #fbf7f3 !important;
}

body .sppb-addon-content .is-trust__card{
  background: #fffdfb !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 18px !important;
  padding: clamp(18px, 3vw, 28px) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12) !important;

  max-width: 980px !important;
  margin: 0 auto !important;
  width: min(980px, calc(100% - 32px)) !important;
}

body .sppb-addon-content .is-trust__title{
  margin: 0 0 14px !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: rgba(0,0,0,.92) !important;
}

body .sppb-addon-content .is-trust__text{
  margin: 0 auto 18px !important;
  max-width: 860px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #444 !important;
  text-align: center !important;
}

body .sppb-addon-content .is-trust__list{
  list-style: none !important;
  padding: 0 !important;
  margin: 18px auto 0 !important;
  max-width: 760px !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
}

body .sppb-addon-content .is-trust__list li{
  background: rgba(255, 47, 109, 0.08) !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  text-align: center !important;
  color: #333 !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

@media (hover: hover) and (pointer: fine){
  body .sppb-addon-content .is-trust__list li:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.08) !important;
  }
}

@media (max-width: 991px){
  body .sppb-addon-content .is-trust__title{ font-size: 24px !important; }
  body .sppb-addon-content .is-trust__card{ padding: 28px 20px 22px !important; }
  body .sppb-addon-content .is-trust__list{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 480px){
  body .sppb-addon-content .is-trust__list{
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   990) FOOTER – Links zentriert + Punkttrenner
   Hinweis: HTML: Impressum · Datenschutz · AGB · Cookie-Einstellungen
   ============================================================ */

.site-footer .footer-links{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  text-align: center;
}

.site-footer .footer-links a{
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  padding: 2px 0;
}

.site-footer .footer-links a:hover{
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-links a + a::before{
  content: " · ";
  color: rgba(255,255,255,.45);
  margin: 0 10px;
}

@media (max-width: 576px){
  .site-footer .footer-links a + a::before{ margin: 0 8px; }
}
/* ============================================================
   SMALL TABLET FIX (600–767.98px)
   Ziel: Galaxy Tab S4 & Co. nicht in Mobile-Avatar-Logik fallen lassen
   ============================================================ */
@media (min-width: 600px) and (max-width: 767.98px){
  body.com_comprofiler{
    /* Tablet-Feeling: Werte ggf. anpassen */
    --cbm-avatar: 132px;
    --cbm-left: 18px;
    --cbm-top: 0px;
    --cbm-lift: 80px;  /* weniger “hochziehen” als Mobile */
    --cbm-gap: 20px;
  }
}
/* ============================================================
   HOTFIX: Profil-Avatar-Padding NICHT auf Tab-Inhalte anwenden
   Problem: .cbCanvasLayoutBody wird auch in GroupJive Cards genutzt
   Lösung: Padding nur im Canvas-Header setzen
   ============================================================ */

@media (max-width: 767.98px){

  /* 1) ZUERST: globales Padding für cbCanvasLayoutBody im Profil neutralisieren
        (falls es bei dir irgendwo allgemein gesetzt wurde) */
  body.com_comprofiler .cbTabPaneMenu .cbCanvasLayoutBody{
    padding-top: 0 !important;
    padding-left: 0 !important;
  }

  /* 2) NUR der Profil-Header (Canvas oben) bekommt das Avatar-Padding */
  body.com_comprofiler :is(.cbPosCanvasTop, .cbCanvasLayoutTop) .cbCanvasLayoutBody{
    padding-top: calc(var(--cbm-avatar) + 14px) !important;
    padding-left: calc(var(--cbm-avatar) + var(--cbm-gap)) !important;
  }
}
/* ============================================================
   GJ LIVE-SUCHE (rosa Balken) – zentriert + pill, nicht full-bleed
   ============================================================ */

/* 1) Container im rosa Balken: Inhalte zentrieren */
.gjLiveSearch,
.gj-live-search,
.gjSearchBar,
.gj-searchbar{
  display: flex !important;
  justify-content: center !important;
}

/* 2) Innerer Wrap: begrenzte Breite + mittig */
.gjLiveSearch form,
.gj-live-search form,
.gjSearchBar form,
.gj-searchbar form{
  width: 100% !important;
  max-width: 760px !important;     /* Stellschraube */
  margin: 0 auto !important;
  padding: 0 14px !important;      /* Luft links/rechts */
}

/* 3) Suchfeld “pill” + nicht an den Rand kleben */
.gjLiveSearch input[type="search"],
.gjLiveSearch input[type="text"],
.gj-live-search input[type="search"],
.gj-live-search input[type="text"],
.gjSearchBar input[type="search"],
.gjSearchBar input[type="text"],
.gj-searchbar input[type="search"],
.gj-searchbar input[type="text"]{
  width: 100% !important;
  border-radius: 999px !important;
  padding: 10px 44px 10px 16px !important;  /* rechts Platz für Icon */
}

/* 4) Icon/Button runde Kante passend */
.gjLiveSearch button,
.gjLiveSearch .btn,
.gj-live-search button,
.gj-live-search .btn,
.gjSearchBar button,
.gjSearchBar .btn,
.gj-searchbar button,
.gj-searchbar .btn{
  border-radius: 999px !important;
}
/* ============================================================
   GROUPJIVE: Live-Suche im rosa Balken
   Ziel: zentriert + pill-form + nicht full-bleed
   Hook: form.groups-inline-search (Input hat keine Klasse)
   ============================================================ */

form.groups-inline-search{
  /* zentriert im Balken */
  width: min(760px, calc(100% - 28px)) !important; /* Stellschraube */
  margin: 10px auto !important;

  /* pill container */
  display: flex !important;
  align-items: stretch !important;
  border-radius: 999px !important;
  overflow: hidden !important;

  /* optional: falls der rosa Balken Hintergrund hat und du eine „Kapsel“ willst */
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}

form.groups-inline-search > input[type="search"]{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;

  border: 0 !important;
  outline: none !important;
  background: transparent !important;

  padding: 10px 14px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

form.groups-inline-search > button{
  flex: 0 0 auto !important;
  border: 0 !important;
  background: rgba(0,0,0,.06) !important;
  padding: 0 14px !important;
  min-width: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

form.groups-inline-search > button:hover{
  background: rgba(0,0,0,.10) !important;
}

/* Fokus: schöner Ring, ohne das Layout zu sprengen */
form.groups-inline-search:focus-within{
  border-color: rgba(237,20,125,.35) !important;
  box-shadow: 0 0 0 4px rgba(237,20,125,.12) !important;
}

/* Mobile: etwas kompakter */
@media (max-width: 575.98px){
  form.groups-inline-search{
    width: calc(100% - 22px) !important;
    margin: 8px auto !important;
  }
  form.groups-inline-search > input[type="search"]{
    padding: 10px 12px !important;
  }
}
/* ============================================================
   FIX: Unnötigen Leerraum unter Header entfernen (Helix)
   Ziel: #sp-main-body / page-body ohne Extra-Padding/Margin
   ============================================================ */

/* Global – wenn es überall stört */
#sp-main-body,
#sp-page-body,
.sp-page-body{
  padding-top: 0 !important;
  margin-top: 0 !important;
}