/* Sailing Sisters · Gestaltung für Ultimate Member
   Stand 23.09.2026, abgeglichen mit UM 2.13.1 am serverseitig gerenderten DOM
   (Bericht: uploads/paket-1-um-dom-abgleich.md). Nach styles.css laden.

   ERSETZT die Bestandsdatei um-custom.css im Child-Theme saisi-2025-child
   („Material 3“, Schatten, 16 bis 28px-Rundungen, eigener Farbsatz). Beide zusammen
   ergeben ein Gemisch. um-custom.css aus dem Child-Theme entfernen, nicht ergänzen.

   Was die Datei durchsetzt: Rundungen nur 4px und 8px, vollrund nur Avatare,
   keine Schatten, keine Icons, Überschriften in Ysabeau Office SemiBold,
   Text mindestens 4,5:1, Trefferflächen ab 44px, sichtbarer Tastaturfokus.

   Mit [BROWSER] markierte Regeln sind nur am serverseitigen Markup oder an der
   JS-Vorlage belegt. Sie müssen im Browser einmal angesehen werden (Liste im readme). */

/* --- Schriften --- */
.um, .um-form, .um-profile, .um-members, .um-directory, .um-account{font-family:var(--ss-font-brand);color:var(--ss-navy)}
.um h1, .um h2, .um h3, .um-name, .um-member-name, .um-member-name a, .um-profile .um-name a, .um-account-heading{font-family:var(--ss-font-brand) !important;font-weight:600 !important;color:var(--ss-navy) !important;letter-spacing:0}
.um-name, .um-profile .um-name a{font-size:32px;line-height:1.2}
.um-member-name, .um-member-name a{font-size:20px;line-height:1.3;text-decoration:none}
.um-account-heading{font-size:24px !important;line-height:1.25}
/* Kurztexte auf der Karte sind Angaben, keine Absätze: Ysabeau. */
.um-member-tagline, .um-member-metaline{font-family:var(--ss-font-brand);font-size:15px;line-height:1.5;color:var(--ss-navy-600)}
/* Freier Profiltext ist Erzähltes: Literata. .um-field-value p nur in der Ansicht [BROWSER]. */
.um-meta-text, .um-profile .um-field-value p{font-family:var(--ss-font-read);font-size:17px;line-height:1.6;color:var(--ss-navy);max-width:68ch}
/* Eigene Felder: .um-field-Spitzname mit großem S, CSS unterscheidet Groß/Klein. */

/* --- Kanten und Schatten --- */
.um, .um-form, .um-member, .um-members .um-member, .um-profile-body,
.um-field-area, .um-search, .um-cover, .um-header, .um-profile-navbar, .um-profile-nav,
.um-field-block, .um-account-side, .um-account-main, .um-dropdown, .um-modal, .um-modal-body{box-shadow:none !important}
.um-member, .um-members .um-member, .um-cover, .um-profile-navbar, .um-account-side, .um-account-main, .um-dropdown, .um-modal{border-radius:8px !important}
.um-member{border:1px solid var(--ss-navy-200) !important;background:#fff !important}
.um input, .um textarea, .um select, .um-form input, .um-form textarea, .um-form select,
.um-search input, .um-search-line input, .um-search-filter{border-radius:4px !important;box-shadow:none !important;border:1px solid var(--ss-navy-200) !important}
.um-member-photo img, .um-profile-photo img, .um-avatar, .um .gravatar{border-radius:999px !important;box-shadow:none !important;border:4px solid #fff}

/* --- Flächen --- */
.um-profile-body, .um-form, .um-search{background:#fff !important}
.um-directory{background:transparent !important}
.um-cover-e, .um-cover{background:var(--ss-navy-100) !important}

/* --- Felder und Labels --- */
.um input, .um textarea, .um select, .um-form input, .um-form textarea, .um-form select{font-family:var(--ss-font-brand);font-size:17px;line-height:1.4;color:var(--ss-navy);background:#fff;padding:12px 16px;min-height:44px;box-sizing:border-box}
.um-field-label, .um-field-label label{font-family:var(--ss-font-brand);font-size:15px;font-weight:600;color:var(--ss-navy)}
.um ::placeholder{color:var(--ss-navy-600);opacity:1}
/* Fehler: UM setzt die Meldung NACH das Feld. Deshalb über :has() am Feld-Container. */
.um-field-error, .um-field-error span{color:var(--ss-status-error) !important;background:none !important;font-size:15px;font-weight:600;padding:0 !important;margin-top:8px}
.um-field-error .um-field-arrow{display:none !important}
.um-field:has(.um-field-error) :is(input, textarea, select), .um input.um-error{border-color:var(--ss-status-error) !important}
/* Passwort zeigen: Trefferfläche 44px. */
.um-toggle-password{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Checkbox, Radio: UM zeichnet eigene Kästchen mit Icon-Schrift. Zeile 44px hoch, Kästchen in Ocean-deep. [BROWSER] */
.um-field-checkbox-option, .um-field-radio-option{font-size:17px;color:var(--ss-navy);min-height:44px;display:flex;align-items:center}
.um-field-checkbox-state i, .um-field-radio-state i{color:var(--ss-ocean-deep) !important}
/* DSGVO-Block bei der Registrierung */
.um-toggle-gdpr{display:inline-flex;align-items:center;min-height:44px;color:var(--ss-ocean-deep);font-weight:600}
.um-gdpr-content{background:var(--ss-navy-100);border-radius:8px;padding:16px;font-size:15px;line-height:1.5;color:var(--ss-navy)}

/* --- Buttons --- */
.um-button, .um .um-button, .um input[type="submit"], .um-do-search, .um-modal-btn{
  font-family:var(--ss-font-brand) !important;font-weight:600 !important;font-size:17px !important;
  line-height:1.2 !important;background:var(--ss-ocean-deep) !important;color:#fff !important;
  border:2px solid var(--ss-ocean-deep) !important;border-radius:4px !important;padding:10px 22px !important;
  min-height:44px !important;box-shadow:none !important;text-transform:none !important;
  transition:background var(--ss-transition, 120ms ease-out), border-color var(--ss-transition, 120ms ease-out), color var(--ss-transition, 120ms ease-out)}
.um-button:hover, .um input[type="submit"]:hover, .um-do-search:hover, .um-modal-btn:hover{background:var(--ss-navy) !important;border-color:var(--ss-navy) !important}
/* Sekundär: Login „Registrieren“, Profil „Abbrechen“, Verzeichnis „Profil bearbeiten“, Modal-Zweitknopf. */
.um-button.um-alt, .um-modal-btn.alt{background:transparent !important;color:var(--ss-ocean-deep) !important}
.um-button.um-alt:hover, .um-modal-btn.alt:hover{background:transparent !important;color:var(--ss-navy) !important;border-color:var(--ss-navy) !important}

/* --- Links --- */
.um a, .um-profile a{color:var(--ss-ocean-deep)}
.um a:hover, .um-profile a:hover{color:var(--ss-navy)}

/* --- Fokus. Fehlt im Plugin komplett. --- */
.um a:focus-visible, .um button:focus-visible, .um input:focus-visible,
.um textarea:focus-visible, .um select:focus-visible, .um [tabindex]:focus-visible,
.um-button:focus-visible, .um-modal-btn:focus-visible, .um-account-link:focus-visible{outline:2px solid var(--ss-ocean-deep) !important;outline-offset:2px !important}

/* --- Verzeichnis: Kopf, Suche, Filter, Treffer --- */
.um-member-directory-header{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.um-search-line input, .um-member-directory-search-line input{font-size:17px;min-height:44px;padding:12px 16px}
.um-member-directory-filters-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.um-members-filter-tag{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:var(--ss-navy-100) !important;color:var(--ss-navy) !important;border:0 !important;border-radius:4px !important;font-size:15px;box-shadow:none !important}
.um-clear-filters-a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--ss-ocean-deep) !important}
.um-members-total{font-size:15px;color:var(--ss-navy-600)}
/* Status auf der Karte: immer ein Wort, nie nur Farbe. */
.um-member-status{display:inline-block;font-size:13px;font-weight:600;color:var(--ss-navy-600) !important;background:var(--ss-navy-100) !important;border-radius:4px;padding:4px 8px}
/* Leerzustand. Den Plugin-Satz „Es tut uns leid…“ in den Verzeichnis-Einstellungen ersetzen,
   z.B. „Niemand gefunden. Versuch es mit weniger Filtern.“ */
.um-members-none{background:var(--ss-navy-100);border-radius:8px;padding:24px;text-align:left}
.um-members-none p{margin:0;font-size:17px;line-height:1.5;color:var(--ss-navy) !important}

/* --- Blättern (ersetzt das entfallene Load-more) [BROWSER] --- */
.um-members-pagination-box{margin-top:32px}
.um-members-pagi{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.um-members-pagi > *{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:4px;font-size:17px;color:var(--ss-ocean-deep);background:#fff;border:1px solid var(--ss-navy-200);cursor:pointer}
.um-members-pagi > .current{color:var(--ss-navy);font-weight:600;border-color:var(--ss-navy)}
.um-members-pagi-dropdown select{min-height:44px}

/* --- Profil-Navigation: nur sichtbar bei mehr als einem Reiter --- */
.um-profile-navbar, .ss-um-profile-nav{background:#fff !important;border:1px solid var(--ss-navy-200) !important}
.um-profile-nav{background:transparent !important;border:0 !important}
.um-profile-nav-item a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ss-navy-600) !important;padding:0 20px;background:transparent !important;border-radius:0 !important}
.um-profile-nav-item.active a{color:var(--ss-navy) !important;box-shadow:inset 0 -2px 0 var(--ss-ocean-deep)}

/* --- Kontoseite --- */
.um-account-side{background:#fff !important;border:1px solid var(--ss-navy-200) !important;padding:8px 0}
.um-account-link{display:flex !important;align-items:center;min-height:44px;padding:0 16px !important;font-size:17px;color:var(--ss-ocean-deep) !important;background:transparent !important;border:0 !important}
.um-account-link:hover{color:var(--ss-navy) !important}
.um-account-link.current{color:var(--ss-navy) !important;font-weight:600;box-shadow:inset 2px 0 0 var(--ss-ocean-deep)}
/* Keine Icons in der Marke: Symbol und Pfeil aus, Titel an. Klassen aus der UM-Vorlage [BROWSER],
   auch die schmale Ansicht prüfen, dort zeigt UM sonst nur Symbole. */
.um-account-link .um-account-icon, .um-account-link .um-account-icontip, .um-account-link .um-account-arrow{display:none !important}
.um-account-link .um-account-title{display:inline !important}
.um-account-main{background:#fff !important;border:1px solid var(--ss-navy-200) !important;padding:32px !important}
.um-account-tab{font-size:17px}

/* --- Dropdown und Modal (Bildwechsel im Profil) --- */
.um-dropdown{background:#fff !important;border:1px solid var(--ss-navy-200) !important}
.um-dropdown a, .um-dropdown li a{display:flex;align-items:center;min-height:44px;padding:0 16px;color:var(--ss-ocean-deep) !important;font-size:17px}
.um-dropdown-arr{display:none !important}
.um-modal{border:1px solid var(--ss-navy-200) !important;overflow:hidden}
.um-modal-header{background:#fff !important;color:var(--ss-navy) !important;font-family:var(--ss-font-brand);font-size:20px;font-weight:600;padding:20px 24px !important;border-bottom:1px solid var(--ss-navy-200)}
.um-modal-body{background:#fff !important;padding:24px !important}
.um-modal-footer{background:#fff !important;padding:16px 24px !important;border-top:1px solid var(--ss-navy-200);display:flex;gap:16px;justify-content:flex-end}

/* --- Aus dem Theme übernommen, 23.09.2026 (F7 bis F10). Datei muss NACH dem UM-CSS laden. --- */
/* F7: UM setzt Feldrahmen mit .um .um-form input[type=…] (0,3,1, !important). Hier doppelte Klasse, damit stärker. */
.um.um .um-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"]), .um.um .um-form textarea, .um.um .um-form select{border:1px solid var(--ss-navy-200) !important;border-radius:4px !important;box-shadow:none !important}
.um.um .um-form .um-field:has(.um-field-error) :is(input, textarea, select){border-color:var(--ss-status-error) !important}
.um.um .um-field-error{font-size:15px !important}
/* F8: Kontoseite schmal (uimob800): untereinander statt 53px-Seitenleiste, Titel brechen sonst in den Hauptbereich. */
.um-account.uimob800 .um-account-side, .um-account.uimob800 .um-account-main{float:none !important;width:100% !important;max-width:none !important}
.um-account.uimob800 .um-account-main{margin-top:16px}
/* UM: div.uimob800 .um-account-meta img (0,2,2) setzt width/max-width 100%. */
.um.um-account.uimob800 .um-account-side .um-account-meta img{width:64px !important;height:64px !important;max-width:64px !important}
/* Keine Icons: Symbol vor der Konto-Überschrift aus. */
.um-account .um-account-heading i{display:none !important}
/* F9: Modal-Kopf und -Knopf ohne feste Zeilenhöhe, sonst sitzt Text auf der Trennlinie bzw. am unteren Rand. */
.um-modal-header, .um-modal-btn{line-height:1.3 !important;height:auto !important}
/* F10: Auswahlfelder (select2) wie Eingabefelder, UM gibt sonst #ddd und 2px. */
/* UM: .um-field .select2.select2-container .select2-selection (0,4,0, !important). */
.um .um-search-filter .select2.select2-container .select2-selection, .um .um-field .select2.select2-container .select2-selection{border:1px solid var(--ss-navy-200) !important;border-radius:4px !important;min-height:44px;box-shadow:none !important}
.um .select2-container .select2-selection__rendered{line-height:42px !important;font-family:var(--ss-font-brand);font-size:17px;color:var(--ss-navy)}
.um .select2-container--open .select2-dropdown{border:1px solid var(--ss-navy-200) !important;border-radius:4px !important;box-shadow:none !important}

/* --- Bewegung --- */
@media (prefers-reduced-motion:reduce){.um *{transition-duration:.01ms !important;animation-duration:.01ms !important}}