@charset "UTF-8";
/*
 * Members area inside the customer's own website template (_members/community/communityTemplate.xhtml).
 * Takes the template's colours where it defines them (--hwa-*, --at-*, --lm-*, --primary), otherwise neutral.
 * Also covers the Bootstrap 3 classes the member pages use (row/col, btn, form-group, …) – only inside .mb-area.
 */
.mb-area {
  /* the template's colours: hellwach/atelier/lumen (--hwa/--at/--lm), bootstrap-v2 (--b2-*), standard-v2 + baukasten (--s2-*) */
  --mb-accent: var(--hwa-primary-fill, var(--b2-primary-fill, var(--s2-primary-fill, var(--at-primary, var(--primary, #2b59c3)))));
  --mb-on-accent: var(--hwa-on-primary, var(--b2-on-primary, var(--s2-on-primary, var(--at-on-primary, #fff))));
  --mb-link: var(--hwa-primary-text, var(--b2-primary-text, var(--s2-primary-text, var(--lm-primary-text, var(--mb-accent)))));
  --mb-ink: #15181d;
  --mb-muted: #59606b;
  --mb-line: rgba(20, 24, 29, 0.12);
  --mb-surface: #fff;
  --mb-soft: #f5f6f8;
  --mb-radius: 14px;
  --mb-touch: 44px;
  box-sizing: border-box;
  padding: clamp(2rem, 5vw, 4rem) 1rem clamp(3rem, 6vw, 5rem);
  color: var(--mb-ink);
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
}

.mb-area *, .mb-area *::before, .mb-area *::after {
  box-sizing: border-box;
}

.mb-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.mb-area a {
  color: var(--mb-link);
}

.mb-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mb-muted);
}

.mb-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}

.mb-head {
  max-width: 40rem;
  margin-bottom: 1.75rem;
}

.mb-lead {
  color: var(--mb-muted);
}
.mb-lead p {
  margin: 0 0 0.5rem;
}

.mb-muted, .mb-area .text-muted {
  color: var(--mb-muted);
}

/* ---- cards, forms, buttons ---- */
.mb-card {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-surface);
  box-shadow: 0 10px 30px rgba(20, 24, 29, 0.06);
}

.mb-auth {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 860px) {
  .mb-auth {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}
.mb-more {
  display: grid;
  gap: 1rem;
}

.mb-form {
  display: grid;
  gap: 1rem;
}

.mb-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .mb-row {
    grid-template-columns: 1fr 1fr;
  }
}
.mb-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.mb-field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.mb-area input[type=text], .mb-area input[type=email], .mb-area input[type=password], .mb-area input:not([type]), .mb-area textarea, .mb-area select, .mb-area .ui-inputfield {
  width: 100%;
  min-height: var(--mb-touch);
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(20, 24, 29, 0.28);
  border-radius: 10px;
  background: #fff;
  color: var(--mb-ink);
  font: inherit;
  box-shadow: none;
}
.mb-area .ui-password {
  display: block;
  width: 100%;
}
.mb-area input:focus-visible, .mb-area textarea:focus-visible, .mb-area select:focus-visible, .mb-area .ui-inputfield:focus {
  outline: 3px solid color-mix(in srgb, var(--mb-accent) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--mb-accent);
}

.mb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.mb-area .mb-btn, .mb-area .btn, .mb-area .button, .mb-area .ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--mb-touch);
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  background: var(--mb-surface);
  color: var(--mb-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
}
.mb-area .ui-button .ui-button-text {
  padding: 0;
  line-height: inherit;
}
.mb-area .mb-btn:hover, .mb-area .btn:hover, .mb-area .button:hover, .mb-area .ui-button:hover {
  background: var(--mb-soft);
}
.mb-area .mb-btn--primary, .mb-area .btn-primary {
  border-color: var(--mb-accent);
  background: var(--mb-accent);
  color: var(--mb-on-accent);
}
.mb-area .mb-btn--primary:hover, .mb-area .btn-primary:hover {
  background: var(--hwa-primary-fill-hover, var(--at-primary-hover, var(--mb-accent)));
  filter: brightness(0.96);
}

/* template button rules are often more specific: keep the label readable on the accent */
.mb-area .mb-btn--primary, .mb-area .mb-btn--primary .ui-button-text, .mb-area .btn-primary .ui-button-text {
  color: var(--mb-on-accent) !important;
}
.mb-area .mb-btn:not(.mb-btn--primary) .ui-button-text {
  color: inherit !important;
}
.mb-area .mb-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--mb-link);
}
.mb-area .mb-btn:focus-visible, .mb-area .ui-button:focus-visible, .mb-area a:focus-visible, .mb-area summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mb-accent) 55%, transparent);
  outline-offset: 2px;
}

.mb-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mb-muted);
}

.mb-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border-left: 4px solid var(--mb-accent);
  background: var(--mb-soft);
}
.mb-notice--error, .mb-notice--danger {
  border-left-color: #b42318;
  background: #fdf0ef;
}

/* passkey / wallet / Google / Apple below the password login (community-auth.js) */
.mb-actions--alt {
  margin-top: 0.75rem;
}
.mb-actions--alt:not(:has(> :not([hidden]))) {
  display: none;
}

.mb-details {
  padding: 0;
}
.mb-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.mb-details > summary::-webkit-details-marker {
  display: none;
}
.mb-details > summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.mb-details[open] > summary::after {
  transform: rotate(-135deg);
}
.mb-details > .mb-form {
  padding: 0 1.25rem 1.25rem;
}

/* ---- logged in: member header, nav, content ---- */
.mb-member {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.mb-member__pic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mb-soft);
  flex: none;
}
.mb-member__name {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
}

.mb-nav {
  margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--mb-line);
}
.mb-nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mb-nav li {
  flex: none;
  margin: 0;
  padding: 0;
}
.mb-nav li::before {
  content: none;
}
.mb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--mb-touch);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--mb-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mb-nav a:hover {
  background: var(--mb-soft);
}
.mb-nav a[aria-current=page] {
  background: var(--mb-accent);
  color: var(--mb-on-accent);
}
.mb-nav__out {
  margin-left: auto !important;
}
.mb-nav form {
  margin: 0;
}

.mb-content {
  min-width: 0;
}
.mb-content img {
  max-width: 100%;
  height: auto;
}
.mb-content h1, .mb-content h2, .mb-content h3 {
  line-height: 1.25;
}

/* the member pages use h4–h6 as field labels: label size, whatever the template does with headings */
.mb-area .mb-content h4, .mb-area .mb-content h5, .mb-area .mb-content h6 {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Bootstrap 3 classes of the member pages (only here) ---- */
.mb-area .container {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
.mb-area .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.6rem;
}
.mb-area .row > [class*=col-] {
  width: 100%;
  padding: 0 0.6rem;
  min-width: 0;
}

@media (min-width: 576px) {
  .mb-area .col-xs-7 {
    width: 58.33%;
  }
}
@media (min-width: 768px) {
  .mb-area .col-sm-1 {
    width: 8.33%;
  }
  .mb-area .col-sm-3 {
    width: 25%;
  }
  .mb-area .col-sm-4 {
    width: 33.33%;
  }
  .mb-area .col-sm-6 {
    width: 50%;
  }
  .mb-area .col-sm-9 {
    width: 75%;
  }
  .mb-area .col-sm-11 {
    width: 91.67%;
  }
}
@media (min-width: 992px) {
  .mb-area .col-md-3 {
    width: 25%;
  }
  .mb-area .col-md-6 {
    width: 50%;
  }
  .mb-area .col-md-9 {
    width: 75%;
  }
  .mb-area .col-md-12 {
    width: 100%;
  }
  .mb-area .col-md-offset-3 {
    margin-left: 25%;
  }
}
.mb-area .form-group {
  margin-bottom: 1rem;
}
.mb-area .text-center {
  text-align: center;
}
.mb-area .text-right {
  text-align: right;
}
.mb-area .list-unstyled {
  list-style: none;
  padding-left: 0;
}
.mb-area .pull-left {
  float: left;
  margin-right: 0.75rem;
}
.mb-area .pull-right {
  float: right;
}
.mb-area .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
  font-size: 0.92rem;
}
.mb-area .breadcrumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--mb-muted);
}
.mb-area .margin-t {
  margin-top: 1rem;
}
.mb-area .margin-b, .mb-area .margin-xs-b {
  margin-bottom: 0.75rem;
}
.mb-area .padding {
  padding: 1rem;
}
.mb-area hr {
  border: 0;
  border-top: 1px solid var(--mb-line);
  margin: 1.25rem 0;
}
.mb-area .fa-mr {
  margin-right: 0.45rem;
}

/* icons: PrimeIcons (as in Verwaltung 3), decorative next to a label */
.mb-area .pi {
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.1em;
  margin-right: 0.4rem;
}
.mb-area .pi:last-child {
  margin-right: 0;
}

.mb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* tables (forum, lists): light rules instead of the browser's black borders */
.mb-area table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  background: var(--mb-surface);
  border-radius: var(--mb-radius);
  overflow: hidden;
}
.mb-area table th, .mb-area table td {
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--mb-line);
  text-align: left;
  vertical-align: top;
}
.mb-area table thead th, .mb-area table tr:first-child > th {
  background: var(--mb-soft);
  font-weight: 700;
}
.mb-area table tr:last-child > td {
  border-bottom: 0;
}
.mb-area .ui-paginator {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 1rem;
}
.mb-area .ui-paginator a, .mb-area .ui-paginator span.ui-paginator-page {
  min-width: var(--mb-touch);
  min-height: var(--mb-touch);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  background: var(--mb-surface);
  color: var(--mb-ink);
  text-decoration: none;
}
.mb-area .ui-paginator .ui-state-active {
  background: var(--mb-accent);
  border-color: var(--mb-accent);
  color: var(--mb-on-accent);
}
.mb-area .profilImg img, .mb-area .profilImgLarge img {
  border-radius: 50%;
}

@media (max-width: 767px) {
  .mb-area .hidden-xs {
    display: none !important;
  }
}
/* PrimeFaces messages in the template's look */
.mb-area .ui-messages > div, .mb-area .ui-message {
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mb-details > summary::after {
    transition: none;
  }
}