@charset "UTF-8";
:root {
  --mp-color-brand: var(--red, #D42020);
  --mp-color-brand-hover: var(--red-dark, #B81C1C);
  --mp-color-brand-active: var(--red-active, #951818);
  --mp-color-brand-light: var(--red-light, #F6D6D6);
  --mp-color-brand-muted: rgba(212, 32, 32, 0.12);
  --mp-color-accent: var(--accent, #C5900A);
  --mp-color-accent-dark: var(--accent-dark, #9E7308);
  --mp-color-accent-light: var(--accent-light, #FDF3DC);
  --mp-color-accent-text: var(--accent-text, #7A5906);
  --mp-color-text: var(--text, #1C1C1E);
  --mp-color-text-2: var(--text-2, #3A3A3C);
  --mp-color-muted: var(--text-muted, #8E8E93);
  --mp-color-surface: var(--bg-card, #FFFFFF);
  --mp-color-surface-alt: #F5F3EE;
  --mp-color-surface-muted: #F2EFE9;
  --mp-color-border: rgba(0, 0, 0, 0.07);
  --mp-color-border-soft: rgba(0, 0, 0, 0.06);
  --mp-color-dark-grey: #8E8E93;
  --mp-color-dark-grey-hover: #6E6E73;
  --mp-font-ui: var(--font-ui, 'Barlow', system-ui, -apple-system, sans-serif);
  --mp-font-body: var(--font-body, 'DM Sans', system-ui, -apple-system, sans-serif);
  --mp-font-brand: var(--font-brand, 'Draper', 'Barlow', sans-serif);
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-radius: 8px;
  --mp-radius-lg: 10px;
  --mp-radius-pill: 20px;
  --mp-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  --mp-shadow-lg: 0 6px 28px rgba(0, 0, 0, 0.11);
  --mp-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12);
  --mp-transition: 0.15s ease;
  --mp-status-active: #34C759;
  --mp-status-pending: #FF9500;
  --mp-status-expired: #8E8E93;
  --mp-status-external: #007AFF;
  --mp-status-deceased: #FF3B30;
  --sp-fussball: #3A6644;
  --sp-tischtennis: #5A6A7A;
  --sp-akrobatik: #7A3A8A;
  --sp-gymnastik: #3A6644;
  --sp-kegeln: #5A6A7A;
  --sp-volleyball: #2D5C9A;
  --sp-reitsport: #8A5018;
  --sp-basketball: #C07428;
}

body.page-member-portal .container > .row,
body.page-member-portal .row .row,
body.page-member-portal .row > div,
body.page-member-portal .row .col-lg-12,
body.page-member-portal .row .col-md-12 {
  background: var(--mp-color-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-member-portal {
  font-family: var(--mp-font-body);
}

.member-portal {
  font-family: var(--mp-font-body);
  color: var(--mp-color-text);
  background: var(--mp-color-surface);
  border-radius: var(--mp-radius);
  padding: 1rem 1.25rem;
  isolation: isolate;
  position: relative;
  z-index: 100;
}

.member-portal :where(p, span, label, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, td, th, li) {
  font-family: inherit;
}

.member-portal h1, .member-portal h2, .member-portal h3,
.member-portal h4, .member-portal h5, .member-portal h6 {
  font-family: var(--mp-font-ui);
}

.member-portal i.fas, .member-portal i.fa-solid {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

.member-portal i.far, .member-portal i.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400;
}

.member-portal i.fab, .member-portal i.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400;
}

.member-portal h2 i,
.member-portal h3 i,
.member-portal h4 i,
.member-portal label i,
.member-portal .card-header i {
  margin-right: 6px;
}

.member-portal .card {
  background: var(--mp-color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--mp-color-border-soft);
}

.member-portal .card-header {
  background: var(--mp-color-surface-alt);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 600;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--mp-space-3);
  padding: var(--mp-space-3) 0;
}
.event-list__item + .event-list__item {
  border-top: 1px solid var(--mp-color-border-soft);
}

.event-list__icon {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  color: var(--mp-color-accent-text);
  line-height: 1.5;
}

.event-list__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.event-list__when {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}

.event-list__what {
  font-size: 14px;
}

.event-list__where {
  font-size: 12px;
  color: var(--mp-color-muted);
}

.event-pager {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.event-pager__viewport {
  flex: 1;
  min-height: 280px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  position: relative;
}

.event-pager__viewport .event-list {
  position: absolute;
  inset: 0 0 auto 0;
}

.event-pager__viewport .event-list {
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .event-pager__viewport .event-list {
    transition: none;
  }
}
.event-pager__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--mp-space-2);
  padding-top: var(--mp-space-2);
  border-top: 1px solid var(--mp-color-border-soft);
}

.event-pager__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  background: transparent;
  color: var(--mp-color-text);
  cursor: pointer;
}
.event-pager__btn:hover:not(:disabled) {
  background: var(--mp-color-brand-light);
}
.event-pager__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.event-pager__btn:focus-visible {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: 1px;
}

.event__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mp-color-border-soft);
}

/* 🔴 Ausgegraut wird die ganze Karte, nicht nur ihr Inhalt (Georg, 31.08.2026:
   "die card kann dann auch im portal ausgegraut sein").

   Vorher lag die Blasse auf dem inneren Block. Der Kartenkopf mit Tag und
   Uhrzeit blieb in voller Farbe stehen — und der Kopf ist das, was man beim
   Ueberfliegen liest. Ein abgesagter Termin sah deshalb aus wie jeder andere,
   bis man in die Karte hineinsah.

   Ueber :has am aeusseren Element und nicht ueber eine zweite Klasse in der
   Vorlage: Die Karte ist eine Komponente des Themes, die an dreissig Stellen
   steht. Sie fuer diesen einen Fall um ein Argument zu erweitern, traegt die
   Kalenderlogik in jede andere Karte.

   Die Blasse steht nur hier aussen, sonst multipliziert sie sich mit sich
   selbst (0,65 x 0,65) und die Karte waere kaum noch lesbar. */
.mp-card:has(.event--cancelled) {
  opacity: 0.65;
}

/* 🔴 Auch das Datum im Kartenkopf wird durchgestrichen (Georg, 31.08.2026:
   "das datum im card header durchgestrichen").

   Im Kopf steht Tag und Uhrzeit -- die Angabe, nach der man einen Termin
   sucht. Blass allein liest sich wie "vorbei", durchgestrichen wie "faellt
   aus". Der Unterschied ist der zwischen einem Termin, den man verpasst hat,
   und einem, zu dem man nicht hinbrauchte.

   Nur der Text, nicht das Symbol davor: Ein durchgestrichenes Kalendersymbol
   ist ein Fleck, keine Aussage. */
.mp-card:has(.event--cancelled) .mp-card__header span {
  text-decoration: line-through;
}

/* Vergangene Termine, aus demselben Anlass: Der Kalender oeffnet den laufenden
   Monat, und am Monatsende ist der fast vorbei. Ohne Kennzeichnung sieht ein
   Training vom 5. aus wie eines vom naechsten Mittwoch.

   Schwaecher als eine Absage: Vorbei ist eine Tatsache, abgesagt eine
   Entscheidung. Die Entscheidung soll staerker ins Auge fallen. Ein Termin,
   der beides ist, bleibt bei der Absage -- die Regel steht spaeter. */
.mp-card:has(.event--past) {
  opacity: 0.75;
}

.mp-card:has(.event--past):has(.event--cancelled) {
  opacity: 0.65;
}

/* Ein schmaler Trenner ueber jedem Antwortblock.
 *
 * 🔴 Georg, 28.08.2026: "vor dem kind zu und und absagen button noch einen
 * schmaler trenner und vor die trainer zu und absagen buttons auch."
 *
 * Der Termin traegt jetzt drei Dinge untereinander: seine Angaben, die
 * Dienstplan-Zeile des Trainers und die Zeilen der Kinder. Ohne Linie liest
 * sich das als eine Liste, in der die eigene Zusage neben den Kindern steht —
 * und dann sagt jemand fuer das falsche zu.
 *
 * Als Rahmen und nicht als eigenes Element: Ein <hr> im Fluid waere eine
 * vierte Zeile, die mitwandern muss, wenn der Block einmal woanders steht. */
.event__respond--divided {
  border-top: 1px solid var(--mp-color-border-soft);
  padding-top: 8px;
}

/* Die Knopfleiste einer Termin-Karte.

   Sie stand bis zum 21.08.2026 neben dem Inhalt in derselben Zeile. Ab vier
   Knoepfen brach sie um, und in anderen Sprachen sind die Beschriftungen
   laenger — das Problem waechst also, statt zu verschwinden (Georg,
   21.08.2026).

   Eigene Zeile unter dem Inhalt, innerhalb der Karte: Bei den Terminen bleibt
   sie drin, weil eine Karte je Termin steht und die Leiste sonst nicht mehr
   erkennen liesse, zu welchem sie gehoert. Der Kartenkopf nennt dafuer Tag,
   Uhrzeit und Gegner. */
.member-portal .event__actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Rechtsbuendig wie die Leiste unter den Formularkarten (Georg,
     21.08.2026) — die Knoepfe stehen dort, wo die Hand sie sucht. */
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mp-color-border-soft);
}

/* Zu- und Absage im Hintergrund: kurz ausgrauen, dann ein leises Aufleuchten.
   Ohne Rueckmeldung waere nicht zu unterscheiden, ob der Klick angekommen ist
   oder nur die Farbe gewechselt hat. */
.member-portal .respond-form--busy {
  opacity: 0.55;
}

.member-portal .respond-form--saved button.is-active {
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.28);
}

/* Der Fehler steht in der Zeile, in der geklickt wurde — unter den Knoepfen,
   damit er sie nicht verschiebt. */
.respond-form__error {
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--mp-color-brand);
}

/* Die Trainingsteilnahme neben dem Namen — sie erklärt die Reihenfolge.

   🔴 Die Kaderliste ist nach Anwesenheit sortiert (Georg, 01.09.2026), aber
   innerhalb einer Quote alphabetisch. Ohne die Zahl daneben sah das aus wie
   eine gewöhnliche Namensliste, und die Sortierung wirkte, als gäbe es sie
   nicht. */
.check-item .mp-attendance {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Die Zeile der Kaderplanung: Name, dann je Angabe eine Beschriftung und ihr
   Badge.

   🔴 Beschriftung davor (Georg, 07.09.2026). Eine nackte "1/1" neben einem
   Namen ist eine Zahl ohne Frage — wer sie zum ersten Mal sieht, rät, und mit
   den Spielminuten daneben stünden zwei Zahlen ohne Unterschied.

   Der Trenner steht hier und nicht im Markup: Dort hinge er zwischen zwei
   Fluid-Zweigen, und wer eine Angabe ausblendet, ließe einen Strich stehen,
   der nichts mehr trennt. */
.mp-roster-line {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 2px;
}

.mp-roster-line__name {
  min-width: 0;
}

.mp-roster-line__no {
  margin-left: 6px;
  color: var(--mp-color-muted);
}

.mp-roster-line__label {
  margin-left: 10px;
  color: var(--mp-color-muted);
  font-size: 11px;
  /* Der senkrechte Strich gehört zur Beschriftung, nicht zwischen die
     Elemente: So steht er nur da, wo auch eine Angabe folgt. */
}
.mp-roster-line__label::before {
  content: "|";
  margin-right: 10px;
  color: var(--mp-color-border-soft);
}

/* Auf dem Telefon bricht die Zeile um; der Strich am Zeilenanfang sähe dort
   aus wie ein Aufzählungszeichen. */
@media (max-width: 575.98px) {
  .mp-roster-line__name {
    flex: 1 1 100%;
  }
  .mp-roster-line__label:first-of-type::before {
    content: none;
    margin-right: 0;
  }
}
.mp-kv {
  padding: 7px 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}

.respond-form {
  flex-wrap: wrap;
}

.member-portal .btn-danger {
  background-color: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
}

.member-portal .btn-danger:hover {
  background-color: var(--mp-color-brand-hover);
  border-color: var(--mp-color-brand-hover);
}

.member-portal .btn-outline-danger {
  color: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
}

.member-portal .btn-outline-danger:hover {
  background-color: var(--mp-color-brand);
  color: #fff;
}

.member-portal .btn.btn-outline-secondary:hover,
.member-portal .btn.btn-outline-secondary:focus,
.member-portal a.btn.btn-outline-secondary:hover,
.member-portal a.btn.btn-outline-secondary:focus {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.member-portal .btn.btn-outline-secondary:hover i,
.member-portal a.btn.btn-outline-secondary:hover i {
  color: #fff;
}

.member-portal .btn-link:hover i,
.member-portal .btn-link:focus i {
  color: var(--mp-color-brand);
}

.member-portal .btn:focus {
  box-shadow: none;
}

.member-portal .btn:focus-visible,
.member-portal button[type=submit]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-color-brand-muted);
}

.member-portal .btn-sm {
  min-height: 44px;
}

.member-portal input[type=checkbox],
.facet-menu input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid #adb5bd;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.12s ease;
  vertical-align: middle;
}

.member-portal input[type=checkbox]:hover,
.facet-menu input[type=checkbox]:hover {
  border-color: var(--mp-color-brand);
}

.member-portal input[type=checkbox]:checked,
.facet-menu input[type=checkbox]:checked {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
}

.member-portal input[type=checkbox]:checked::after,
.facet-menu input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.member-portal input[type=checkbox]:focus-visible,
.facet-menu input[type=checkbox]:focus-visible {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: 1px;
}

.member-portal select,
.member-portal .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 9px;
  padding-right: 34px;
}

.member-portal select:not([multiple]):not([size]) {
  height: var(--mp-control-height, 42px);
  padding-top: 0;
  padding-bottom: 0;
  line-height: calc(var(--mp-control-height, 42px) - 2px);
}

.member-portal select[multiple],
.member-portal select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 12px;
}

.member-portal .mp-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}
.member-portal .mp-check input[type=checkbox],
.member-portal .mp-check input[type=radio] {
  flex: 0 0 auto;
  margin: 0;
}
.member-portal .mp-check span {
  min-width: 0;
}

.password-rule {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--mp-color-muted);
}

.password-rule__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.password-rule__item i {
  width: 14px;
  text-align: center;
}

.password-rule__ok, .password-rule__error {
  display: none;
}

.password-rule__item.is-ok {
  color: #15803D;
}

.password-rule__item.is-ok .password-rule__ok {
  display: inline-block;
}

.password-rule__item.is-ok .password-rule__open {
  display: none;
}

.password-rule__item.is-error {
  color: var(--mp-color-brand);
}

.password-rule__item.is-error .password-rule__error {
  display: inline-block;
}

.password-rule__item.is-error .password-rule__open {
  display: none;
}

.member-portal .mp-form-foot {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.member-portal .mp-form-foot__back {
  flex: 0 1 auto;
  min-width: 0;
}

.member-portal .mp-form-foot__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.member-portal .mp-form-foot .btn-mp {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
}

.member-portal .mp-form-foot__actions .btn-mp {
  flex: 0 0 auto;
}

.member-portal .mp-form-foot .btn-mp > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 576px) {
  .member-portal .mp-form-foot .btn-mp {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 14px;
  }
}
/* Knopfleiste unter dem Card-Body.

   Sie stand bis zum 21.08.2026 in 16 von 18 Masken innerhalb der Karte und in
   zweien darunter — die Ausnahme war das, was Georg ueberall wollte. Unter der
   Karte gelesen ist die Leiste das, was sie ist: der Abschluss des Formulars,
   nicht ein weiteres Feld darin.

   Rechtsbuendig wie bisher, und umbrechend: In anderen Sprachen sind die
   Beschriftungen laenger, und vier Knoepfe nebeneinander passen dann nicht
   mehr in eine Zeile. */
.member-portal .mp-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  /* Und Luft nach unten: Folgt eine weitere Karte, sass der Knopf sonst auf
     deren Kopfleiste auf — gemessen am 21.08.2026 auf der Zielsetzung, Knopf
     endet bei 621, naechster Kartenkopf beginnt bei 622 (Georg). */
  margin-bottom: 1.5rem;
}

/* Platzhalter sind ueberall gleich klein (Georg, 21.08.2026). Sie standen in
   der Groesse ihres Feldes — im grossen Textfeld der Zielsetzung 20px, in der
   Bewertungsliste 14px — und ein Platzhalter, der so gross ist wie die
   Eingabe, liest sich wie ein bereits eingetragener Wert. */
.member-portal ::placeholder {
  font-size: 0.875rem;
  opacity: 1;
}

.member-portal textarea,
.member-portal .form-control[rows] {
  /* Ein mehrzeiliges Feld hat eine Mindest-, keine feste Höhe. */
  height: auto;
}

/* 🔴 Die kleine Groesse muss die allgemeine Bedienelement-Regel ueberbieten
   (Georg, 02.09.2026: "es gibt globale regeln, die fuer select und buttons
   einheitlich groessen definieren" -- eben, nur galten sie fuer Auswahlfelder
   nicht).

   `.member-portal :is(input, select, textarea, ...)` weiter oben traegt drei
   :not()-Klauseln und damit fuenf Klassenpunkte. Diese Regel hatte zwei und
   verlor: Ein `.form-select-sm` blieb bei 14px und 42px, waehrend ein
   `.btn-mp--sm` daneben auf 13px und 34px stand. Gemessen am 03.09.2026 in der
   Facettenleiste der Mitgliederliste -- 14px gegen 12px, und genau das war zu
   sehen.

   Dieselbe :not()-Kette hier gleicht die Spezifitaet aus. Die Werte selbst
   bleiben, wo sie waren: in den Steuervariablen. */
.member-portal :is(.form-control-sm, .form-select-sm):not([type=checkbox]):not([type=radio]):not([type=range]) {
  min-height: var(--mp-control-height-sm, 34px);
  font-size: var(--mp-control-font-sm, 13px);
}

/* ── Bearbeitungsmasken laufen nicht über die ganze Seite ───────────────────

   🔴 Georg, 01.09.2026: "die bearbeiten sollen sich nicht über die gesamte
   seite strecken (ausnahme die login maske)".

   Ein Eingabefeld, das über 1200 px läuft, ist kein Formular mehr, sondern ein
   Streifen: Das Auge findet den Anfang der nächsten Zeile nicht wieder. Die
   Ausnahme ist der Login — der steht ohnehin in einer schmalen Karte und darf
   sie füllen. */
.member-portal .mp-form--narrow {
  max-width: 920px;
}

.member-portal ::placeholder {
  font-size: var(--mp-control-font) !important;
  opacity: 0.65;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
}

.status-badge--active {
  background: var(--mp-status-active);
  color: #0A3D1A;
}

.status-badge--pending,
.status-badge--grace {
  background: var(--mp-status-pending);
  color: #5A3200;
}

.status-badge--expired {
  background: var(--mp-status-expired);
  color: #fff;
}

.status-badge--external {
  background: var(--mp-status-external);
  color: #fff;
}

.status-badge--deceased {
  background: var(--mp-status-deceased);
  color: #fff;
}

.status-badge--passive {
  background: #E4E6EA;
  color: #495057;
}

.role-badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #495057;
  color: #fff;
}

.role-badge--leadership {
  background: var(--mp-color-text);
}

.role-badge--coach {
  background: var(--mp-status-active);
}

.role-badge--treasurer {
  background: var(--mp-color-brand);
}

body.page-member-portal .badge,
.member-portal .badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff !important;
}

body.page-member-portal .badge.bg-success,
body.page-member-portal .badge.text-bg-success,
.member-portal .badge.bg-success,
.member-portal .badge.text-bg-success {
  background-color: var(--mp-status-active) !important;
  color: #0A3D1A !important;
}

body.page-member-portal .badge.bg-warning,
body.page-member-portal .badge.text-bg-warning,
.member-portal .badge.bg-warning,
.member-portal .badge.text-bg-warning {
  background-color: var(--mp-status-pending) !important;
  color: #5A3200 !important;
}

body.page-member-portal .badge.bg-danger,
body.page-member-portal .badge.text-bg-danger,
.member-portal .badge.bg-danger,
.member-portal .badge.text-bg-danger {
  background-color: var(--mp-color-brand) !important;
}

body.page-member-portal .badge.bg-primary,
body.page-member-portal .badge.text-bg-primary,
.member-portal .badge.bg-primary,
.member-portal .badge.text-bg-primary {
  background-color: var(--mp-status-external) !important;
}

body.page-member-portal .badge.bg-secondary,
body.page-member-portal .badge.text-bg-secondary,
.member-portal .badge.bg-secondary,
.member-portal .badge.text-bg-secondary {
  background-color: #5856d6 !important;
}

body.page-member-portal .badge.bg-info,
body.page-member-portal .badge.text-bg-info,
.member-portal .badge.bg-info,
.member-portal .badge.text-bg-info {
  background-color: #5ac8fa !important;
}

body.page-member-portal .badge.bg-light,
body.page-member-portal .badge.text-bg-light,
.member-portal .badge.bg-light,
.member-portal .badge.text-bg-light {
  background-color: var(--mp-color-surface-alt) !important;
  color: var(--mp-color-text) !important;
  border: 1px solid var(--mp-color-border) !important;
}

body.page-member-portal .badge.bg-dark,
body.page-member-portal .badge.text-bg-dark,
.member-portal .badge.bg-dark,
.member-portal .badge.text-bg-dark {
  background-color: var(--mp-color-text) !important;
}

body.page-member-portal .alert.alert-success,
.member-portal .alert.alert-success {
  background: var(--mp-status-active) !important;
  border: 1px solid var(--mp-status-active) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.25) !important;
}

body.page-member-portal .alert.alert-danger,
.member-portal .alert.alert-danger {
  background: var(--mp-color-brand) !important;
  border: 1px solid var(--mp-color-brand) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px var(--mp-color-brand-muted) !important;
}

body.page-member-portal .alert.alert-info,
.member-portal .alert.alert-info {
  background: var(--mp-status-external) !important;
  border: 1px solid var(--mp-status-external) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-member-portal .alert .btn-close,
.member-portal .alert .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.member-portal .members-table thead, .member-portal .admin-table thead, .member-portal .role-matrix thead, .member-portal .responsive-stack thead {
  display: none;
}
.member-portal .members-table tbody tr, .member-portal .admin-table tbody tr, .member-portal .role-matrix tbody tr, .member-portal .responsive-stack tbody tr {
  display: block;
  border: 1px solid var(--mp-color-border-soft);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--mp-color-surface);
}
.member-portal .members-table tbody td, .member-portal .admin-table tbody td, .member-portal .role-matrix tbody td, .member-portal .responsive-stack tbody td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border: none;
}
.member-portal .members-table tbody td[data-label]::before, .member-portal .admin-table tbody td[data-label]::before, .member-portal .role-matrix tbody td[data-label]::before, .member-portal .responsive-stack tbody td[data-label]::before {
  content: attr(data-label);
  font-size: 0.7rem;
  color: var(--mp-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.75rem;
}
.member-portal .members-table tbody td.actions,
.member-portal .admin-table tbody td.actions,
.member-portal .responsive-stack tbody td.actions {
  justify-content: flex-end;
  border-top: 1px solid var(--mp-color-border-soft);
  padding-top: 0.4rem;
  margin-top: 0.25rem;
}
.member-portal .table-responsive {
  overflow-x: visible;
}

@media (min-width: 768px) {
  .member-portal .members-table thead, .member-portal .admin-table thead, .member-portal .role-matrix thead, .member-portal .responsive-stack thead {
    display: table-header-group;
  }
  .member-portal .members-table tbody tr, .member-portal .admin-table tbody tr, .member-portal .role-matrix tbody tr, .member-portal .responsive-stack tbody tr {
    display: table-row;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-color: var(--mp-color-border-soft);
    transition: background-color 0.1s ease;
  }
  .member-portal .members-table tbody td, .member-portal .admin-table tbody td, .member-portal .role-matrix tbody td, .member-portal .responsive-stack tbody td {
    display: table-cell;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--mp-color-border-soft);
  }
  .member-portal .members-table tbody td[data-label]::before, .member-portal .admin-table tbody td[data-label]::before, .member-portal .role-matrix tbody td[data-label]::before, .member-portal .responsive-stack tbody td[data-label]::before {
    content: none;
  }
  .member-portal .admin-table th,
  .member-portal .members-table thead th {
    background: var(--mp-color-surface-alt);
    border-bottom: 2px solid var(--mp-color-border);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mp-color-muted);
    padding: 0.6rem 0.75rem;
  }
  .member-portal .members-table tbody tr:hover,
  .member-portal .admin-table tbody tr:hover {
    background: var(--mp-color-brand-light);
  }
  .member-portal .members-table tbody td.actions,
  .member-portal .admin-table tbody td.actions,
  .member-portal .responsive-stack tbody td.actions {
    justify-content: initial;
    border-top: 0;
    padding-top: 0.6rem;
    margin-top: 0;
  }
}
.member-portal .accordion-item {
  border: 1px solid var(--mp-color-border-soft);
  margin-bottom: 4px;
  border-radius: var(--mp-radius) !important;
  overflow: hidden;
  background: var(--mp-color-surface);
}

.member-portal .accordion-button {
  font-family: inherit;
  font-size: 15px;
  padding: 14px 20px;
  background: transparent;
}

.member-portal .accordion-button:not(.collapsed) {
  background: var(--mp-color-brand-light);
  color: var(--mp-color-text);
  box-shadow: none;
}

.member-portal .accordion-button:focus {
  box-shadow: none;
}

.mp-accordion {
  margin-inline: calc(-1 * var(--mp-space-4));
}

.mp-accordion__item + .mp-accordion__item {
  border-top: 1px solid var(--mp-color-border);
}

.mp-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--mp-space-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.mp-accordion__head::-webkit-details-marker {
  display: none;
}
.mp-accordion__head:hover {
  background: var(--mp-color-surface-muted);
}
.mp-accordion__head:focus-visible {
  outline: 2px solid var(--mp-color-accent);
  outline-offset: -2px;
}

.mp-accordion__chevron {
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.mp-accordion__item[open] .mp-accordion__chevron {
  transform: rotate(180deg);
}

.mp-accordion__body {
  padding: 0 var(--mp-space-4) var(--mp-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .mp-accordion__chevron {
    transition: none;
  }
}
.mp-acc__item--flat > .mp-acc__head {
  cursor: default;
  pointer-events: none;
}
.mp-acc__item--flat > .mp-acc__head::-webkit-details-marker {
  display: none;
}
.mp-acc__item--flat > .mp-acc__head::marker {
  content: "";
}
.mp-acc__item--flat .mp-acc__chev {
  display: none;
}

.mp-acc__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mp-color-border-soft);
}

.mp-acc__actions .btn-mp {
  flex: 0 0 auto;
}

.filter-card {
  position: relative;
  z-index: 1050;
  overflow: visible;
}

.filter-card .card-body {
  overflow: visible;
  padding: 0.65rem 0.75rem;
}

.facet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  position: relative;
  z-index: 1051;
}

.member-portal .facet-bar .facet-select {
  width: auto;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 10px 32px 10px 16px;
  border-radius: var(--mp-radius-lg);
  background-color: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  color: var(--mp-color-text);
}

.member-portal .facet-bar .btn,
.member-portal .facet-bar .dropdown-toggle {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  color: var(--mp-color-text);
}

.member-portal .facet-bar .btn:hover {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.member-portal .facet-bar .btn .badge {
  background: var(--mp-color-brand) !important;
}

.member-portal .facet-bar .btn:hover .badge {
  background: #fff !important;
  color: var(--mp-color-brand) !important;
}

.member-portal .facet-bar a.btn-link {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-brand);
  color: #fff !important;
  text-decoration: none;
  border: 1px solid var(--mp-color-brand);
}

.member-portal .facet-bar a.btn-link:hover {
  background: var(--mp-color-brand-hover);
  border-color: var(--mp-color-brand-hover);
  color: #fff !important;
}

.member-portal .facet-bar a.btn-link i {
  color: #fff !important;
}

.facet-menu {
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1060 !important;
  padding: 6px !important;
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  border-radius: 0 0 var(--mp-radius) var(--mp-radius);
  box-shadow: var(--mp-shadow-dropdown);
}

.facet-menu label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 20px;
  margin: 0;
  color: var(--mp-color-text-2);
  transition: all 0.15s ease;
  cursor: pointer;
}

.facet-menu label:hover,
.facet-menu label:focus-within {
  background: var(--mp-color-brand);
  color: #fff;
}

.facet-menu label:hover .count,
.facet-menu label:focus-within .count {
  color: rgba(255, 255, 255, 0.85);
}

.facet-menu .count {
  margin-left: auto;
  color: var(--mp-color-muted);
  font-size: 0.8rem;
}

/* Suche ohne Seitenwechsel.
 *
 * 🔴 Das Feld über die volle Breite (Georg, 27.08.2026: "die inputs sollen
 * sich immer über die gesamte breite strecken"). Ein Suchfeld, das ein Drittel
 * der Zeile einnimmt, sieht aus wie ein Formularfeld unter vielen — es ist
 * aber das einzige auf der Seite, das man benutzt.
 */
.mp-search {
  display: flex;
  /* 🔴 Umbrechen statt quetschen (Georg, 03.09.2026: "mobil soll auf der seite
     'zahlung verbuchen' die selectbox unter das input feld rutschen").

     Ohne Umbruch teilten sich Suchfeld und Auswahlfeld die Zeile auch auf einem
     Telefon — beide zu schmal, um etwas zu lesen. Die Breite des Auswahlfeldes
     stand als Inline-Stil im Template und schlug jede Regel; sie steht jetzt
     hier. */
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 1rem;
}

.mp-search .mp-search__filter {
  flex: 0 0 16rem;
}

@media (max-width: 575.98px) {
  .mp-search .mp-search__filter {
    flex: 1 1 100%;
    max-width: none;
  }
}
.mp-search input[type=search],
.mp-search input[type=text] {
  flex: 1 1 100%;
  min-width: 0;
}

/* Während gesucht wird: leises Ausgrauen, kein Springen. Ein Ladebalken wäre
   für 200 Millisekunden mehr Unruhe als Information. */
.mp-search.is-searching input {
  opacity: 0.7;
}

.member-portal .facet-bar .facet-select {
  padding: 0 32px 0 16px;
  line-height: 1.2;
  max-width: 12rem;
  text-overflow: ellipsis;
}

.member-portal .facet-bar .btn, .member-portal .facet-bar .dropdown-toggle {
  padding: 0 16px;
}

.member-portal .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-text);
  border: none;
  border-radius: var(--mp-radius);
  padding: 0.25rem 0.25rem 0.25rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.12s ease;
}

.member-portal .chip:hover {
  background: #e9ecef;
}

.member-portal .chip-remove {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--mp-color-muted);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  transition: all 0.12s ease;
}

.member-portal .chip-remove:hover {
  background: var(--mp-color-brand);
  color: #fff;
}

.member-portal .chip-remove:focus-visible {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: 1px;
}

.results-wrap {
  position: relative;
  z-index: 1;
}

.results-wrap.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  z-index: 5;
  border-radius: var(--mp-radius);
}

.results-wrap.is-loading::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--mp-color-brand);
  border-radius: 50%;
  animation: mp-spin 0.8s linear infinite;
  transform: translateX(-50%);
  z-index: 6;
}

@keyframes mp-spin {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .results-wrap.is-loading::before {
    animation: none;
  }
}
.mp-list-error {
  display: none;
}

.results-wrap.is-failed .mp-list-error {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--mp-radius);
  background: var(--mp-color-danger-light, #fdecea);
  color: var(--mp-color-danger, #b3261e);
  font-size: 0.875rem;
}

.member-widget .member-login-dropdown,
.member-widget .member-dropdown {
  min-width: 240px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.member-widget .dropdown-header {
  padding: 0.5rem 1rem;
}

.member-widget .dropdown-item {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

.member-widget .dropdown-item:hover,
.member-widget .dropdown-item:hover span,
.member-widget .dropdown-item:hover i {
  background: var(--mp-color-brand) !important;
  color: #fff !important;
}

.member-widget .dropdown-item i {
  width: 20px;
  text-align: center;
}

.dev-hero {
  background: linear-gradient(135deg, var(--mp-color-surface-alt), var(--mp-color-surface));
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-lg);
  padding: 1.25rem 1.5rem;
}

.dev-hero h2 {
  margin: 0;
  font-weight: 600;
  color: var(--mp-color-text);
}

.dev-hero__avatar img,
.dev-hero__avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.dev-hero__avatar-placeholder {
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.dev-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dev-pills__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dev-pills__label {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--mp-color-brand);
  color: var(--mp-color-brand);
  border-radius: var(--mp-radius);
  background: var(--mp-color-surface);
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.dev-pills__label:hover {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.dev-pills__input:checked + .dev-pills__label {
  border-color: var(--mp-color-brand);
  background: var(--mp-color-brand);
  color: #fff;
}

.dev-pills__input:focus-visible + .dev-pills__label {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: 2px;
}

.dev-ai {
  border: 2px dashed var(--mp-color-accent);
  background: linear-gradient(135deg, var(--mp-color-accent-light), var(--mp-color-surface));
}

.dev-ai__header {
  background: var(--mp-color-accent-light);
  border-bottom: 1px dashed var(--mp-color-accent);
  color: var(--mp-color-accent-text);
}

.dev-ai__empty {
  text-align: center;
  color: var(--mp-color-muted);
  padding: 1rem 0.5rem;
}

.dev-ai__text {
  font-size: 1.1rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-color-border-soft);
  color: var(--mp-color-text);
}

.dev-goal {
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dev-goal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.dev-goal__text {
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--mp-color-text);
}

.dev-goal__cat {
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  font-weight: 500;
  border-radius: var(--mp-radius);
}

.dev-goal__cat--sport {
  background: #d1f4dd;
  color: #0a6f33;
}

.dev-goal__cat--social {
  background: #ffe9d6;
  color: #8a4500;
}

.dev-goal__cat--daily {
  background: #e0e7ff;
  color: #1e3a8a;
}

.dev-goal .d-flex.justify-content-between {
  flex-direction: column;
}

.dev-goal .btn-group-vertical,
.dev-goal .d-flex.flex-column.gap-2 {
  flex-direction: row;
  margin-top: 0.75rem;
  width: 100%;
}

.dev-goal .d-flex.flex-column.gap-2 .btn,
.dev-goal .btn-group-vertical .btn {
  flex: 1;
}

@media (min-width: 576px) {
  .dev-goal .d-flex.justify-content-between {
    flex-direction: row;
  }
  .dev-goal .btn-group-vertical,
  .dev-goal .d-flex.flex-column.gap-2 {
    flex-direction: column;
    margin-top: 0;
    width: auto;
  }
  .dev-goal .d-flex.flex-column.gap-2 .btn,
  .dev-goal .btn-group-vertical .btn {
    flex: 0 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-goal {
    transition: none;
  }
  .dev-goal:hover {
    transform: none;
  }
}
@media (min-width: 992px) {
  .member-portal .dev-goal-input,
  .member-portal .dev-goal-input > .mp-card,
  .member-portal .dev-goal-input .mp-card__body {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .member-portal .dev-goal-input > .mp-card {
    height: 100%;
    margin-bottom: 0;
  }
}
@media (min-width: 992px) {
  .member-portal .dev-goal-input .mp-card__body {
    flex: 1 1 auto;
  }
}
@media (min-width: 992px) {
  .member-portal .dev-goal-input textarea {
    flex: 1 1 auto;
    min-height: 8rem;
  }
}
/* Der Hinweis unter der KI-Karte: was sie tut und was nicht. */
.member-portal .dev-ai__note {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--mp-color-muted);
}

/* Die KI-Karte traegt jetzt die Portal-Karte als Grundform. Ihr Kopf steht
   dadurch in derselben Zeile wie bei jeder anderen Karte; der gestrichelte
   Rahmen bleibt, weil er sagt, dass hier ein Vorschlag steht und keine
   Eingabe. */
.member-portal .dev-ai {
  display: flex;
  flex-direction: column;
}

.member-portal .dev-ai__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}

/* Die beiden Karten der Zielsetzung tragen den Vereinsrot im Kopf (Georg,
   21.08.2026). Beobachtung und Vorschlag stehen nebeneinander und gehoeren
   zusammen; der rote Kopf sagt das, bevor man den ersten Satz liest. */
.member-portal .dev-goal-input > .mp-card > .mp-card__header,
.member-portal .dev-ai > .dev-ai__header {
  background: var(--mp-color-brand);
  border-bottom-color: var(--mp-color-brand);
  color: #fff;
}

.dev-pills__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 9rem;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid var(--mp-color-brand);
  transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
}

.member-portal .dev-ai__note {
  margin-bottom: 0;
}

.mp-header--gold {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-color-accent-text);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.mp-header--gold i {
  color: var(--mp-color-accent);
  font-size: 15px;
}

.mp-card__header {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-color-accent-text);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  background: var(--mp-color-accent-light);
  padding: 11px var(--mp-card-pad, var(--mp-space-4));
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-card__header i {
  color: var(--mp-color-accent);
  font-size: 15px;
  margin-right: 0;
}
.mp-card__header .mp-card__title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

.mp-header--gold--screen {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.member-portal .mp-header--gold i {
  margin-right: 0;
}

.mp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 12px;
}

.mp-section-header__title {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.mp-section-header__action {
  font-family: var(--mp-font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mp-color-accent-text);
  text-decoration: none;
  cursor: pointer;
}

.mp-area-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mp-color-text);
}

.mp-area-header::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--mp-color-brand);
  flex-shrink: 0;
}

.mp-header--gold-dark {
  background: var(--mp-color-text);
  color: #D4A020;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px var(--mp-space-4);
  border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
}

.mp-header--gold-dark i {
  color: #D4A020;
  font-size: 15px;
}

/* 🔴 Mehr Luft unter der Seitenueberschrift (Georg, 31.08.2026: "zwischen der
   h1 dem folgenden element kann 20px mehr platz sein" -- und danach: "der
   abstand der h1 passt noch nicht").

   Beim ersten Versuch stand die Regel im Theme. Sie hat nie gegriffen: Die
   Grundregel darueber steht in DIESER Datei, sie schreibt `margin` als
   Kurzform, und member-portal.css wird nach main.css geladen. Gleiche
   Spezifitaet, spaetere Datei -- die Kurzform hat das margin-bottom aus dem
   Theme jedes Mal wieder auf 12px gesetzt.

   Deshalb steht sie jetzt hier, direkt hinter der Regel, die sie ueberschreibt.
   Eine h1 traegt die Seite und braucht mehr Abstand zu dem, was sie ankuendigt,
   als eine Zwischenueberschrift. Nur die h1-Fassung: Die h2 bleiben im Fluss. */
.mp-section-header--h1 {
  margin-bottom: 32px;
}

.btn-mp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--mp-radius);
  padding: 0 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
  background: var(--mp-color-surface);
  color: var(--mp-color-brand);
  border: 1px solid var(--mp-color-brand);
}

.btn-mp {
  flex-wrap: nowrap;
}

.btn-mp > span {
  white-space: nowrap;
}

.btn-mp:hover {
  background: var(--mp-color-brand);
  color: #fff;
  border-color: var(--mp-color-brand);
}

.btn-mp:active {
  background: var(--mp-color-brand-active);
  color: #fff;
  border-color: var(--mp-color-brand-active);
}

.btn-mp[disabled],
.btn-mp[aria-disabled=true] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-mp[disabled]:hover,
.btn-mp[aria-disabled=true]:hover {
  background: var(--mp-color-surface);
  color: var(--mp-color-brand);
}

.btn-mp--sm {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 12px;
}

.btn-mp--lg {
  min-height: 52px;
  padding: 14px 24px;
  font-size: 15px;
}

.btn-mp--bronze {
  background: var(--mp-color-surface);
  color: var(--mp-color-accent-text);
  border-color: var(--mp-color-accent-text);
}

.btn-mp--bronze:hover {
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
  border-color: var(--mp-color-accent-text);
}

.btn-mp--bronze i {
  color: var(--mp-color-accent-text);
}

.btn-mp--bronze.is-condensed,
.btn-mp--bronze.is-condensed:hover {
  background: var(--mp-color-accent-light);
  border-color: var(--mp-color-accent-light);
}

.btn-mp--bronze.is-condensed i {
  color: var(--mp-color-accent-text);
}

.btn-mp--bronze.is-condensed:hover {
  border-color: var(--mp-color-accent);
}

.btn-mp--dark-grey {
  background: var(--mp-color-surface);
  color: var(--mp-color-text);
  border-color: var(--mp-color-border-strong, rgba(0, 0, 0, 0.28));
}

.btn-mp--dark-grey:hover {
  background: var(--mp-color-surface-alt);
  color: var(--mp-color-text);
  border-color: var(--mp-color-text-2);
}

.btn-mp--dark-grey.is-condensed {
  background: var(--mp-color-dark-grey);
  color: #fff;
  border-color: var(--mp-color-dark-grey);
}

.btn-mp--dark-grey.is-condensed:hover {
  background: var(--mp-color-dark-grey-hover);
  color: #fff;
  border-color: var(--mp-color-dark-grey-hover);
}

.btn-mp--success {
  background: #15803D;
  color: #fff;
  border-color: #15803D;
}

.btn-mp--success:hover {
  background: #126B33;
  color: #fff;
  border-color: #126B33;
}

.btn-mp--danger {
  background: var(--mp-color-brand);
  color: #fff;
  border-color: var(--mp-color-brand);
}

.btn-mp--danger:hover {
  background: var(--mp-color-brand-hover);
  color: #fff;
  border-color: var(--mp-color-brand-hover);
}

.btn-mp--success.is-active,
.btn-mp--danger.is-active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.btn-mp--icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

.btn-mp.is-condensed {
  width: 44px;
  min-width: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

.btn-mp.is-condensed > i {
  margin: 0 !important;
}

.btn-mp.is-condensed > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn-mp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-color-brand-muted);
}

.btn-mp:disabled, .btn-mp.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .btn-mp {
    transition: none;
  }
}
.respond-form .btn-mp--success,
.respond-form .btn-mp--danger {
  font-weight: 600;
}

.respond-form .btn-mp--success {
  color: #15803D;
  border-color: transparent;
  background: color-mix(in srgb, var(--mp-status-active) 12%, transparent);
}

.respond-form .btn-mp--danger {
  color: var(--mp-color-brand);
  border-color: transparent;
  background: color-mix(in srgb, var(--mp-color-brand) 12%, transparent);
}

.respond-form .btn-mp--success:hover {
  background: color-mix(in srgb, var(--mp-status-active) 22%, transparent);
  color: #126B33;
  border-color: transparent;
}

.respond-form .btn-mp--danger:hover {
  background: color-mix(in srgb, var(--mp-color-brand) 22%, transparent);
  color: var(--mp-color-brand-hover);
  border-color: transparent;
}

/* Die getroffene Wahl: volle Flaeche, weisse Schrift. Der Ring nach innen
   faellt hier weg — er war der Ersatz dafuer, dass beide gefuellt waren. */
.respond-form .btn-mp--success.is-active,
.respond-form .btn-mp--success.is-active:hover {
  background: var(--mp-status-active);
  border-color: var(--mp-status-active);
  color: #fff;
  box-shadow: none;
}

.respond-form .btn-mp--danger.is-active,
.respond-form .btn-mp--danger.is-active:hover {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
  box-shadow: none;
}

/* Der Wechsel soll sichtbar sein, ohne zu zappeln. */
.respond-form .btn-mp {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .respond-form .btn-mp {
    transition: none;
  }
}
/* 🔴 Werkzeuge sind schwarz, Entscheidungen sind farbig (Georg, 01.09.2026:
   "die buttons fuer trainingsplaner und detail in den terminen sollen als
   default die schwarze farbgebung erhalten").

   In der Terminkarte stehen zwei Arten von Knoepfen nebeneinander: Zusagen und
   Absagen — das sind Entscheidungen, gruen und rot — und Trainingsplaner und
   Details, die nur woandershin fuehren. Solange auch die rot waren, sah die
   Karte aus, als verlange sie vier Entscheidungen. */
.btn-mp--neutral {
  background: #fff;
  color: #1C1C1E;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.btn-mp--neutral:hover,
.btn-mp--neutral:focus-visible {
  background: #F5F5F5;
  color: #1C1C1E;
  border-color: rgba(0, 0, 0, 0.28);
}

.member-portal :is(input, select, textarea, button, .btn, .btn-mp, .form-control, .form-select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) {
  /* 🔴 !important ist hier kein Notnagel, sondern die Ansage: Zweiunddreissig
     Regeln in dieser Datei drehten an Hoehe oder Schriftgroesse von
     Bedienelementen, und jede davon gewann irgendwo. Wer eine Ausnahme
     braucht, aendert die Steuervariablen -- nicht eine Regel daneben. */
  min-height: var(--mp-control-height) !important;
  font-size: var(--mp-control-font) !important;
  line-height: 1.4;
}

.btn-mp {
  min-height: var(--mp-control-height, 42px);
  font-size: var(--mp-control-font, 14px);
}

.btn-mp--sm {
  min-height: var(--mp-control-height-sm, 34px);
  font-size: var(--mp-control-font-sm, 13px);
}

.mp-acc__actions .btn-mp,
.member-portal .mp-form-foot__actions .btn-mp {
  order: 3;
}
.mp-acc__actions .btn-mp--bronze,
.member-portal .mp-form-foot__actions .btn-mp--bronze {
  order: 1;
}

.mp-acc__actions:has(.btn-mp--bronze):has(.btn-mp:not(.btn-mp--bronze))::after,
.member-portal .mp-form-foot__actions:has(.btn-mp--bronze):has(.btn-mp:not(.btn-mp--bronze))::after {
  content: "";
  order: 2;
  align-self: center;
  width: 1px;
  height: 24px;
  background: var(--mp-color-border);
  margin-inline: 4px;
}

.mp-card {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow);
  margin-bottom: var(--mp-space-4);
  overflow: hidden;
}

.mp-card__body {
  --mp-card-pad: var(--mp-space-4);
}
@media (min-width: 992px) {
  .mp-card__body {
    --mp-card-pad: 24px;
  }
}
.mp-card__body {
  padding: var(--mp-space-4);
  padding-inline: var(--mp-card-pad);
}

.mp-card__media {
  display: block;
  margin: calc(-1 * var(--mp-card-pad, var(--mp-space-4))) calc(-1 * var(--mp-card-pad, var(--mp-space-4))) var(--mp-space-3);
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--mp-color-surface-muted);
}

.mp-card__media > a {
  display: block;
  height: 100%;
}

@media (min-width: 768px) {
  .col-md-4 .mp-card__media,
  .col-md-6 .mp-card__media {
    margin-top: calc(-1 * var(--mp-space-4) + 8px);
    margin-inline: calc(-1 * var(--mp-card-pad, var(--mp-space-4)) + 8px);
    margin-bottom: var(--mp-space-3);
  }
}
.mp-card__media img,
.mp-card__media video,
.mp-card__media picture,
.mp-card__media picture img,
.mp-card__media .video-player,
.mp-card__media .video-player__poster,
.mp-card__media .video-player__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.mp-prose,
.news-detail {
  --bleed: calc(-1 * var(--mp-card-pad, var(--mp-space-4)));
}
.mp-prose > .news-detail-header-picture,
.mp-prose > figure,
.mp-prose > img,
.mp-prose > .video-player,
.news-detail > .news-detail-header-picture,
.news-detail > figure,
.news-detail > img,
.news-detail > .video-player {
  margin-inline: var(--bleed);
  display: block;
  width: calc(100% + 2 * var(--mp-card-pad, var(--mp-space-4)));
  max-width: none;
}
.mp-prose > .news-detail-header-picture:first-child,
.news-detail > .news-detail-header-picture:first-child {
  margin-top: var(--bleed);
}
.mp-prose > .news-detail-header-picture img,
.mp-prose > figure img,
.news-detail > .news-detail-header-picture img,
.news-detail > figure img {
  width: 100%;
  height: auto;
  display: block;
}
.mp-prose h2,
.news-detail h2 {
  margin-inline: var(--bleed);
  padding: 10px var(--mp-card-pad, var(--mp-space-4));
  background: var(--mp-color-surface-muted);
  border-top: 1px solid var(--mp-color-border);
  border-bottom: 1px solid var(--mp-color-border);
}
.mp-prose > .news-detail-header-picture,
.mp-prose > .news-detail-header-picture img,
.mp-prose > figure,
.mp-prose > figure img,
.mp-prose > .video-player,
.mp-prose > img,
.news-detail > .news-detail-header-picture,
.news-detail > .news-detail-header-picture img,
.news-detail > figure,
.news-detail > figure img,
.news-detail > .video-player,
.news-detail > img {
  border-radius: 0;
}

@media (max-width: 575.98px) {
  .main-container .frame-type-header:not(.mp-card *),
  .main-container .frame-type-text:not(.mp-card *),
  .main-container .frame-type-textpic:not(.mp-card *),
  .main-container .mp-section-header:not(.mp-card *),
  .main-container .member-portal > p:not(.mp-card *),
  .main-container .member-portal > .mp-perm-legend:not(.mp-card *) {
    padding-inline: var(--mp-space-4);
  }
}
.mp-dialog {
  border: 0;
  border-radius: var(--mp-radius-card, 0.75rem);
  padding: 0;
  width: min(30rem, 100vw - 2rem);
  background: var(--mp-color-surface);
  color: var(--mp-color-text);
}
.mp-dialog::backdrop {
  background: rgba(10, 10, 11, 0.4);
}
.mp-dialog h2 {
  margin: 0 0 0.75rem;
}
.mp-dialog ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.mp-dialog .btn-mp {
  margin-top: 0.25rem;
}

@media (max-width: 575.98px) {
  .mp-dialog {
    width: 100vw;
    max-width: 100vw;
    margin: auto auto 0;
    border-radius: var(--mp-radius-card, 0.75rem) var(--mp-radius-card, 0.75rem) 0 0;
  }
}
.mp-hero {
  display: flex;
  align-items: center;
  gap: var(--mp-space-4);
  background: linear-gradient(135deg, var(--mp-color-surface-alt), var(--mp-color-surface));
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-4) var(--mp-space-5);
  margin-bottom: var(--mp-space-5);
}

.mp-hero__body {
  min-width: 0;
}

.mp-hero__eyebrow {
  font-family: var(--mp-font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mp-color-muted);
}

.mp-hero__name {
  font-family: var(--mp-font-ui);
  font-size: 19px;
  font-weight: 700;
  margin: 2px 0 6px;
}

.mp-list .row-item,
.mp-card .row-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  min-height: 48px;
  border-bottom: 1px solid var(--mp-color-border-soft);
  color: var(--mp-color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mp-transition);
}

.mp-list .row-item:last-child,
.mp-card .row-item:last-child {
  border-bottom: 0;
}

.mp-list .row-item:hover,
.mp-card .row-item:hover {
  background: var(--mp-color-brand-light);
}

.row-item__icon {
  width: 18px;
  text-align: center;
  color: var(--mp-color-muted);
  flex-shrink: 0;
}

.row-item__label {
  flex: 1;
  min-width: 0;
}

.row-item .chev {
  margin-left: auto;
  color: var(--mp-color-muted);
  flex-shrink: 0;
}

.mp-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
  font-size: 14px;
}

.mp-kv:last-child {
  border-bottom: 0;
}

.mp-kv__key {
  color: var(--mp-color-muted);
}

.mp-kv__val {
  text-align: right;
}

/* Der Elternteil: Name oben, Erreichbarkeit darunter.
 *
 * 🔴 Georg, 28.08.2026: "telefonnumer und email der elter in eine eigene zeie
 * unter dem namen des eltern teil, damit es diese buttons nicht aus dem
 * viewport schiebt."
 *
 * Vorher lag beides in einer Zeile mit `justify-content: flex-end`. Eine
 * Adresse wie "hanna.kluessendorf@gmail.com" steht als Beschriftung IM Knopf —
 * neben dem Namen bleibt auf einem Telefon nichts uebrig, und der Knopf wandert
 * nach rechts aus dem Bild.
 *
 * Untereinander hat beides die volle Breite. Die Knoepfe stehen dabei links und
 * nicht rechts: Sie beginnen dort, wo auch der Name beginnt. */
.tc-parent {
  padding-left: 16px;
  padding-block: 4px;
  color: var(--mp-color-muted);
}

.tc-parent i {
  margin-right: 4px;
}

.tc-parent__contact {
  justify-content: flex-start;
  margin-top: 4px;
}

/* ── Der Leibchenpunkt ───────────────────────────────────────────────────────

   🔴 Gestreifte Leibchen tragen den Ton ihres einfarbigen Gegenstücks (Georg,
   01.09.2026): Rot und „rot gestreift" haben denselben Farbwert. Ohne die
   Streifen wären es zwei gleiche Punkte, und der Trainer sucht auf dem Platz
   nach einem Unterschied, den nur der Name nennt.

   Die Streifen laufen senkrecht, weil die Leibchen es auch tun (Georg,
   02.09.2026: „die leibchen sind vertikal gestreift, also auch die farbpunkte
   so"). Das ist kein Schmuck: Wer den Punkt sieht, soll das Leibchen
   wiedererkennen, das im Schrank liegt.

   Die Farbe kommt als --mp-bib-colour von der Vorlage, weil sie aus der
   Datenbank stammt und nicht aus dem Stilblatt. */
.mp-bib {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--mp-bib-colour, var(--mp-color-muted));
  /* Weiß braucht einen Rand, sonst verschwindet der Punkt. */
  border: 1px solid rgba(0, 0, 0, 0.2);
  vertical-align: middle;
}

.mp-bib--striped {
  background-image: repeating-linear-gradient(90deg, var(--mp-bib-colour, var(--mp-color-muted)) 0, var(--mp-bib-colour, var(--mp-color-muted)) 3px, #fff 3px, #fff 5px);
}

.mp-hitlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  overflow: hidden;
}

.mp-hitlist li + li {
  border-top: 1px solid var(--mp-color-border-soft);
}

.mp-hitlist__item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: var(--mp-color-surface);
  text-align: left;
  cursor: pointer;
}

.mp-hitlist__item:hover {
  background: var(--mp-color-accent-light);
}

.mp-hitlist__item:focus-visible {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: -2px;
}

.mp-hitlist__name {
  display: block;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  color: var(--mp-color-text);
}

.mp-hitlist__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--mp-color-text-2);
}

.mp-hitlist__meta > span {
  white-space: nowrap;
}

.mp-hitlist__meta i {
  color: var(--mp-color-muted);
  width: 13px;
  text-align: center;
}

.mp-hitlist__warn {
  color: var(--mp-color-brand);
}

.mp-hitlist__warn i {
  color: var(--mp-color-brand);
}

.mp-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 14px;
}

.mp-filter-bar::-webkit-scrollbar {
  display: none;
}

.mp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 38px;
  border: 1.5px solid var(--mp-color-border);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-text-2);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
}

.mp-pill--active {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.mp-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-color-brand-muted);
}

.mp-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mp-segmented__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mp-segmented__label {
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--mp-color-border);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-text-2);
  transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
}

.mp-segmented__label:hover {
  border-color: var(--mp-color-brand);
}

.mp-segmented__input:checked + .mp-segmented__label {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.mp-segmented__input:focus-visible + .mp-segmented__label {
  outline: none;
  box-shadow: 0 0 0 3px var(--mp-color-brand-muted);
}

.mp-mt {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-4);
}

.mp-mt__clock {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--mp-color-text);
}

.mp-mt__meta {
  text-align: center;
  font-size: 13px;
  color: var(--mp-color-muted);
  margin-top: 4px;
}

.mp-mt__clockrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--mp-space-4);
}
.mp-mt__clockrow .btn-mp {
  flex: 1 1 0;
  min-height: 52px;
}

.mp-mt__caption {
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mp-color-accent-text);
  margin: 0 0 8px;
}

.mp-mt__pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--mp-space-4);
}

.mp-mt__player {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  text-align: left;
  justify-content: start;
}
.mp-mt__player.is-picked {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.mp-mt__player:not(:has(.mp-mt__no)) {
  grid-template-columns: 1fr auto;
}

.mp-mt__no {
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mp-mt__name {
  font-weight: 600;
}

.mp-mt__line {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.mp-mt__line > .mp-mt__player {
  flex: 1 1 auto;
}

.mp-mt__card {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  min-height: 52px;
  padding: 0;
  border-radius: 4px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mp-mt__card--yellow {
  background: #F2C200;
  border-color: #C9A200;
  color: #4A3B00;
}

.mp-mt__card--yellow:hover {
  background: #D9AE00;
  border-color: #A88800;
  color: #4A3B00;
}

.mp-mt__card--yellow.is-shown {
  box-shadow: inset 0 0 0 2px #B31212;
}

.mp-mt__card--red {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.mp-mt__card--red:hover {
  background: var(--mp-color-brand-active);
  border-color: var(--mp-color-brand-active);
  color: #fff;
}

.mp-mt__min {
  font-size: 12px;
  color: var(--mp-color-muted);
  font-variant-numeric: tabular-nums;
}

.mp-mt__player.is-picked .mp-mt__no,
.mp-mt__player.is-picked .mp-mt__min {
  color: inherit;
}

.mp-mt__go {
  width: 100%;
  min-height: 64px;
  font-size: 17px;
}

.mp-mt__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--mp-color-muted);
  min-height: 1.2em;
}

.mp-mt__undo {
  position: sticky;
  bottom: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mp-color-text);
  color: #fff;
  border-radius: var(--mp-radius-lg);
  padding: 10px 12px;
  box-shadow: var(--mp-shadow);
}
.mp-mt__undo .btn-mp {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.mp-mt__undo .btn-mp:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.mp-mt__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
  font-variant-numeric: tabular-nums;
}
.mp-mt__row.is-on {
  font-weight: 700;
}

.mp-mt__row:last-child {
  border-bottom: 0;
}

.mp-mt__offline {
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
  border-radius: var(--mp-radius);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0;
}

.mp-mt__clockrow > .btn-mp {
  flex: 1 1 auto;
  min-height: 52px;
}

.mp-mt__over {
  margin: 0;
  padding: 8px 0;
  text-align: center;
  color: var(--mp-color-text-muted);
}

.mp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-avatar--lg {
  width: 54px;
  height: 54px;
  font-size: 19px;
}

.mp-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mp-font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-text-2);
}

.tag--home {
  background: var(--mp-status-active);
  color: #0A3D1A;
}

.tag--away {
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
}

.tag--result {
  background: var(--mp-color-text);
  color: #fff;
}

.tag--match {
  background: var(--mp-color-brand);
  color: #fff;
}

.tag--training {
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
}

.tag--tournament {
  background: #ECE6F7;
  color: #5a3ea8;
}

.tag--ok {
  background: var(--mp-status-active);
  color: #0A3D1A;
}

.tag--cancelled {
  background: #FDE8E8;
  color: var(--mp-color-brand);
}

.mp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mp-color-muted);
}

.mp-empty__icon {
  font-size: 28px;
  color: var(--mp-color-muted);
  margin-bottom: 10px;
}

.mp-empty__msg {
  font-family: var(--mp-font-ui);
  font-size: 14px;
  color: var(--mp-color-muted);
  margin: 0 0 14px;
}

.tc-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.mp-kv.tc-sub {
  padding-left: 16px;
  color: var(--mp-color-muted);
}
.mp-kv.tc-sub i {
  margin-right: 4px;
}

.mp-stat {
  text-align: center;
  padding: 6px 0;
}

.stat-num {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 40px;
  color: var(--mp-color-brand);
  line-height: 1;
}

.stat-num--ok {
  color: var(--mp-status-active);
}

.stat-num--pending {
  color: var(--mp-status-pending);
}

.mp-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .mp-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

a.mp-card,
.mp-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--mp-transition), box-shadow var(--mp-transition);
}

@media (hover: hover) {
  a.mp-card--link:hover {
    transform: translateY(-2px);
    box-shadow: var(--mp-shadow-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mp-card--link {
    transition: none;
  }
  a.mp-card--link:hover {
    transform: none;
  }
}
.tile {
  display: block;
  text-align: center;
  padding: 10px 6px;
  cursor: pointer;
}

.tile i {
  font-size: 24px;
  color: var(--mp-color-brand);
}

.tile .t {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 15px;
  margin-top: 8px;
  color: var(--mp-color-text);
}

.tile .d {
  font-size: 12px;
  color: var(--mp-color-muted);
  margin-top: 2px;
}

.progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--mp-color-muted);
}

.progress-mini__bar {
  position: relative;
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.progress-mini__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--mp-status-active);
}

.progress-mini--partial .progress-mini__fill {
  background: var(--mp-status-pending);
}

.event {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}

.event > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.event > .time {
  flex: 0 1 auto;
  min-width: 0;
}

.event:last-child {
  border-bottom: 0;
}

.event .ttl {
  font-weight: 600;
  margin: 5px 0 2px;
}

.event .meta {
  font-size: 12px;
  color: var(--mp-color-muted);
}

.event .time {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.event__result {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

.event__result .form-control {
  max-width: 130px;
}

.event--cancelled {
  opacity: 0.65;
}

.event--card {
  padding: 0;
  border-bottom: 0;
}

@media (max-width: 575.98px) {
  .event {
    flex-wrap: wrap;
  }
  .event > div:first-child {
    flex: 1 1 100%;
  }
  .event > .time {
    flex: 1 1 100%;
    text-align: left;
  }
}
.event--cancelled .ttl {
  text-decoration: line-through;
}

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.weekday-grid label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border: 1.5px solid var(--mp-color-border);
  border-radius: var(--mp-radius-sm, 8px);
  cursor: pointer;
  user-select: none;
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-color-text-2);
  transition: background var(--mp-transition), color var(--mp-transition), border-color var(--mp-transition);
}

.weekday-grid input {
  margin: 0;
}

.weekday-grid label:has(input:checked) {
  background: var(--mp-color-brand);
  color: #fff;
  border-color: var(--mp-color-brand);
}

.check-list {
  display: flex;
  flex-direction: column;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
  cursor: pointer;
}

.check-item:last-child {
  border-bottom: 0;
}

.check-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--mp-color-brand);
  flex-shrink: 0;
}

.check-item small {
  color: var(--mp-color-muted);
  margin-left: 4px;
}

.mp-month-label {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mp-color-text);
  margin: 0;
}

.mp-steps {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.mp-steps li {
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
.mp-steps li:last-child {
  margin-bottom: 0;
}

.mp-tracking {
  text-align: center;
  border: 2px dashed var(--mp-color-brand);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  background: var(--mp-color-brand-muted);
}

.mp-tracking__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mp-color-text-2);
  margin-bottom: 0.35rem;
}

.mp-tracking__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(2.1rem, 13vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--mp-color-brand);
}

.mp-tracking__inline {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mp-color-brand);
  background: transparent;
  padding: 0;
}

.mp-tracking__input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 1.15rem;
}

.event__participant {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px;
}

.event__participant .participant,
.event__respond .participant {
  font-size: 12px;
  color: var(--mp-color-text-2);
}

.event__respond {
  width: 100%;
  margin-top: 6px;
}

.respond-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 5px 0;
}

.respond-row > .participant {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.respond-form {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

@media (max-width: 420px) {
  .respond-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .respond-form {
    width: 100%;
  }
  .respond-form .btn-mp {
    flex: 1 1 0;
    justify-content: center;
  }
}
.event__action {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mp-color-border-soft);
}

.event__participant .participant--self {
  font-weight: 700;
  color: var(--mp-color-text);
}

.mp-kv {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--mp-color-border);
}

.mp-kv:last-child {
  border-bottom: 0;
}

.mp-kv__k {
  flex: 0 0 40%;
  font-size: 12px;
  color: var(--mp-color-text-2);
}

.mp-kv__v {
  flex: 1 1 auto;
}

.mp-pairing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  text-align: center;
}

.mp-pairing__team {
  font-weight: 700;
}

.mp-pairing__vs {
  font-size: 12px;
  color: var(--mp-color-text-2);
  text-transform: uppercase;
}

.event__details {
  margin-top: 6px;
}

.mp-modal__text {
  margin: 10px 0 0;
}

/* 🔴 Bootstraps Ausgleich für den senkrechten Rinnstein fehlt in diesem Build.

   Eine `.row` mit `g-4` bekommt `margin-top: -24px`; ausgeglichen wird das
   normalerweise durch `padding-top: var(--bs-gutter-y)` auf den Spalten. Genau
   diese Regel steht in der ausgelieferten bootstrap.min.css nicht — gemessen
   am 21.08.2026: Rinnstein 1.5rem, Spaltenabstand oben 0.

   Die Folge ist an jeder Karte zu sehen, deren Inhalt mit so einer Reihe
   beginnt: Der Kasten der Reihe steht acht Pixel ÜBER der Unterkante der
   Kopfleiste — der Body ragt in den Header (Georg, 21.08.2026, zur
   Zielsetzung). Sichtbar wird es an der Stelle, wo zwei Hintergrundfarben
   aufeinandertreffen; anderswo verschiebt es den Inhalt nur nach oben.

   Wiederhergestellt wird hier nur, was Bootstrap selbst vorsieht, und nur im
   Mitgliederbereich. Eine `.row` ohne `g-*` traegt `--bs-gutter-y: 0` und
   bleibt damit unveraendert. */
.member-portal .row > * {
  padding-top: var(--bs-gutter-y);
}

/* 🔴 Keine gestreiften Zeilen im Mitgliederbereich (Georg, 21.08.2026).

   Die Streifen kommen nicht von hier. Das Theme faerbt Tabellen in
   redaktionellen Inhalten ein — `.frame table tbody tr:nth-child(even) td`
   bekommt #FBF7EE —, und das Portal-Plugin rendert nun einmal in einem
   `.frame`. Auf dem Telefon, wo jede Zeile zu einer eigenen Karte wird, sieht
   das nicht nach Lesehilfe aus, sondern nach zwei verschiedenen Sorten Zeile.

   Die Streifen bleiben, wo sie gemeint sind: in Nachrichten und Textseiten.
   Hier werden sie zurueckgenommen. Gleiches Gewicht wie die Theme-Regel,
   member-portal.css laedt danach. */
.member-portal table tbody tr:nth-child(even) td {
  background: transparent;
}

/* 🔴 Eine Reihe mit senkrechtem Rinnstein darf nicht in die Kopfleiste ragen.

   Bootstrap zieht `.row` um den Rinnstein nach oben (`margin-top: -24px`) und
   gleicht das auf den Spalten wieder aus. Im Kartenkoerper reicht der Kasten
   der Reihe damit acht Pixel ueber dessen Polsterung hinaus — also in die
   Kopfleiste. Solange nichts darin einen Hintergrund hat, faellt es nicht auf;
   die Reihe auf der Zielsetzung hat einen, und dann steht Weiss im beigen Kopf
   (Georg, 21.08.2026, gemessen: Kopf endet bei 960, Reihe beginnt bei 952).

   Der Ausgleich auf den Spalten bleibt — die Abstaende zwischen umgebrochenen
   Spalten kommen von dort. Nur der Zug nach oben faellt weg. */
.member-portal .mp-card__body .row {
  margin-top: 0;
}

.perm-matrix table {
  font-size: 13px;
}

.perm-matrix th.role-col {
  text-align: left;
  min-width: 200px;
  vertical-align: middle;
  background: var(--mp-color-surface-alt);
}

.perm-matrix th.perm-col {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  height: 160px;
  font-family: var(--mp-font-ui);
  font-weight: 600;
  font-size: 12px;
  background: var(--mp-color-surface-alt);
  vertical-align: bottom;
  padding: 0.25rem 0.35rem;
}

.perm-matrix th.perm-col code {
  writing-mode: horizontal-tb;
  transform: none;
  display: block;
  font-size: 10px;
  color: var(--mp-color-muted);
}

.perm-matrix td {
  text-align: center;
  vertical-align: middle;
  padding: 0.25rem;
}

.perm-matrix td.role-cell {
  text-align: left;
  padding-left: 0.75rem;
  font-weight: 600;
}

.perm-matrix td.role-cell small {
  font-weight: 400;
  color: var(--mp-color-muted);
  display: block;
}

.perm-matrix td.actions {
  width: 110px;
  text-align: right;
  padding-right: 0.5rem;
}

.perm-matrix tr.role-row:hover {
  background: var(--mp-color-surface-alt);
}

.perm-matrix input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--mp-color-brand);
}

.mp-role-group {
  margin-top: 4px;
}

.mp-role-group + .mp-role-group {
  margin-top: 20px;
}

.mp-role-group__title {
  margin: 0 0 10px;
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mp-color-muted);
}

.mp-role-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-role-card {
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius);
  background: var(--mp-color-surface);
  padding: 12px 14px;
}

.mp-role-card__name {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  color: var(--mp-color-text);
  margin-bottom: 10px;
}

.mp-role-card__checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
}
@media (min-width: 768px) {
  .mp-role-card__checks {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

.mp-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  cursor: pointer;
  margin: 0;
}
.mp-check input[type=checkbox] {
  margin: 0;
}

.mp-check__label {
  font-size: 14px;
  line-height: 1.3;
  color: var(--mp-color-text);
}

.mp-check.is-muted {
  cursor: not-allowed;
}
.mp-check.is-muted .mp-check__label {
  color: var(--mp-color-muted);
}

.mp-master-data {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  margin-bottom: 1rem;
  overflow: hidden;
}

.mp-master-data > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--mp-color-accent-light);
  color: var(--mp-color-accent-text);
}

.mp-master-data > summary::-webkit-details-marker {
  display: none;
}

.mp-master-data > summary::marker {
  content: "";
}

.mp-master-data > summary i {
  color: var(--mp-color-accent-text);
}

.mp-master-data__body {
  padding: 1rem;
}

.mp-master-data thead th {
  font-family: var(--mp-font-ui);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mp-color-muted);
}

.mp-master-data .col-key code {
  font-size: 12px;
  color: var(--mp-color-text-2);
}

.mp-master-data table input.form-control-sm,
.mp-master-data table select.form-select-sm {
  min-width: 0;
}

.mp-master-data input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--mp-color-brand);
}

/* Eine Gruppe im Saisonwechsel.

   Jede bekommt eine Trennlinie ueber sich, damit bei dreissig Bloecken
   untereinander klar bleibt, welche Felder zu welcher Gruppe gehoeren. Der
   erste braucht keine — ueber ihm steht der Kartenkopf mit der Sparte. */
.mp-season-row + .mp-season-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--mp-color-border-soft, rgba(0, 0, 0, 0.07));
}

.mp-season-row__name {
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

/* Die Vorschau des Briefbogens. Sie zeigt ihn in der Breite, in der er später
   auf dem Formular steht — mehr als ein Blick auf „ist der richtige da" soll
   sie nicht leisten. */
.mp-letterhead {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  background: #fff;
}

/* Der Zahlencode einer Kündigung.

   🔴 Er wird von einem handbeschriebenen Umschlag abgelesen und mit der Zeile
   verglichen (Georg, 01.09.2026). Deshalb Schreibmaschinenschrift und weite
   Buchstabenabstände: 0 und O, 1 und I sind im Alphabet des Codes zwar gar
   nicht enthalten, aber wer vergleicht, liest Zeichen für Zeichen. */
.mp-tracking-code {
  font-family: var(--mp-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border-radius: var(--mp-radius);
  background: var(--mp-color-surface-muted);
  white-space: nowrap;
}

.mp-account-child {
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
}

.mp-account-child:last-child {
  margin-bottom: 0;
}

.mp-account-child__name {
  font-weight: 600;
  color: var(--mp-color-text);
}

.mp-account-child__todo {
  margin-top: 0.25rem;
}

.mp-account-child__action {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mp-account-child__action form {
  margin: 0;
}
.mp-account-child__action .btn-mp {
  width: 100%;
}
@media (min-width: 768px) {
  .mp-account-child__action {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mp-account-child__action .btn-mp {
    width: auto;
  }
}

.mp-tournament__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-tournament-team__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-tournament-team__row:last-child {
  border-bottom: 0;
}
.mp-tournament-team__row.is-withdrawn .mp-tournament-team__name {
  text-decoration: line-through;
  opacity: 0.6;
}

.mp-tournament-team__name {
  font-weight: 600;
}

.mp-tournament-team__action {
  margin: 0;
}

.mp-tournament-match__round {
  margin-bottom: 1.1rem;
}

.mp-tournament-match__roundTitle {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.mp-tournament-match__roundTime {
  font-weight: 400;
  color: var(--mp-color-text-muted);
}

.mp-tournament-match__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  margin-bottom: 0.4rem;
}
.mp-tournament-match__row.is-cancelled {
  opacity: 0.55;
}

.mp-tournament-match__number {
  flex: 0 0 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-tournament-match__pitch {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--mp-color-text-muted);
  white-space: nowrap;
}

.mp-tournament-match__pairing {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.mp-tournament-match__vs {
  color: var(--mp-color-text-muted);
}

.mp-tournament-match__result {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 6.5rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .mp-tournament-match__result {
    flex: 1 1 100%;
  }
}
.mp-tournament-result {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.mp-tournament-result__side {
  flex: 1 1 0;
  min-width: 0;
}

.mp-tournament-result__colon {
  padding-bottom: 0.55rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.mp-tournament-result__goal {
  min-height: 48px;
  font-size: 1.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mp-tournament-result__action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.mp-tournament-result__action .btn-mp {
  width: 100%;
  min-height: 44px;
}
@media (min-width: 768px) {
  .mp-tournament-result__action {
    flex-direction: row;
  }
  .mp-tournament-result__action .btn-mp {
    width: auto;
  }
}

.mp-tournament-standing {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mp-tournament-standing__table {
  width: 100%;
  min-width: 33rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mp-tournament-standing__table th, .mp-tournament-standing__table td {
  padding: 0.45rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-tournament-standing__table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mp-color-text-muted);
}
.mp-tournament-standing__table abbr {
  text-decoration: none;
}

.mp-tournament-standing__rank {
  font-weight: 700;
}

.mp-tournament-standing__team {
  text-align: left;
  font-weight: 600;
}

.mp-tournament-standing__point {
  font-weight: 700;
}

.mp-tournament-qr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.mp-tournament-qr__code {
  width: 180px;
  height: 180px;
  background: #fff;
  padding: 0.25rem;
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
}

.mp-tournament-qr__url {
  word-break: break-all;
  font-size: 0.85rem;
  color: var(--mp-color-text-muted);
}

.mp-tournament-public__round {
  margin-bottom: 1rem;
}

.mp-tournament-public__roundTitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mp-color-text-muted);
  margin: 0 0 0.35rem;
}

.mp-tournament-public__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-tournament-public__row:last-child {
  border-bottom: 0;
}
.mp-tournament-public__row.is-cancelled {
  opacity: 0.55;
}

.mp-tournament-public__number {
  flex: 0 0 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-tournament-public__pitch {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--mp-color-text-muted);
  white-space: nowrap;
}

.mp-tournament-public__pairing {
  flex: 1 1 12rem;
  min-width: 0;
}

.mp-tournament-public__vs {
  color: var(--mp-color-text-muted);
}

.mp-tournament-public__result {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mp-tournament-public__download {
  margin-top: 1rem;
}

.mp-tournament-match__locked {
  flex: 0 0 auto;
  min-width: 6.5rem;
  text-align: center;
  color: var(--mp-color-text-muted);
}

.mp-roster-jersey__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-roster-jersey__row:last-child {
  border-bottom: 0;
}

.mp-roster-jersey__name {
  flex: 1 1 8rem;
  margin: 0;
  min-width: 0;
}

.mp-roster-jersey__number {
  flex: 0 0 4.5rem;
  min-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mp-roster-jersey__flag {
  flex: 0 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-roster-jersey__flag .form-check-input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
}

.mp-roster-jersey__row--head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mp-color-text-muted);
  border-bottom-width: 2px;
}

@media (max-width: 575.98px) {
  .mp-roster-jersey__row {
    flex-wrap: wrap;
  }
  .mp-roster-jersey__name {
    flex: 1 1 100%;
  }
  .mp-roster-jersey__row--head {
    display: none;
  }
}
.mp-pause__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-pause__row:last-child {
  border-bottom: 0;
}
.mp-pause__row input[type=number] {
  flex: 0 0 5.5rem;
  min-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mp-pause__row input[type=text] {
  flex: 1 1 10rem;
  min-height: 44px;
  min-width: 0;
}

.mp-pause__name {
  flex: 1 1 10rem;
  margin: 0;
  min-width: 0;
}

.mp-pause__no {
  color: var(--mp-color-text-muted);
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.mp-pause__row--head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-color-text-muted);
  border-bottom: 1px solid var(--mp-color-border);
}

.mp-pause__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0 0.5rem;
}

.mp-pause__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--mp-color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.mp-pause__drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--mp-color-text-muted);
  text-decoration: none;
}
.mp-pause__drop:hover {
  color: var(--mp-color-brand);
}

@media (max-width: 575.98px) {
  .mp-pause__row {
    flex-wrap: wrap;
  }
  .mp-pause__name {
    flex: 1 1 100%;
  }
  .mp-pause__row--head {
    display: none;
  }
}
.mp-roster-flag {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: #4A3B00;
  background: #F7E6A0;
}

.mp-suggest__strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.mp-suggest__slider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 16rem;
  min-width: 0;
}
.mp-suggest__slider .form-range {
  flex: 1 1 auto;
  min-height: 44px;
}

.mp-suggest__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mp-suggest__figure {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--mp-color-text-muted);
}

.mp-lineup__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-lineup__row:last-child {
  border-bottom: 0;
}

.mp-lineup__name {
  flex: 1 1 8rem;
  margin: 0;
  min-width: 0;
}

.mp-lineup__seat {
  flex: 0 0 auto;
  display: flex;
  gap: 0.75rem;
}

.mp-lineup__choice {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}
.mp-lineup__choice .form-check-input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  flex: 0 0 auto;
}

.mp-lineup__number {
  flex: 0 0 4.5rem;
}
.mp-lineup__number .form-control {
  min-height: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mp-lineup__flag {
  flex: 0 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-lineup__flag .form-check-input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
}

.mp-lineup__row--head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mp-color-text-muted);
  border-bottom-width: 2px;
}

@media (max-width: 575.98px) {
  .mp-lineup__row {
    flex-wrap: wrap;
  }
  .mp-lineup__name {
    flex: 1 1 100%;
  }
  .mp-lineup__row--head {
    display: none;
  }
}
.mp-bibgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mp-bibgroup__group {
  flex: 1 1 12rem;
  min-width: 0;
}

.mp-bibgroup__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.mp-bibgroup__dot {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--mp-color-border-soft);
}

.mp-bibgroup__name {
  min-width: 0;
}

.mp-bibgroup__count {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mp-bibgroup__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.mp-bibgroup__list li {
  padding: 2px 0;
}

.mp-bibgroup__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-bibgroup__child {
  flex: 1 1 auto;
  min-width: 0;
}

.mp-bibgroup__pick {
  flex: 0 0 auto;
  width: auto;
  max-width: 9rem;
}

.mp-bibgroup__group--open {
  flex-basis: 100%;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--mp-color-border-soft);
}

.mp-bibgroup__team {
  margin-left: 0.4rem;
  color: var(--mp-color-muted);
}

.mp-friendly-team__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-friendly-team__row:last-child {
  border-bottom: 0;
}
.mp-friendly-team__row.is-withdrawn .mp-friendly-team__field input {
  text-decoration: line-through;
  opacity: 0.6;
}
.mp-friendly-team__row.is-own {
  font-weight: 600;
}

.mp-friendly-team__field {
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  .mp-friendly-team__field {
    flex: 1 1 0;
    min-width: 12rem;
  }
}

.mp-friendly-team__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mp-friendly-access__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-friendly-access__row:last-child {
  border-bottom: 0;
}

.mp-friendly-access__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 600;
}

.mp-friendly-access__meta {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--mp-color-text-muted);
}

.mp-friendly-access__action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mp-friendly-access__action form {
  display: flex;
  gap: 0.4rem;
  margin: 0;
}

.mp-friendly-match__day + .mp-friendly-match__day {
  margin-top: 1.4rem;
}

.mp-friendly-match__dayTitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mp-color-text-muted);
}

.mp-friendly-match__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--mp-color-border-soft);
}
.mp-friendly-match__row:last-child {
  border-bottom: 0;
}
.mp-friendly-match__row.is-cancelled {
  opacity: 0.65;
}
.mp-friendly-match__row.is-cancelled .mp-friendly-match__pairing {
  text-decoration: line-through;
}
@media (min-width: 768px) {
  .mp-friendly-match__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0.75rem;
  }
}

.mp-friendly-match__pairing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 600;
}

.mp-friendly-match__vs {
  color: var(--mp-color-text-muted);
}

.mp-friendly-match__when {
  font-size: 0.9rem;
  color: var(--mp-color-text-muted);
}

.mp-friendly-match__noDate {
  font-style: italic;
}

.mp-friendly-match__booking {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mp-friendly-match__edit {
  justify-self: start;
  min-height: 44px;
}
@media (min-width: 768px) {
  .mp-friendly-match__edit {
    justify-self: end;
  }
}

.mp-friendly-booking {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.mp-friendly-booking--pending {
  background: #FDF3DC;
  color: #7A5906;
}
.mp-friendly-booking--approved {
  background: #E4F4E7;
  color: #1F6B33;
}
.mp-friendly-booking--rejected {
  background: #FBE4E4;
  color: #93221F;
}
.mp-friendly-booking--own {
  background: var(--mp-color-surface-muted, #F1F1F4);
  color: var(--mp-color-text-muted);
}

.mp-friendly-modal__part + .mp-friendly-modal__part {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mp-color-border-soft);
}

.mp-friendly-modal__partTitle {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.doc-card {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
}

.doc-card:last-child {
  margin-bottom: 0;
}

.doc-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--mp-color-text);
}

.doc-card__meta {
  color: var(--mp-color-muted);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.doc-card__form {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.doc-card__form .form-control {
  max-width: 320px;
}

.doc-card--required {
  border-left: 3px solid var(--mp-color-brand);
}

.doc-card--missing {
  background: rgba(197, 144, 10, 0.05);
}

.doc-card--rejected {
  border-color: var(--mp-status-deceased, #ff3b30);
  background: rgba(212, 32, 32, 0.04);
}

.doc-card--approved {
  background: rgba(52, 199, 89, 0.05);
}

.receipt-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.receipt-doc {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  padding: 2.5rem 2rem;
  font-family: var(--mp-font-body);
  color: var(--mp-color-text);
}

.receipt-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.receipt-doc__brand {
  font-family: var(--mp-font-ui);
  font-weight: 700;
  font-size: 1.25rem;
}

.receipt-doc__brand small {
  display: block;
  color: var(--mp-color-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.receipt-doc__no {
  text-align: right;
  color: var(--mp-color-muted);
  font-size: 0.85rem;
}

.receipt-doc__title {
  font-family: var(--mp-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0 1.5rem;
}

.receipt-doc__addr {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.receipt-doc__muted {
  color: var(--mp-color-muted);
  font-size: 0.85rem;
}

.receipt-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.receipt-doc th,
.receipt-doc td {
  padding: 0.5rem 0.25rem;
  text-align: left;
  border-bottom: 1px solid var(--mp-color-border-soft);
}

.receipt-doc th {
  font-family: var(--mp-font-ui);
  font-weight: 600;
  color: var(--mp-color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.receipt-doc td.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.receipt-doc__total {
  font-size: 1.1rem;
  font-weight: 700;
}

.receipt-doc__sign {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: var(--mp-color-muted);
  font-size: 0.85rem;
}

.receipt-doc__sign div {
  flex: 1;
}

.receipt-doc__sign hr {
  border-top: 1px solid var(--mp-color-text);
  margin-bottom: 0.25rem;
}

@media print {
  body,
  body.page-member-portal {
    background: #fff !important;
  }
  .mp-drawer, .mp-scrim, .mp-topbar, .nav-main, .footer, .receipt-actions, .nav-sub, .breadcrumbs, .frame, header, .navbar {
    display: none !important;
  }
  .container, .row, .col, .col-12, .receipt-page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .receipt-doc {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  @page {
    size: A4;
    margin: 1.8cm;
  }
}
/* ── Aktionen stehen rechts ──────────────────────────────────────────────────

   🔴 Georg, 01.09.2026: "button sollen sich rechts ausrichten", zuletzt an der
   Quittung. Eine Aktion gehört ans Ende ihres Blocks, nicht an den Anfang —
   gelesen wird von links, gehandelt wird rechts. Die Beitragszeilen waren die
   letzte Stelle, an der die Knöpfe noch links klebten. */
.mp-payline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.federation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.federation-doc {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius, 8px);
  padding: 2.5rem 2rem;
  font-family: var(--mp-font-body);
  color: var(--mp-color-text);
}

.federation-edit__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.federation-edit__row + .federation-edit__row {
  border-top: 1px solid var(--mp-color-border-soft);
}

.federation-edit__pitch {
  font-family: var(--mp-font-ui);
  font-weight: 600;
  min-width: 5rem;
}

.federation-edit__official {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.federation-edit__uid {
  max-width: 16rem;
  font-variant-numeric: tabular-nums;
}

.federation-doc__official {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.federation-doc__official-item {
  display: inline-block;
  margin-right: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.federation-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.federation-doc__title {
  font-family: var(--mp-font-ui);
  font-size: 1.5rem;
  font-weight: 700;
}

.federation-doc__match {
  font-family: var(--mp-font-ui);
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

.federation-doc__meta {
  text-align: right;
  color: var(--mp-color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.federation-doc__muted {
  color: var(--mp-color-muted);
  font-size: 0.85rem;
}

.federation-doc__hint {
  border-left: 3px solid var(--mp-color-accent);
  background: var(--mp-color-accent-light);
  padding: 0.75rem 1rem;
  border-radius: var(--mp-radius, 8px);
  font-size: 0.9rem;
  margin: 1rem 0 1.5rem;
}

.federation-doc__scroll {
  overflow-x: auto;
}

.federation-doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}

.federation-doc__table th,
.federation-doc__table td {
  padding: 0.45rem 0.35rem;
  text-align: left;
  border-bottom: 1px solid var(--mp-color-border-soft);
  white-space: nowrap;
}

.federation-doc__table th {
  font-family: var(--mp-font-ui);
  font-weight: 600;
  color: var(--mp-color-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.federation-doc__name {
  font-weight: 600;
}

.federation-doc__date,
.federation-doc__federation,
.federation-doc__num {
  font-variant-numeric: tabular-nums;
}

.federation-doc__num,
.federation-doc__flag {
  text-align: center;
  width: 1%;
}

.federation-doc__row--missing {
  background: var(--mp-color-surface-muted);
}

.federation-doc__missing {
  font-weight: 700;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.federation-doc__foot {
  margin-top: 2rem;
  color: var(--mp-color-muted);
  font-size: 0.8rem;
}

@media print {
  body,
  body.page-member-portal {
    background: #fff !important;
  }
  .mp-drawer, .mp-scrim, .mp-topbar, .nav-main, .footer, .federation-actions,
  .federation-edit, .nav-sub, .breadcrumbs, .frame, header, .navbar {
    display: none !important;
  }
  .container, .row, .col, .col-12, .federation-page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .federation-doc {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .federation-doc__scroll {
    overflow: visible !important;
  }
  .federation-doc__hint {
    background: none !important;
  }
  .federation-doc__table thead {
    display: table-header-group;
  }
  .federation-doc__table tr {
    page-break-inside: avoid;
  }
  @page {
    size: A4;
    margin: 1.8cm;
  }
}
.fp-page {
  --fp-bg: var(--mp-color-surface-muted, #F2F2F7);
  --fp-surface: var(--mp-color-surface, #FFFFFF);
  --fp-text: var(--mp-color-text, #0A0A0B);
  --fp-muted: var(--mp-color-muted, #6C6C72);
  --fp-line: var(--mp-color-border-soft, rgba(10, 10, 11, 0.08));
  --fp-accent: var(--mp-color-brand, #0A0A0B);
  --fp-radius: 22px;
  --fp-radius-sm: 12px;
  --fp-font: -apple-system, system-ui, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --fp-font-heading: var(--mp-font-brand, var(--fp-font));
  color: var(--fp-text);
  font-family: var(--fp-font);
  line-height: 1.6;
}

.fp-wrap {
  margin: 0;
}

.fp-lead {
  margin: 0.25rem 0 1.5rem;
  color: var(--fp-muted);
}

.fp-muted {
  color: var(--fp-muted);
}

.fp-match {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--fp-line);
}
.fp-match:first-of-type {
  border-top: 0;
}

.fp-match--mine .fp-team {
  font-weight: 700;
}

.fp-match__when {
  font-size: 0.9rem;
  line-height: 1.35;
}

.fp-match__teams {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.fp-match__where {
  flex-basis: 100%;
  font-size: 0.85rem;
}

.fp-match__score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fp-vs {
  color: var(--fp-muted);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .fp-match {
    grid-template-columns: 1fr auto;
    grid-template-areas: "when score" "teams action";
  }
  .fp-match__when {
    grid-area: when;
  }
  .fp-match__score {
    grid-area: score;
  }
  .fp-match__teams {
    grid-area: teams;
  }
  .fp-match__action {
    grid-area: action;
  }
}
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--fp-text);
  color: var(--fp-surface);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.fp-btn:hover {
  opacity: 0.88;
}

.fp-btn--sm {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.fp-btn--ghost {
  background: transparent;
  color: var(--fp-text);
}

.fp-dialog {
  border: 0;
  border-radius: var(--fp-radius);
  padding: 1.5rem;
  width: min(28rem, 100vw - 2rem);
  background: var(--fp-surface);
  color: var(--fp-text);
  font-family: var(--fp-font);
}
.fp-dialog::backdrop {
  background: rgba(10, 10, 11, 0.4);
}

.fp-dialog__title {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.fp-dialog__hint {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

.fp-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.fp-goal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
}

.fp-goal__side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.85rem;
}

.fp-goal__colon {
  padding-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.fp-goal__input {
  width: 5rem;
  padding: 0.6rem;
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-bg);
  color: var(--fp-text);
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
}

.fp-scroll {
  overflow-x: auto;
}

.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.fp-table th,
.fp-table td {
  padding: 0.5rem 0.4rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--fp-line);
}

.fp-table th {
  color: var(--fp-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fp-table__team {
  width: 99%;
  white-space: normal;
}

.fp-row--mine {
  font-weight: 700;
}

.fp-foot {
  margin: 0.5rem 0 0;
  color: var(--fp-muted);
  font-size: 0.85rem;
}

.fp-brand {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--fp-muted);
  font-size: 0.8rem;
}

.fp-brand__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--fp-line);
}
.fp-brand__link:hover, .fp-brand__link:focus-visible {
  border-bottom-color: currentColor;
}

.fp-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0 0.25rem;
}

.fp-filter__label {
  color: var(--fp-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.fp-filter__select {
  flex: 1 1 14rem;
  max-width: 22rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-sm);
}

.mp-venue-list {
  display: flex;
  flex-direction: column;
}

.mp-venue {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--mp-color-border);
}
.mp-venue:first-child {
  border-top: 0;
  padding-top: 0;
}

.mp-venue--blocked {
  box-shadow: inset 3px 0 0 0 var(--mp-color-warning, #e0a800);
  padding-left: 0.75rem;
}

.mp-venue--new {
  border-top: 1px solid var(--mp-color-border);
  margin-top: 0.25rem;
}

.mp-venue__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mp-venue__head code {
  font-size: 12px;
  color: var(--mp-color-text-muted, #666);
}

.mp-venue__departments {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mp-venue__checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.35rem 1rem;
}

.mp-venue > form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-venue__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.mp-venue__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.mp-perm-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.35rem 1rem;
}

.mp-perm-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.mp-perm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding-left: 0;
}

.mp-perm-check .form-check-input {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

.mp-perm-check .form-check-label {
  flex: 1 1 auto;
}

.mp-perm-info {
  position: relative;
  flex: 0 0 auto;
}

.mp-perm-info__mark {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  color: var(--mp-color-muted);
  border-radius: var(--mp-radius);
}

.mp-perm-info__mark::-webkit-details-marker {
  display: none;
}

.mp-perm-info__mark:hover,
.mp-perm-info[open] .mp-perm-info__mark {
  color: var(--mp-color-brand);
}

.mp-perm-info__mark:focus-visible {
  outline: 2px solid var(--mp-color-brand);
  outline-offset: 1px;
}

.mp-perm-info__text {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  width: max-content;
  max-width: 260px;
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.45;
  color: var(--mp-color-text-2);
}

.mp-perm-legend {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--mp-color-border);
  color: var(--mp-color-text-muted, #666);
  font-size: 14px;
}

.mp-login-page__grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .mp-login-page__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mp-login-page__explain {
  color: var(--mp-color-text-2);
}
@media (min-width: 768px) {
  .mp-login-page__explain {
    border-left: 1px solid var(--mp-color-border-soft);
    padding-left: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .mp-login-page__explain {
    border-top: 1px solid var(--mp-color-border-soft);
    padding-top: 1rem;
  }
}
.mp-login-page__explain p {
  margin-bottom: 0.6rem;
}

.mp-profile__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

.mp-tournament-team__edit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem 0.75rem;
}

.member-portal .card-header.bg-dark,
.member-portal .card-header.bg-primary,
.member-portal .card-header.bg-primary-subtle,
.member-portal .card-header.bg-secondary,
.member-portal .card-header.text-bg-dark,
.member-portal .card-header.text-bg-primary {
  background: var(--mp-color-accent-light) !important;
  color: var(--mp-color-accent-text) !important;
  border-bottom: 1px solid var(--mp-color-border-soft);
  font-family: var(--mp-font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.member-portal .card-header.bg-dark i,
.member-portal .card-header.bg-primary i,
.member-portal .card-header.bg-primary-subtle i,
.member-portal .card-header.bg-secondary i,
.member-portal .card-header.text-bg-dark i,
.member-portal .card-header.text-bg-primary i {
  color: var(--mp-color-accent-text) !important;
}

.member-portal .btn-primary {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

.member-portal .btn-primary:hover {
  background: var(--mp-color-brand-hover);
  border-color: var(--mp-color-brand-hover);
  color: #fff;
}

.member-portal .btn-outline-primary {
  color: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  background: transparent;
}

.member-portal .btn-outline-primary:hover {
  background: var(--mp-color-brand);
  border-color: var(--mp-color-brand);
  color: #fff;
}

@media (max-width: 575.98px) {
  .main-container .frame-type-header:not(.mp-card *),
  .main-container .frame-type-text:not(.mp-card *),
  .main-container .frame-type-textpic:not(.mp-card *) {
    padding-inline: var(--mp-space-4);
  }
}
.member-portal {
  --mp-control-height: var(--control-height, 44px);
  --mp-control-font: var(--control-font, 14px);
  --mp-control-height-sm: var(--mp-control-height);
  --mp-control-font-sm: var(--mp-control-font);
}

/* ── Der Uebungsplaner ────────────────────────────────────────────────────
   Der Editor ist eine Zeichenflaeche mit zwei Leisten: oben Feld und
   Linienart, unten die Schritte. Alles dazwischen ist das Spielfeld. */
.member-portal .drill-editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.member-portal .drill-editor__select {
  width: auto;
  min-width: 9rem;
}

.member-portal .drill-editor__status {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--mp-color-muted);
}

.member-portal .drill-editor__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.member-portal .drill-editor__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.member-portal .drill-editor__hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--mp-color-muted);
}

/* Die Buehne haelt das Feld. Wird es groesser gezogen als die Karte, scrollt
   sie — das Feld selbst behaelt sein Seitenverhaeltnis, damit die Masse des
   Regelwerks stimmen. */
.member-portal .drill-stage {
  border-radius: var(--mp-radius);
  overflow: hidden;
  /* Luft zur Schrittleiste darunter: Sie klebte am Spielfeld (Georg,
     22.08.2026, gemessen 0px) und sah aus, als gehoerte sie hinein. */
  margin-bottom: 0.75rem;
}

.member-portal .drill-stage--scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.member-portal .drill-editor__zoom {
  width: 9rem;
  flex: 0 0 auto;
}

.member-portal .drill-editor__selection {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mp-color-border-soft);
}

/* Das Spielfeld. Die Szene rechnet in Prozent, damit dasselbe JSON auf dem
   Telefon stimmt wie im Beamer; die Breite steuert der Regler. */
.member-portal .drill-pitch {
  display: block;
  width: 100%;
  height: auto;
  background: #2F7D32;
  touch-action: none;
  cursor: crosshair;
}

/* Was gewaehlt ist, sieht man: Ein Ring am Objekt, eine dickere Linie und ihre
   Griffe. Ohne das raet man beim Drehen und Loeschen. */
.member-portal .drill-object--sel > *:first-child {
  filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 2.4px #fff);
}

.member-portal .drill-handle {
  fill: #fff;
  stroke: #1C1C1E;
  stroke-width: 0.3;
  cursor: grab;
}

.member-portal .drill-pitch__ground {
  fill: #2F7D32;
}

.member-portal .drill-pitch__line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 0.35;
}

.member-portal .drill-pitch__spot {
  fill: rgba(255, 255, 255, 0.8);
  stroke: none;
}

.member-portal .drill-pitch__goal {
  fill: none;
  stroke: #F5F5F5;
  stroke-width: 0.6;
  stroke-linejoin: round;
}

/* Die Halle: heller oranger Boden statt Rasen, und dunkle Linien darauf.
   Weiss auf hellem Grund liest niemand. Der Schalter sitzt am Wurzelelement,
   damit Boden, Linien, Punkte und Tore gemeinsam umschalten. */
.member-portal .drill-pitch--hall .drill-pitch__ground {
  fill: #F6D5AE;
}

.member-portal .drill-pitch--hall .drill-pitch__line {
  stroke: rgba(122, 62, 16, 0.75);
}

.member-portal .drill-pitch--hall .drill-pitch__spot {
  fill: rgba(122, 62, 16, 0.85);
}

.member-portal .drill-pitch--hall .drill-pitch__goal {
  stroke: #7A3E10;
}

.member-portal .drill-pitch__net {
  stroke-dasharray: 1.2 0.8;
  stroke-width: 0.6;
}

.member-portal .drill-object {
  cursor: grab;
}

.member-portal .drill-object__label {
  font-size: 2.6px;
  font-weight: 700;
  pointer-events: none;
}

.member-portal .drill-line {
  pointer-events: none;
}

/* Die Suche des Übungsplaners steht über den beiden Auswahllisten: Sie ist der
   Weg, den man zuerst nimmt — man erinnert sich an einen Namen oder an das
   Material, und erst wenn das nichts bringt, blättert man nach Altersklasse und
   Thema (Georg, 22.08.2026). */
.member-portal .drill-filter__search {
  width: 100%;
  margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
  .member-portal .drill-filter__search {
    max-width: 28rem;
  }
}
/* Ein Schritt und sein Kreuz gehören zusammen. Das Kreuz sitzt in der Ecke des
   Knopfes, damit die Leiste nicht doppelt so breit wird. */
.member-portal .drill-step {
  position: relative;
  display: inline-flex;
}

.member-portal .drill-step__weg {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border: 1px solid var(--mp-color-border);
  border-radius: 50%;
  background: var(--mp-color-surface);
  color: var(--mp-color-muted);
  cursor: pointer;
}

.member-portal .drill-step__weg:hover {
  border-color: var(--mp-color-brand);
  color: var(--mp-color-brand);
}

/* Die Marken eines Kleinfelds auf dem grossen Feld. Gestrichelt und in
   Vereinsgelb, weil es Hütchen sind und keine gezogenen Linien — beim
   Aufbauen soll man auf einen Blick sehen, was schon da ist und was man
   selbst legt. */
.member-portal .drill-pitch__mark {
  fill: none;
  stroke: #F2C200;
  stroke-width: 0.45;
  stroke-dasharray: 2 1.6;
}

.member-portal .drill-filter__search {
  width: 100%;
  max-width: none;
  margin-bottom: 0.75rem;
}

.mp-station__row + .mp-station__row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mp-color-border-soft);
}

.mp-station__row--new {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px dashed var(--mp-color-border-soft);
  border-radius: var(--mp-radius);
  background: var(--mp-color-surface-muted);
}

/* Die fuenf Notenspalten des Bewertungsbogens sind gleich breit.

   "Persoenlichkeit" ist doppelt so lang wie "Taktik", und ohne Zutun zieht
   allein die Ueberschrift ihre Spalte auf: 136px gegen 71px. Die fuenf
   Auswahlfelder standen damit in fuenf verschieden breiten Saeulen (Georg,
   21.08.2026).

   🔴 Eine feste Breite allein genuegt nicht. Solange die Ueberschrift nicht
   umbrechen darf, ist ihre Laenge das Mindestmass der Spalte — und sobald der
   Platz knapp wird, schrumpfen die vier kurzen Woerter, waehrend
   "Persoenlichkeit" stehen bleibt. Genau das war der erste Versuch: 81, 77,
   83, 110, 80.

   Deshalb darf sie umbrechen. Dann ist das Mindestmass aller fuenf gleich
   klein, und der Browser teilt den Platz gleichmaessig — auch in einem
   schmalen Fenster. Der Preis ist eine zweizeilige Kopfzeile; in der Zelle
   darunter steht ohnehin nur eine Ziffer.

   Auf dem Telefon stapelt responsive-stack die Zellen und schreibt die
   Ueberschrift als ::before davor. Auch dort bekommt sie ihr festes Mass,
   sonst beginnt jede Zeile an einer anderen Stelle. */
/* Auf dem Telefon bekommt JEDE Ueberschrift dieser Tabelle dasselbe Mass —
   auch "Notiz". Sonst faengt das Notizfeld weiter links an als die fuenf
   Auswahlfelder darueber und ist entsprechend laenger: gemessen am 21.08.2026
   bei 570px Fensterbreite 461px gegen 366px (Georg). Gleich lang werden sie,
   indem sie an derselben Stelle beginnen und bis zum selben Rand laufen. */
.member-portal .mp-rating-table tbody td[data-label]::before {
  flex: 0 0 8rem;
}

.member-portal .mp-rating-table tbody td .form-select,
.member-portal .mp-rating-table tbody td .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .member-portal .mp-rating-table th.mp-rating-col,
  .member-portal .mp-rating-table td.mp-rating-col {
    width: 5.5rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .member-portal .mp-rating-table th.mp-rating-col {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    vertical-align: bottom;
  }
}
/* Ein Entwurf fuer die sozialen Netze auf der Beitragsseite.

   Jeder Entwurf ist ein eigenes Formular, also ein eigener Block mit einer
   Trennlinie darueber -- bei drei Entwuerfen untereinander weiss man sonst
   nicht, welcher Knopf zu welchem Text gehoert. Der erste bekommt keine:
   ueber ihm steht schon der Kartenkopf. */
.mp-social-draft + .mp-social-draft {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--mp-color-border-soft, rgba(0, 0, 0, 0.07));
}

.mp-social-draft__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Der Text darf wachsen: Ein Beitrag fuer Instagram ist laenger als eine
   Zeile, und wer im Feld scrollen muss, uebersieht die Haelfte. */
.mp-social-draft textarea {
  min-height: 120px;
  resize: vertical;
}

/* Der freigegebene Beitragstext — zum Lesen und Kopieren, nicht zum Bearbeiten.

   🔴 Ein <pre> und kein Eingabefeld (Georg, 02.09.2026): Entschieden ist
   entschieden. Wer den Text hier noch ändern könnte, änderte etwas, das schon
   freigegeben ist — und die Änderung ginge nirgends hin. Zum Markieren taugt
   das <pre> trotzdem, falls die Zwischenablage einmal nicht darf. */
.mp-social-draft__text {
  margin: 0 0 var(--mp-space-2);
  padding: var(--mp-space-3);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  background: var(--mp-color-surface-muted);
  font-family: inherit;
  font-size: var(--mp-control-font, 14px);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}