@charset "UTF-8";
/* ===========================================================================
   main.scss — Einstiegspunkt. Kompiliert nach ../assets/baeo.css
   (PhpStorm File-Watcher / Dart Sass). Reihenfolge = Kaskade:
   Tokens → Typo → Astra-Basis → Elementor → kom-Hooks (zuletzt, damit sie gewinnen).
   =========================================================================== */
/* ===========================================================================
   _tokens.scss — Design-Tokens „Variante A · Praxis & Podium"
   Single source of truth für Farben, Schrift, Radius.
   Ausgegeben als CSS-Custom-Properties (zur Laufzeit/Elementor überschreibbar)
   + SCSS-Variablen (für Berechnungen in den Partials).
   =========================================================================== */
:root {
  /* --- Farben --- */
  --baeo-ink:         #0e2433;
  /* Text / Tinte                      */
  --baeo-primary:     #15384f;
  /* Primär (Header, Flächen)          */
  --baeo-primary-700: #0f293a;
  /* Primär dunkler (Footer, Hover)    */
  --baeo-accent:      #1c8a86;
  /* Akzent / CTA (Teal)               */
  --baeo-accent-2:    #c39a47;
  /* Highlight (Messing)               */
  --baeo-bg:          #f5f8f8;
  /* Grundfläche                       */
  --baeo-surface:     #ffffff;
  /* Karten / Eingabefelder            */
  --baeo-surface-2:   #eaf1f2;
  /* zweite Fläche                     */
  --baeo-muted:       #566872;
  /* Sekundärtext                      */
  --baeo-line:        #cdd9dd;
  /* feine Linie                       */
  --baeo-line-ink:    #0e2433;
  /* kräftige Linie / Feldrahmen       */
  --baeo-on-primary:  #f3fbfb;
  /* Text auf Primär                   */
  --baeo-on-accent:   #06231f;
  /* Text auf Akzent                   */
  --baeo-danger:      #b0492f;
  /* Fehler                            */
  --baeo-ok:          #2f7d57;
  /* Erfolg                            */
  /* --- Schrift --- */
  --baeo-font-head: "Cormorant Garamond", Georgia, serif;
  --baeo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* --- Form --- */
  --baeo-radius: 0;
  /* scharfe Kanten (editorial) */
  --baeo-focus:  0 0 0 3px rgba(28, 138, 134, .22);
  /* Akzent-Fokusring */
  /* Elementor-Global-Mapping (greift, wo Widgets globale Farben nutzen) */
  --e-global-color-primary:   var(--baeo-primary);
  --e-global-color-secondary: var(--baeo-ink);
  --e-global-color-accent:    var(--baeo-accent);
  --e-global-color-text:      var(--baeo-ink);
}

/* SCSS-Spiegel (nur falls in Partials gerechnet werden muss) */
/* ===========================================================================
   _typography.scss — Schrift & Überschriften
   Serife (Cormorant) für Headlines, humanistische Sans (Inter) für Text/UI.
   Bewusst breit selektiert, damit es Astra/Elementor durchgängig greift.
   =========================================================================== */
body,
.ast-container,
.entry-content,
button, input, select, textarea {
  font-family: var(--baeo-font-body);
}

/* Überschriften: Serife, ruhig, leicht negativer Tracking */
h1, h2, h3, h4, h5,
.entry-title,
.elementor-heading-title,
.ast-single-entry-banner .ast-page-title {
  font-family: var(--baeo-font-head);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--baeo-ink);
  line-height: 1.12;
}

h1, .entry-title {
  font-weight: 500;
}

h3, h4, h5 {
  font-weight: 600;
}

/* Versalien-Label (editorialer Akzent), als Utility nutzbar */
.baeo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--baeo-font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--baeo-accent);
}

.baeo-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}

/* Lesbarer Body-Text */
body {
  color: var(--baeo-ink);
  line-height: 1.6;
}

a {
  color: var(--baeo-primary);
}

a:hover {
  color: var(--baeo-accent);
}

/* ===========================================================================
   _astra.scss — Astra-Theme-Layer (Variante A · Praxis & Podium)

   MIGRATION: Diese Datei ersetzt den bisherigen, außerhalb des Repos injizierten
   <style id="baeo-global-styles">-Block (eine „Plakat-Palette": Petrol #1F4D5C +
   Magenta #7A2E5C, Überschriften in Oswald). Hier neu in Variante A:
     • Petrol  #1F4D5C  →  --baeo-primary (#15384F)
     • Magenta #7A2E5C  →  --baeo-accent  (#1C8A86, Teal)
     • Oswald (Headings) →  Cormorant (var(--baeo-font-head))
   Alle Werte kommen aus _tokens.scss. Sobald dieses Plugin aktiv ist, kann der
   alte baeo-global-styles-Block ersatzlos entfernt werden.
   =========================================================================== */
body {
  background: var(--baeo-bg);
}

/* ---------------------------------------------------------------------------
   Astra-Globalfarben auf die A-Palette mappen
   (greift überall dort, wo Astra/Elementor die --ast-global-color-* nutzen)
   --------------------------------------------------------------------------- */
:root,
.astra-dark-mode-enable {
  --ast-global-color-0: var(--baeo-primary)   !important;
  /* war #1F4D5C */
  --ast-global-color-1: var(--baeo-accent)    !important;
  /* war #7A2E5C (Magenta) → Teal */
  --ast-global-color-2: var(--baeo-primary-700) !important;
  /* war #2E6E80 */
  --ast-global-color-4: var(--baeo-bg)        !important;
  /* war #F8F4F2 */
  --ast-global-color-5: var(--baeo-surface-2) !important;
  /* war #D9C2D2 */
  --ast-border-color:   var(--baeo-line)      !important;
}

/* ---------------------------------------------------------------------------
   FORMULARFELDER — der zentrale Lesbarkeits-Fix
   Ursache des unleserlichen /profil: das Theme gibt Feldern dunklen Hintergrund,
   das Profil-CSS setzte selbst KEINE Feldfarbe → dunkel-auf-dunkel.
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"],
input[type="date"], input[type="time"], input[type="month"],
select, textarea {
  background-color: var(--baeo-surface);
  color: var(--baeo-ink);
  border: 1px solid var(--baeo-line-ink);
  border-radius: var(--baeo-radius);
  font-family: var(--baeo-font-body);
  font-size: .96rem;
  padding: 10px 13px;
  box-sizing: border-box;
}

input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder,
input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder,
input[type="date"]::placeholder, input[type="time"]::placeholder, input[type="month"]::placeholder,
select::placeholder, textarea::placeholder {
  color: #9fb0b8;
  opacity: 1;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="month"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--baeo-accent);
  box-shadow: var(--baeo-focus);
}

input[type="text"]:disabled, input[type="text"][readonly], input[type="email"]:disabled, input[type="email"][readonly], input[type="tel"]:disabled, input[type="tel"][readonly], input[type="url"]:disabled, input[type="url"][readonly],
input[type="number"]:disabled,
input[type="number"][readonly], input[type="password"]:disabled, input[type="password"][readonly], input[type="search"]:disabled, input[type="search"][readonly],
input[type="date"]:disabled,
input[type="date"][readonly], input[type="time"]:disabled, input[type="time"][readonly], input[type="month"]:disabled, input[type="month"][readonly],
select:disabled,
select[readonly], textarea:disabled, textarea[readonly] {
  background-color: var(--baeo-surface-2);
  color: var(--baeo-muted);
}

/* ---------------------------------------------------------------------------
   HEADER — dunkles Petrol (war #1F4D5C, jetzt --baeo-primary)
   --------------------------------------------------------------------------- */
.main-header-bar,
.ast-above-header,
.ast-below-header,
.site-header,
[data-section="section-header-builder"] .main-header-bar {
  background-color: var(--baeo-primary) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Site-Title / Logo-Schrift (war Oswald → jetzt Serife, passend zur Wortmarke) */
.site-title, .site-title a,
.ast-site-identity .site-title,
.ast-site-title-wrap a {
  font-family: var(--baeo-font-head) !important;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--baeo-on-primary) !important;
}

.site-description {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: var(--baeo-font-body) !important;
}

.menu-toggle .ast-mobile-svg {
  fill: var(--baeo-on-primary) !important;
}

/* Top-Level-Menülinks (auf Petrol) */
.main-header-menu > .menu-item > .menu-link,
.ast-builder-menu-1 > .menu > .menu-item > .menu-link,
.main-navigation > div > ul > .menu-item > a,
.main-navigation > ul > .menu-item > a {
  color: var(--baeo-on-primary) !important;
  font-family: var(--baeo-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  transition: color .15s ease, box-shadow .15s ease;
}

/* Hover / aktiv: Akzent-Unterstrich statt Anthrazit-Kasten (editorialer) */
.ast-builder-menu-1 .menu-link:hover,
.ast-builder-menu-1 .menu-link:focus,
.main-header-menu .menu-item:hover > .menu-link,
.main-navigation .menu-item:hover > a,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-navigation > ul > .menu-item.current-menu-item > a {
  color: var(--baeo-on-primary) !important;
  box-shadow: inset 0 -2px 0 var(--baeo-accent);
}

/* Submenü / Dropdown: Petrol, helle Links */
.main-header-menu .sub-menu,
.ast-builder-menu-1 .sub-menu,
.main-navigation .sub-menu,
.ast-desktop-menu .sub-menu {
  background-color: var(--baeo-primary) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.main-header-menu .sub-menu .menu-item > .menu-link,
.ast-builder-menu-1 .sub-menu .menu-item > .menu-link,
.main-navigation .sub-menu .menu-item > a,
.ast-desktop-menu .sub-menu .menu-item > .menu-link {
  color: var(--baeo-on-primary) !important;
  font-family: var(--baeo-font-body) !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background-color .15s ease, color .15s ease;
}

.main-header-menu .sub-menu .menu-item > .menu-link:hover,
.ast-builder-menu-1 .sub-menu .menu-link:hover,
.main-navigation .sub-menu .menu-item > a:hover,
.ast-desktop-menu .sub-menu .menu-item > .menu-link:hover {
  background-color: var(--baeo-primary-700) !important;
  color: var(--baeo-on-primary) !important;
}

/* Mobile-Menü: heller Hintergrund, dunkle Tinte (klar lesbar) */
.ast-builder-menu-mobile .main-navigation .sub-menu,
.ast-mobile-popup-content .menu .sub-menu {
  background-color: var(--baeo-surface) !important;
}

.ast-builder-menu-mobile .menu-link,
.ast-builder-menu-mobile .sub-menu .menu-link {
  color: var(--baeo-ink) !important;
}

.ast-builder-menu-mobile .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .menu-link:hover {
  color: var(--baeo-primary) !important;
  background: var(--baeo-surface-2) !important;
}

/* ---------------------------------------------------------------------------
   BUTTONS — einheitlich, scharfkantig (war Magenta → jetzt Primär/Akzent)
   --------------------------------------------------------------------------- */
.ast-button:not(.menu-toggle),
.wp-block-button__link,
input[type="submit"],
input[type="button"] {
  background-color: var(--baeo-primary) !important;
  color: var(--baeo-on-primary) !important;
  border: 1px solid var(--baeo-primary) !important;
  border-radius: var(--baeo-radius);
  font-family: var(--baeo-font-body) !important;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 24px;
  transition: background-color .15s ease;
}

.ast-button:not(.menu-toggle):hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  background-color: var(--baeo-primary-700) !important;
  color: var(--baeo-on-primary) !important;
}

/* Akzent-CTA als Utility */
.baeo-cta, .ast-button.baeo-cta {
  background-color: var(--baeo-accent) !important;
  border-color: var(--baeo-accent) !important;
  color: var(--baeo-on-accent) !important;
}

/* ---------------------------------------------------------------------------
   Content-Links + Akzent-Unterstrich unter Seitentiteln (aus baeo-global-styles)
   --------------------------------------------------------------------------- */
.entry-content a:not(.ast-button):not(.wp-block-button__link):not(.baeo-cta) {
  color: var(--baeo-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.entry-content a:not(.ast-button):not(.wp-block-button__link):not(.baeo-cta):hover {
  color: var(--baeo-accent);
}

.entry-header .entry-title::after,
.elementor-widget-theme-post-title h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--baeo-accent);
  margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.site-footer, .ast-small-footer {
  background: var(--baeo-primary-700);
  color: var(--baeo-on-primary);
}

.site-footer a, .ast-small-footer a {
  color: var(--baeo-on-primary);
  opacity: .9;
}

.site-footer a:hover, .ast-small-footer a:hover {
  opacity: 1;
}

/* ===========================================================================
   _elementor.scss — sanfte Abstimmung für Elementor
   Elementor bleibt, wo Layout/Content damit gebaut ist. Wir mappen nur die
   globalen Farben (siehe _tokens.scss) und geben Headings/Buttons den Look.
   Absichtlich zurückhaltend, um bestehende Elementor-Designs nicht zu sprengen.
   =========================================================================== */
.elementor-heading-title {
  font-family: var(--baeo-font-head);
}

/* Elementor-Buttons an den Stil angleichen, ohne Inline-Designs zu zerstören */
.elementor-button {
  border-radius: var(--baeo-radius);
  font-family: var(--baeo-font-body);
  letter-spacing: .1em;
}

/* Wo Elementor globale Akzentfarbe nutzt, kommt unser Teal zum Tragen
   (über --e-global-color-accent in _tokens.scss). */
/* ===========================================================================
   _kom.scss — Theming der stabilen kom-Hooks (Styling-Vertrag aus kom STYLE.md)
   Da die Inline-Styles von UserProfile::inline_styles() per Filter abgeschaltet
   werden, übernimmt DIESE Datei die komplette Profil-Optik — lesbar im A-Look.
   Es wird NUR über die dokumentierten Klassen gestylt, kein Markup-Umbau.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   Gemeinsame Buttons (.kom-btn*) — plugin-weit
   --------------------------------------------------------------------------- */
.kom-btn {
  display: inline-block;
  font-family: var(--baeo-font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--baeo-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, filter .15s ease;
}

.kom-btn-primary {
  background: var(--baeo-accent);
  color: var(--baeo-on-accent);
  border-color: var(--baeo-accent);
}

.kom-btn-primary:hover {
  filter: brightness(0.94);
}

.kom-btn-secondary {
  background: transparent;
  color: var(--baeo-primary);
  border-color: var(--baeo-primary);
}

.kom-btn-secondary:hover {
  background: var(--baeo-primary);
  color: var(--baeo-on-primary);
}

/* ===========================================================================
   PROFILSEITE  /profil/
   =========================================================================== */
.kom-profile-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* Kopf: Avatar + Name + Badges */
.kom-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding: 22px 24px;
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line-ink);
}

.kom-profile-header img {
  border-radius: 50%;
  width: 76px;
  height: 76px;
  object-fit: cover;
  flex: none;
}

.kom-profile-header-info h2 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--baeo-ink);
  margin: 0 0 9px;
}

/* Badges als Chips — Instrument als Akzent hervorgehoben */
.kom-profile-instrument,
.kom-profile-gender,
.kom-profile-age,
.kom-profile-email {
  display: inline-block;
  font-size: .74rem;
  font-weight: 500;
  border: 1px solid var(--baeo-line);
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  color: var(--baeo-muted);
  border-radius: var(--baeo-radius);
  background: transparent;
}

.kom-profile-instrument {
  border-color: var(--baeo-accent);
  color: var(--baeo-accent);
  font-weight: 600;
  letter-spacing: .03em;
}

/* Hinweisbox „Daten aktuell halten" */
.kom-profile-reminder {
  max-width: 760px;
  margin: 0 auto 22px;
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line);
  border-left: 3px solid var(--baeo-accent);
  border-radius: var(--baeo-radius);
  padding: 12px 16px;
  color: var(--baeo-ink);
}

.kom-profile-reminder p {
  margin: 0;
}

/* Statusmeldungen */
.kom-profile-success,
.kom-cred-msg--success {
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line);
  border-left: 3px solid var(--baeo-ok);
  color: var(--baeo-ink);
  padding: 11px 16px;
  border-radius: var(--baeo-radius);
  margin-bottom: 16px;
}

.kom-profile-errors,
.kom-cred-msg--error {
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line);
  border-left: 3px solid var(--baeo-danger);
  color: var(--baeo-ink);
  padding: 11px 16px;
  border-radius: var(--baeo-radius);
  margin-bottom: 16px;
}

/* Formular */
.kom-profile-form {
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line-ink);
  padding: 24px 26px 8px;
}

.kom-profile-form h3 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--baeo-ink);
  margin: 26px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--baeo-line);
}

.kom-profile-form h3:first-of-type {
  margin-top: 0;
}

.kom-profile-row {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
}

.kom-profile-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kom-profile-field--wide {
  flex: 1 1 100%;
}

.kom-profile-field label {
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--baeo-ink);
  margin-bottom: 7px;
}

.kom-profile-field label .required {
  color: var(--baeo-accent);
}

/* Felder erben den globalen Feld-Fix (helle Fläche, dunkle Tinte) aus _astra.scss */
.kom-profile-field small {
  color: var(--baeo-muted);
  margin-top: 5px;
  font-size: .76rem;
}

.kom-profile-field--checkbox label {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  text-transform: none;
  letter-spacing: 0;
  font-size: .92rem;
  cursor: pointer;
}

.kom-profile-field--checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--baeo-accent);
}

.kom-profile-actions {
  margin-top: 18px;
  padding: 16px 0 8px;
  display: flex;
  gap: 12px;
}

/* Nur-Lese-Ansicht */
.kom-profile-details {
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line-ink);
  padding: 20px 24px;
}

.kom-profile-details h3 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  margin: 18px 0 12px;
  border-bottom: 1px solid var(--baeo-line);
  padding-bottom: 8px;
}

.kom-profile-table {
  width: 100%;
  border-collapse: collapse;
}

.kom-profile-table th {
  text-align: left;
  padding: 9px 12px 9px 0;
  width: 150px;
  color: var(--baeo-muted);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--baeo-line);
  vertical-align: top;
}

.kom-profile-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--baeo-line);
  color: var(--baeo-ink);
}

.kom-profile-back {
  margin-top: 28px;
}

/* Sektion „Passwörter & Zugänge" */
.kom-profile-credentials {
  max-width: 760px;
  margin: 28px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--baeo-line-ink);
}

.kom-profile-credentials > h3 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--baeo-ink);
  margin: 8px 0 14px;
}

.kom-cred-intro {
  background: var(--baeo-surface-2);
  border: 1px solid var(--baeo-line);
  border-left: 3px solid var(--baeo-accent-2);
  border-radius: var(--baeo-radius);
  padding: 11px 15px;
  font-size: .92rem;
  color: var(--baeo-ink);
  margin: 0 0 18px;
}

.kom-cred-card {
  border: 1px solid var(--baeo-line-ink);
  border-radius: var(--baeo-radius);
  padding: 18px 20px;
  margin: 0 0 16px;
  background: var(--baeo-surface);
}

.kom-cred-card h4 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 4px;
  color: var(--baeo-ink);
}

.kom-cred-card-desc {
  margin: 0 0 12px;
  font-size: .9rem;
  color: var(--baeo-muted);
}

.kom-cred-form .kom-profile-field {
  margin-bottom: 12px;
}

.kom-cred-form small {
  display: block;
  color: var(--baeo-muted);
  font-size: .8rem;
  margin: -2px 0 12px;
}

.kom-cred-msg {
  padding: 10px 14px;
  border-radius: var(--baeo-radius);
  margin-bottom: 12px;
  font-size: .94rem;
}

/* Passwort-Changer-Karte in die Profilseite einpassen (höhere Spezifität,
   unabhängig von der Lade-Reihenfolge) */
.kom-cred-card .kom-pwd {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kom-cred-card .kom-pwd__select,
.kom-cred-card .kom-pwd__input {
  font-size: .95rem;
}

@media (max-width: 600px) {
  .kom-profile-header {
    flex-direction: column;
    text-align: center;
  }
  .kom-profile-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* ===========================================================================
   MITGLIEDERLISTE  (inc/memberList.php)
   Gliederung nach Instrument (.kom_memberlist), Mobil & E-Mail sichtbar.
   =========================================================================== */
.kom_memberlist {
  margin: 0 0 26px;
}

.kom_memberlist > h2,
.kom_memberlist > h3 {
  font-family: var(--baeo-font-head);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--baeo-primary);
  border-bottom: 2px solid var(--baeo-line-ink);
  padding-bottom: 6px;
  margin: 0 0 4px;
}

.kom_member {
  padding: 12px 0;
  border-bottom: 1px solid var(--baeo-line);
}

.kom_member_inner {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.kom_member_name {
  font-weight: 600;
  color: var(--baeo-ink);
  text-decoration: none;
  font-size: 1.02rem;
}

.kom_member_name:hover {
  color: var(--baeo-accent);
}

.kom_member_infos_standard {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--baeo-muted);
  font-size: .9rem;
}

/* Detail-Badges */
.kom_member .mobile,
.kom_member .email,
.kom_member .kom_login {
  color: var(--baeo-ink);
}

.kom_member .email a,
.kom_member .mobile a,
.kom_member .kom_login a {
  color: var(--baeo-primary);
  text-decoration: none;
}

.kom_member .email a:hover {
  color: var(--baeo-accent);
}

.kom_member .vorstand,
.kom_member .komitee {
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--baeo-accent);
  border: 1px solid var(--baeo-accent);
  padding: 2px 7px;
  border-radius: var(--baeo-radius);
}

.kom_notapproved {
  color: var(--baeo-danger);
  font-weight: 600;
}

/* Anker-Navigation (Instrument-Sprungleiste) */
.komtop,
.anker {
  font-size: .8rem;
}

.komtop a,
.anker a {
  color: var(--baeo-primary);
  text-decoration: none;
  border: 1px solid var(--baeo-line-ink);
  padding: 4px 10px;
  margin: 0 4px 6px 0;
  display: inline-block;
  font-family: var(--baeo-font-head);
}

.komtop a:hover,
.anker a:hover {
  background: var(--baeo-primary);
  color: var(--baeo-on-primary);
}

.kom-memberlist-notice {
  background: var(--baeo-surface);
  border: 1px solid var(--baeo-line);
  border-left: 3px solid var(--baeo-accent);
  padding: 12px 16px;
  border-radius: var(--baeo-radius);
  color: var(--baeo-ink);
}