/* =========================================================================
   Juka Design System
   Eigenes Theme über Bootstrap 5.3. Bootstrap bleibt als Verhaltensschicht
   (Dropdown, Collapse, Modal, Tabs) erhalten, das Aussehen kommt von hier.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design-Tokens
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Flächen */
  --jk-bg: #f2efe7;
  --jk-surface: #ffffff;
  --jk-surface-2: #faf8f3;
  --jk-surface-3: #f0ece3;
  --jk-border: #e3ddd0;
  --jk-border-strong: #d3ccbb;

  /* Text */
  --jk-text: #1a231f;
  --jk-text-soft: #4d5a54;
  --jk-text-muted: #79857e;

  /* Marke */
  --jk-primary: #1d5c4b;
  --jk-primary-hover: #164a3c;
  --jk-primary-soft: #e2efea;
  --jk-primary-contrast: #ffffff;

  --jk-accent: #c26f16;
  --jk-accent-soft: #fbeeda;

  /* Status */
  --jk-danger: #b23f2b;
  --jk-danger-soft: #fbe5e0;
  --jk-success: #1c7a54;
  --jk-success-soft: #dff0e7;
  --jk-warning: #a3730d;
  --jk-warning-soft: #fbf0d6;
  --jk-info: #1c6580;
  --jk-info-soft: #ddeef4;

  /* Seitenleiste – in beiden Modi dunkel */
  --jk-rail: #122620;
  --jk-rail-2: #1a332b;
  --jk-rail-text: #c3d2cb;
  --jk-rail-text-strong: #f4f2ea;
  --jk-rail-border: rgba(255, 255, 255, .09);

  /* Geometrie */
  --jk-radius: 14px;
  --jk-radius-sm: 10px;
  --jk-radius-lg: 20px;
  --jk-rail-w: 250px;
  --jk-topbar-h: 62px;

  /* Tiefe – warm getönt statt neutral-grau */
  --jk-shadow-sm: 0 1px 2px rgba(38, 30, 18, .05), 0 1px 3px rgba(38, 30, 18, .04);
  --jk-shadow: 0 2px 4px rgba(38, 30, 18, .04), 0 8px 20px -8px rgba(38, 30, 18, .12);
  --jk-shadow-lg: 0 10px 40px -12px rgba(38, 30, 18, .22);

  /* Typografie */
  --jk-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jk-font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --jk-bg: #0f1412;
  --jk-surface: #171e1a;
  --jk-surface-2: #1c2520;
  --jk-surface-3: #222c27;
  --jk-border: #2a3630;
  --jk-border-strong: #3a4740;

  --jk-text: #e7ebe7;
  --jk-text-soft: #b3bfb8;
  --jk-text-muted: #8c9a92;

  --jk-primary: #58b294;
  --jk-primary-hover: #6cc3a6;
  --jk-primary-soft: #18302a;
  --jk-primary-contrast: #0c1714;

  --jk-accent: #e09a45;
  --jk-accent-soft: #33261440;

  --jk-danger: #e08672;
  --jk-danger-soft: #35201c;
  --jk-success: #57b487;
  --jk-success-soft: #162b21;
  --jk-warning: #d7a949;
  --jk-warning-soft: #302713;
  --jk-info: #6cb3cd;
  --jk-info-soft: #16292f;

  --jk-rail: #0b100e;
  --jk-rail-2: #151f1b;

  --jk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --jk-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px -8px rgba(0, 0, 0, .5);
  --jk-shadow-lg: 0 10px 40px -12px rgba(0, 0, 0, .7);
}

/* -------------------------------------------------------------------------
   2. Bootstrap-Variablen auf die Tokens umbiegen
   ------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--jk-bg);
  --bs-body-color: var(--jk-text);
  --bs-body-font-family: var(--jk-font-ui);
  --bs-body-font-size: .945rem;
  --bs-body-line-height: 1.6;

  --bs-emphasis-color: var(--jk-text);
  --bs-secondary-color: var(--jk-text-muted);
  --bs-tertiary-color: var(--jk-text-muted);
  --bs-secondary-bg: var(--jk-surface-3);
  --bs-tertiary-bg: var(--jk-surface-2);

  --bs-border-color: var(--jk-border);
  --bs-border-color-translucent: var(--jk-border);
  --bs-border-radius: var(--jk-radius-sm);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--jk-radius);
  --bs-border-radius-xl: var(--jk-radius-lg);

  --bs-primary: var(--jk-primary);
  --bs-link-color: var(--jk-primary);
  --bs-link-hover-color: var(--jk-primary-hover);
  --bs-link-color-rgb: 29, 92, 75;
  --bs-heading-color: var(--jk-text);

  --bs-focus-ring-color: color-mix(in srgb, var(--jk-primary) 28%, transparent);
  --bs-focus-ring-width: 3px;
}

[data-bs-theme="dark"] {
  --bs-link-color-rgb: 88, 178, 148;
}

/* -------------------------------------------------------------------------
   3. Basis
   ------------------------------------------------------------------------- */
body {
  font-family: var(--jk-font-ui);
  background-color: var(--jk-bg);
  color: var(--jk-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .jk-display {
  font-family: var(--jk-font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--jk-text);
}

h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Zahlen immer mit gleicher Laufweite – Beträge sollen untereinander fluchten */
td, th, .money, .jk-stat__value, .saldo-positiv, .saldo-negativ,
input[type="number"], .table {
  font-variant-numeric: tabular-nums;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jk-primary) 45%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--jk-accent-soft);
  color: var(--jk-text);
}

/* Saldo-Farben (werden in vielen Templates verwendet) */
.saldo-negativ { color: var(--jk-danger); font-weight: 600; }
.saldo-positiv { color: var(--jk-success); font-weight: 600; }

/* -------------------------------------------------------------------------
   4. App-Shell: Seitenleiste + Kopfzeile + Inhalt
   ------------------------------------------------------------------------- */
.jk-shell {
  min-height: 100vh;
}

/* --- Seitenleiste --- */
.jk-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--jk-rail-w);
  background: var(--jk-rail);
  border-right: 1px solid var(--jk-rail-border);
  display: flex;
  flex-direction: column;
  z-index: 1045;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.jk-rail__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: var(--jk-topbar-h);
  padding: 0 1.15rem;
  color: var(--jk-rail-text-strong);
  text-decoration: none;
  flex: 0 0 auto;
}

.jk-rail__brand:hover { color: var(--jk-rail-text-strong); }

.jk-rail__mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--jk-accent), #a85c11);
  color: #fff;
  font-family: var(--jk-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.jk-rail__wordmark {
  font-family: var(--jk-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.jk-rail__sub {
  display: block;
  font-family: var(--jk-font-ui);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jk-rail-text);
  opacity: .65;
}

.jk-rail__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .5rem .7rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.jk-rail__nav::-webkit-scrollbar { width: 8px; }
.jk-rail__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: 99px;
}

.jk-rail__section {
  padding: 1.15rem .7rem .35rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--jk-rail-text);
  opacity: .55;
}

.jk-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .58rem .7rem;
  margin-bottom: .12rem;
  border-radius: var(--jk-radius-sm);
  color: var(--jk-rail-text);
  text-decoration: none;
  font-size: .895rem;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}

.jk-rail__link:hover {
  background: var(--jk-rail-2);
  color: var(--jk-rail-text-strong);
}

.jk-rail__link.is-active {
  background: var(--jk-rail-2);
  color: var(--jk-rail-text-strong);
  font-weight: 600;
}

/* Aktiv-Markierung: schmaler Akzentstrich links */
.jk-rail__link.is-active::before {
  content: "";
  position: absolute;
  left: -.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.35rem;
  border-radius: 0 3px 3px 0;
  background: var(--jk-accent);
}

.jk-rail__link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .85;
}

.jk-rail__link.is-active svg { opacity: 1; }

.jk-rail__badge {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .1rem .4rem;
  border-radius: 99px;
  background: var(--jk-accent);
  color: #1b1206;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

.jk-rail__foot {
  flex: 0 0 auto;
  padding: .85rem 1rem;
  border-top: 1px solid var(--jk-rail-border);
  font-size: .72rem;
  color: var(--jk-rail-text);
  opacity: .6;
}

/* --- Kopfzeile --- */
.jk-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--jk-topbar-h);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--jk-bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--jk-border);
}

.jk-topbar__spacer { flex: 1 1 auto; }

.jk-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius-sm);
  background: var(--jk-surface);
  color: var(--jk-text-soft);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.jk-iconbtn:hover {
  background: var(--jk-surface-3);
  color: var(--jk-text);
  border-color: var(--jk-border-strong);
}

.jk-iconbtn svg { width: 18px; height: 18px; }

/* Themenumschalter: zeigt jeweils das Symbol des Zielmodus */
[data-bs-theme="light"] .jk-icon--moon,
:root:not([data-bs-theme="dark"]) .jk-icon--moon { display: block; }
[data-bs-theme="light"] .jk-icon--sun,
:root:not([data-bs-theme="dark"]) .jk-icon--sun { display: none; }
[data-bs-theme="dark"] .jk-icon--moon { display: none; }
[data-bs-theme="dark"] .jk-icon--sun { display: block; }

/* Benutzer-Chip */
.jk-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .7rem .3rem .35rem;
  border: 1px solid var(--jk-border);
  border-radius: 99px;
  background: var(--jk-surface);
  color: var(--jk-text);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.jk-user:hover {
  border-color: var(--jk-border-strong);
  background: var(--jk-surface-2);
  color: var(--jk-text);
}

.jk-user::after { display: none; }

.jk-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--jk-primary-soft);
  color: var(--jk-primary);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  flex: 0 0 auto;
}

.jk-user__meta { line-height: 1.15; text-align: left; }
.jk-user__name { font-size: .84rem; font-weight: 600; }
.jk-user__role {
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--jk-text-muted);
}

/* --- Inhaltsbereich --- */
.jk-main {
  margin-left: var(--jk-rail-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.jk-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 4rem;
}

/* Mobile: Seitenleiste als Schublade */
.jk-rail__scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 13, .45);
  backdrop-filter: blur(2px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

@media (max-width: 991.98px) {
  .jk-rail { transform: translateX(-100%); box-shadow: var(--jk-shadow-lg); }
  .jk-main { margin-left: 0; }
  body.jk-rail-open .jk-rail { transform: translateX(0); }
  body.jk-rail-open .jk-rail__scrim { opacity: 1; visibility: visible; }
  body.jk-rail-open { overflow: hidden; }
}

@media (min-width: 992px) {
  .jk-rail__scrim { display: none; }
  .jk-burger { display: none !important; }
}

/* -------------------------------------------------------------------------
   5. Seitenkopf
   ------------------------------------------------------------------------- */
.jk-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.jk-pagehead h1,
.jk-pagehead .h4 {
  font-family: var(--jk-font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin: 0;
}

.jk-pagehead__sub {
  color: var(--jk-text-muted);
  font-size: .875rem;
  margin-top: .2rem;
}

/* Bestehende Templates nutzen <h1 class="h4"> als Seitentitel – aufwerten */
.jk-content > h1,
.jk-content > .d-flex h1,
.jk-content > .row h1 {
  font-family: var(--jk-font-display);
}

.jk-content h1.h4 {
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Bestehende Seitenköpfe (Titel + Aktionsknöpfe) etwas luftiger absetzen */
.jk-content > h1 { margin-bottom: 1.3rem; }
.jk-content > .d-flex:has(> h1) { margin-bottom: 1.3rem !important; }

.jk-content h2.h5 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 2rem;
  margin-bottom: .85rem;
}

/* Filter-/Aktionsleiste über Listen */
.jk-toolbar {
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius);
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--jk-shadow-sm);
}

.jk-toolbar .form-label { margin-bottom: .25rem; }

/* -------------------------------------------------------------------------
   6. Karten
   ------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--jk-surface);
  --bs-card-border-color: var(--jk-border);
  --bs-card-border-radius: var(--jk-radius);
  --bs-card-inner-border-radius: calc(var(--jk-radius) - 1px);
  --bs-card-spacer-y: 1.15rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-bg: var(--jk-surface-2);
  box-shadow: var(--jk-shadow-sm);
}

.card-header {
  border-bottom-color: var(--jk-border);
  font-weight: 600;
  letter-spacing: -.01em;
}

.card .text-uppercase.small,
.jk-eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jk-text-muted);
}

/* Symbol in einer Rubrik-Überschrift etwas größer als die Versalien */
.jk-eyebrow svg {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -.35em;
}

/* -------------------------------------------------------------------------
   7. Kennzahlen-Kacheln (Dashboard)
   ------------------------------------------------------------------------- */
.jk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.jk-stat {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius);
  box-shadow: var(--jk-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}

.jk-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--jk-shadow);
}

/* Farbiger Akzentstrich am oberen Rand */
.jk-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--jk-stat-accent, var(--jk-primary));
  opacity: .85;
}

.jk-stat--danger  { --jk-stat-accent: var(--jk-danger); }
.jk-stat--success { --jk-stat-accent: var(--jk-success); }
.jk-stat--accent  { --jk-stat-accent: var(--jk-accent); }
.jk-stat--info    { --jk-stat-accent: var(--jk-info); }

.jk-stat__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jk-text-muted);
  margin-bottom: .55rem;
}

.jk-stat__label svg { width: 15px; height: 15px; opacity: .7; }

.jk-stat__value {
  font-family: var(--jk-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--jk-text);
}

.jk-stat__value--danger  { color: var(--jk-danger); }
.jk-stat__value--success { color: var(--jk-success); }
.jk-stat__value--info    { color: var(--jk-info); }

.jk-stat__hint {
  margin-top: .3rem;
  font-size: .76rem;
  color: var(--jk-text-muted);
}

/* -------------------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--jk-radius-sm);
  --bs-btn-padding-y: .48rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .12s ease, background-color .15s ease,
              border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:active { transform: translateY(1px); }

/* Grundgröße für ALLE Symbole. Ohne diese Regel fällt ein SVG ohne
   width/height auf seine Ersatzgröße zurück und wird riesig – die
   Regeln weiter unten sind nur kontextbezogene Feinabstimmungen. */
.jk-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  flex: 0 0 auto;
}

/* Symbole in Schaltflächen – skalieren mit der Schriftgröße mit */
.btn svg {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.19em;
  flex: 0 0 auto;
}

/* Reine Symbolschaltflächen etwas größer und quadratisch */
.btn > svg:only-child {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -.24em;
}

.btn:has(> svg:only-child) {
  padding-inline: .55rem;
  line-height: 1;
}

.btn-sm:has(> svg:only-child) { padding-inline: .45rem; }

/* Symbole in Textlinks und Listeneinträgen */
a > svg, .jk-inline-icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.19em;
  flex: 0 0 auto;
}

/* Symbol in einem Statuszeichen (z. B. "bezahlt" / "offen") */
.badge svg {
  width: .95em;
  height: .95em;
  vertical-align: -.16em;
}

.btn-sm {
  --bs-btn-padding-y: .34rem;
  --bs-btn-padding-x: .72rem;
  --bs-btn-font-size: .8rem;
  --bs-btn-border-radius: 8px;
}

.btn-lg {
  --bs-btn-padding-y: .7rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--jk-radius);
}

.btn-primary {
  --bs-btn-bg: var(--jk-primary);
  --bs-btn-border-color: var(--jk-primary);
  --bs-btn-color: var(--jk-primary-contrast);
  --bs-btn-hover-bg: var(--jk-primary-hover);
  --bs-btn-hover-border-color: var(--jk-primary-hover);
  --bs-btn-hover-color: var(--jk-primary-contrast);
  --bs-btn-active-bg: var(--jk-primary-hover);
  --bs-btn-active-border-color: var(--jk-primary-hover);
  --bs-btn-active-color: var(--jk-primary-contrast);
  --bs-btn-disabled-bg: var(--jk-primary);
  --bs-btn-disabled-border-color: var(--jk-primary);
  --bs-btn-disabled-color: var(--jk-primary-contrast);
  box-shadow: var(--jk-shadow-sm);
}

.btn-secondary {
  --bs-btn-bg: var(--jk-surface-3);
  --bs-btn-border-color: var(--jk-border-strong);
  --bs-btn-color: var(--jk-text);
  --bs-btn-hover-bg: var(--jk-border);
  --bs-btn-hover-border-color: var(--jk-border-strong);
  --bs-btn-hover-color: var(--jk-text);
  --bs-btn-active-bg: var(--jk-border);
  --bs-btn-active-border-color: var(--jk-border-strong);
  --bs-btn-active-color: var(--jk-text);
  --bs-btn-disabled-bg: var(--jk-surface-3);
  --bs-btn-disabled-border-color: var(--jk-border);
  --bs-btn-disabled-color: var(--jk-text-muted);
}

.btn-success {
  --bs-btn-bg: var(--jk-success);
  --bs-btn-border-color: var(--jk-success);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--jk-success) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--jk-success) 85%, #000);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--jk-success) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--jk-success) 80%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--jk-success);
  --bs-btn-disabled-border-color: var(--jk-success);
  --bs-btn-disabled-color: #fff;
}

.btn-danger {
  --bs-btn-bg: var(--jk-danger);
  --bs-btn-border-color: var(--jk-danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--jk-danger) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--jk-danger) 85%, #000);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--jk-danger) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--jk-danger) 80%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--jk-danger);
  --bs-btn-disabled-border-color: var(--jk-danger);
  --bs-btn-disabled-color: #fff;
}

.btn-warning {
  --bs-btn-bg: var(--jk-accent);
  --bs-btn-border-color: var(--jk-accent);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--jk-accent) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--jk-accent) 85%, #000);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--jk-accent) 80%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--jk-accent);
  --bs-btn-disabled-border-color: var(--jk-accent);
  --bs-btn-disabled-color: #fff;
}

.btn-info {
  --bs-btn-bg: var(--jk-info);
  --bs-btn-border-color: var(--jk-info);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--jk-info) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--jk-info) 85%, #000);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--jk-info) 80%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--jk-info);
  --bs-btn-disabled-border-color: var(--jk-info);
  --bs-btn-disabled-color: #fff;
}

/* Outline-Varianten: ruhiger Rahmen, farbige Füllung erst beim Hover */
.btn-outline-secondary {
  --bs-btn-color: var(--jk-text-soft);
  --bs-btn-border-color: var(--jk-border-strong);
  --bs-btn-bg: var(--jk-surface);
  --bs-btn-hover-bg: var(--jk-surface-3);
  --bs-btn-hover-border-color: var(--jk-text-muted);
  --bs-btn-hover-color: var(--jk-text);
  --bs-btn-active-bg: var(--jk-surface-3);
  --bs-btn-active-border-color: var(--jk-text-muted);
  --bs-btn-active-color: var(--jk-text);
  --bs-btn-disabled-color: var(--jk-text-muted);
  --bs-btn-disabled-border-color: var(--jk-border);
}

.btn-outline-primary {
  --bs-btn-color: var(--jk-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--jk-primary) 40%, transparent);
  --bs-btn-bg: var(--jk-surface);
  --bs-btn-hover-bg: var(--jk-primary);
  --bs-btn-hover-border-color: var(--jk-primary);
  --bs-btn-hover-color: var(--jk-primary-contrast);
  --bs-btn-active-bg: var(--jk-primary-hover);
  --bs-btn-active-border-color: var(--jk-primary-hover);
  --bs-btn-active-color: var(--jk-primary-contrast);
  --bs-btn-disabled-color: var(--jk-text-muted);
  --bs-btn-disabled-border-color: var(--jk-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--jk-danger);
  --bs-btn-border-color: color-mix(in srgb, var(--jk-danger) 40%, transparent);
  --bs-btn-bg: var(--jk-surface);
  --bs-btn-hover-bg: var(--jk-danger);
  --bs-btn-hover-border-color: var(--jk-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--jk-danger);
  --bs-btn-active-border-color: var(--jk-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--jk-text-muted);
  --bs-btn-disabled-border-color: var(--jk-border);
}

.btn-outline-success {
  --bs-btn-color: var(--jk-success);
  --bs-btn-border-color: color-mix(in srgb, var(--jk-success) 40%, transparent);
  --bs-btn-bg: var(--jk-surface);
  --bs-btn-hover-bg: var(--jk-success);
  --bs-btn-hover-border-color: var(--jk-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--jk-success);
  --bs-btn-active-color: #fff;
}

.btn-outline-light {
  --bs-btn-color: var(--jk-rail-text-strong);
  --bs-btn-border-color: rgba(255, 255, 255, .25);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-color: #fff;
}

.btn-link {
  --bs-btn-color: var(--jk-primary);
  --bs-btn-hover-color: var(--jk-primary-hover);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   9. Formulare
   ------------------------------------------------------------------------- */
.form-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--jk-text-soft);
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  background-color: var(--jk-surface);
  border-color: var(--jk-border-strong);
  border-radius: var(--jk-radius-sm);
  color: var(--jk-text);
  padding: .52rem .8rem;
  font-size: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control::placeholder { color: var(--jk-text-muted); opacity: .8; }

.form-control:focus,
.form-select:focus {
  background-color: var(--jk-surface);
  border-color: var(--jk-primary);
  color: var(--jk-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jk-primary) 18%, transparent);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--jk-surface-3);
  color: var(--jk-text-muted);
}

.form-control-sm,
.form-select-sm {
  padding: .34rem .6rem;
  font-size: .82rem;
  border-radius: 8px;
}

.form-text { color: var(--jk-text-muted); font-size: .78rem; }

.form-check-input {
  border-color: var(--jk-border-strong);
  background-color: var(--jk-surface);
}

.form-check-input:checked {
  background-color: var(--jk-primary);
  border-color: var(--jk-primary);
}

.form-check-input:focus {
  border-color: var(--jk-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jk-primary) 18%, transparent);
}

.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 3; }

.input-group-text {
  background-color: var(--jk-surface-3);
  border-color: var(--jk-border-strong);
  color: var(--jk-text-soft);
  font-size: .85rem;
}

/* -------------------------------------------------------------------------
   10. Tabellen
   ------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--jk-text);
  --bs-table-border-color: var(--jk-border);
  --bs-table-hover-bg: var(--jk-surface-2);
  --bs-table-hover-color: var(--jk-text);
  --bs-table-striped-bg: var(--jk-surface-2);
  --bs-table-striped-color: var(--jk-text);
  margin-bottom: 0;
}

/* Tabellen sitzen auf einer eigenen Fläche mit weichen Ecken */
.table-responsive {
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius);
  box-shadow: var(--jk-shadow-sm);
  overflow: auto;
}

/* Tabellen innerhalb einer Karte bringen ihren Rahmen schon mit */
.card .table-responsive,
.card-body .table-responsive {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table > thead > tr > th {
  background: var(--jk-surface-2);
  border-bottom: 1px solid var(--jk-border);
  color: var(--jk-text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  padding: .8rem .9rem;
  white-space: nowrap;
}

.table > thead > tr > th a {
  color: inherit !important;
  text-decoration: none;
}

.table > thead > tr > th a:hover { color: var(--jk-primary) !important; }

.table > tbody > tr > td {
  padding: .78rem .9rem;
  border-bottom-color: var(--jk-border);
  vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-sm > thead > tr > th { padding: .6rem .7rem; }
.table-sm > tbody > tr > td { padding: .55rem .7rem; }

.table-hover > tbody > tr { transition: background-color .12s ease; }

/* Bootstrap-Farbzeilen an die Palette anpassen */
.table > :not(caption) > tr.table-danger > * {
  --bs-table-bg-state: var(--jk-danger-soft);
  color: var(--jk-text);
}

.table > :not(caption) > tr.table-success > * {
  --bs-table-bg-state: var(--jk-success-soft);
  color: var(--jk-text);
}

.table > :not(caption) > tr.table-secondary > * {
  --bs-table-bg-state: var(--jk-surface-3);
  color: var(--jk-text);
}

/* .table-light auch als Zeilenvariante (z. B. Monate in der Zukunft) */
.table > :not(caption) > tr.table-light > * {
  --bs-table-bg-state: var(--jk-surface-2);
  color: var(--jk-text-muted);
}

.table-light > tr > th,
.table-light > tr > td,
thead.table-light > tr > th {
  background: var(--jk-surface-2) !important;
  color: var(--jk-text-muted) !important;
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--jk-border);
}

/* -------------------------------------------------------------------------
   11. Listengruppen
   ------------------------------------------------------------------------- */
.list-group { --bs-list-group-border-color: var(--jk-border); }

.list-group-item {
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius) !important;
  margin-top: .5rem;
  padding: .85rem 1rem;
  color: var(--jk-text);
  box-shadow: var(--jk-shadow-sm);
}

.list-group-item:first-child { margin-top: 0; }

.list-group-item-action { transition: border-color .15s ease, transform .15s ease; }

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--jk-surface-2);
  border-color: var(--jk-border-strong);
  color: var(--jk-text);
}

.list-group-item.list-group-item-danger {
  background: var(--jk-danger-soft);
  border-color: color-mix(in srgb, var(--jk-danger) 35%, transparent);
  color: var(--jk-text);
}

.list-group-item.list-group-item-danger .text-muted {
  color: color-mix(in srgb, var(--jk-text) 65%, transparent) !important;
}

/* -------------------------------------------------------------------------
   12. Abzeichen
   ------------------------------------------------------------------------- */
.badge {
  --bs-badge-padding-x: .55em;
  --bs-badge-padding-y: .36em;
  --bs-badge-border-radius: 7px;
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.badge.bg-secondary {
  background: var(--jk-surface-3) !important;
  color: var(--jk-text-soft) !important;
  border: 1px solid var(--jk-border);
}

.badge.bg-light {
  background: var(--jk-surface-3) !important;
  color: var(--jk-text-soft) !important;
  border: 1px solid var(--jk-border);
}

.badge.bg-danger {
  background: var(--jk-danger-soft) !important;
  color: var(--jk-danger) !important;
  border: 1px solid color-mix(in srgb, var(--jk-danger) 30%, transparent);
}

.badge.bg-success {
  background: var(--jk-success-soft) !important;
  color: var(--jk-success) !important;
  border: 1px solid color-mix(in srgb, var(--jk-success) 30%, transparent);
}

.badge.bg-warning {
  background: var(--jk-warning-soft) !important;
  color: var(--jk-warning) !important;
  border: 1px solid color-mix(in srgb, var(--jk-warning) 30%, transparent);
}

.badge.bg-info {
  background: var(--jk-info-soft) !important;
  color: var(--jk-info) !important;
  border: 1px solid color-mix(in srgb, var(--jk-info) 30%, transparent);
}

.badge.bg-primary {
  background: var(--jk-primary-soft) !important;
  color: var(--jk-primary) !important;
  border: 1px solid color-mix(in srgb, var(--jk-primary) 30%, transparent);
}

.badge.bg-dark {
  background: var(--jk-rail) !important;
  color: var(--jk-rail-text-strong) !important;
}

/* Zähler-Abzeichen an Buttons bleiben kräftig gefüllt */
.position-absolute.badge.bg-danger {
  background: var(--jk-danger) !important;
  color: #fff !important;
  border-color: var(--jk-danger);
}

/* -------------------------------------------------------------------------
   13. Hinweise / Flash-Meldungen
   ------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--jk-radius);
  border-width: 1px;
  border-left-width: 3px;
  padding: .9rem 1.1rem;
  box-shadow: var(--jk-shadow-sm);
}

.alert-info {
  --bs-alert-bg: var(--jk-info-soft);
  --bs-alert-border-color: color-mix(in srgb, var(--jk-info) 35%, transparent);
  --bs-alert-color: var(--jk-text);
  border-left-color: var(--jk-info);
}

.alert-success {
  --bs-alert-bg: var(--jk-success-soft);
  --bs-alert-border-color: color-mix(in srgb, var(--jk-success) 35%, transparent);
  --bs-alert-color: var(--jk-text);
  border-left-color: var(--jk-success);
}

.alert-warning {
  --bs-alert-bg: var(--jk-warning-soft);
  --bs-alert-border-color: color-mix(in srgb, var(--jk-warning) 35%, transparent);
  --bs-alert-color: var(--jk-text);
  border-left-color: var(--jk-warning);
}

.alert-danger {
  --bs-alert-bg: var(--jk-danger-soft);
  --bs-alert-border-color: color-mix(in srgb, var(--jk-danger) 35%, transparent);
  --bs-alert-color: var(--jk-text);
  border-left-color: var(--jk-danger);
}

.alert-light,
.alert-secondary {
  --bs-alert-bg: var(--jk-surface);
  --bs-alert-border-color: var(--jk-border);
  --bs-alert-color: var(--jk-text);
  border-left-color: var(--jk-border-strong);
}

/* Flash-Meldungen schweben oben rechts statt den Inhalt zu verschieben */
.jk-flash {
  position: fixed;
  top: calc(var(--jk-topbar-h) + .75rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 1080;
  width: min(380px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: none;
}

.jk-flash .alert {
  pointer-events: auto;
  margin: 0;
  box-shadow: var(--jk-shadow-lg);
  animation: jk-flash-in .3s cubic-bezier(.2, .8, .3, 1);
}

@keyframes jk-flash-in {
  from { opacity: 0; transform: translateX(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.btn-close { --bs-btn-close-focus-shadow: none; opacity: .5; }
.btn-close:hover { opacity: .9; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* -------------------------------------------------------------------------
   14. Reiter, Dropdowns, Dialoge, Blättern
   ------------------------------------------------------------------------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--jk-border);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--jk-primary);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--jk-primary);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--jk-border-strong);
  --bs-nav-link-color: var(--jk-text-muted);
  --bs-nav-link-hover-color: var(--jk-text);
  border-bottom-width: 1px;
  gap: .15rem;
}

.nav-tabs .nav-link {
  border-width: 0 0 2px 0;
  border-radius: 0;
  padding: .6rem .95rem;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: -1px;
}

.nav-tabs .nav-link.active { font-weight: 700; }

.nav-pills {
  --bs-nav-pills-border-radius: 99px;
  --bs-nav-pills-link-active-bg: var(--jk-primary);
  --bs-nav-pills-link-active-color: var(--jk-primary-contrast);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--jk-surface);
  --bs-dropdown-border-color: var(--jk-border);
  --bs-dropdown-border-radius: var(--jk-radius);
  --bs-dropdown-link-color: var(--jk-text-soft);
  --bs-dropdown-link-hover-bg: var(--jk-surface-3);
  --bs-dropdown-link-hover-color: var(--jk-text);
  --bs-dropdown-link-active-bg: var(--jk-primary-soft);
  --bs-dropdown-link-active-color: var(--jk-primary);
  --bs-dropdown-padding-y: .4rem;
  --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-item-padding-x: .85rem;
  --bs-dropdown-font-size: .875rem;
  box-shadow: var(--jk-shadow-lg);
}

.dropdown-item { border-radius: 8px; width: auto; margin: 0 .4rem; }
.dropdown-item svg { width: 1.05em; height: 1.05em; opacity: .7; }
.dropdown-divider { border-color: var(--jk-border); }

.modal-content {
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius-lg);
  box-shadow: var(--jk-shadow-lg);
}

.modal-header,
.modal-footer { border-color: var(--jk-border); }

.modal-title { font-family: var(--jk-font-display); font-weight: 600; }

.pagination {
  --bs-pagination-bg: var(--jk-surface);
  --bs-pagination-border-color: var(--jk-border);
  --bs-pagination-color: var(--jk-text-soft);
  --bs-pagination-hover-bg: var(--jk-surface-3);
  --bs-pagination-hover-color: var(--jk-text);
  --bs-pagination-hover-border-color: var(--jk-border-strong);
  --bs-pagination-active-bg: var(--jk-primary);
  --bs-pagination-active-border-color: var(--jk-primary);
  --bs-pagination-active-color: var(--jk-primary-contrast);
  --bs-pagination-disabled-bg: var(--jk-surface-2);
  --bs-pagination-disabled-color: var(--jk-text-muted);
  --bs-pagination-disabled-border-color: var(--jk-border);
  --bs-pagination-border-radius: var(--jk-radius-sm);
  gap: .3rem;
}

.page-link { border-radius: var(--jk-radius-sm) !important; font-weight: 600; }

.progress {
  background: var(--jk-surface-3);
  border-radius: 99px;
}

.progress-bar { background: var(--jk-primary); }

hr { border-color: var(--jk-border); opacity: 1; }

.accordion {
  --bs-accordion-bg: var(--jk-surface);
  --bs-accordion-border-color: var(--jk-border);
  --bs-accordion-btn-bg: var(--jk-surface);
  --bs-accordion-btn-color: var(--jk-text);
  --bs-accordion-active-bg: var(--jk-primary-soft);
  --bs-accordion-active-color: var(--jk-primary);
  --bs-accordion-border-radius: var(--jk-radius);
}

/* -------------------------------------------------------------------------
   15. Anmeldeseite
   ------------------------------------------------------------------------- */
.jk-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--jk-bg);
}

/* Linke Seite: Markenfläche mit weichem Farbverlauf */
.jk-auth__aside {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(155deg, #14312a 0%, #1d5c4b 55%, #256b52 100%);
  color: #eef4f0;
}

.jk-auth__aside::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -140px;
  bottom: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 154, 69, .38), transparent 68%);
  pointer-events: none;
}

.jk-auth__aside::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  left: -110px;
  top: -110px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
  pointer-events: none;
}

.jk-auth__brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--jk-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.jk-auth__claim {
  position: relative;
  z-index: 1;
  max-width: 30ch;
}

.jk-auth__claim h2 {
  font-family: var(--jk-font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: .9rem;
}

.jk-auth__claim p {
  color: rgba(255, 255, 255, .74);
  font-size: 1rem;
  margin: 0;
}

.jk-auth__foot {
  position: relative;
  z-index: 1;
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
}

/* Rechte Seite: Formular */
.jk-auth__main {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.jk-auth__card {
  width: 100%;
  max-width: 380px;
}

.jk-auth__card h1 {
  font-family: var(--jk-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}

.jk-auth__card .jk-auth__lead {
  color: var(--jk-text-muted);
  font-size: .9rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 860px) {
  .jk-auth { grid-template-columns: 1fr; }
  .jk-auth__aside { min-height: auto; padding: 1.75rem 1.5rem 2.25rem; }
  .jk-auth__claim { margin-top: 1.5rem; }
  .jk-auth__claim h2 { font-size: 1.7rem; }
  .jk-auth__foot { display: none; }
}

/* -------------------------------------------------------------------------
   15b. Öffentliche Leseansicht (Token-Link, ohne Anmeldung)
   ------------------------------------------------------------------------- */
.jk-public__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem clamp(1rem, 4vw, 2rem);
  background: var(--jk-rail);
  color: var(--jk-rail-text-strong);
  border-bottom: 1px solid var(--jk-rail-border);
}

.jk-public__title {
  font-family: var(--jk-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.15;
}

.jk-public__sub {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jk-rail-text);
  opacity: .7;
}

.jk-public {
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem;
}

.jk-public__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.jk-public__hero h1 {
  font-family: var(--jk-font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0;
}

.jk-public__saldo { text-align: right; }
.jk-public__saldo .jk-eyebrow { display: block; margin-bottom: .1rem; }
.jk-public__saldo .jk-stat__value { display: block; font-size: 1.6rem; }

/* Beschreibungsliste für Stammdaten */
.jk-datalist {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: .1rem 1.25rem;
  margin: 0;
}

.jk-datalist dt {
  padding: .6rem 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--jk-text-muted);
  border-top: 1px solid var(--jk-border);
}

.jk-datalist dd {
  padding: .6rem 0;
  margin: 0;
  border-top: 1px solid var(--jk-border);
}

.jk-datalist dt:first-of-type,
.jk-datalist dt:first-of-type + dd { border-top: 0; }

@media (max-width: 520px) {
  .jk-datalist { grid-template-columns: 1fr; }
  .jk-datalist dd { padding-top: 0; border-top: 0; }
  .jk-datalist dt { padding-bottom: .1rem; }
  .jk-public__hero { flex-direction: column; align-items: flex-start; }
  .jk-public__saldo { text-align: left; }
}

/* -------------------------------------------------------------------------
   16. Leerzustände
   ------------------------------------------------------------------------- */
.jk-empty {
  padding: 2.75rem 1.5rem;
  text-align: center;
  color: var(--jk-text-muted);
  background: var(--jk-surface);
  border: 1px dashed var(--jk-border-strong);
  border-radius: var(--jk-radius);
}

.jk-empty__icon {
  font-size: 1.6rem;
  opacity: .45;
  margin-bottom: .6rem;
}

.jk-empty__icon svg {
  width: 2.1rem;
  height: 2.1rem;
  vertical-align: middle;
  stroke-width: 1.5;
}

/* -------------------------------------------------------------------------
   17. Kompatibilität: Utility-Klassen aus den bestehenden Templates
   Diese Klassen stehen in 27 Templates und müssen in beiden Modi lesbar sein.
   ------------------------------------------------------------------------- */
.text-muted { color: var(--jk-text-muted) !important; }

/* .text-dark wird als "normale Textfarbe" verwendet (Links in Tabellen) –
   im Dunkelmodus wäre es sonst unsichtbar. */
.text-dark { color: var(--jk-text) !important; }
.text-danger { color: var(--jk-danger) !important; }
.text-success { color: var(--jk-success) !important; }
.text-primary { color: var(--jk-primary) !important; }
.text-warning { color: var(--jk-warning) !important; }
.text-info { color: var(--jk-info) !important; }

.bg-light { background-color: var(--jk-surface-2) !important; }
.bg-dark { background-color: var(--jk-rail) !important; }
.bg-white { background-color: var(--jk-surface) !important; }
.bg-body { background-color: var(--jk-bg) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--jk-border) !important;
}

.shadow-sm { box-shadow: var(--jk-shadow-sm) !important; }
.shadow { box-shadow: var(--jk-shadow) !important; }

/* -------------------------------------------------------------------------
   18. Aufgabenseite – gerenderter Markdown-Text und sein Editor
   ------------------------------------------------------------------------- */
/* Fließtext darf ruhig etwas luftiger stehen als in Tabellen und Listen. */
.jk-markdown {
  color: var(--jk-text);
  line-height: 1.65;
}

.jk-markdown > *:first-child { margin-top: 0; }
.jk-markdown > *:last-child { margin-bottom: 0; }

.jk-markdown h1,
.jk-markdown h2,
.jk-markdown h3,
.jk-markdown h4 {
  margin: 1.6rem 0 .6rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Eine Stufe kleiner als die Bootstrap-Vorgaben: die Seitenüberschrift
   („Aufgaben") soll die Überschriften im Text weiterhin überragen. */
.jk-markdown h1 { font-size: 1.4rem; }
.jk-markdown h2 { font-size: 1.2rem; }
.jk-markdown h3 { font-size: 1.05rem; }
.jk-markdown h4 { font-size: .95rem; color: var(--jk-text-soft); }

/* Die erste Überschrift trennt nichts ab – nur die folgenden bekommen
   eine sichtbare Zäsur. */
.jk-markdown h1:not(:first-child),
.jk-markdown h2:not(:first-child) {
  padding-top: .9rem;
  border-top: 1px solid var(--jk-border);
}

.jk-markdown p { margin: 0 0 .9rem; }

.jk-markdown ul,
.jk-markdown ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.jk-markdown li { margin-bottom: .35rem; }
.jk-markdown li > ul,
.jk-markdown li > ol { margin-top: .35rem; }

.jk-markdown strong { font-weight: 600; }

.jk-markdown a { color: var(--jk-primary); }

.jk-markdown hr {
  margin: 1.4rem 0;
  border: 0;
  border-top: 1px solid var(--jk-border);
  opacity: 1;
}

/* Hinweisblock: farbiger Balken links, damit er sich vom Fließtext löst */
.jk-markdown blockquote {
  margin: 0 0 .9rem;
  padding: .7rem 1rem;
  border-left: 3px solid var(--jk-accent);
  border-radius: 0 var(--jk-radius-sm) var(--jk-radius-sm) 0;
  background: var(--jk-accent-soft);
  color: var(--jk-text-soft);
}
.jk-markdown blockquote > *:last-child { margin-bottom: 0; }

.jk-markdown code {
  padding: .12em .38em;
  border-radius: 6px;
  background: var(--jk-surface-3);
  color: var(--jk-text);
  font-size: .875em;
}

.jk-markdown pre {
  margin: 0 0 .9rem;
  padding: .8rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius-sm);
  background: var(--jk-surface-2);
}
/* Im Block trägt schon das <pre> die Fläche – das <code> darin nicht noch mal */
.jk-markdown pre code { padding: 0; background: none; }

.jk-markdown table {
  width: 100%;
  margin: 0 0 .9rem;
  border-collapse: collapse;
}
.jk-markdown th,
.jk-markdown td {
  padding: .45rem .6rem;
  border: 1px solid var(--jk-border);
  text-align: left;
  vertical-align: top;
}
.jk-markdown th { background: var(--jk-surface-3); font-weight: 600; }

/* Seiten, die die Breitenbegrenzung von .jk-content aufheben. Fuer Listen und
   Fliesstext ist die begrenzte Spalte richtig – beim Editor nebeneinander
   zaehlt dagegen jeder Zentimeter. */
.jk-content--breit { max-width: none; }

/* Arbeitsflaeche des Editors: Quelle und Vorschau nebeneinander. Grid statt
   Bootstrap-Spalten, weil beim Einklappen der Vorschau nur eine einzige
   Regel umschalten muss. */
.jk-md-flaeche {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 992px) {
  .jk-md-flaeche { grid-template-columns: 1fr 1fr; }
  /* Vorschau eingeklappt: die Quelle bekommt die ganze Breite */
  .jk-md-flaeche--zu { grid-template-columns: 1fr; }
}

.jk-md-flaeche--zu .jk-md-spalte-vorschau { display: none; }

/* Editor: Markdown lebt von Einrückung, also feste Zeichenbreite. */
.jk-md-editor {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .875rem;
  line-height: 1.55;
  tab-size: 2;
  resize: vertical;
  min-height: 26rem;
}

/* Ab Tablet-Hoehe die Bildschirmhoehe ausnutzen; der Abzug deckt Kopfzeile,
   Seitentitel und Schaltflaechen ab. Untergrenze, damit auf einem flachen
   Fenster nicht ein Streifen von drei Zeilen uebrig bleibt. */
@media (min-height: 640px) {
  .jk-md-editor { height: max(26rem, calc(100vh - 22rem)); }
  .jk-md-vorschau {
    max-height: max(26rem, calc(100vh - 22rem));
    overflow-y: auto;
  }
}

/* Drei-Punkte-Menue der Aktionsleiste (siehe templates/_aktionen.html).
   Quadratisch und gross genug, um es mit dem Daumen zu treffen. */
.jk-aktionen__mehr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding-left: .35rem;
  padding-right: .35rem;
}

.jk-aktionen__mehr svg { width: 1.25em; height: 1.25em; }

/* -------------------------------------------------------------------------
   19. Kurzinfos beim Ueberfahren und hervorgehobene Aenderungen
       (Aktionsprotokoll, siehe templates/aktionsprotokoll.html)
   ------------------------------------------------------------------------- */

/* Angaben mit Kurzinfo bekommen eine gepunktete Unterlaengung – sonst faende
   sie niemand, weil nichts auf sie hinweist. */
.jk-hinweis,
[data-bs-toggle="tooltip"] {
  cursor: help;
  text-decoration: underline dotted var(--jk-border-strong);
  text-underline-offset: .2em;
}

/* Buttons und Links bringen ihren eigenen Hinweis mit – dort waere die
   Unterlaengung nur Unruhe. */
a[data-bs-toggle="tooltip"],
.btn[data-bs-toggle="tooltip"] { text-decoration: none; cursor: pointer; }

.tooltip {
  --bs-tooltip-bg: var(--jk-text);
  --bs-tooltip-color: var(--jk-surface);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-max-width: 22rem;
  --bs-tooltip-font-size: .8125rem;
  --bs-tooltip-border-radius: var(--jk-radius-sm);
}

/* Mehrzeilige Kurzinfos: die Zeilenumbrueche im Text sollen wirken. */
.tooltip-inner { white-space: pre-line; text-align: left; }

/* Detailansicht des Protokolls: welche Zeile sich geaendert hat und wie. */
.change-highlight > td { background: var(--jk-surface-2); }
.value-added { background: var(--jk-success-soft) !important; }
.value-added code { color: var(--jk-success); }
.value-removed { background: var(--jk-danger-soft) !important; }
.value-removed code { color: var(--jk-danger); text-decoration: line-through; }
.value-old { background: var(--jk-warning-soft) !important; }
.value-old code { color: var(--jk-warning); text-decoration: line-through; }
.value-new { background: var(--jk-success-soft) !important; }
.value-new code { color: var(--jk-success); }

/* -------------------------------------------------------------------------
   20. Drucken – Listen und Detailseiten werden ausgedruckt
   ------------------------------------------------------------------------- */
@media print {
  .jk-rail, .jk-topbar, .jk-flash, .jk-rail__scrim,
  .btn, .pagination, form.jk-noprint { display: none !important; }
  .jk-main { margin-left: 0; }
  .jk-content { max-width: none; padding: 0; }
  body { background: #fff; }
  .card, .table-responsive { box-shadow: none; border-color: #ccc; }
}