@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-400.c26dd178864e.ttf") format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url("fonts/dm-sans-500.a165d87fb7ee.ttf") format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url("fonts/dm-sans-600.e783b4d0a9b7.ttf") format('truetype'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url("fonts/dm-sans-700.411346eea6cd.ttf") format('truetype'); }

:root {
  --farbe: #262130; --akzent: #8000ff; --akzent-dunkel: #6a00d6; --magenta: #ed3ee4;
  --flaeche: #f8f7fb; --linie: #e1dce9; --zart: #eee8f6; --gedaempft: #655c70;
  --bs-body-font-family: 'DM Sans', Arial, sans-serif; --bs-body-color: #262130; --bs-body-bg: #f8f7fb;
  --bs-secondary-color: #655c70; --bs-link-color: #8000ff; --bs-link-hover-color: #6a00d6;
}
body { background: var(--flaeche); color: var(--farbe); }
.text-muted { color: var(--gedaempft) !important; }
.navbar-marke { background: #fff; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--magenta), var(--akzent)) 1; }
.navbar-marke .navbar-brand img { display: block; }
.navbar-marke .nav-link { color: var(--farbe); font-weight: 500; }
.navbar-marke .nav-link.aktiv, .navbar-marke .nav-link:hover { color: var(--akzent); }
.navbar-marke .navbar-toggler { color: var(--farbe); font-size: 1.4rem; }
.navbar-marke .symbol { color: var(--gedaempft); font-size: 1.1rem; }
.navbar-marke .symbol:hover { color: var(--akzent); }
a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }
.btn-dark { --bs-btn-bg: var(--akzent); --bs-btn-border-color: var(--akzent); --bs-btn-hover-bg: var(--akzent-dunkel);
  --bs-btn-hover-border-color: var(--akzent-dunkel); --bs-btn-active-bg: var(--akzent-dunkel); --bs-btn-active-border-color: var(--akzent-dunkel);
  --bs-btn-disabled-bg: var(--akzent); --bs-btn-disabled-border-color: var(--akzent); }
.btn-outline-dark { --bs-btn-color: var(--akzent); --bs-btn-border-color: var(--akzent); --bs-btn-hover-bg: var(--akzent);
  --bs-btn-hover-border-color: var(--akzent); --bs-btn-active-bg: var(--akzent-dunkel); --bs-btn-active-border-color: var(--akzent-dunkel); }
.form-control:focus, .form-select:focus { border-color: var(--akzent); box-shadow: 0 0 0 .2rem rgba(128,0,255,.18); }
.form-check-input:checked { background-color: var(--akzent); border-color: var(--akzent); }
main.container { padding-top: 1.5rem; padding-bottom: 3rem; }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: .6rem; }
.karte-kopf { padding: .7rem 1rem; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; }
.karte-inhalt { padding: .9rem 1rem; }
.list-group-item { border-color: var(--linie); }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1rem; align-items: start; overflow-x: auto; }
.spalte { background: var(--zart); border-radius: .6rem; padding: .6rem; min-height: 14rem; }
.spalte h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gedaempft); margin: .2rem .3rem .6rem; display: flex; justify-content: space-between; }
.spalte-liste { min-height: 8rem; }
.aufgabe { background: #fff; border-radius: .45rem; padding: .6rem .7rem; margin-bottom: .55rem; box-shadow: 0 1px 2px rgba(38,33,48,.10); cursor: grab; border-left: 4px solid #b9b0c6; }
.aufgabe[data-status=wartet] { border-left-color: #f59e0b; }
.aufgabe[data-status=bearbeitung] { border-left-color: var(--akzent); }
.aufgabe[data-status=erledigt] { border-left-color: #10b981; opacity: .7; }
.aufgabe .titel { font-weight: 600; }
.aufgabe .meta { font-size: .78rem; color: var(--gedaempft); }
.aufgabe .ueberfaellig { color: #dc2626; font-weight: 600; }
.person { display: inline-block; background: var(--zart); color: var(--akzent-dunkel); border-radius: 1rem; padding: 0 .55rem; font-size: .72rem; font-weight: 600; }
.sortable-ghost { opacity: .35; }
.sortable-chosen { cursor: grabbing; }
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle th { font-size: .78rem; text-transform: uppercase; color: var(--gedaempft); font-weight: 600; }