/*
 * bestplayer.app – Erscheinungsbild Entwurf B «Pokal» (Styleguide, Entscheid 10.11.2026), aufgebaut wie das Kundenportal
 * (doegli-Familie): Kopfzeile Marineblau, Schrift Sora, Ecken 8 px, Basis Stil Vita des Universal Theme.
 * Akzent Pokalgold #D4A72C. Gold trägt keine weisse Schrift (zu wenig Kontrast): Hot-Knöpfe sind Gold mit
 * marineblauer Schrift, Links und Fokus in Altgold bzw. Marine. Gilt für die Verwaltung; die Zuschauerseiten
 * übernehmen später Vereinslogo und -farben.
 */
:root {
  --bp-marine: #12304A;
  --bp-mitternacht: #0B1F31;
  --bp-gold: #D4A72C;
  --bp-gold-hell: #F6EBCB;
  --bp-altgold: #8A6A12;      /* Gold für Text und Links auf Weiss (Kontrast 4.8:1) */
  --bp-nebel: #EEF1F4;
  --bp-text: #13202B;

  --a-base-font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* abgerundete Ecken (Regionen, Felder, Knöpfe) */
  --ut-component-border-radius: 8px;
  --a-button-border-radius: 8px;
  --a-field-input-border-radius: 8px;
  --a-filedrop-border-radius: 8px;
  --a-cv-border-radius: 8px;

  /* Primärfarbe Marine (weisse Schrift möglich), Gold nur als Akzent */
  --a-palette-primary: var(--bp-marine);
  --a-palette-primary-contrast: #fff;
  --ut-palette-primary: var(--bp-marine);
  --ut-palette-primary-contrast: #fff;
  --ut-palette-primary-shade: var(--bp-gold-hell);
  --ut-palette-primary-text: var(--bp-marine);
  --ut-link-text-color: var(--bp-altgold);
  --ut-focus-outline-color: var(--bp-gold);

  --ut-header-background-color: var(--bp-marine);
  --ut-header-text-color: #fff;
  --ut-body-background-color: var(--bp-nebel);
  --ut-body-title-background-color: var(--bp-nebel);
  --ut-body-title-text-color: var(--bp-text);
  --ut-login-page-background-color: var(--bp-mitternacht);
  /* Box auf dem dunklen Hintergrundbild leicht transparent mit Unschärfe, wie Kontor und Kundenportal */
  --ut-login-region-background-color: rgba(255, 255, 255, .88);
  --ut-login-region-filter: blur(6px);

  /* Stellen, an denen Vita das eigene Blau fest einträgt statt --ut-palette-primary zu verwenden */
  --a-checkbox-checked-background-color: var(--bp-marine);
  --a-field-input-focus-border-color: var(--bp-gold);
  --ut-field-input-focus-icon-color: var(--bp-marine);
  --ut-field-fl-input-focus-icon-background-color: var(--bp-marine);
  --a-menu-focused-background-color: var(--bp-marine);
  --a-button-focus-border-color: var(--bp-gold);
}

/* Hauptknöpfe (hot) in Pokalgold mit marineblauer Schrift */
.a-Button--hot,
.a-CardView-button--hot,
.apex-button-group input:checked + label,
.t-Button--hot,
.t-Form-fieldContainer--radioButtonGroup .apex-item-group--rc input:checked + label,
.ui-button--hot {
  --a-button-background-color: var(--bp-gold);
  --a-button-text-color: var(--bp-marine);
  --a-button-hover-background-color: #DDB443;
  --a-button-hover-text-color: var(--bp-marine);
  --a-button-active-background-color: #BF9422;
  --a-button-active-text-color: var(--bp-marine);
}
.a-Button--hot.t-Button--simple,
.t-Button--hot.t-Button--simple {
  --a-button-border-color: var(--bp-gold);
  --a-button-text-color: var(--bp-altgold);
}

/* Sprachwahl (util_p.sprachwahl_html): vier Felder nebeneinander, die aktive Sprache marineblau gefüllt. Auf der
   Anmeldeseite immer, nach der Anmeldung nur auf dem Smartphone in der Fusszeile (Desktop: Navigationsleiste «Sprache») */
.bp-sprache-wahl {
  display: flex;
  justify-content: center;
  gap: .375rem;
  margin-top: 1.25rem;
}
.bp-sprache-wahl a,
.bp-sprache-wahl .bp-sprache-aktiv {
  min-width: 2.75rem;
  padding: .375rem .625rem;
  border: 1px solid rgba(18, 48, 74, .35);
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  color: var(--bp-marine);
  background-color: #fff;
}
.bp-sprache-wahl a:hover,
.bp-sprache-wahl a:focus-visible {
  border-color: var(--bp-marine);
  background-color: var(--bp-nebel);
}
.bp-sprache-wahl .bp-sprache-aktiv {
  border-color: var(--bp-marine);
  color: #fff;
  background-color: var(--bp-marine);
}
.bp-sprache-handy {
  display: none;
}
@media (max-width: 640px) {
  .bp-sprache-handy {
    display: block;
    padding-top: .5rem;
  }
}

/* Seitenmenü hell wie Logenius (Theme-Roller-Stil «logenius»: Nav-Style light, Nebel #EEF1F4, aktive Zeile #AFB8C1
   mit Marine-Balken links); standardmässig eingeklappt (nur Symbole), auf dem Smartphone die Tab-Leiste */
:root {
  --ut-body-nav-background-color: var(--bp-nebel);
  --ut-body-nav-text-color: #000;
  --ut-body-nav-scrollbar-track-background-color: var(--bp-nebel);
  --ut-body-nav-scrollbar-thumb-background-color: rgba(0, 0, 0, .1);
}
/* Vita setzt die Farben der Baumansicht direkt am Menü, nicht auf :root */
.t-Body-nav .t-TreeNav,
.t-TreeNav {
  --a-treeview-node-selected-background-color: #AFB8C1;
  --a-treeview-node-selected-text-color: #000;
  --a-treeview-node-selected-icon-color: #000;
  --a-treeview-node-focused-background-color: #AFB8C1;
  --a-treeview-node-focused-text-color: #000;
  --ut-treeview-badge-background-color: var(--bp-marine);
  --ut-treeview-badge-text-color: var(--bp-nebel);
}
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-selected,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top,
.t-TreeNav--styleA .a-TreeView-node--topLevel .a-TreeView-row.is-current--top,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-current--top.is-selected,
.t-TreeNav .a-TreeView-node--topLevel ul,
.t-TreeNav .a-TreeView-node--topLevel.is-collapsible > .a-TreeView-row {
  background-color: #AFB8C1;
  color: #000;
}
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-row.is-hover {
  background-color: #9DA9B4 !important;
}
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-content .fa {
  color: #000;
}
.t-TreeNav--styleA .a-TreeView-node--topLevel {
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* Logo in der Kopfzeile: Zeichen + Titel "Kundenportal | doegli Software GmbH" */
.apex-logo-img {
  height: 1.75rem;
  width: auto;
}
.t-Header-logo .apex-logo-text {
  color: var(--ut-header-text-color, #fff);
  font-weight: 600;
}
/* Kopfzeile (B-22): Vereinslogo und -name in der Vereinsfarbe (mandant_p.kopf_css). Ohne Vereinslogo (MANDANT_LOGO_URL
   leer) das bestplayer-Zeichen; das Logo steht auf Weiss, weil es für helle Hintergründe gemacht ist */
.bp-kopf-verein[src=""],
.bp-kopf-verein:not([src=""]) + .bp-kopf-marke {
  display: none;
}
.apex-logo-img.bp-kopf-verein {
  width: 2rem;
  height: 2rem;
  padding: .125rem;
  border-radius: 6px;
  background-color: #fff;
  object-fit: contain;
}
.t-Header-logo .apex-logo-text {
  overflow: hidden;
  max-width: 50vw;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Marke klein in der Fusszeile (nur angemeldet) */
.bp-footer-marke {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  font-size: .75rem;
}


/* Fusszeile auf jeder Seite (Global Page): Datenschutz, Impressum, AGB */
.bp-footer-recht {
  padding: 1rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
/* Login-Vorlage (Anmelden, Registrierung): unten auf dem dunklen Hintergrund hell */
.t-PageBody--login .bp-footer-recht,
.t-PageBody--login .bp-footer-recht a {
  color: rgba(255, 255, 255, .8);
}
.t-PageBody--login .bp-footer-recht a:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Tab-Leiste unten (nur Smartphone), wie Kontor und Logenius. Region "Tab-Leiste (Smartphone)" auf der Global Page mit
 * der Liste "Tab-Leiste" (Links List). Desktop und Tablet haben das Seitenmenü links; auf dem Smartphone ersetzt die
 * Leiste den Menü-Knopf und "abmelden" oben. Aussehen wie iOS 26 ("Liquid Glass"): schwebende Kapsel, halbtransparenter,
 * unscharfer Hintergrund, aktiver Tab mit eigener kleiner Kapsel im Akzent Gold.
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-tabbar {
  display: none;
}

@media (max-width: 640px) {
  .t-PageBody:not(.t-Dialog-page) .bp-tabbar {
    display: block;
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    z-index: 900;
    padding: .25rem;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, .6);
    background-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 24px rgba(18, 48, 74, .16), 0 1px 3px rgba(18, 48, 74, .10),
                inset 0 1px 0 rgba(255, 255, 255, .7);
  }
  /* ohne Unschärfe (ältere Browser): weniger durchsichtig, damit die Beschriftung lesbar bleibt */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .t-PageBody:not(.t-Dialog-page) .bp-tabbar {
      background-color: rgba(255, 255, 255, .94);
    }
  }
  .bp-tabbar .t-LinksList {
    display: flex;
    gap: .125rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .bp-tabbar .t-LinksList-item {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: none;
  }
  .bp-tabbar .t-LinksList-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .375rem .25rem .3125rem;
    border: 0;
    border-radius: 1.5rem;
    background: none;
    box-shadow: none;
    color: var(--ut-component-text-muted-color, #5b6672);
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
  }
  .bp-tabbar .t-LinksList-link:hover,
  .bp-tabbar .t-LinksList-link:focus {
    background: none;
  }
  .bp-tabbar .t-LinksList-icon {
    margin: 0;
    font-size: 1.375rem;
    color: inherit;
  }
  .bp-tabbar .t-LinksList-label {
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bp-tabbar .t-LinksList-item.is-current > .t-LinksList-link {
    color: var(--bp-marine);
    font-weight: 600;
    background-color: rgba(212, 167, 44, .18);
  }
  .bp-tabbar .t-LinksList-badge,
  .bp-tabbar .t-LinksList-afterLabel {
    display: none;
  }

  /* Platz für die Leiste, damit das Ende jeder Seite darüber hinaus scrollt; Menü-Knopf und "abmelden" oben sind in
     der Leiste, der Knopf "nach oben" der Fusszeile läge hinter ihr */
  .t-PageBody:not(.t-Dialog-page) .t-Body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  .t-PageBody:not(.t-Dialog-page) #t_Button_navControl,
  .t-PageBody:not(.t-Dialog-page) .t-Footer-topButton {
    display: none;
  }
  /* aus der Navigationsleiste bleiben nur das «?» der Kontexthilfe (B-20) und «Verein wechseln» (B-15, nur bei
     mehreren Vereinen), als Symbole oben rechts */
  .t-PageBody:not(.t-Dialog-page) .t-Header-navBar .t-NavigationBar-item:not(.bp-nav-hilfe):not(.bp-nav-verein) {
    display: none;
  }
  .t-PageBody:not(.t-Dialog-page) .t-Header-navBar .bp-nav-hilfe .t-Button-label,
  .t-PageBody:not(.t-Dialog-page) .t-Header-navBar .bp-nav-verein .t-Button-label {
    display: none;
  }
  .t-PageBody:not(.t-Dialog-page) .t-Header-navBar .bp-nav-hilfe .t-Icon,
  .t-PageBody:not(.t-Dialog-page) .t-Header-navBar .bp-nav-verein .t-Icon {
    font-size: 1.25rem;
  }
}

/* Code aus der E-Mail mit sechs Kästchen (js/bestplayer-code.js, Seite 100), wie im Kundenportal: das echte
   Textfeld liegt unsichtbar über der Kästchenreihe */
.bp-code .t-Form-itemWrapper {
  position: relative;
}
/* Pflicht-Ecke und schwebende Beschriftung des unsichtbaren Feldes ausblenden (die Überschrift sagt «Code eingeben») */
.bp-code .t-Form-itemRequired-marker,
.bp-code .t-Form-labelContainer {
  display: none;
}
.bp-code input.text_field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;            /* verhindert das automatische Zoomen unter iOS */
  caret-color: transparent;
}
.bp-code-kaestchen {
  display: flex;
  flex: 1 1 auto;
  gap: .5rem;
}
.bp-code-k {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--a-field-border-color, #c4cbd2);
  border-radius: 8px;
  background-color: var(--a-field-background-color, #fff);
  font-size: 1.375rem;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
.bp-code-k.is-punkt {
  font-size: .875rem;
}
.bp-code-k.is-aktiv {
  border-color: var(--bp-gold);
  box-shadow: 0 0 0 2px rgba(212, 167, 44, .35);
}
.bp-code.is-error .bp-code-k {
  border-color: var(--ut-palette-danger, #c00);
}

/* Logo bzw. Foto im Dialog (js/bestplayer-bild.js): bisheriges Bild (Display Image) oder neue Vorschau, daneben die
   Knöpfe «Bild wählen» und «Bild entfernen» */
.bp-bild {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  align-items: center;
}
.bp-bild-vorschau img,
.bp-bild-bisher img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 8px;
  background-color: var(--bp-nebel);
}
.bp-bild-vorschau--foto img,
.bp-bild-bisher img {
  object-fit: cover;
}
.bp-bild-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* «Bild entfernen» ohne Bild: das Attribut hidden allein verliert gegen display von .t-Button */
.bp-bild-knoepfe [hidden] {
  display: none;
}
.bp-bild-hinweis {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .75rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}

/* Mannschaftsseite (Seite 12): Titel «Kader», darunter der Schalter «Inaktive anzeigen» */
.bp-filter .t-Form-fieldContainer {
  margin-bottom: .5rem;
}
.bp-kader-titel {
  margin: 1.5rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bp-text);
}

/* Kopf der Mannschaftsseite: eine Karte mit grösserem Logo, ohne Hover-Effekt (nicht anklickbar) */
.bp-kopf .a-CardView {
  box-shadow: none;
}
.bp-cards-logo.bp-kopf .a-CardView-header :has(> img),
.bp-cards-logo.bp-kopf .a-CardView-header img {
  width: 5rem;
  height: 5rem;
}
.bp-kopf .a-CardView-title {
  font-size: 1.375rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * «… erfassen» auf dem Smartphone als runder, schwebender «+»-Knopf unten rechts über der Tab-Leiste (Klasse bp-plus
 * am Knopf in der Titelleiste; Entscheid Tobias 11.11.2026 für alle «erfassen»/«neu»-Knöpfe). Desktop: normaler Knopf
 * mit Beschriftung oben rechts. Die Beschriftung blendet t-Button--mobileHideLabel aus, sie bleibt als title/aria-label
 * ------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .t-PageBody:not(.t-Dialog-page) .t-Button.bp-plus {
    position: fixed;
    right: 1rem;
    bottom: calc(5rem + env(safe-area-inset-bottom));
    z-index: 901;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(18, 48, 74, .28), 0 1px 3px rgba(18, 48, 74, .18);
  }
  .t-PageBody:not(.t-Dialog-page) .t-Button.bp-plus .t-Icon {
    margin: 0;
    font-size: 1.5rem;
  }
  /* Die Titelleiste hat im Universal Theme einen backdrop-filter. Der macht sie zum Bezugsrahmen für position: fixed,
     der Knopf lag dann oben ausserhalb des Bildschirms. Ihr Hintergrund (Nebel) ist deckend, die Unschärfe bringt nichts */
  .t-Body-title:has(.bp-plus) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* letzte Karte nicht unter dem Knopf verstecken */
  .t-PageBody:not(.t-Dialog-page):has(.bp-plus) .t-Body {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom));
  }
}

/* Cards (Seiten 10 und 12): Logo bzw. Foto grösser als das Standard-Symbol. Logos ganz zeigen (nicht beschneiden),
   Fotos füllen einen Kreis. Unabhängig von den genauen Klassennamen der Cards: das Bild in der Kopfzeile und seine
   Hülle */
.bp-cards-logo .a-CardView-header :has(> img),
.bp-cards-foto .a-CardView-header :has(> img) {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  padding: 0;
  background: none;
}
.bp-cards-logo .a-CardView-header img,
.bp-cards-foto .a-CardView-header img {
  width: 3.5rem;
  height: 3.5rem;
  max-width: none;
  object-fit: contain;
}
.bp-cards-foto .a-CardView-header img {
  object-fit: cover;
  border-radius: 50%;
  background-color: var(--bp-nebel);
}
/* ohne Logo bzw. Foto: Platzhalter in Nebel statt einer leeren Lücke, damit die Namen bündig bleiben */
/* Mannschaft ohne Logo: Standard-Wappen, eingefärbt wie das Nummern-Badge (siehe Wappen weiter unten) */
.bp-cards-logo .a-CardView-iconWrap:not(:has(img)),
.bp-cards-foto .a-CardView-iconWrap:not(:has(img)) {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 8px;
  background-color: var(--bp-nebel);
}
.bp-cards-foto .a-CardView-iconWrap:not(:has(img)) {
  border-radius: 50%;
  /* Standard-Avatar (img/avatar.svg, relativ zu css/) */
  background: url(../img/avatar.svg) center / cover no-repeat;
}
/* Kader: Trikotnummer als Badge in der Farbe der Mannschaft rechts unten auf dem Bild (--bp-badge-farbe und
   --bp-badge-schrift aus mannschaft_p.farben_css über die Klasse bp-mannschaft-<id> der Region, sonst Gold). Der Badge der Cards ist ein Geschwister des Bildes
   im Header; als Grid liegen beide in derselben Zelle, unabhängig von Abständen und Bildschirmgrösse */
/* Grösse von Foto und Badge als Variablen: die Spielseite verkleinert auf dem Handy nur diese, der Badge folgt */
.bp-cards-foto {
  --bp-foto: 3.5rem;
  --bp-badge: 1.625rem;
}
.bp-cards-foto .a-CardView-header :has(> img),
.bp-cards-foto .a-CardView-header img,
.bp-cards-foto .a-CardView-iconWrap:not(:has(img)) {
  width: var(--bp-foto);
  height: var(--bp-foto);
}
.bp-cards-foto .a-CardView-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.25rem;   /* Platz für den Badge, der etwas über das Bild hinausragt */
}
.bp-cards-foto .a-CardView-iconWrap {
  grid-area: 1 / 1;
}
.bp-cards-foto .a-CardView-headerBody {
  grid-area: 1 / 2;
}
.bp-cards-foto .a-CardView-badge {
  grid-area: 1 / 1;
  justify-self: end;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bp-badge);
  height: var(--bp-badge);
  margin: 0;
  padding: 0 .3125rem;
  /* Bild und Badge liegen mittig in derselben Zelle: nach unten bis zum unteren Bildrand, etwas darüber hinaus */
  transform: translate(.25rem, calc(var(--bp-foto) / 2 - var(--bp-badge) / 2 + .1875rem));
  border: 2px solid #fff;
  border-radius: .8125rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(18, 48, 74, .25);
}
.bp-cards-foto .a-CardView-badgeValue {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}
/* inaktive Spieler ausgegraut */
.bp-spieler--N {
  opacity: .6;
}
.bp-spieler--N .a-CardView-iconWrap {
  filter: grayscale(1);
}
.bp-cards-logo.bp-kopf .a-CardView-iconWrap:not(:has(img)) {
  width: 5rem;
  height: 5rem;
}

/* Kader importieren (Seite 22): Erklärung, Zusammenfassung und Status der Vorschau als kleine Etiketten */
.bp-import-text {
  margin: 0 0 1.5rem;   /* Abstand zur schwebenden Beschriftung des ersten Feldes */
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-import-summe {
  margin: 0 0 .75rem;
  font-weight: 600;
}
.bp-import-status {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 1rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--bp-nebel);
  color: var(--bp-text);
}
.bp-import-status--NEU {
  background-color: #DCEFE3;
  color: #1B5E33;
}
.bp-import-status--GEAENDERT {
  background-color: var(--bp-gold-hell);
  color: #6B5210;
}
.bp-import-status--FEHLER,
.bp-import-status--DEAKTIVIERT,
.bp-import-status--GESPERRT {
  background-color: #F8DEDC;
  color: #8E2A22;
}
/* Feld «Liste einfügen» (volle Breite über «Stretch Form Field»): höher, 16 px, damit iOS beim Tippen nicht hineinzoomt */
#P22_LISTE,
#P32_LISTE {
  min-height: 8rem;
  font-size: 16px;
}
@media (max-width: 640px) {
  /* Vorschau auf dem Handy: ohne Zeile und Position, Status darf umbrechen */
  .bp-import-vorschau th#ZEILE,
  .bp-import-vorschau td[headers="ZEILE"],
  .bp-import-vorschau th#POSITION,
  .bp-import-vorschau td[headers="POSITION"],
  .bp-import-vorschau th#ORT,
  .bp-import-vorschau td[headers="ORT"],
  .bp-import-vorschau th#WETTBEWERB,
  .bp-import-vorschau td[headers="WETTBEWERB"] {
    display: none;
  }
  .bp-import-status {
    white-space: normal;
  }
}

/* Smartphone: Knöpfe in der Titelleiste immer nebeneinander (wie Logenius). Bei mehreren Knöpfen (Mannschaftsseite:
   bearbeiten, importieren) brachen sie sonst untereinander um; jetzt bricht stattdessen der Titel um */
@media (max-width: 640px) {
  .t-BreadcrumbRegion-buttons {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Spiele (Seite 30, spiel_p.liste_html): nach Monat gruppiert, eine Karte pro Spiel über die ganze Breite. Oben Wettbewerb
 * und Status, darunter Heim (links) – Tag, Zeit, Ort (Mitte) – Gast (rechts), je mit Logo bzw. Standard-Wappen
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-spiele-liste {
  max-width: 48rem;
}
.bp-spiele-teil {
  margin: 1.75rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bp-text);
}
.bp-spiele-teil:first-of-type {
  margin-top: 0;
}
.bp-monat {
  margin: 1.25rem 0 .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-monat:first-of-type {
  margin-top: 0;
}
.bp-spiele-teil + .bp-monat {
  margin-top: .75rem;
}
.bp-spiele {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-spiel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "kopf kopf  kopf"
    "heim mitte gast";
  align-items: center;
  column-gap: .75rem;
  padding: .875rem 1rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(18, 48, 74, .08), 0 0 0 1px rgba(18, 48, 74, .06);
  color: var(--bp-text);
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.bp-spiel:hover,
.bp-spiel:focus-visible {
  box-shadow: 0 4px 14px rgba(18, 48, 74, .14), 0 0 0 1px rgba(18, 48, 74, .10);
  color: var(--bp-text);
  text-decoration: none;
}
.bp-spiel-kopf {
  grid-area: kopf;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .5rem;
  margin-bottom: .625rem;
  font-size: .75rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-spiel-status {
  padding: .125rem .5rem;
  border-radius: 1rem;
  background-color: var(--bp-gold-hell);
  color: #6B5210;
  font-weight: 600;
}
.bp-spiel-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  text-align: center;
}
.bp-spiel-team--heim {
  grid-area: heim;
}
.bp-spiel-team--gast {
  grid-area: gast;
}
.bp-logo {
  flex: none;
  width: 3rem;
  height: 3rem;
  background: center / contain no-repeat;
}
/* ohne Logo: Standard-Wappen (siehe Wappen unten) */
.bp-logo--wappen {
  border-radius: 8px;
}

/* Standard-Wappen für Mannschaften ohne Logo, in der Logik des Nummern-Badges: Schild in --bp-badge-farbe, Querband
   in --bp-badge-schrift (Kontrastfarbe). Beide Variablen setzt die Klasse bp-mannschaft-<id> (mannschaft_p.farben_css);
   ohne sie Gold mit Marine. Zwei Masken (Schild; Querband mit halb durchsichtiger Mittellinie), weil sich ein
   Hintergrundbild nicht per CSS-Variable einfärben lässt. Als Data-URI: Als Datei unter /files/static/ lädt Chrome
   die Maske nicht (12.11.2026 getestet, die Fläche blieb leer) */
.bp-cards-logo .a-CardView-iconWrap:not(:has(img)),
.bp-logo--wappen {
  position: relative;
  background: var(--bp-nebel);
}
.bp-cards-logo .a-CardView-iconWrap:not(:has(img))::before,
.bp-cards-logo .a-CardView-iconWrap:not(:has(img))::after,
.bp-logo--wappen::before,
.bp-logo--wappen::after {
  content: "";
  position: absolute;
  inset: 15%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M48 8 80 18v26c0 22-14 37-32 44C30 81 16 66 16 44V18z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M48 8 80 18v26c0 22-14 37-32 44C30 81 16 66 16 44V18z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
}
.bp-cards-logo .a-CardView-iconWrap:not(:has(img))::after,
.bp-logo--wappen::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M19 40h58' stroke='%23000' stroke-width='6'/%3E%3Cpath d='M48 11v74' stroke='%23000' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M19 40h58' stroke='%23000' stroke-width='6'/%3E%3Cpath d='M48 11v74' stroke='%23000' stroke-opacity='.45' stroke-width='2'/%3E%3C/svg%3E");
  background-color: var(--bp-badge-schrift, var(--bp-marine));
}
.bp-spiel-name {
  max-width: 100%;
  font-size: .875rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.bp-spiel-team--eigene .bp-spiel-name {
  font-weight: 600;
}
.bp-spiel-mitte {
  grid-area: mitte;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.5rem;
  text-align: center;
}
.bp-spiel-tag {
  font-size: .8125rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-spiel-zeit {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bp-marine);
}
.bp-spiel-ort {
  max-width: 9rem;
  overflow: hidden;
  font-size: .75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-spiele-leer {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ut-component-text-muted-color, #5b6672);
}

/* Filter der Spiele in der linken Spalte (Seitenvorlage «Left Side Column»): auf Desktop und Tablet untereinander,
   der Zeitraum als normale Radioknöpfe. Auf dem Smartphone steht die Spalte über der Liste: ohne eigenen Hintergrund,
   der Zeitraum als Segment-Schalter (drei gleich breite Felder in einer Kapsel, das gewählte weiss hervorgehoben) */
.bp-spiele-filter {
  padding: 1rem;
}
@media (max-width: 640px) {
  .t-Body-side:has(.bp-spiele-filter) {
    border: 0;
    background: none;
    box-shadow: none;
  }
  .bp-spiele-filter {
    padding: .75rem .5rem 0;   /* bündig mit den Karten */
  }
  #P30_ZEIT_CONTAINER,
  #P30_ZEIT_CONTAINER .t-Form-inputContainer,
  #P30_ZEIT_CONTAINER .t-Form-itemWrapper {
    padding-top: 0;
    margin-top: 0;
  }
  #P30_ZEIT_CONTAINER .t-Form-labelContainer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  #P30_ZEIT {
    display: flex;
    gap: .25rem;
    margin-top: 0;          /* Platz der schwebenden Beschriftung, die hier ausgeblendet ist */
    padding: .25rem;
    border-radius: 10px;
    background-color: rgba(18, 48, 74, .08);
  }
  #P30_ZEIT .apex-item-option {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  #P30_ZEIT .apex-item-option label.u-radio {
    display: block;
    margin: 0;
    padding: .5rem .25rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ut-component-text-muted-color, #5b6672);
    transition: background-color .15s ease, color .15s ease;
  }
  #P30_ZEIT label.u-radio::before,
  #P30_ZEIT label.u-radio::after {
    display: none;
  }
  #P30_ZEIT input:checked + label.u-radio {
    background-color: #fff;
    color: var(--bp-marine);
    box-shadow: 0 1px 3px rgba(18, 48, 74, .18);
  }
  #P30_ZEIT input:focus-visible + label.u-radio {
    outline: 2px solid var(--bp-gold);
    outline-offset: 1px;
  }
}

/* Spielseite (Seite 33): Kopf als Karte ohne Hover; darunter Heim und Gast mit den ausgewählten Spielern. Die Region
   (Vorlage Standard ohne Rahmen) zeigt den Mannschaftsnamen als Überschrift, rechts «Spieler auswählen» */
.bp-spiel--kopf,
.bp-spiel--kopf:hover {
  box-shadow: 0 1px 2px rgba(18, 48, 74, .08), 0 0 0 1px rgba(18, 48, 74, .06);
}
.bp-spiele-liste.bp-spielkopf {
  max-width: none;   /* Kopf der Spielseite über die ganze Breite (Wunsch Tobias 12.11.2026) */
}
.bp-spiel--kopf .bp-logo {
  width: 4rem;
  height: 4rem;
}
.bp-aufstellung {
  margin-top: 1.5rem;
}
.bp-aufstellung > .t-Region-header {
  padding-inline: 0;
  background: none;
}
.bp-aufstellung > .t-Region-header .t-Region-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bp-text);
}
.bp-aufstellung > .t-Region-bodyWrap > .t-Region-body {
  padding-inline: 0;
}

/* Dialog «Spieler auswählen» (Seite 34): Mannschaft fett, Werkzeugleiste (alle/keine links, erfassen/importieren
   rechts), Kader als Liste mit Zeilen; ab Tablet zwei Spalten */
.bp-auswahl-mannschaft {
  margin: 0 0 .25rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.bp-auswahl-werkzeuge {
  margin-bottom: .25rem;
}
.bp-auswahl-werkzeuge .t-ButtonRegion-wrap {
  flex-wrap: wrap;
  gap: .25rem;
}
.bp-auswahl .t-Form-labelContainer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.bp-auswahl .apex-item-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem 1rem;
}
@media (min-width: 641px) {
  .bp-auswahl .apex-item-group {
    grid-template-columns: 1fr 1fr;
  }
}
.bp-auswahl .apex-item-option {
  padding: .375rem .25rem;
  border-bottom: 1px solid rgba(18, 48, 74, .08);
}
.bp-auswahl .apex-item-option label {
  font-size: 1rem;
}
.bp-auswahl .t-Form-inputContainer,
.bp-auswahl .t-Form-itemWrapper,
.bp-auswahl .apex-item-group {
  width: 100%;
}
@media (max-width: 640px) {
  /* Spielseite: Spieler untereinander (Desktop nebeneinander), aber kompakt, damit ein Kader von 14 nicht zu lang wird */
  .bp-aufstellung .a-CardView-items {
    gap: .375rem;
  }
  .bp-aufstellung .a-CardView-header {
    padding: .625rem;
    column-gap: .875rem;
  }
  .bp-aufstellung .bp-cards-foto {
    --bp-foto: 2.5rem;
    --bp-badge: 1.375rem;
  }
  .bp-aufstellung .bp-cards-foto .a-CardView-badge {
    font-size: .6875rem;
  }
  .bp-aufstellung .a-CardView-title {
    font-size: .875rem;
    line-height: 1.25;
  }
  .bp-aufstellung .a-CardView-subTitle {
    font-size: .75rem;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Abstimmung
 * Spielseite 33 (Helfer): Status, Zahl der Stimmen, Link; Rangliste (abstimmung_p.status_html, rangliste_html).
 * Zuschauerseite 200 (Vorlage «Blank», öffentlich): Kopf in der Vereinsfarbe (--bp-verein…, abstimmung_p.rahmen_html),
 * Spielerwahl als grosse Kacheln (zwei pro Zeile auf dem Handy), Knopf «Stimme für … abgeben», Rangliste
 * ------------------------------------------------------------------------------------------------------------------- */
.bp-spiel-status--OFFEN {
  background-color: #DCEFE3;
  color: #1B5E33;
}
.bp-spiel-status--GESCHLOSSEN {
  background-color: var(--bp-nebel);
  color: var(--bp-text);
}
.bp-spiel-status--RESULTAT {
  background-color: var(--bp-marine);
  color: #fff;
}
.bp-abstimmung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0 0 .5rem;
  font-size: .875rem;
}
.bp-abstimmung-stimmen {
  font-weight: 600;
}
.bp-abstimmung-text,
.bp-abstimmung-link {
  margin: 0 0 .5rem;
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-abstimmung-link a {
  overflow-wrap: anywhere;
}
.bp-abstimmung-warnung {
  margin: 0 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: #9A3412;
}

/* Rangliste: Platz, Nummer in der Mannschaftsfarbe, Name, Balken, Stimmen */
.bp-rang + .bp-rang {
  margin-top: 1.25rem;
}
.bp-rang-titel {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
}
.bp-rang-leer {
  margin: 0;
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-rang-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-rang-zeile {
  display: grid;
  grid-template-columns: 2rem 2rem minmax(0, 1fr) minmax(3rem, 30%) 2.5rem;
  align-items: center;
  gap: .5rem;
  padding: .375rem 0;
  border-bottom: 1px solid var(--bp-nebel);
  font-size: .875rem;
}
.bp-rang-zeile--erster {
  font-weight: 700;
}
.bp-rang-platz {
  text-align: right;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-rang-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.625rem;
  height: 1.625rem;
  padding: 0 .3125rem;
  border-radius: .8125rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: .75rem;
  font-weight: 700;
}
.bp-rang-nummer:empty {
  visibility: hidden;
}
.bp-rang-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-rang-balken {
  height: .5rem;
  border-radius: .25rem;
  background-color: var(--bp-nebel);
  overflow: hidden;
}
.bp-rang-balken > span {
  display: block;
  height: 100%;
  border-radius: .25rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
}
.bp-rang-stimmen {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Zuschauerseite: Foto mit kleiner Nummer darüber statt der Nummer allein */
.bp-rang--fotos .bp-rang-zeile {
  grid-template-columns: 2rem 3rem minmax(0, 1fr) minmax(3rem, 30%) 3.5rem;   /* Prozent statt Anzahl */
}
.bp-rang-bild {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
}
.bp-rang-bild img,
.bp-rang-bild--leer::before {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bp-nebel);
}
.bp-rang-bild--leer::before {
  content: "";
  background: url(../img/avatar.svg) center / cover no-repeat;
}
.bp-rang-bild .bp-rang-nummer {
  position: absolute;
  right: -.375rem;
  bottom: -.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .25rem;
  border: 2px solid #fff;
  border-radius: .625rem;
  font-size: .625rem;
  line-height: 1;
}
/* Handy: Balken auf eine eigene Zeile unter den Namen, damit der Name Platz hat */
@media (max-width: 640px) {
  .bp-rang-zeile {
    grid-template-columns: 2rem 2rem minmax(0, 1fr) 2.5rem;
    row-gap: .25rem;
  }
  .bp-rang--fotos .bp-rang-zeile {
    grid-template-columns: 2rem 3rem minmax(0, 1fr) 3.5rem;
  }
  .bp-rang--fotos .bp-rang-bild {
    grid-row: 1 / 3;
    grid-column: 2;
  }
  .bp-rang--fotos .bp-rang-platz {
    grid-row: 1 / 3;
  }
  .bp-rang-balken {
    grid-row: 2;
    grid-column: 3 / 5;
  }
  .bp-rang-stimmen {
    grid-row: 1;
    grid-column: 4;
  }
}

/* Zuschauerseite */
body:has(.bp-live) {
  background-color: var(--bp-nebel);
}
/* die Vorlage «Blank» hat 8px Innenabstand im main: weg, damit der Kopf randlos über die ganze Breite geht */
main:has(.bp-live) {
  padding: 0;
}
.bp-live {
  --bp-live-breite: 40rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--bp-text);
}
.bp-live-inhalt,
.bp-live-fuss {
  width: 100%;
  max-width: var(--bp-live-breite);
  margin-inline: auto;
}
/* Kopf randlos (Wunsch Tobias 12.11.2026); Logo und Name auf der Linie des Inhalts */
.bp-live-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem max(1rem, calc((100% - var(--bp-live-breite)) / 2 + 1rem));
  padding-top: calc(.75rem + env(safe-area-inset-top));
  background-color: var(--bp-verein);
  color: var(--bp-verein-schrift);
}
.bp-live-logo {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  object-fit: contain;
  background-color: #fff;
}
.bp-live-logo--pokal {
  background: url(../icons/app-icon-144-rounded.png) center / contain no-repeat;
}
.bp-live-verein {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}
.bp-live-inhalt {
  flex: 1 0 auto;
  padding: 1rem;
}
.bp-live-inhalt .bp-spiele-liste {
  margin-bottom: 1rem;
}
.bp-live-titel {
  margin: 1.25rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.bp-live-hinweis {
  margin: 0 0 1rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff;
  font-size: 1rem;
  text-align: center;
}
.bp-live-stimmen {
  margin: .75rem 0;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-live-stand:not(:empty) {
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff;
}
.bp-live-auswahl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-live-auswahl-spiel .bp-spiel-status {
  flex: none;
  white-space: nowrap;
  font-size: .75rem;
}
.bp-live-auswahl-spiel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: #fff;
  color: var(--bp-text);
  font-weight: 600;
  text-decoration: none;
}
.bp-live-fuss {
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  font-size: .75rem;
  text-align: center;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-live-fuss p {
  margin: .5rem 0 0;
}
.bp-live-sprache {
  display: flex;
  justify-content: center;
}
.bp-live-powered {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.bp-live-pokal {
  width: 1rem;
  height: 1rem;
  background: url(../icons/app-icon-32.png) center / contain no-repeat;
}

/* Spielerwahl */
.bp-wahl {
  margin-bottom: 1.5rem;
}
.bp-wahl-titel {
  margin: 1.25rem 0 .75rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.bp-wahl-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.bp-wahl-spieler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  padding: 1rem .5rem .875rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background-color: #fff;
  color: var(--bp-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 48, 74, .08);
  -webkit-tap-highlight-color: transparent;
}
.bp-wahl-spieler[aria-pressed="true"] {
  border-color: var(--bp-verein-akzent, var(--bp-gold));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-verein-akzent, var(--bp-gold)) 35%, transparent);
}
.bp-wahl-spieler:focus-visible {
  outline: 2px solid var(--bp-marine);
  outline-offset: 2px;
}
.bp-wahl-bild {
  position: relative;
  width: 9rem;    /* grösser auf Wunsch Tobias 12.11.2026 (zwei Kacheln pro Zeile auf dem Handy); Foto 240 px */
  max-width: 100%;
  aspect-ratio: 1;
  margin-bottom: .375rem;
}
.bp-wahl-bild img,
.bp-wahl-bild--leer::before {
  position: absolute;   /* das Quadrat bestimmt die Grösse, nicht das Bild */
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bp-nebel);
}
.bp-wahl-bild--leer::before {
  content: "";
  background: url(../img/avatar.svg) center / cover no-repeat;
}
.bp-wahl-nummer {
  position: absolute;
  right: -.125rem;
  bottom: -.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.125rem;
  height: 2.125rem;
  padding: 0 .375rem;
  border: 2px solid #fff;
  border-radius: 1.0625rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(18, 48, 74, .25);
}
.bp-wahl-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.bp-wahl-position {
  font-size: .75rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-wahl-meldung {
  margin: 0 0 .75rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  background-color: #FDECEA;
  color: #8A1C12;
  font-size: .875rem;
}
.bp-wahl-abgeben.t-Button {
  width: 100%;
  min-height: 3rem;
  white-space: normal;
}
.bp-wahl-abgeben.t-Button:disabled {
  opacity: .55;
}
.bp-wahl-erledigt {
  margin: 0;
  padding: 1rem;
  border-radius: 8px;
  background-color: #DCEFE3;
  color: #1B5E33;
  font-weight: 600;
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * QR-Code und Leinwand (Seite 40, Dialog 41, Leinwand Seite 210, leinwand_p)
 * ------------------------------------------------------------------------------------------------------------------- */
.bp-qr-verein {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.bp-qr-bild {
  flex: none;
  width: 12rem;
  padding: .5rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(18, 48, 74, .08);
}
.bp-qr-bild svg,
.bp-lw-qr-bild svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;   /* keine Haarlinien zwischen den Modulen */
}
.bp-qr-text {
  flex: 1 1 16rem;
  min-width: 0;
}
.bp-qr-text p {
  margin: 0 0 .5rem;
}
.bp-qr-code {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.bp-qr-url a,
.bp-lw-link-url a {
  overflow-wrap: anywhere;
}
.bp-qr-hinweis {
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-lw-link--WIDERRUFEN,
.bp-lw-link--ABGELAUFEN {
  opacity: .6;
}
.bp-abstimmung-leinwand {
  margin: .25rem 0 .75rem;
}

/* Leinwand: Beamer bzw. Hallen-PC, 16:9; Grössen wachsen mit der Bildschirmhöhe */
body:has(.bp-lw) {
  background-color: var(--bp-nebel);
}
main:has(.bp-lw) {
  padding: 0;
}
/* ---------------------------------------------------------------------------------------------------------------------
 * Modale Dialoge (Vorgabe Tobias für alle Apps, wie Logenius und Kontor):
 * - Die angeheftete Button-Leiste hat den Hintergrund des Dialogs, damit der Inhalt beim Scrollen darunter verschwindet
 *   statt durchzuscheinen.
 * - Smartphone: UT heftet die Leiste fest an den unteren Rand, APEX berechnet die Dialoghöhe aber ohne sie - die
 *   Knöpfe lagen auf dem letzten Feld. Platz unten am t-Dialog-body reservieren (diese Höhe misst APEX), so wächst
 *   der Dialog mit.
 * ------------------------------------------------------------------------------------------------------------------ */
.t-Dialog-page .t-ButtonRegion--stickToBottom {
  background-color: var(--ut-component-background-color, #fff);
}
@media (max-width: 640px) {
  .t-Dialog-page .t-Dialog-body {
    padding-bottom: 4.5rem;
  }
}

/* Knöpfe der QR-Region unten rechts (UT setzt sie über den Inhalt) und mit Abstand */
.bp-qr-region .t-Region-bodyWrap {
  display: flex;
  flex-direction: column;
}
.bp-qr-region .t-Region-buttons {
  order: 2;
}
.bp-qr-region .t-Region-buttons-left,
.bp-qr-region .t-Region-buttons-right {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* darf schrumpfen und umbrechen (UT: flex 0 0 auto), sonst ragen die Knöpfe auf dem Smartphone rechts hinaus */
.bp-qr-region .t-Region-buttons-right {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
/* Die Leinwand füllt genau das Fenster und scrollt nie: Kopf und Fusszeile fix, der Inhalt dazwischen wird bei Bedarf
   verkleinert (bestplayer-leinwand.js, transform auf .bp-lw-skala) */
.bp-lw {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--bp-text);
  font-size: clamp(1rem, 2.2vh, 2rem);
}
.bp-lw-kopf {
  display: flex;
  align-items: center;
  gap: 1.5vh;
  padding: 1.5vh 3vw;
  background-color: var(--bp-verein, var(--bp-marine));
  color: var(--bp-verein-schrift, #fff);
}
.bp-lw-logo {
  flex: none;
  width: 6vh;
  height: 6vh;
  border-radius: 8px;
  object-fit: contain;
  background-color: #fff;
}
/* Standardlogo (App-Icon mit eigenen runden Ecken): ohne weissen Hintergrund, sonst bleiben weisse Ecken */
.bp-lw-logo.bp-live-logo--pokal {
  background-color: transparent;
  border-radius: 0;
}
.bp-lw-verein {
  font-size: 3.2vh;
  font-weight: 700;
}
.bp-lw-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 3vh 3vw;
}
.bp-lw-skala {
  transform-origin: top left;
}
.bp-lw-kopf,
.bp-lw-fuss {
  flex: none;
}
.bp-lw-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 4vw;
  align-items: start;
}
.bp-lw-raster > .bp-lw-info:only-child {
  grid-column: 1 / -1;
  max-width: 60rem;
  justify-self: center;
  width: 100%;
}
.bp-lw-qr {
  padding: 2.5vh;
  border-radius: 16px;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 1px 3px rgba(18, 48, 74, .12);
}
.bp-lw-qr-titel {
  margin: 0 0 2vh;
  font-size: 3.4vh;
  font-weight: 700;
}
.bp-lw-qr-bild {
  width: min(100%, 58vh);
  margin: 0 auto;
}
.bp-lw-qr-hinweis {
  margin: 2vh 0 0;
  font-size: 2.2vh;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-lw .bp-spiele-liste {
  max-width: none;
}
.bp-lw .bp-spiel {
  font-size: 2vh;
}
.bp-lw .bp-spiel--kopf .bp-logo {
  width: 9vh;
  height: 9vh;
}
.bp-lw-hinweis {
  margin: 3vh 0;
  padding: 2.5vh;
  border-radius: 12px;
  background-color: #fff;
  font-size: 3vh;
  text-align: center;
}
.bp-lw-titel {
  margin: 3vh 0 1.5vh;
  font-size: 3vh;
  font-weight: 700;
}
.bp-lw-stimmen {
  margin: 3vh 0;
  font-size: 5vh;
  font-weight: 700;
  text-align: center;
}
.bp-lw-stand .bp-rang-zeile {
  font-size: 2.4vh;
}
.bp-lw-kopf-spiel {
  max-width: 60rem;
  margin: 0 auto 3vh;
}
.bp-lw-fuss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  padding: 1.5vh 3vw;
  font-size: 1.6vh;
  color: var(--ut-component-text-muted-color, #5b6672);
}

/* Resultat auf der Leinwand: pro Wertung der Bestplayer gross, darunter Platz 2 und 3 */
.bp-lw-sieger-liste {
  display: grid;
  /* Heim und Gast nebeneinander auch auf einem 4:3-Beamer (1024 px), untereinander würde alles stark verkleinert */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 3vw;
}
.bp-lw-sieger-wertung {
  padding: 3vh 2vw;
  border-radius: 16px;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 1px 3px rgba(18, 48, 74, .12);
}
.bp-lw-sieger-titel {
  margin: 0 0 2vh;
  font-size: 3.6vh;
  font-weight: 700;
}
.bp-lw-sieger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  margin-bottom: 2.5vh;
}
.bp-lw-sieger-bild {
  position: relative;
  width: 22vh;
  height: 22vh;
}
.bp-lw-sieger-bild img,
.bp-lw-sieger-bild--leer::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bp-nebel);
  box-shadow: 0 0 0 .8vh var(--bp-badge-farbe, var(--bp-gold));
}
.bp-lw-sieger-bild--leer::before {
  content: "";
  background: var(--bp-nebel) url(../img/avatar.svg) center / cover no-repeat;
}
.bp-lw-sieger-nummer {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7vh;
  height: 7vh;
  padding: 0 1vh;
  border: .5vh solid #fff;
  border-radius: 3.5vh;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: 3.4vh;
  font-weight: 700;
}
.bp-lw-sieger-name {
  margin-top: 1vh;
  font-size: 4.4vh;
  font-weight: 700;
  line-height: 1.15;
}
.bp-lw-sieger-prozent {
  font-size: 3vh;
  font-weight: 600;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-lw-weitere {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.bp-lw-weitere li {
  display: grid;
  grid-template-columns: 3vh 9vh minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6vh;
  padding: 1vh 0;
  border-top: 1px solid var(--bp-nebel);
  font-size: 2.6vh;
}
/* Platz 2 und 3: kleines Foto mit Nummer wie beim Sieger */
.bp-lw-weitere-bild {
  position: relative;
  width: 9vh;
  height: 9vh;
}
.bp-lw-weitere-bild img,
.bp-lw-weitere-bild--leer::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bp-nebel);
}
.bp-lw-weitere-bild--leer::before {
  content: "";
  background: var(--bp-nebel) url(../img/avatar.svg) center / cover no-repeat;
}
.bp-lw-weitere-nummer {
  position: absolute;
  right: -.6vh;
  bottom: -.6vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.8vh;
  height: 3.8vh;
  padding: 0 .6vh;
  border: .35vh solid #fff;
  border-radius: 1.9vh;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: 1.9vh;
  font-weight: 700;
}
.bp-lw-weitere-platz {
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-lw-weitere-name {
  font-weight: 600;
}
.bp-lw-weitere-prozent {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .bp-lw-raster {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Einstellungen (B-7): Kacheln der Seite 50 (mandant_p.einstellungen_html), Personen (55), Vorschau im Dialog
 * «Darstellung» (52, js/bestplayer-vorschau.js setzt die Farben)
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-einst-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-einst-kachel {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--ut-component-border-radius, 12px);
  background-color: var(--ut-component-background-color, #fff);
  box-shadow: 0 1px 3px rgba(18, 48, 74, .12);
  color: inherit;
  text-decoration: none;
}
.bp-einst-kachel:hover,
.bp-einst-kachel:focus-visible {
  box-shadow: 0 2px 8px rgba(18, 48, 74, .2);
  text-decoration: none;
}
.bp-einst-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--bp-nebel);
  color: var(--bp-marine);
  font-size: 1.25rem;
}
.bp-einst-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: .25rem;
}
.bp-einst-titel {
  font-size: 1.0625rem;
  font-weight: 700;
}
.bp-einst-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  overflow-wrap: anywhere;
}
.bp-einst-muster {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(18, 48, 74, .2);
}
.bp-einst-pfeil {
  flex: none;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-person--INAKTIV {
  opacity: .6;
}
.bp-vorschau {
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--bp-nebel);
  box-shadow: 0 1px 3px rgba(18, 48, 74, .12);
}
.bp-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background-color: var(--bp-verein, var(--bp-marine));
  color: var(--bp-verein-schrift, #fff);
  font-weight: 700;
}
.bp-vorschau-inhalt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.bp-vorschau-foto {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: #fff url(../img/avatar.svg) center / cover no-repeat;
}
.bp-vorschau-nummer {
  position: absolute;
  right: -.25rem;
  bottom: -.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .375rem;
  border: 2px solid #fff;
  border-radius: .875rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: .875rem;
  font-weight: 700;
}
.bp-vorschau-text {
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Sponsoren (B-8): «presented by …» (sponsor_p.presented_html) auf der Zuschauerseite unter dem Spielkopf und auf der
 * Leinwand rechts im Kopf; Logos stehen auf Weiss, weil sie für helle Hintergründe gemacht sind
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.bp-sponsor-text {
  font-size: .8125rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  white-space: nowrap;
}
.bp-sponsor-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.bp-sponsor-logo {
  display: block;
  max-width: 12rem;
  max-height: 3rem;
  object-fit: contain;
}
.bp-sponsor-name {
  font-weight: 700;
}
.bp-sponsor--live {
  margin: -.25rem 0 1rem;
}
.bp-sponsor--spiel {
  grid-column: 1 / -1;   /* eigene Zeile unter Heim – Mitte – Gast */
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px solid rgba(18, 48, 74, .08);
}
.bp-sponsor--leinwand {
  margin-left: auto;
  gap: 1.2vh;
}
.bp-sponsor--leinwand .bp-sponsor-text {
  font-size: 1.8vh;
  color: inherit;
  opacity: .85;
}
.bp-sponsor--leinwand .bp-sponsor-link,
.bp-sponsor--leinwand .bp-sponsor-name {
  padding: .6vh 1.2vh;
  border-radius: 8px;
  background-color: #fff;
  color: var(--bp-marine);
}
.bp-sponsor--leinwand .bp-sponsor-logo {
  max-width: 24vh;
  max-height: 6vh;
}
.bp-sponsor--leinwand .bp-sponsor-name {
  font-size: 2.4vh;
}
/* Partner (B-8): Logoband aller Partner, auf der Zuschauerseite zuunterst (umbrechend), auf der Leinwand in der
   Fusszeile in einer Zeile; passen nicht alle hinein, wechseln die Logos gruppenweise (bestplayer-leinwand.js) */
.bp-partner {
  margin-top: 1.5rem;
  text-align: center;
}
.bp-partner-titel {
  margin: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-partner-eintrag {
  transition: opacity .4s ease;
}
.bp-partner-eintrag[hidden] {
  display: none;
}
.bp-partner .bp-sponsor-logo {
  max-width: 8rem;
  max-height: 2.25rem;
}
.bp-partner--leinwand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1.5vh;
  min-width: 0;
  margin: 0 auto 0 0;
  text-align: left;
}
.bp-partner--leinwand .bp-partner-titel {
  margin: 0;
  font-size: 1.6vh;
  white-space: nowrap;
}
.bp-partner--leinwand .bp-partner-logos {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.5vh;
  min-width: 0;
  overflow: hidden;
}
.bp-partner--leinwand .bp-partner-eintrag {
  flex: none;
}
.bp-partner--leinwand .bp-partner-logos.is-wechsel .bp-partner-eintrag {
  opacity: 0;
}
.bp-partner--leinwand .bp-sponsor-link,
.bp-partner--leinwand .bp-sponsor-name {
  display: inline-flex;
  padding: .5vh 1vh;
  border-radius: 8px;
  background-color: #fff;
  color: var(--bp-marine);
}
.bp-partner--leinwand .bp-sponsor-logo {
  max-width: 20vh;
  max-height: 5vh;
}
.bp-partner .bp-sponsor-name {
  font-size: .9375rem;
  font-weight: 600;
}
/* Name mit Link: die Fläche hat schon der Link, nicht nochmals der Name */
.bp-sponsor--leinwand .bp-sponsor-link .bp-sponsor-name,
.bp-partner--leinwand .bp-sponsor-link .bp-sponsor-name {
  padding: 0;
}
.bp-partner--leinwand .bp-sponsor-name {
  font-size: 1.8vh;
}
.bp-lw-marke {
  display: flex;
  flex: none;
  align-items: center;
  gap: .5rem;
}
/* Verwaltung: Sponsorlogos sind breit, die Karten zeigen sie ganz */
/* Sponsor ohne Logo: leere Fläche statt Mannschaftswappen */
.bp-cards-sponsor .a-CardView-iconWrap:not(:has(img))::before,
.bp-cards-sponsor .a-CardView-iconWrap:not(:has(img))::after {
  content: none;
}
.bp-cards-sponsor .a-CardView-media img,
.bp-cards-sponsor .a-CardView-icon img {
  object-fit: contain;
}
.bp-sponsor-karte--N {
  opacity: .6;
}
.bp-bild-vorschau--sponsor {
  width: 12rem;
}
.bp-sponsor-status {
  margin: 0;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Startseite (B-21, start_p.seite_html): Erste Schritte (Admins), links jetzt/heute und die nächsten Spiele, rechts
 * Schnellzugriff (nur Desktop) und die letzten Spiele mit den Bestplayern und den Stimmen pro Spiel als Säulen
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-start {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
  align-items: start;
}
.bp-start-spalte {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.bp-start-teil {
  padding: 1rem 1.25rem 1.25rem;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(18, 48, 74, .08), 0 0 0 1px rgba(18, 48, 74, .06);
}
.bp-start-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .75rem;
}
.bp-start-titel {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-start-alle {
  font-size: .875rem;
  white-space: nowrap;
}
.bp-start-alle .fa {
  font-size: .75em;
}
.bp-start-hinweis {
  margin: 0 0 .5rem;
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
/* jetzt / heute */
.bp-start-jetzt--offen {
  box-shadow: 0 0 0 2px var(--bp-gold), 0 4px 14px rgba(18, 48, 74, .12);
}
.bp-start-jetzt .bp-spiel {
  box-shadow: none;
  padding: 0;
}
.bp-start-aktion {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1rem;
}
.bp-start-stimmen {
  font-weight: 700;
  white-space: nowrap;
}
.bp-start-aktion .bp-start-stimmen {
  margin-right: auto;
  font-size: 1.125rem;
}
.bp-start-leer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.bp-start-leer p {
  margin: 0;
}
/* Listen (nächste und letzte Spiele) */
.bp-start-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-start-liste > li + li {
  border-top: 1px solid var(--bp-nebel);
}
.bp-start-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .625rem 0;
  color: var(--bp-text);
  text-decoration: none;
}
.bp-start-zeile:hover .bp-start-paarung,
.bp-start-letztes:hover .bp-start-paarung {
  text-decoration: underline;
}
.bp-start-zeile .fa {
  color: var(--ut-component-text-muted-color, #5b6672);
  font-size: .75rem;
}
.bp-start-zeit {
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  white-space: nowrap;
}
.bp-start-paarung {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-start-letztes {
  display: block;
  padding: .75rem 0;
  color: var(--bp-text);
  text-decoration: none;
}
.bp-start-letztes-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
}
.bp-start-letztes-kopf .bp-start-zeit {
  grid-column: 1 / -1;
}
.bp-start-letztes-kopf .bp-start-stimmen {
  font-size: .875rem;
}
.bp-start-sieger-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: .625rem 0 0;
  padding: 0;
  list-style: none;
}
.bp-start-sieger {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}
.bp-start-sieger-bild {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}
.bp-start-sieger-bild img,
.bp-start-sieger-bild--leer::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bp-nebel);
  box-shadow: 0 0 0 2px var(--bp-badge-farbe, var(--bp-gold));
}
.bp-start-sieger-bild--leer::before {
  content: "";
  background: var(--bp-nebel) url(../img/avatar.svg) center / cover no-repeat;
}
.bp-start-sieger-nummer {
  position: absolute;
  right: -.375rem;
  bottom: -.25rem;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 .25rem;
  border: 2px solid #fff;
  border-radius: .75rem;
  background-color: var(--bp-badge-farbe, var(--bp-gold));
  color: var(--bp-badge-schrift, var(--bp-marine));
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}
.bp-start-sieger-name {
  font-weight: 600;
}
/* Stimmen pro Spiel */
.bp-start-untertitel {
  margin: 1rem 0 .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-saeulen {
  display: flex;
  align-items: flex-end;
  gap: .375rem;
  height: 7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-saeule {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.bp-saeule-balken {
  width: 100%;
  max-width: 2rem;
  border-radius: 4px 4px 0 0;
  background-color: var(--bp-gold);
}
.bp-saeule-wert {
  margin-bottom: .125rem;
  font-size: .6875rem;
  font-weight: 600;
}
.bp-saeule-datum {
  margin-top: .25rem;
  font-size: .625rem;
  color: var(--ut-component-text-muted-color, #5b6672);
  white-space: nowrap;
}
.bp-start-untertitel--erster {
  margin-top: 0;
}
.bp-saeulen + .bp-start-liste {
  margin-top: 1rem;
  border-top: 1px solid var(--bp-nebel);
}
/* Schnellzugriff */
.bp-start-schnell-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-start-schnell-knopf {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 100%;
  padding: .75rem;
  border-radius: 8px;
  background-color: var(--bp-nebel);
  color: var(--bp-text);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
.bp-start-schnell-knopf:hover {
  background-color: var(--bp-gold-hell, #f6e7b8);
  color: var(--bp-text);
}
.bp-start-schnell-knopf .fa {
  width: 1.25rem;
  text-align: center;
}
/* Erste Schritte */
.bp-start-schritte {
  margin-bottom: 1.5rem;
  box-shadow: 0 0 0 2px var(--bp-gold-hell, #f6e7b8), 0 1px 2px rgba(18, 48, 74, .08);
}
.bp-schritte {
  display: grid;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bp-schritt {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.bp-schritt-haken {
  font-size: 1.125rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-schritt--erledigt .bp-schritt-haken {
  color: var(--ut-palette-success, #2e7d32);
}
.bp-schritt--erledigt .bp-schritt-text {
  color: var(--ut-component-text-muted-color, #5b6672);
  text-decoration: line-through;
}
/* Handy: alles untereinander, ohne Schnellzugriff */
@media (max-width: 640px) {
  .bp-start {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .bp-start-spalte {
    gap: 1rem;
  }
  .bp-start-schnell {
    display: none;
  }
  .bp-start-teil {
    padding: .875rem 1rem 1rem;
  }
  .bp-start-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .125rem;
  }
  .bp-start-zeile .bp-start-zeit {
    grid-column: 1;
  }
  .bp-start-zeile .bp-start-paarung {
    grid-column: 1;
    grid-row: 2;
  }
  .bp-start-zeile .fa {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Hilfe (Seiten 9800 und 9810, B-19/B-20, wie Logenius): Texte aus Markdown (apex_markdown). Mehrere Themen einer
 * Seite als aufklappbare <details>, Tabellen mit feinen Linien
 * ------------------------------------------------------------------------------------------------------------------ */
.bp-hilfe {
  padding: 0 1rem;
  font-size: .9375rem;
  line-height: 1.5;
}
.bp-hilfe-titel {
  margin: .5rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.bp-hilfe h3 {
  margin: 1.25rem 0 .375rem;
  font-size: 1rem;
  font-weight: 600;
}
.bp-hilfe p,
.bp-hilfe ul,
.bp-hilfe ol {
  margin: 0 0 .75rem;
}
.bp-hilfe ul,
.bp-hilfe ol {
  padding-inline-start: 1.25rem;
}
.bp-hilfe li + li {
  margin-top: .25rem;
}
.bp-hilfe table {
  width: 100%;
  margin: 0 0 .75rem;
  border-collapse: collapse;
}
.bp-hilfe th,
.bp-hilfe td {
  padding: .375rem .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  text-align: start;
  vertical-align: top;
}
.bp-hilfe th {
  font-weight: 600;
}
.bp-hilfe-thema {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* eigener Pfeil rechts statt des kaum sichtbaren Dreiecks des Browsers: zeigt nach unten (zu) bzw. oben (offen) */
.bp-hilfe-thema > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.bp-hilfe-thema > summary::-webkit-details-marker {
  display: none;
}
.bp-hilfe-thema > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .15s;
}
.bp-hilfe-thema[open] > summary::after {
  transform: translateY(.1rem) rotate(-135deg);
}
.bp-hilfe-thema[open] > summary {
  padding-bottom: .25rem;
}
.bp-hilfe-thema > :last-child {
  margin-bottom: 1rem;
}
.bp-hilfe-leer {
  padding: 1rem;
}
@media (max-width: 640px) {
  .bp-hilfe {
    padding: 0;
  }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Lizenz (B-11): Dialog 54 und Hinweis auf der Startseite (Testversion bzw. gekündigt)
   ------------------------------------------------------------------------------------------------------------------ */
.bp-lizenz {
  margin: 0 0 1rem;
}
.bp-lizenz-zeile {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: .25rem 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid rgba(18, 48, 74, .08);
}
.bp-lizenz dt {
  font-weight: 700;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-lizenz dd {
  margin: 0;
}
.bp-lizenz dd ul {
  margin: 0;
  padding-left: 1.1rem;
}
.bp-lizenz-hinweis {
  margin: 0;
  font-size: .875rem;
  color: var(--ut-component-text-muted-color, #5b6672);
}
.bp-start-lizenz {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
  padding: .875rem 1.25rem;
  border-radius: 12px;
  background-color: var(--bp-gold-hell);
  color: var(--bp-marine);
}
.bp-start-lizenz > .fa {
  color: var(--bp-gold);
}
.bp-start-lizenz-text {
  flex: 1 1 16rem;
}
.bp-start-lizenz--bald {
  box-shadow: 0 0 0 2px var(--bp-gold);
}
@media (max-width: 640px) {
  .bp-lizenz-zeile {
    grid-template-columns: 1fr;
  }
}

/* B-15 Verein wechseln (Seite 59): Text über den Kacheln, der aktuelle Verein hervorgehoben */
/* Innenabstand statt margin: das Theme setzt den unteren Rand eines letzten Absatzes in der Region auf 0 */
.bp-verein-wahl-text {
  margin: 0;
  padding-bottom: 1.25rem;
}
.bp-verein-logo {
  width: 2.75rem;
  height: 2.75rem;
}
.bp-einst-kachel.bp-verein-aktuell {
  box-shadow: inset 0 0 0 2px var(--bp-gold), 0 1px 3px rgba(18, 48, 74, .12);
}