body {
  background-color: #eef1f5;
  background-image:
    radial-gradient(circle, rgba(20, 20, 40, .05) 1px, transparent 1px),
    linear-gradient(180deg, #f2f4f8 0%, #eef1f5 420px, #eef1f5 100%);
  background-size: 22px 22px, auto;
  background-attachment: fixed;
}
.navbar-brand { font-weight: 600; }
/* Navigationsleiste in zwei Baendern: oben Logo/Vereinsname in der Hauptfarbe, darunter das Menue in der
   zweiten Farbe weitergefuehrt und mit einer Akzentlinie abgeschlossen. navbar-expand-lg erzwingt ab dem
   lg-Breakpoint sonst flex-wrap:nowrap (fuer die klassische einzeilige Navbar) - das wuerde unsere beiden
   Baender nebeneinander statt untereinander zwingen, deshalb hier wieder auf wrap zurueckgesetzt. */
/* Schatten sitzt am gesamten <nav> (unterer Abschluss gegen die Seite), nicht an den einzelnen Baendern -
   sonst entsteht eine sichtbare "Kante" zwischen Logo- und Menue-Band. */
.navbar-split { flex-wrap: wrap; box-shadow: 0 3px 16px rgba(0, 0, 0, .22); }
.navbar-top {
  background-image: linear-gradient(180deg, var(--bs-primary), var(--bs-primary-2));
}
.navbar-menu {
  background-color: var(--bs-primary-2);
  background-image: none;
  border-bottom: 3px solid var(--bs-akzent2);
}
/* Dezenter Schriftschatten fuer mehr Kontur - gerade bei mittelhellen/gesaettigten Farben (z. B. Blau) wirkt
   reiner Schwarz/Weiss-Text ohne das sonst manchmal zu flau. */
.navbar-split .navbar-dark .navbar-nav .nav-link, .navbar-split .navbar-dark .navbar-brand,
.navbar-split .navbar-dark .navbar-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.navbar-split .navbar-light .navbar-nav .nav-link, .navbar-split .navbar-light .navbar-brand,
.navbar-split .navbar-light .navbar-text {
  text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------------- Dashboard-Begrüßung */
.dash-hero {
  background-image: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-2));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
.dash-hero-glow {
  position: absolute; top: -50%; right: -8%; width: 55%; height: 200%;
  background: radial-gradient(circle, var(--bs-akzent2) 0%, transparent 70%);
  opacity: .22; pointer-events: none;
}
.dash-hero-icon {
  position: absolute; right: 1.5rem; bottom: -1.2rem; font-size: 8rem; opacity: .12; pointer-events: none;
}
.dash-dot {
  width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-2));
}
.kachel-griff { cursor: grab; opacity: .55; }
.kachel-griff:active { cursor: grabbing; }

/* ---------------------------------------------------------------- Karten */
.card {
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: .9rem;
  box-shadow: 0 4px 18px rgba(20, 20, 40, .08), 0 1px 3px rgba(20, 20, 40, .05);
  transition: transform .15s ease, box-shadow .15s ease;
  /* Ohne das "blutet" eine eckige Kopf-/Fusszeile (oder ein farbiger list-group-item ganz oben/unten) an
     der abgerundeten Kartenecke minimal ueber den Rand hinaus - sichtbar als kleine eckige Kerbe. */
  overflow: hidden;
}
/* Kartenkopf/Icon-Badge/Tabelle nutzen einheitlich die Hauptfarbe (ueber diese CSS-Variable) - bewusst keine
   pro Karte wechselnde Farbe mehr, damit mehrere Karten/Tabellen untereinander einheitlich aussehen. */
.card {
  --card-akzent: var(--bs-primary);
  --card-akzent-dunkel: var(--bs-primary-dunkel);
}
.card-header {
  border-radius: .9rem .9rem 0 0 !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-akzent) 16%, white),
                              color-mix(in srgb, var(--card-akzent) 5%, white));
}
.card-header .bi:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: .95rem; margin-right: .1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-akzent) 24%, white),
                              color-mix(in srgb, var(--card-akzent) 12%, white));
  color: var(--card-akzent-dunkel) !important;
}
.card-footer { border-radius: 0 0 .9rem .9rem !important; }
/* Tabellen als erstes/letztes Element einer Karte (ohne Kartenkopf/Fusszeile davor/danach) sollen die
   jeweilige Kartenrundung uebernehmen statt mit eckigen Ecken ueber den abgerundeten Kartenrand
   hinauszuragen. overflow-x bleibt erhalten, damit breite Tabellen weiterhin horizontal scrollbar sind. */
.card > .table-responsive, .card > table { overflow-y: hidden; }
.card > .table-responsive:first-child, .card > table:first-child {
  border-radius: calc(.9rem - 1px) calc(.9rem - 1px) 0 0;
}
.card > .table-responsive:last-child, .card > table:last-child {
  border-radius: 0 0 calc(.9rem - 1px) calc(.9rem - 1px);
}
.card > .table-responsive:only-child, .card > table:only-child {
  border-radius: calc(.9rem - 1px);
}
a.text-reset .card:hover, .card.card-klickbar:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--bs-primary) 16%, transparent), 0 3px 8px rgba(20, 20, 40, .08);
}

/* ---------------------------------------------------------------- Kennzahlen (Dashboard) */
.card-kennzahl {
  border-left: 4px solid var(--bs-primary);
  border-left-color: color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
.card-kennzahl .zahl { font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #1f2937; letter-spacing: -.01em; }
.card-kennzahl .text-muted .bi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-right: .4rem; border-radius: 50%; font-size: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 18%, white),
                              color-mix(in srgb, var(--bs-primary-2) 12%, white));
  /* dunklere Stufe statt der rohen Akzentfarbe - bleibt so auch bei hellen Akzentfarben (z. B. Gelb) lesbar */
  color: var(--bs-primary-dunkel); vertical-align: middle;
}
.card-kennzahl.border-danger { border-left-color: var(--bs-danger) !important; }
.card-kennzahl.border-danger .bi { background: color-mix(in srgb, var(--bs-danger) 14%, white); color: var(--bs-danger); }
.card-kennzahl.border-warning { border-left-color: var(--bs-warning) !important; }
.card-kennzahl.border-warning .bi { background: color-mix(in srgb, var(--bs-warning) 20%, white); color: #92650a; }

/* ---------------------------------------------------------------- Schaltflächen */
/* Generelle Tiefe fuer alle Buttons (Schatten + dezentes Hochglanz-Highlight oben) statt der ganz flachen
   Bootstrap-Standardoptik - bewusst ohne Farbverlauf in der Fuellung selbst. */
.btn {
  box-shadow: 0 2px 5px rgba(20, 20, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(20, 20, 40, .2), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2); }
.btn-primary {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--bs-primary) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------------- Tabellen */
table.tabelle td, table.tabelle th { vertical-align: middle; }
/* Gleicher "Label"-Stil wie die Stammdaten-Sidebar (klein, Grossbuchstaben, dezent) statt normalem
   Fliesstext in Zellenform - macht Tabellenkoepfe eindeutig als Spaltenueberschrift erkennbar. Bewusst immer
   in der Hauptfarbe statt der pro Karte wechselnden Kartenfarbe - mehrere Tabellen untereinander auf einer
   Seite sollen einheitlich aussehen, auch wenn ihre Kartenkoepfe (dekorativ) unterschiedliche Farben haben. */
.table-light, table.tabelle thead th {
  background-color: color-mix(in srgb, var(--bs-primary) 10%, white) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--bs-primary-dunkel);
  border-bottom-width: 2px;
}
.table-hover > tbody > tr:hover > * {
  background-color: color-mix(in srgb, var(--bs-primary) 6%, white);
}

/* ---------------------------------------------------------------- Überschriften */
main h3 {
  font-size: 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid color-mix(in srgb, var(--bs-akzent2) 55%, transparent);
  display: inline-block;
}

/* ---------------------------------------------------------------- Formulare / Sidebar-Felder */
.form-check-input { margin-right: .35rem; }
dl.felder dt { font-weight: 500; color: #555; }
.kopf-aktionen form { display: inline; }

.felder-sidebar dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: #8a94a6;
  margin-bottom: .1rem;
}
.felder-sidebar dd {
  margin-bottom: .9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- Farbpaletten (siehe farbpaletten.js) */
.farbpaletten-reihe { display: inline-flex; gap: .35rem; margin: .4rem 0 0 .1rem; vertical-align: middle; }
.farbpaletten-swatch {
  width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25); cursor: pointer;
}
.farbpaletten-swatch:hover, .farbpaletten-swatch:focus-visible { transform: scale(1.15); outline: none; }