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; }

/* Fusszeile fix am unteren Bildschirmrand (Hoehe haelt ein kleines Skript in base.html als Seitenabstand frei) */
#seitenfuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-top: 1px solid rgba(20, 20, 40, .12); line-height: 1.35;
}
body { padding-bottom: 4.5rem; }   /* Rueckfall ohne JavaScript */
@media print { #seitenfuss { position: static; } body { padding-bottom: 0 !important; } }

/* Easter Eggs: Blaulicht (Konami-Code), Wasserstrahl (Klick auf die Versionsnummer), Hinweis */
.ei-hinweis { position: fixed; top: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 3000; background: #1c1c1c; color: #fff;
  padding: .6rem 1.2rem; border-radius: 2rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); font-weight: 600; }
.ei-blaulicht { position: fixed; inset: 0 0 auto 0; height: .6rem; z-index: 2999; pointer-events: none;
  background: linear-gradient(90deg, #0d6efd 50%, #fff 50%); background-size: 200% 100%; animation: ei-blau .5s steps(2) infinite; }
@keyframes ei-blau { to { background-position: -200% 0; } }
.ei-tropfen { position: fixed; top: -2rem; width: .5rem; height: 1.2rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #4dabf7; opacity: .85; z-index: 2998; pointer-events: none; animation: ei-fall 1.6s ease-in forwards; }
@keyframes ei-fall { to { transform: translateY(110vh); } }
@media (prefers-reduced-motion: reduce) { .ei-blaulicht, .ei-tropfen { animation: none; display: none; } }

/* Menue "Verwaltung": ein Untermenue je Thema */
.menue-unter { min-width: 15rem; }
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-toggle::after { border: 0; content: "\203A"; float: right; vertical-align: baseline; line-height: 1; font-size: 1.1rem; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -.5rem; min-width: 16rem; }
@media (min-width: 992px) { .dropdown-submenu:hover > .dropdown-menu { display: block; } }
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu { position: static; margin: 0 0 0 .75rem; border: 0; box-shadow: none; }
}

/* Navigation links auf allen Einstellungsseiten */
.einstellungen-nav { position: sticky; top: .75rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.einstellungen-nav summary { cursor: pointer; padding: .55rem .9rem; font-weight: 600; list-style: none; }
.einstellungen-nav summary::-webkit-details-marker { display: none; }
.einstellungen-nav summary::after { content: "\25B8"; float: right; opacity: .6; transition: transform .15s; }
.einstellungen-nav details[open] > summary::after { transform: rotate(90deg); }
.einstellungen-nav details + details { border-top: 1px solid rgba(20, 20, 40, .08); }
.einstellungen-nav .list-group-item { border: 0; padding: .3rem .9rem .3rem 2.1rem; font-size: .92rem; }
.einstellungen-nav .list-group-item.active { background: var(--bs-primary); color: #fff; }
@media (max-width: 991.98px) { .einstellungen-nav { position: static; max-height: none; } }

/* Detailseiten mit Vorschau: Vorschau rechts neben den Feldern, laeuft beim Scrollen mit und nutzt die Fensterhoehe */
.vorschau-sticky { position: sticky; top: .75rem; }
.vorschau-pdf { width: 100%; height: calc(100vh - 8rem); min-height: 480px; border: 0; }
@media (max-width: 1199.98px) { .vorschau-sticky { position: static; } .vorschau-pdf { height: 75vh; } }