/* RCV-Farben für die Vuexy-Oberfläche. Wird nach vendor/css/core.css geladen und überschreibt nur Variablen und wenige Regeln,
   das Vuexy-Paket selbst bleibt unverändert. Vereinsrot #c4161f für Texte und Knöpfe (WCAG AA auf Weiß),
   Website-Rot #ec2727 nur für große Flächen. */

:root,
[data-bs-theme=light] {
  --rcv-rot: #c4161f;
  --rcv-rot-dunkel: #a31717;
  --rcv-rot-hell: #ec2727;
  --rcv-rot-tint: #fdecec;
  --rcv-weiss: #ffffff;
  --rcv-anthrazit: #1f1f23;
  --rcv-anthrazit-2: #35383c;
  --rcv-text: #1f1f23;
  --rcv-text-leise: #5b5e63;
  --rcv-backstein: #8e3b2f;
  --rcv-sandstein: #e8dcc8;
  --rcv-sandstein-hell: #f7f2e9;
  --rcv-linie: #ecebe6;
  --rcv-erfolg: #1e7a3c;
  --rcv-warnung: #8a5a00;
  --rcv-radius: 16px;
  --rcv-schatten: 0 .1875rem .75rem 0 rgba(31, 31, 35, .1);

  --bs-primary: #c4161f;
  --bs-primary-rgb: 196, 22, 31;
  --bs-primary-contrast: #fff;
  --bs-primary-text-emphasis: #4e090c;
  --bs-primary-bg-subtle: #fdecec;
  --bs-primary-border-subtle: #f3c4c6;
  --bs-success: #1e7a3c;
  --bs-success-rgb: 30, 122, 60;
  --bs-link-color: #a31717;
  --bs-link-color-rgb: 163, 23, 23;
  --bs-link-hover-color: #7f1010;
  --bs-link-hover-color-rgb: 127, 16, 16;
  --bs-body-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  --bs-font-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
  --bs-body-bg: #f6f5f2;
  --bs-body-bg-rgb: 246, 245, 242;
  --bs-body-color: #4a4c51;
  --bs-heading-color: #1f1f23;
  /* Nebentexte (text-body-secondary, form-text): Vuexys #acaab1 ist auf Weiß unter WCAG AA, #6d6a75 erreicht gut 5:1 */
  --bs-secondary-color: #6d6a75;
  --bs-secondary-color-rgb: 109, 106, 117;
  --bs-border-color: #e6e3dc;
  --bs-focus-ring-color: rgba(196, 22, 31, .25);
}

/* Seitenmenü dunkel wie die Fußzeile der Vereinswebsite */
[data-semidark-menu=true] .layout-menu,
.layout-menu[data-bs-theme=dark] {
  --bs-primary: #c4161f;
  --bs-primary-rgb: 196, 22, 31;
  --bs-primary-contrast: #fff;
  --bs-menu-bg: #1f1f23;
  --bs-menu-bg-rgb: 31, 31, 35;
  --bs-menu-color: #e1e1e6;
  --bs-menu-color-rgb: 225, 225, 230;
  --bs-menu-hover-bg: rgba(255, 255, 255, .07);
  --bs-menu-hover-color: #fff;
  --bs-menu-active-bg: #c4161f;
  --bs-menu-active-color: #fff;
  --bs-menu-sub-active-bg: rgba(255, 255, 255, .09);
  --bs-menu-sub-active-color: #fff;
  --bs-menu-header-color: #a8a8b0;
}
.layout-menu .app-brand { height: auto; min-height: 64px; padding-block: .9rem; }
.layout-menu .app-brand-logo img { height: 42px; width: auto; }
.layout-menu .app-brand-text { color: #fff; font-family: 'Lato', sans-serif; font-weight: 900; font-size: .95rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; margin-inline-start: .75rem; }
.layout-menu .menu-header-text { letter-spacing: .1em; }
.layout-menu .menu-item.active > .menu-link .rcv-menue-zahl { background: #fff !important; color: #a31717; }

/* Schrift */
body { font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title, .modal-title { font-family: 'Lato', Helvetica, Arial, sans-serif; }
h1, .h1 { font-weight: 900; font-size: 1.6rem; line-height: 1.25; } /* Vuexy gibt h1 eine feste Zeilenhöhe von 4,25 rem für seine große Schrift; bei unserer kleineren Schrift ließ das zweizeilige Überschriften weit auseinanderklaffen. */
h2, .h2 { font-weight: 900; font-size: 1.3rem; }
h3, .h3 { font-weight: 700; font-size: 1.1rem; line-height: 1.3; } /* wie bei h1: Vuexys feste Zeilenhöhe 2,625 rem passt nicht zu unserer kleineren Schrift. */
.card-header { font-family: 'Lato', sans-serif; font-weight: 700; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; } /* Vuexy und Bootstrap setzen outline: 0, der Fokus wäre sonst nicht von Ruhe zu unterscheiden (WCAG 2.4.7) */
/* Designprüfung Muster 6 (P9): Auf dem dunklen Seitenmenü hat das Blau des Fokusrings zu wenig Kontrast (etwa 2,5:1), Weiß ist deutlich */
[data-semidark-menu=true] .layout-menu :focus-visible, .layout-menu[data-bs-theme=dark] :focus-visible { outline-color: #fff; }
/* Designprüfung Muster 6 (P9): Graue Nebentexte mit text-secondary bekommen denselben Ton wie text-body-secondary (gut 5:1 statt 3,9:1 auf Weiß) */
.text-secondary { color: var(--bs-secondary-color) !important; }

/* Knöpfe: Hover und Aktiv dunkler im Vereinsrot */
.btn-primary { --bs-btn-hover-bg: #a31217; --bs-btn-hover-border-color: #a31217; --bs-btn-active-bg: #8c0f14; --bs-btn-active-border-color: #8c0f14; }
.btn-danger { --bs-btn-bg: #c4161f; --bs-btn-border-color: #c4161f; --bs-btn-hover-bg: #a31217; --bs-btn-hover-border-color: #a31217; }

/* RCV-Bausteine sehen aus wie Vuexy-Karten */
.kpi, .zeitleiste { border: 0; border-radius: var(--bs-card-border-radius, .375rem); box-shadow: var(--bs-box-shadow, var(--rcv-schatten)); background: var(--bs-paper-bg, #fff); }
.kpi { padding: 1.25rem 1.25rem; }
.hero { border-radius: var(--bs-card-border-radius, .375rem); }
a.zl-text:hover strong { color: var(--rcv-rot); }
.text-uppercase::placeholder { text-transform: none; }
.list-group-item.active { --bs-list-group-active-bg: var(--rcv-rot-tint); --bs-list-group-active-color: var(--rcv-rot); --bs-list-group-active-border-color: var(--rcv-rot-tint); }

/* Kopfleiste: Suche, Einstellungen, Glocke */
.rcv-navsuche input { min-width: 0; }
.rcv-kopfmenue { min-width: 320px; max-width: 92vw; }
.rcv-kopfmenue-liste { max-height: 60vh; overflow-y: auto; }
.rcv-kopfmenue .dropdown-item.active { background: var(--rcv-rot-tint); color: var(--rcv-rot); }

/* Bereichsreiter als Pillen */
.bereichstabs { scrollbar-width: none; }
.bereichstabs .nav-link { border-radius: 99px; font-weight: 600; font-size: .9rem; padding: .45rem 1rem; }
.bereichstabs .nav-link:not(.active) { background: var(--bs-paper-bg, #fff); color: var(--bs-heading-color); box-shadow: var(--bs-box-shadow-xs); }

/* Lange Texte sprengen am Handy nicht die Seitenbreite */
.content-wrapper main { overflow-wrap: anywhere; }

/* Tab-Leiste unten am Handy (Designregel des RCV), das Seitenmenü bleibt über die Kopfleiste erreichbar */
.rcv-tabs { display: none; }
@media (max-width: 991.98px) {
  .layout-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Fest am unteren Rand wie eine Tab-Leiste in iOS (Wunsch Jonas 07.11.2026), nicht schwebend */
  .rcv-tabs { display: flex; position: fixed; inset: auto 0 0 0; z-index: 1080; justify-content: space-around; border-radius: 0;
    padding: .3rem max(.3rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.3rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(20, 20, 30, .1); }
  .rcv-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: .35rem .1rem; border-radius: 18px;
    color: #6f6f78; text-decoration: none; font-size: .68rem; font-weight: 700; }
  .rcv-tabs a i { font-size: 1.3rem; }
  .rcv-tabs a.aktiv { color: var(--rcv-rot); background: var(--rcv-rot-tint); }
  .layout-menu-expanded .rcv-tabs { display: none; }
  /* Am Handy ersetzt "Mehr" in der Tab-Leiste das Seitenmenü, der Menü-Knopf oben entfällt (Jonas 07.11.2026) */
  #layout-navbar .layout-menu-toggle { display: none !important; }
  .content-footer { display: none; }
  h1, .h1 { font-size: 1.35rem; }
}
@media (max-width: 575.98px) {
  .badge { white-space: normal; text-align: left; }
  .form-control.w-auto { max-width: 100%; }
  .rcv-navsuche input::placeholder { font-size: .85rem; }
}

/* Menü scrollt selbst (ohne perfect-scrollbar aus dem Vuexy-Paket) */
.layout-menu .menu-inner { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* Abstand unter der festen Kopfleiste (setzt sonst helpers.js aus dem Vuexy-Paket), oberflaeche.js misst genau nach */
.layout-navbar-fixed .layout-page { padding-block-start: var(--rcv-kopf-hoehe, 4.5rem); }
.hero h1 { line-height: 1.1; }
.rollenknopf .avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--rcv-rot-tint); color: var(--rcv-rot); font-weight: 700; }

/* Vuexy schreibt Reiter groß (text-transform: capitalize). Im Deutschen falsch ("Teams Und Rechte"), deshalb aus. */
.nav-tabs .nav-link, .nav-pills .nav-link { text-transform: none; }

/* Einklappbarer Filter (UX-16): am Handy zu, ab 768 px offen (oberflaeche.js) */
details.rcv-filter > summary { cursor: pointer; list-style-position: inside; }
details.rcv-filter > summary:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; border-radius: .375rem; }

/* Sprunglink "Zum Inhalt" (UX-18): nur bei Tastaturfokus sichtbar */
.rcv-sprunglink:focus { position: fixed; z-index: 2000; top: .5rem; left: .5rem; padding: .5rem 1rem; background: #fff; color: var(--rcv-rot); border-radius: .375rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); }