/*
 * Mitgliederbereich (Erweiterung members): Seiten /mitglieder/… im Layout des Kits. Farben und Schrift erbt alles vom Kit
 * (currentColor, color-mix mit Canvas); Akzent aus dem Kit-Vertrag des Kerns (--kit-accent), bei älteren Kits aus ihren
 * Variablen, sonst Blau. Buttons: .btn des Kits.
 */
.mb-wrap {
  --mb-accent: var(--kit-accent, var(--f-a, var(--color-accent, var(--accent, #2457c5))));
  --mb-line: color-mix(in srgb, currentColor 18%, transparent);
  --mb-soft: color-mix(in srgb, currentColor 5%, transparent);
  --mb-r: var(--kit-radius, .5rem);
  --mb-err: #b42318;
  --mb-ok: #067647;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
}
@media (prefers-color-scheme: dark) { .mb-wrap { --mb-err: #fda29b; --mb-ok: #75e0a7; } }
:root[data-theme="dark"] .mb-wrap, .is-darkbase .mb-wrap { --mb-err: #fda29b; --mb-ok: #75e0a7; }

.mb-card { max-width: 44rem; margin-inline: auto; display: grid; gap: 1.25rem; }
.mb-card--narrow { max-width: 28rem; }
.mb-title { margin: 0; text-wrap: balance; }
.mb-eyebrow { margin: 0; font-size: .8125em; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.mb-eyebrow a { color: inherit; }
.mb-lead { margin: 0; }
.mb-hint { display: block; margin: 0; font-size: .875em; opacity: .8; }
.mb-foot { margin: 0; font-size: .9375em; }
.mb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mb-note { margin: 0; padding: .75rem 1rem; border-radius: var(--mb-r); border-inline-start: 4px solid var(--mb-ok); background: var(--mb-soft); }
.mb-note--error { border-color: var(--mb-err); }

.mb-form { display: grid; gap: 1rem; margin: 0; }
.mb-form--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.mb-form--row .mb-f { margin: 0; }
.mb-f { display: grid; gap: .375rem; }
.mb-f label { font-weight: 600; }
.mb-f input:not([type="checkbox"]), .mb-f textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: var(--mb-soft);
  border: 1px solid var(--mb-line); border-radius: var(--mb-r); padding: .6875rem .875rem; min-height: 2.75rem;
}
.mb-f input:focus-visible, .mb-f textarea:focus-visible { outline: 3px solid var(--mb-accent); outline-offset: 1px; border-color: var(--mb-accent); }
.mb-f--err input, .mb-f--err textarea { border-color: var(--mb-err); }
.mb-err { display: block; margin: 0; color: var(--mb-err); font-size: .875em; font-weight: 600; }
.mb-f--check label { display: flex; gap: .625rem; align-items: flex-start; font-weight: 400; }
.mb-f--check input { margin-top: .2em; width: 1.125rem; height: 1.125rem; accent-color: var(--mb-accent); flex: none; }
.mb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

:is(.mb-form, .mb-pk) > button:not(.mb-btn-wide) { justify-self: start; }
.mb-btn-wide { width: 100%; justify-content: center; }
.mb-pk { display: grid; gap: .75rem; }
.mb-pk[hidden] { display: none; }
.mb-or { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 0; font-size: .875em; opacity: .75; }
.mb-or::before, .mb-or::after { content: ""; flex: 1; border-top: 1px solid var(--mb-line); }

.mb-more { border-top: 1px solid var(--mb-line); padding-top: 1rem; }
.mb-more summary { cursor: pointer; font-weight: 600; }
.mb-more[open] summary { margin-bottom: 1rem; }

.mb-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mb-actions form { margin: 0; }

.mb-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.mb-areas a { display: grid; gap: .25rem; height: 100%; box-sizing: border-box; padding: 1rem 1.125rem; border: 1px solid var(--mb-line); border-radius: calc(var(--mb-r) * 1.5); color: inherit; text-decoration: none; }
.mb-areas a:hover, .mb-areas a:focus-visible { border-color: var(--mb-accent); }
.mb-areas__t { font-weight: 700; }
.mb-areas__d { font-size: .9375em; opacity: .8; }

.mb-dl { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1rem; margin: 0; }
.mb-dl dt { font-weight: 600; }
.mb-dl dd { margin: 0; overflow-wrap: anywhere; }
.mb-sec { display: grid; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--mb-line); }
.mb-sec h2 { margin: 0; font-size: 1.25em; }
.mb-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mb-keys li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .625rem .875rem; border: 1px solid var(--mb-line); border-radius: var(--mb-r); }
.mb-keys li span { display: grid; }
.mb-keys small { opacity: .75; }
.mb-keys form { margin: 0; }
.mb-link { background: none; border: 0; padding: .25rem; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 30rem) { .mb-form--row { grid-template-columns: 1fr; } }

/* Profilfoto (Foto oder Initialen) */
.mb-avatar { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; overflow: hidden;
  background: color-mix(in srgb, var(--mb-accent, currentColor) 16%, transparent); color: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.mb-avatar--l { width: 6rem; height: 6rem; font-size: 2rem; }
.mb-photo { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.mb-photo__forms { flex: 1 1 16rem; display: grid; gap: .5rem; }
.mb-photo__forms form { margin: 0; }
.mb-hello { display: flex; gap: 1.25rem; align-items: center; }
.mb-hello__pic { border-radius: 50%; }
.mb-hello .mb-title { margin-top: .25rem; }
.mb-lock { display: grid; gap: 1rem; padding: 1rem 1.125rem; border: 1px dashed var(--mb-line); border-radius: calc(var(--mb-r) * 1.5); }
.mb-lock p { margin: 0; }
.mb-sec h3 { margin: .5rem 0 0; font-size: 1.0625em; }
.mb-pf__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.mb-pf__head label, .mb-pf__l { font-weight: 600; }
.mb-vis select, .mb-profile select { font: inherit; font-size: .875em; color: inherit; background: var(--mb-soft); border: 1px solid var(--mb-line); border-radius: var(--mb-r); padding: .375rem .625rem; }
.mb-profile .mb-f select:not(.mb-vis select) { width: 100%; min-height: 2.75rem; font-size: 1em; }
.mb-pf__ro { margin: 0; overflow-wrap: anywhere; }
.mb-sub { margin: .75rem 0 0; font-size: 1.0625em; display: flex; gap: .5rem; align-items: baseline; }