/* ============================================================
   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
   ============================================================ */


/* ============================================================
   00) TOKENS / GLOBAL BASICS (SSOT)
   ============================================================ */

: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);

  /* CBSubs Akzent */
  --is-pink:      #ED147D;
  --is-pink-soft: rgba(237, 20, 125, .14);
  --is-pink-mid:  rgba(237, 20, 125, .28);
  --is-border:    rgba(0,0,0,.10);
  --is-border2:   rgba(0,0,0,.08);
}

/* 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;
}

/* FIX: Unnötigen Leerraum unter Header entfernen (Helix) */
#sp-main-body,
#sp-page-body,
.sp-page-body{
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ============================================================
   10) OFFCANVAS (HELIX) – Layout + Menu
   ============================================================ */

.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
   ============================================================ */

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

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

.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{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;

  background-color: #2dae36 !important;
  border: 1px solid #2dae36 !important;
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  min-height: 48px !important;
  line-height: 24px !important;
  letter-spacing: .2px !important;

  margin: 0 0 14px 0 !important;
}
@media (max-width: 767.98px){
  .offcanvas-inner a.oc-register-btn{ margin-bottom: 16px !important; }
}


/* ============================================================
   30) COMMUNITY BUILDER (CB)
   ============================================================ */

/* 30.1 CB UserListT_5: Name + Alter in einer Zeile (>=576px) */
@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) */
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. */


/* ============================================================
   31) CB PROFIL – MOBILE FIXES (SSOT)
   ============================================================ */

/* 31.1 Avatar Mobile – S22 safe */
@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;
  }

  /* IMPORTANT: Padding gilt im Profil nur im Header – siehe HOTFIX weiter unten */
  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 (VIEW, nicht Edit) */
@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): vollbreit + Checkliste sauber */
@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;
  }
}

@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;
  }
}
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;
}

/* SMALL TABLET FIX (600–767.98px) */
@media (min-width: 600px) and (max-width: 767.98px){
  body.com_comprofiler{
    --cbm-avatar: 132px;
    --cbm-left: 18px;
    --cbm-top: 0px;
    --cbm-lift: 80px;
    --cbm-gap: 20px;
  }
}

/* HOTFIX: Profil-Avatar-Padding NICHT auf Tab-Inhalte anwenden */
@media (max-width: 767.98px){
  body.com_comprofiler .cbTabPaneMenu .cbCanvasLayoutBody{
    padding-top: 0 !important;
    padding-left: 0 !important;
  }

  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;
  }
}


/* ============================================================
   110) OFFCANVAS LOGIN + CB CONNECT (JS Hooks)
   ============================================================ */

.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;
}

.offcanvas-menu .oc-passwrap .input-password-toggle:not(:last-of-type){
  display: none !important;
}

.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)
   ============================================================ */

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

#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;
}

#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;
}

@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;
  }
}

@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;
  }
}

@media (max-width: 360px){
  #cbUserTable.cbUserListDiv.cbUserListT_5 .cbUserListRow{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ============================================================
   GROUPJIVE: Live-Suche im rosa Balken (zentriert + pill)
   ============================================================ */

.gjLiveSearch,
.gj-live-search,
.gjSearchBar,
.gj-searchbar{
  display: flex !important;
  justify-content: center !important;
}

.gjLiveSearch form,
.gj-live-search form,
.gjSearchBar form,
.gj-searchbar form{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
}

.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;
}

.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;
}

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

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

  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; }

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;
}

@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; }
}


/* ============================================================
   CCM19 – Preferences als Modal statt "ganze Seite"
   ============================================================ */

.ccm-modal,
#ccm-widget{ z-index: 999999 !important; }

.ccm-modal .ccm-modal-inner,
.ccm-modal .ccm-modal-body,
#ccm-widget .ccm-modal-inner,
#ccm-widget .ccm-modal-body{
  max-width: 900px !important;
  width: calc(100% - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  margin: 16px auto !important;
  border-radius: 14px !important;
  overflow: auto !important;
}

.ccm-modal::before,
#ccm-widget::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: -1;
}

.ccm-modal,
#ccm-widget.ccm-modal{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#ccm-widget, .ccm-modal, [id*="ccm"], [class*="ccm"]{
  transition: none !important;
}


/* ============================================================
   CB Moderation – Pill Optik + Icons + Alert Animation
   ============================================================ */

.cbModeratorLink { margin: .35rem 0; }

.cbModeratorLink a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  text-decoration: none !important;
  line-height: 1;
  font-weight: 700;

  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.cbModeratorLink a:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.cbModeratorLink a::before{
  content: "🛡️";
  display: inline-block;
  font-size: 1.05rem;
  transform-origin: 50% 0%;
}

.cbModeratorLinkProfileReports a::before { content: "🧾"; }
.cbModeratorLinkPrivateMessages a::before { content: "✉️"; }
.cbModeratorLinkConnections a::before { content: "🤝"; }
.cbModeratorLinkGalleryItems a::before { content: "🔔"; }

.cbModeratorLink a.is-alert{
  background: rgba(255, 87, 123, .12);
  border-color: rgba(255, 87, 123, .35);
  box-shadow: 0 10px 26px rgba(255, 87, 123, .12), 0 8px 22px rgba(0,0,0,.10);
}

.cbModeratorLinkGalleryItems a.is-alert::before{
  animation: cbBellWiggle 1.15s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(255, 87, 123, .22));
}

.cbModeratorLinkGalleryItems a.is-alert::after{
  content: "";
  position: absolute;
  left: .62rem;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid rgba(255, 87, 123, .35);
  opacity: 0;
  animation: cbBellPing 1.15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cbBellWiggle{
  0%,72%,100%{ transform: rotate(0deg); }
  76%{ transform: rotate(-12deg); }
  82%{ transform: rotate(12deg); }
  88%{ transform: rotate(-9deg); }
  94%{ transform: rotate(9deg); }
}

@keyframes cbBellPing{
  0%,72%{ transform: translateY(-50%) scale(.85); opacity: 0; }
  78%{ opacity: .55; }
  88%{ transform: translateY(-50%) scale(1.25); opacity: 0; }
  100%{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cbModeratorLink a,
  .cbModeratorLink a::before,
  .cbModeratorLink a::after{
    transition: none !important;
    animation: none !important;
  }
}

/* Moderation Pills: volle Breite möglich */
.cbModeratorLink a{
  width: 100%;
  justify-content: flex-start;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
}

/* (Optional) Gallery Doppeltext – falls vorhanden */
.cbModeratorLinkGalleryItems a{
  position: relative;
  display: inline-block;
}


/* ============================================================
   CBSubs: Upgrades (DESKTOP) + Status/Headers (SSOT)
   ============================================================ */

@media (min-width: 769px){
  #cbregUpgrades.cbregPlansList{
    display: grid;
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 14px;
  }
  #cbregUpgrades.cbregPlansList:not(:has(.cbregPlan:nth-child(3))){
    grid-template-columns: repeat(2, minmax(320px, 1fr));
  }

  #cbregUpgrades .cbregPlan_rounded .card,
  #cbregUpgrades .cbregPlan_default .cbRegNameDesc{
    border: 1px solid var(--is-border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    min-height: 190px;
  }

  #cbregUpgrades .cbregPlan_rounded .card:hover,
  #cbregUpgrades .cbregPlan_default .cbRegNameDesc:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.16);
  }

  #cbregUpgrades .cbregPlan_rounded .card-header,
  #cbregUpgrades .cbregPlan_default .cbregName{
    padding: 14px 16px;
    font-weight: 900;
    letter-spacing: .2px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  }

  #cbregUpgrades .cbregPlan_rounded .card-body,
  #cbregUpgrades .cbregPlan_default .cbregParagraph{
    padding: 16px;
  }

  #cbregUpgrades .form-check{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }

  #cbregUpgrades input.cbregTick{
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
  }

  #cbregUpgrades .cbregFee{
    margin: 0;
    font-weight: 900;
    font-size: 1.12rem;
    letter-spacing: .2px;
  }

  #cbregUpgrades label{ cursor: pointer; }

  #cbregUpgrades .cbregPlan_default:has(input.cbregTick:checked) .cbRegNameDesc,
  #cbregUpgrades .cbregPlan_rounded:has(input.cbregTick:checked) .card{
    border-color: var(--is-pink) !important;
    box-shadow: 0 14px 30px var(--is-pink-soft) !important;
    transform: translateY(-2px);
  }

  .cbregUpgradeButtonDiv{
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .cbregUpgradeButtonDiv .btn{
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 900;
    letter-spacing: .2px;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .14s ease, box-shadow .14s ease;
    background: var(--is-pink) !important;
    border-color: var(--is-pink) !important;
  }

  .cbregUpgradeButtonDiv .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
    filter: brightness(.95);
  }
}

#cbregUpgrades .cbregDiscountRate{ display: none !important; }

#cbregUpgrades .card-header::after,
#cbregUpgrades .cbregName::after{ content: none; }

#cbregUpgrades .cbregPlan:has(#cbpplan2) .card-header,
#cbregUpgrades .cbregPlan:has(#cbpplan2) .cbregName{ position: relative; }

#cbregUpgrades .cbregPlan:has(#cbpplan2) .card-header::after,
#cbregUpgrades .cbregPlan:has(#cbpplan2) .cbregName::after{
  content: "Beliebt" !important;
  position: absolute;
  right: 12px;
  top: 6px;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(237, 20, 125, .15) !important;
  border: 1px solid rgba(237, 20, 125, .45) !important;
  color: #111;
  pointer-events: none;
}

#cbregUpgrades .cbregPlan:has(#cbpplan2) .card,
#cbregUpgrades .cbregPlan:has(#cbpplan2) .cbRegNameDesc{ border-width: 2px; }

#cbregSubscribed .cb-content-header-title{
  visibility: hidden;
  position: relative;
}
#cbregSubscribed .cb-content-header-title::before{
  content: "Deine aktuelle Mitgliedschaft";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

#cbregUpgradePossibilities .cb-content-header-title{
  visibility: hidden;
  position: relative;
}
#cbregUpgradePossibilities .cb-content-header-title::before{
  content: "Deine Upgrades";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

#cbregSubscribed{
  background: #fff;
  border: 1px solid var(--is-border2);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  padding: 14px 16px;
  margin-bottom: 0 !important;
}

#cbregSubscribed .cb-content-header{
  margin: 0 !important;
  border: 0 !important;
}

#cbregSubscr{
  background: #fff;
  border: 1px solid var(--is-border2);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#cbregSubscr .card.cbRegNameDesc{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#cbregSubscr .card-header{
  transition: background-color .15s ease, border-color .15s ease;
}
#cbregSubscr .card.cbRegNameDesc:hover .card-header{
  background: var(--is-pink-soft) !important;
}

#cbregSubscribed .cbregValExp .cbregValidity,
#cbregSubscribed .cbregValExp .cbregExpiring{
  display: none !important;
}



/* ============================================================
   Kleine Hilfs-Regeln
   ============================================================ */

.galleryEmpty{ display: none !important; }

#cbfv_payer_business_name{ display: none !important; }
label[for="payer_business_name"],
#payer_business_name{ display: none !important; }

.is-cbcond-hidden{ display:none!important; visibility:hidden!important; }


/* ============================================================
   SSOT – CB Edit Profile (Mobile) – SUPER ROBUST ✅
   Stand: 2026-02-16
   Scope: NUR com_comprofiler + #cbEditProfile (Phone)
   Ziel:
   - 1-Spalten Layout
   - Labels oben (wrap erlaubt)
   - Inputs/Selects/Select2/Chosen 100% Breite
   - Privacy ("Verbindungen") sauber darunter, kein Overlap
   - Bootstrap row/col Effekte neutralisieren (negative margins)
   ============================================================ */

@media (max-width: 767.98px){

  /* Scope nur Edit-Form */
  body.com_comprofiler #cbEditProfile{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bootstrap/CB Row-Margins neutralisieren */
  body.com_comprofiler #cbEditProfile .row,
  body.com_comprofiler #cbEditProfile .form-group.row,
  body.com_comprofiler #cbEditProfile .cb_form_line.row,
  body.com_comprofiler #cbEditProfile .cb_form_row.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* col-* / col-sm-* zu 100% */
  body.com_comprofiler #cbEditProfile [class*="col-"],
  body.com_comprofiler #cbEditProfile [class*="col-sm-"],
  body.com_comprofiler #cbEditProfile .col,
  body.com_comprofiler #cbEditProfile .col-auto{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* CB nutzt teils Tabellen -> blocken */
  body.com_comprofiler #cbEditProfile table,
  body.com_comprofiler #cbEditProfile tbody,
  body.com_comprofiler #cbEditProfile tr,
  body.com_comprofiler #cbEditProfile td,
  body.com_comprofiler #cbEditProfile th{
    display: block !important;
    width: 100% !important;
  }

  /* Jede Feld-Zeile 1-spaltig */
  body.com_comprofiler #cbEditProfile [id^="cbfr_"],
  body.com_comprofiler #cbEditProfile .form-group,
  body.com_comprofiler #cbEditProfile .cb_form_line,
  body.com_comprofiler #cbEditProfile .cb_form_row,
  body.com_comprofiler #cbEditProfile .control-group{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Labels oben + wrap */
  body.com_comprofiler #cbEditProfile label,
  body.com_comprofiler #cbEditProfile .control-label,
  body.com_comprofiler #cbEditProfile .cb_form_label{
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Feldcontainer 100% */
  body.com_comprofiler #cbEditProfile .controls,
  body.com_comprofiler #cbEditProfile .cb_field,
  body.com_comprofiler #cbEditProfile .cb_form_field{
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Inputs/Selects 100% */
  body.com_comprofiler #cbEditProfile input[type="text"],
  body.com_comprofiler #cbEditProfile input[type="email"],
  body.com_comprofiler #cbEditProfile input[type="tel"],
  body.com_comprofiler #cbEditProfile input[type="number"],
  body.com_comprofiler #cbEditProfile input[type="search"],
  body.com_comprofiler #cbEditProfile input[type="url"],
  body.com_comprofiler #cbEditProfile select,
  body.com_comprofiler #cbEditProfile textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Select2/Chosen full width */
  body.com_comprofiler #cbEditProfile .select2,
  body.com_comprofiler #cbEditProfile .select2-container,
  body.com_comprofiler #cbEditProfile .chosen-container{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body.com_comprofiler #cbEditProfile .select2-selection{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.com_comprofiler #cbEditProfile .select2-selection__rendered{
    padding-right: 46px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  body.com_comprofiler #cbEditProfile .select2-selection__arrow{
    right: 8px !important;
  }

  /* Privacy ("Verbindungen") darunter, kein Overlap */
  body.com_comprofiler #cbEditProfile .cbPrivacy{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }

  body.com_comprofiler #cbEditProfile .cbPrivacySelect,
  body.com_comprofiler #cbEditProfile select[name*="_privacy"]{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 12px !important;
  }

  /* Falls View-Regel 31.2 im Edit reinfunkt -> neutralisieren */
  body.com_comprofiler #cbEditProfile .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.com_comprofiler #cbEditProfile .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line > label,
  body.com_comprofiler #cbEditProfile .cbTabPaneMenu .cbFieldsContentsTab .cb_form_line > .cb_field{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
/* ============================================================
   I-Single – Footer (SP Page Builder) – 3 Spalten + Bild (nur Desktop/Tablet)
   Wrapper-HTML: .is-footer
   Helix-Position: #sp-footer1
   ============================================================ */

/* 1) Helix/Footer-Wrapper: Hintergrund + dezente Trennlinie */
#sp-footer,
#sp-footer1{
  background: #495057 !important;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Schwarze/sonstige Hintergründe innerhalb des Footer-Modul-Stacks neutralisieren */
#sp-footer .sp-column,
#sp-footer1 .sp-column,
#sp-footer .sp-module,
#sp-footer1 .sp-module,
#sp-footer .sp-module-content,
#sp-footer1 .sp-module-content{
  background: transparent !important;
}

/* SP Page Builder Wrapper im Footer: keine eigenen Hintergründe/Boxen */
#sp-footer1 .sp-page-builder .sppb-section,
#sp-footer1 .sp-page-builder .sppb-container,
#sp-footer1 .sp-page-builder .sppb-container-inner{
  background: transparent !important;
}

/* 2) Footer-Layout (3 Spalten) */
.is-footer{
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 18px 0;
  min-height: 100px;
  display: flex;
  align-items: center;
}

.is-footer__inner{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.is-footer__title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 8px 0;
  color: rgba(255,255,255,.95);
}

.is-footer__links{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.is-footer__links a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.6;
}

.is-footer__links a:hover{
  color: #fff;
  text-decoration: none;
}

/* Dezente Trennlinie zwischen Spalten (Desktop/Tablet) */
@media (min-width: 768px){
  .is-footer__col--service{
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,.12);
  }

  .is-footer__col--visual{
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,.12);
  }
}

/* 3) Footer-Bild (mehr Motiv sichtbar, sauber & stabil)
   - Wir erhöhen die sichtbare Fläche (Höhe), statt "scale"-Tricks.
   - Wir killen alle max-height Limits, die sonst alles blockieren.
*/
#sp-footer1 .is-footer__visual{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}

#sp-footer1 .is-footer__visual img{
  display: block !important;
  width: 100% !important;

  height: 170px !important;      /* <-- mehr Motiv sichtbar */
  max-height: none !important;   /* <-- wichtig: alte Limits deaktivieren */

  object-fit: cover !important;
  object-position: center top !important;  /* wirkt bei Portraits oft natürlicher */

  transform: none !important;    /* alte scale-Regeln neutralisieren */
  border-radius: 14px;
}

/* 4) Mobile (nur Handy): Bild ausblenden */
@media (max-width: 767px){
  .is-footer{
    padding: 16px 0;
    min-height: auto;
  }

  .is-footer__inner{
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .is-footer__links{
    align-items: center;
  }

  .is-footer__col--service{
    padding-left: 0;
    border-left: 0;
  }

  .is-footer__col--visual{
    display: none !important;
  }

  .is-footer__links a{
    font-size: 14px;
  }
}
#sp-footer1{
  box-shadow: 0 -20px 40px rgba(0,0,0,.12);
}
#sp-footer1 .is-footer__visual img{
  filter: saturate(1.05) contrast(0.98);
}
/* ============================================================
   GroupJive – Default Gruppenbanner (ohne Layout-Bruch)
   Greift nur, wenn KEIN Gruppen-Headerbild gesetzt ist
   Trigger: .gjCanvasDefault (GroupJive Standard-Canvas)
   Datei: /images/Gruppen/group_default.png
   ============================================================ */

body .cbCanvasLayoutBackground .cbImgCanvas.gjCanvas.gjCanvasDefault{
  /* Default-Bild statt canvas.png */
  background-image: url("/images/Gruppen/group_default.png") !important;

  /* saubere Banner-Darstellung */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  /* KEINE Höhen erzwingen -> Layout bleibt stabil */
  min-height: 0 !important;
  height: 100% !important;
}
/* ============================================================
   I-Single – CB Profil bearbeiten (Mobile)
   Avatar Upload (CB Image Field) – Center Stack + Custom File UI
   Ziele:
   - #cbfr_29 (Avatar Feld Wrapper)
   - #cbimagefile_upload_avatar (Upload Container)
   - .is-fileui (dein Custom Wrapper)
   ============================================================ */

@media (max-width: 768px){

  /* --------------------------------------------
     1) Feld #cbfr_29: alles mittig, untereinander
     -------------------------------------------- */
  .cbEditProfile #cbfr_29,
  .cbEditProfile #cbfr_29 .cb_field,
  .cbEditProfile #cbfr_29 #cbfv_29{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  /* Avatar Bild mittig (Offsets killen) */
  .cbEditProfile #cbfr_29 .cbImageFieldImage{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:0 !important;
    margin:0 !important;
  }
  .cbEditProfile #cbfr_29 .cbImageFieldImage img{
    display:block !important;
    margin:0 auto !important;
    float:none !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  /* Choice (Dropdown) + Upload-Block als Center-Stack */
  .cbEditProfile #cbfr_29 .cbImageFieldChoice,
  .cbEditProfile #cbfr_29 .cbImageFieldUpload{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* Controls auf angenehme Breite begrenzen */
  .cbEditProfile #cbfr_29 select{
    width:min(320px, 100%) !important;
    margin:0 auto !important;
  }

  /* --------------------------------------------
     2) Upload Container #cbimagefile_upload_avatar:
        1 Spalte, kein Quetschen
     -------------------------------------------- */
  #cbimagefile_upload_avatar{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* direkte Kinder sauber untereinander */
  #cbimagefile_upload_avatar > *{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    flex:none !important;
  }

  /* Lange Systemtexte ausblenden (deine alte Logik, konsolidiert) */
  #cbimagefile_upload_avatar > .mb-2,
  #cbimagefile_upload_avatar > .mt-2{
    display:none !important;
  }

  /* Tipp-Hinweis (nur einmal, nicht doppelt) */
  #cbimagefile_upload_avatar::before{
    content:"Tipp: Bitte nutze ein klares Foto (JPG/PNG/WebP). Danach speichern.";
    display:block;
    width:100%;
    max-width:360px;
    margin: 6px auto 10px auto;
    font-size:13px;
    line-height:1.35;
    color: rgba(0,0,0,.65);
    text-align:center;
  }

  /* --------------------------------------------
     3) Native File Input: verstecken (Custom UI nutzt JS)
     Ziel: name="avatar__file"
     -------------------------------------------- */
  #cbimagefile_upload_avatar input[type="file"][name="avatar__file"]{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* --------------------------------------------
     4) Custom File UI (dein Wrapper)
     -------------------------------------------- */
  #cbimagefile_upload_avatar .is-fileui{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px;
    margin-top:6px;
  }

  #cbimagefile_upload_avatar .is-fileui__btn{
    width:min(320px, 100%) !important;
    min-height:44px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.15);
    background:#f1f3f5;
    color:#111;
    font-weight:800;
    text-decoration:none;
    user-select:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto !important;
  }

  #cbimagefile_upload_avatar .is-fileui__name{
    width:min(320px, 100%) !important;
    margin:0 auto !important;
    font-size:13px;
    line-height:1.35;
    color: rgba(0,0,0,.65);
    overflow-wrap:anywhere;
    text-align:center !important;
  }

  /* --------------------------------------------
     5) Falls Bootstrap Rows/Cols im Feld quer schieben:
        Padding neutralisieren (nur im Avatar-Feld)
     -------------------------------------------- */
  .cbEditProfile #cbfr_29 .row,
  .cbEditProfile #cbfr_29 [class*="col-"],
  .cbEditProfile #cbfr_29 .form-group{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
/* ============================================================
   I-Single – CB Profil bearbeiten (Mobile) – Avatar App-Style
   - 128px Preview
   - moderner Card-Look (nur im Edit-Formular)
   Scope: .cbEditProfile #cbfr_29
   ============================================================ */

@media (max-width: 768px){

  /* Mehr Luft im Avatar-Feld */
  .cbEditProfile #cbfr_29 #cbfv_29{
    gap: 12px !important;
  }

  /* Avatar-Preview Wrapper: zentriert + etwas Abstand */
  .cbEditProfile #cbfr_29 .cbImageFieldImage{
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Avatar: 128px + edel */
  .cbEditProfile #cbfr_29 .cbImageFieldImage img{
    width: 128px !important;
    height: 128px !important;
    object-fit: cover !important;

    /* App-Style */
    border-radius: 18px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow:
      0 10px 26px rgba(0,0,0,.10),
      0 2px 6px rgba(0,0,0,.06) !important;
    background: #fff !important;
  }

  /* Dropdown optisch ruhiger & passend */
  .cbEditProfile #cbfr_29 select{
    width: min(340px, 100%) !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    background: #fff !important;
  }

  /* Custom Upload Button: wie App-Button */
  #cbimagefile_upload_avatar .is-fileui__btn{
    width: min(340px, 100%) !important;
    min-height: 46px !important;
    border-radius: 14px !important;

    border: 1px solid rgba(0,0,0,.12) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f5f7 100%) !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,.08),
      0 2px 5px rgba(0,0,0,.06) !important;

    font-weight: 900 !important;
    letter-spacing: .2px !important;

    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }

  /* Tap-Feedback (Mobile) */
  #cbimagefile_upload_avatar .is-fileui__btn:active{
    transform: translateY(1px) scale(.99);
    filter: brightness(.98);
    box-shadow:
      0 6px 14px rgba(0,0,0,.10),
      0 2px 4px rgba(0,0,0,.06) !important;
  }

  /* Dateiname: ruhig und kompakt */
  #cbimagefile_upload_avatar .is-fileui__name{
    width: min(340px, 100%) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: rgba(0,0,0,.62) !important;
  }

  /* Tipp-Text: leicht, app-like */
  #cbimagefile_upload_avatar::before{
    max-width: 360px !important;
    font-size: 13px !important;
    color: rgba(0,0,0,.58) !important;
  }
}

/* ============================================================
   I-Single – CB Profil bearbeiten (Mobile) – Hintergrund (canvas) SSOT (APP-STYLE wie Avatar)
   Scope (fix):
   - Feld:   #cbfr_17 / #cbfv_17
   - Upload: #cbimagefile_upload_canvas
   - Galerie:#cbimagefile_gallery_canvas

   Ziele:
   - Center Stack, ruhige Abstände
   - Preview als Banner (cbImgCanvas mit background-image)
   - Dropdown + Button modern (Avatar-Style)
   - Native File UI ("Durchsuchen..." + graues Feld) AUS (nur Custom UI)
   - Galerie-Kacheln im Querformat (16:9) + Auswahl-Highlight
   ============================================================ */

@media (max-width: 768px){

  /* ================================
     1) Feld-Layout: Center Stack
     ================================ */
  .cbEditProfile #cbfr_17,
  .cbEditProfile #cbfr_17 .cb_field,
  .cbEditProfile #cbfr_17 #cbfv_17{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
    gap:12px !important;
  }

  /* Bootstrap row/col/no-gutters neutralisieren (nur dieses Feld) */
  .cbEditProfile #cbfr_17.row,
  .cbEditProfile #cbfr_17 .row,
  .cbEditProfile #cbfr_17 [class*="col-"]{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* ================================
     2) Preview oben: Banner Look
     ================================ */
  .cbEditProfile #cbfr_17 .cbImageFieldImage{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  .cbEditProfile #cbfr_17 .cbImgCanvas.cbThumbCanvas{
    width:min(360px, 100%) !important;
    height:150px !important;

    border-radius:18px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06) !important;

    background-position:center !important;
    background-size:cover !important;
  }

  /* ================================
     3) Dropdown modern (wie Avatar)
     ================================ */
  .cbEditProfile #cbfr_17 select.cbImageFieldChoice{
    width:min(340px, 100%) !important;
    margin:0 auto !important;

    min-height:46px !important;
    border-radius:14px !important;
    padding:10px 12px !important;
    border:1px solid rgba(0,0,0,.12) !important;
    background:#fff !important;
  }

  /* ================================
     4) Upload (Upload-Choice): nur Custom UI
     ================================ */
  .cbEditProfile #cbimagefile_upload_canvas{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:10px;
  }

  /* lange Systemtexte ausblenden */
  .cbEditProfile #cbimagefile_upload_canvas > .mb-2,
  .cbEditProfile #cbimagefile_upload_canvas > .mt-2{
    display:none !important;
  }

  /* echten file-input unsichtbar/offscreen (JS klickt ihn) */
  .cbEditProfile #cbimagefile_upload_canvas input[type="file"][name="canvas__file"]{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Zeile "Bilddatei auswählen <input...>" komplett entfernen (damit kein "Durchsuchen..." bleibt) */
  .cbEditProfile #cbimagefile_upload_canvas > div:not(.mb-2):not(.mt-2):not(.is-fileui){
    display:none !important;
  }

  /* Tipp + Label als App-Text */
  .cbEditProfile #cbimagefile_upload_canvas::before{
    content:"Tipp: Nutze ein klares Hintergrundbild (JPG/PNG/WebP). Danach speichern.";
    display:block;
    width:100%;
    max-width:360px;
    margin:0 auto 2px auto;
    font-size:13px;
    line-height:1.35;
    color: rgba(0,0,0,.58);
    text-align:center;
  }

  .cbEditProfile #cbimagefile_upload_canvas .is-fileui::before{
    content:"Bilddatei auswählen";
    display:block;
    width:100%;
    max-width:360px;
    margin:4px auto 6px auto;
    font-weight:700;
    font-size:14px;
    color: rgba(0,0,0,.70);
    text-align:center;
  }

  /* Custom File UI – Button wie Avatar */
  .cbEditProfile #cbimagefile_upload_canvas .is-fileui{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px;
    margin-top:0 !important;
  }

  .cbEditProfile #cbimagefile_upload_canvas .is-fileui__btn{
    width:min(340px, 100%) !important;
    min-height:46px !important;
    padding:10px 12px !important;
    border-radius:14px !important;

    border:1px solid rgba(0,0,0,.12) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f5f7 100%) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.08), 0 2px 5px rgba(0,0,0,.06) !important;

    font-weight:900 !important;
    letter-spacing:.2px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .cbEditProfile #cbimagefile_upload_canvas .is-fileui__btn:active{
    transform: translateY(1px) scale(.99);
    filter: brightness(.98);
    box-shadow: 0 6px 14px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06) !important;
  }

  .cbEditProfile #cbimagefile_upload_canvas .is-fileui__name{
    width:min(340px, 100%) !important;
    margin:0 auto !important;
    font-size:13px !important;
    line-height:1.35 !important;
    color: rgba(0,0,0,.62) !important;
    overflow-wrap:anywhere;
    text-align:center !important;
  }

  /* ================================
     5) Galerie: Querformat-Kacheln (16:9) + App-Grid
     ================================ */
  .cbEditProfile #cbimagefile_gallery_canvas{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:center !important;
    justify-content:center !important;
  }

  /* Mobile: 1 Spalte (sauber & groß) */
  .cbEditProfile #cbimagefile_gallery_canvas > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Banner-Thumb (CB nutzt DIV mit background-image + inline height) */
  .cbEditProfile #cbimagefile_gallery_canvas .cbImgCanvas.cbThumbCanvas{
    width: min(360px, 100%) !important;
    margin: 0 auto !important;

    aspect-ratio: 16 / 9 !important;
    height: auto !important;

    border-radius:16px !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.06) !important;

    background-position:center !important;
    background-size:cover !important;
  }

  /* Inline height (z.B. height: 100px) aushebeln */
  .cbEditProfile #cbimagefile_gallery_canvas .cbImgCanvas.cbThumbCanvas[style*="height"]{
    height:auto !important;
  }

  /* Abstand zwischen Kacheln */
  .cbEditProfile #cbimagefile_gallery_canvas .pb-3{
    padding-bottom:14px !important;
  }

  /* Auswahl-Highlight (app-like) */
  .cbEditProfile #cbimagefile_gallery_canvas input[type="radio"]:checked + label .cbImgCanvas.cbThumbCanvas{
    outline: 3px solid rgba(255, 0, 128, .35) !important;
    outline-offset: 3px !important;
  }
}

/* ============================================================
   I-Single – Profil-Sterne (privates Rating) – SSOT
   Feld: cb_profil_level (CB Bewertung / RateIt)
   Feld CSS Klasse: is-rating-profillevel

   Was dieser Block macht:
   1) Entfernt die doppelte "Total/Readonly"-Sternreihe (cbRatingFieldTotal)
   2) Blendet Feldtitel/Label aus (kein "Profil-Level" Text rechts)
   3) Hält Reset (×) + Sterne in EINER Zeile, ohne Umbruch
   4) Fixiert Höhe/Baseline (sitzend in der Status-Zeile)
   5) Reset dezent (opacity), aber funktionsfähig zum Vote zurücknehmen
   ============================================================ */


/* ------------------------------------------------------------
   1) Doppelte Anzeige entfernen: Total/Readonly-Block AUS
   (das war die obere Sternreihe)
   ------------------------------------------------------------ */
.cbProfile #cb_profil_levelTotal,
.cbProfile .cbRatingFieldTotal{
  display: none !important;
}


/* ------------------------------------------------------------
   2) Feldtitel/Label ausblenden (kein Text rechts)
   ------------------------------------------------------------ */
.cbProfile .is-rating-profillevel .cb_label,
.cbProfile .is-rating-profillevel label,
.cbProfile .is-rating-profillevel .col-form-label{
  display: none !important;
}


/* ------------------------------------------------------------
   3) Wrapper: Rating als Inline-Element in einer Zeile
   ------------------------------------------------------------ */
.cbProfile .is-rating-profillevel .cb_field{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ------------------------------------------------------------
   4) RateIt: 1 Zeile erzwingen + Baseline (Header) fixieren
   ------------------------------------------------------------ */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;

  height: 18px !important;
  line-height: 18px !important;
  overflow: hidden !important;
  vertical-align: middle !important;

  /* sitzt sauber in deiner OFFLINE/ONLINE-Zeile */
  transform: translateY(-2px) !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Sterne-Layer (RateIt rendert 3 Layer): wirklich 1 Zeile */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] .rateit-range,
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] .rateit-empty,
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] .rateit-selected,
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] .rateit-hover{
  height: 18px !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  overflow: hidden !important;

  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ------------------------------------------------------------
   5) Reset/Undo: sichtbar als modernes × (Vote zurücknehmen)
   ------------------------------------------------------------ */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] > .rateit-reset{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(0,0,0,0.18) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important;

  cursor: pointer !important;

  /* dezent (nicht zu dominant) */
  opacity: .6;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Original-Reset-Icon von RateIt ausblenden */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] > .rateit-reset span{
  display: none !important;
}

/* Neues Icon */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] > .rateit-reset::before{
  content: "×";
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  opacity: .75;
}

/* Hover/Focus */
.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] > .rateit-reset:hover{
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12) !important;
}

.cbProfile .is-rating-profillevel .rateit[data-field="cb_profil_level"] > .rateit-reset:focus{
  outline: none !important;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(255,0,128,0.20), 0 10px 18px rgba(0,0,0,0.12) !important;
}


/* ------------------------------------------------------------
   6) Optional: Zahlenwerte/Counts ausblenden (nur falls vorhanden)
   ------------------------------------------------------------ */
.cbProfile .is-rating-profillevel .cbRatingValue,
.cbProfile .is-rating-profillevel .rating-value,
.cbProfile .is-rating-profillevel .cbRatingCount,
.cbProfile .is-rating-profillevel .rating-count{
  display: none !important;
}
	
/* ============================================================
   I-Single – CB Connections (Mobile) – FINAL CLEAN (Avatar links, Content rechts)
   Ziele:
   - Full width Card + Felder
   - Kompakt, wenig Weißfläche
   - Avatar 4-eckig, größer, frei positionierbar
   - Content läuft sauber rechts neben Avatar (keine Overlaps)
   ============================================================ */

@media (max-width: 767px){

  /* ===================== SSOT Stellschrauben ===================== */
  :root{
    --is-conn-pad-x: 16px;

    --is-conn-avatar-size: 86px;     /* Avatar-Größe */
    --is-conn-avatar-radius: 12px;   /* 0 = eckig */
    --is-conn-avatar-top: 58px;      /* Basisposition vom Card-Top */
    --is-conn-avatar-shift: 0px;     /* + runter / - hoch */

    --is-conn-avatar-gap: 12px;      /* Abstand Avatar -> Content */

    --is-conn-canvas-bottom: 12px;   /* weniger Weißfläche unter Canvas */
    --is-conn-body-top: 12px;        /* kompakter Body */
    --is-conn-body-bot: 12px;

    --is-conn-text: #1b1f24;
    --is-conn-muted: rgba(27,31,36,.58);
    --is-conn-link: #0b63ce;
  }

  /* ===================== Card / Body full width ===================== */
  .cbManageConnections .card.cbCanvasLayoutSm{
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important; /* Bezugspunkt für Avatar */
  }

  .cbManageConnections .card.cbCanvasLayoutSm .card-body{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    /* Content rechts neben Avatar */
    padding-top: var(--is-conn-body-top) !important;
    padding-bottom: var(--is-conn-body-bot) !important;
    padding-right: var(--is-conn-pad-x) !important;
    padding-left: calc(var(--is-conn-pad-x) + var(--is-conn-avatar-size) + var(--is-conn-avatar-gap)) !important;
  }

  /* ===================== Canvas Weißfläche reduzieren ===================== */
  .cbManageConnections .card.cbCanvasLayoutSm .cbCanvasLayoutBottom{
    height: var(--is-conn-canvas-bottom) !important;
    min-height: var(--is-conn-canvas-bottom) !important;
    position: relative !important;
  }

  /* ===================== Avatar: stabil an Card ===================== */
  .cbManageConnections .card.cbCanvasLayoutSm .cbCanvasLayoutPhoto{
    position: absolute !important;
    left: var(--is-conn-pad-x) !important;
    top: var(--is-conn-avatar-top) !important;
    transform: translateY(var(--is-conn-avatar-shift)) !important;
    z-index: 20 !important;

    width: var(--is-conn-avatar-size) !important;
    height: var(--is-conn-avatar-size) !important;
    border-radius: var(--is-conn-avatar-radius) !important;
    overflow: hidden !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
    background: transparent !important;
  }

  .cbManageConnections .card.cbCanvasLayoutSm .cbCanvasLayoutPhoto > a,
  .cbManageConnections .card.cbCanvasLayoutSm .cbCanvasLayoutPhoto > span{
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--is-conn-avatar-radius) !important;
    overflow: hidden !important;
    display: block !important;
  }

  .cbManageConnections .card.cbCanvasLayoutSm .cbCanvasLayoutPhoto img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--is-conn-avatar-radius) !important;
  }

  /* ===================== Content wrapper sauber ===================== */
  .cbManageConnections .cbCanvasLayoutContent{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cbManageConnections .cbCanvasLayoutContent.m-2{
    margin: 8px 0 8px !important; /* keine seitlichen Margins */
    text-align: left !important;
  }

  .cbManageConnections .cbCanvasLayoutContent.ml-2.mr-2.mb-2{
    margin: 0 0 10px !important; /* keine seitlichen Margins */
  }

  /* ===================== Felder full width ===================== */
  .cbManageConnections .form-control,
  .cbManageConnections textarea.form-control,
  .cbManageConnections .select2-container,
  .cbManageConnections .select2-selection{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cbManageConnections .select2-container[style],
  .cbManageConnections span.select2.select2-container{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Select2 Chips kompakter (optional, wirkt appiger) */
  .cbManageConnections .select2-selection__choice{
    padding: 4px 8px !important;
    border-radius: 999px !important;
  }

  /* ===================== Textfarben ===================== */
  .cbManageConnections,
  .cbManageConnections .card,
  .cbManageConnections .cbCanvasLayoutContent,
  .cbManageConnections .form-control,
  .cbManageConnections textarea.form-control,
  .cbManageConnections .select2-selection,
  .cbManageConnections .select2-selection__rendered{
    color: var(--is-conn-text) !important;
  }

  .cbManageConnections a{
    color: var(--is-conn-link) !important;
  }

  .cbManageConnections .form-control::placeholder,
  .cbManageConnections textarea.form-control::placeholder{
    color: var(--is-conn-muted) !important;
    opacity: 1 !important;
  }
}
/* ============================================================
   I-Single – CB Connections: Textfarbe-Reset (gewinnt immer)
   -> Ganz ans ENDE der custom.css
   ============================================================ */

.cbManageConnections{
  --is-conn-text: #1b1f24;
  --is-conn-muted: rgba(27,31,36,.58);
  --is-conn-link: #0b63ce;
}

.cbManageConnections,
.cbManageConnections .card,
.cbManageConnections .card-body,
.cbManageConnections .cbCanvasLayoutBody,
.cbManageConnections .cbCanvasLayoutContent,
.cbManageConnections .cbCanvasLayoutContent *,
.cbManageConnections label,
.cbManageConnections .text-large,
.cbManageConnections .text-large *,
.cbManageConnections .form-control,
.cbManageConnections textarea.form-control{
  color: var(--is-conn-text) !important;
}

/* Links (Username etc.) */
.cbManageConnections a,
.cbManageConnections a:visited{
  color: var(--is-conn-link) !important;
}

/* Placeholder */
.cbManageConnections .form-control::placeholder,
.cbManageConnections textarea.form-control::placeholder{
  color: var(--is-conn-muted) !important;
  opacity: 1 !important;
}

/* Select2: gerenderter Text + Suchfeld */
.cbManageConnections .select2-container--bootstrap .select2-selection,
.cbManageConnections .select2-container--bootstrap .select2-selection__rendered,
.cbManageConnections .select2-container--bootstrap .select2-search__field{
  color: var(--is-conn-text) !important;
}

/* Select2 Placeholder (wenn nichts gewählt) */
.cbManageConnections .select2-container--bootstrap .select2-selection__placeholder{
  color: var(--is-conn-muted) !important;
}

/* Select2 Dropdown (Optionen-Liste) */
.cbManageConnections .select2-container--bootstrap .select2-dropdown,
.cbManageConnections .select2-container--bootstrap .select2-results__option{
  color: var(--is-conn-text) !important;
}
/* ============================================================
   I-Single – CB Profile Tabs – App UI (MARKUP-FIT)
   Dein Markup:
   - UL: .cbTabsNav (navbar-nav ...)
   - LI: .cbTabNav.cbNavBarItem (hier hängt .is-tabs-app bei dir)
   - Overflow: LI.cbNavBarOverflow + label[for*="overflow"]

   Ziel:
   - Mobile: horizontal wischbar (scroll), KEIN wrap
   - "Mehr/Weniger" (Overflow) weg
   - Modernes Pill-Design + Active Glow
   ============================================================ */

:root{
  --is-tab-radius: 14px;
  --is-tab-pad-y: 10px;
  --is-tab-pad-x: 14px;
  --is-tab-gap: 10px;

  --is-tab-bg: rgba(255,255,255,.72);
  --is-tab-border: rgba(255, 0, 128, .18);     /* leichter Rosé-Rahmen */
  --is-tab-shadow: 0 10px 26px rgba(15, 23, 42, .08);

  --is-tab-text: rgba(15, 23, 42, .78);
  --is-tab-text-muted: rgba(15, 23, 42, .58);

  --is-tab-accent: var(--is-pink, #ff0080);
  --is-tab-accent-soft: rgba(255, 0, 128, .08);

  --is-tabs-top-nudge: 0px;
  --is-tabs-bottom-gap: 10px;
}

/* ------------------------------------------------------------
   0) Scope zuverlässig herstellen:
   Wenn .is-tabs-app an LI hängt, style trotzdem das passende UL:
   UL.cbTabsNav, das ein LI.is-tabs-app enthält
   ------------------------------------------------------------ */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app){
  /* Wrapper-Look */
  padding: 10px !important;
  margin: var(--is-tabs-top-nudge) 0 var(--is-tabs-bottom-gap) !important;

  border: 1px solid var(--is-tab-border) !important;
  border-radius: calc(var(--is-tab-radius) + 6px) !important;
  background: var(--is-tab-bg) !important;
  box-shadow: var(--is-tab-shadow) !important;

  /* Mobile swipe / no wrap */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  flex-wrap: nowrap !important;        /* kill .flex-wrap */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  gap: var(--is-tab-gap) !important;

  /* nicer touch */
  touch-action: pan-x !important;

  /* optional "app-feel" */
  scroll-snap-type: x proximity;

  /* kill Bootstrap tab underline if any */
  border-bottom: 1px solid var(--is-tab-border) !important;
}

/* Falls :has() im Zielbrowser nicht greift (selten), fallback:
   Wenn du .is-tabs-app irgendwann am UL setzen kannst, greift das sofort. */
.cbProfile ul.cbTabsNav.is-tabs-app{
  padding: 10px !important;
  margin: var(--is-tabs-top-nudge) 0 var(--is-tabs-bottom-gap) !important;
  border: 1px solid var(--is-tab-border) !important;
  border-radius: calc(var(--is-tab-radius) + 6px) !important;
  background: var(--is-tab-bg) !important;
  box-shadow: var(--is-tab-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  gap: var(--is-tab-gap) !important;
  touch-action: pan-x !important;
  scroll-snap-type: x proximity;
}

/* ------------------------------------------------------------
   1) Items
   ------------------------------------------------------------ */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav{
  flex: 0 0 auto !important;
  margin: 0 !important;
  float: none !important;
  scroll-snap-align: start;
}

/* ------------------------------------------------------------
   2) Links (Pills)
   ------------------------------------------------------------ */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: var(--is-tab-pad-y) var(--is-tab-pad-x) !important;
  border-radius: var(--is-tab-radius) !important;

  font-weight: 800 !important;
  letter-spacing: .15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;

  color: var(--is-tab-text-muted) !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}

.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a:hover,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a:hover{
  color: var(--is-tab-text) !important;
  border-color: rgba(15, 23, 42, .18) !important;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px);
}

/* Active */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a.active,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a.active{
  color: #1f2937 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.72)) !important;
  border-color: rgba(255, 0, 128, .30) !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, .12),
    0 0 0 4px var(--is-tab-accent-soft) !important;
  position: relative;
}

.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a.active::after,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a.active::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  border-radius: 99px;
  background: var(--is-tab-accent);
  opacity: .85;
}

/* ------------------------------------------------------------
   3) CB Overflow ("Mehr/Weniger") komplett entfernen
   (ist ein LI.position-absolute.cbNavBarOverflow)
   ------------------------------------------------------------ */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbNavBarOverflow,
.cbProfile ul.cbTabsNav.is-tabs-app > li.cbNavBarOverflow{
  display: none !important;
}

/* Sicherheit: auch Label/Icons/Text */
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) label[for*="overflow"],
.cbProfile ul.cbTabsNav.is-tabs-app label[for*="overflow"],
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) .cbNavBarOverflowIcon,
.cbProfile ul.cbTabsNav.is-tabs-app .cbNavBarOverflowIcon,
.cbProfile ul.cbTabsNav:has(li.is-tabs-app) .cbNavBarOverflowText,
.cbProfile ul.cbTabsNav.is-tabs-app .cbNavBarOverflowText{
  display: none !important;
}

/* ------------------------------------------------------------
   4) Mobile Feinschliff
   ------------------------------------------------------------ */
@media (max-width: 767px){
  .cbProfile ul.cbTabsNav:has(li.is-tabs-app),
  .cbProfile ul.cbTabsNav.is-tabs-app{
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a,
  .cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a{
    padding: 11px 14px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    min-height: 40px !important;
  }
}
/* ============================================================
   I-Single – App Tabs – Mobile Height Tuning (SSOT)
   ============================================================ */

@media (max-width: 767px){

  /* 1) Container kompakter */
  .cbProfile ul.cbTabsNav:has(li.is-tabs-app),
  .cbProfile ul.cbTabsNav.is-tabs-app{
    padding: 7px !important;     /* vorher 10px */
    gap: 7px !important;         /* optional */
    border-radius: 16px !important;
  }

  /* 2) Pills kompakter */
  .cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a,
  .cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a{
    padding: 9px 12px !important;  /* vorher 11px 14px */
    min-height: 36px !important;   /* vorher 40px */
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  /* 3) Active-Unterstrich etwas höher, damit er nicht "drückt" */
  .cbProfile ul.cbTabsNav:has(li.is-tabs-app) > li.cbTabNav > a.active::after,
  .cbProfile ul.cbTabsNav.is-tabs-app > li.cbTabNav > a.active::after{
    bottom: 5px !important;      /* vorher 6px */
    height: 3px !important;
  }
}