/* =========================================================================
   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; }

/* Saldo-Paar in Listen (Makro saldo_paar in _saldo.html): heutiger Stand und
   dahinter die Hochrechnung zum Jahresende. Jede Zahl steht rechtsbündig in
   einer eigenen Spalte mit fester Mindestbreite – zusammen mit tabular-nums
   oben fluchten die Beträge damit über alle Zeilen hinweg untereinander.
   Die Breiten stehen in em, wachsen also mit der Schriftgröße mit, und reichen
   für Beträge bis 9.999 €. Ein längerer Betrag sprengt seine Spalte nach links
   – die Zahl bleibt vollständig lesbar, nur diese eine Zeile schert aus. */
.jk-saldo {
  display: inline-flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .4em;
  white-space: nowrap;
}
.jk-saldo__wert { min-width: 4.6em; text-align: right; }
.jk-saldo__prognose { min-width: 5.5em; text-align: right; }

/* -------------------------------------------------------------------------
   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);
}

/* Die Federzeichnung braucht bei dieser Größe etwas mehr Fläche als eine
   Icon-Glyphe, sonst bleibt nur ein Fleck. */
.jk-rail__mark svg {
  width: 26px;
  height: 26px;
  display: block;
}

.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;
  /* Unten knapp gehalten – den Abstand zum Seitenende gibt die Fußzone
     des Wasserzeichens (siehe .jk-wz--fuss). */
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 1.25rem;
}

/* Wasserzeichen: das Markenmotiv als blasse Federzeichnung, als Schlusszeichen
   hinter der letzten Karte oder Tabelle.

   Ein am Fenster klebendes Motiv verschwindet auf inhaltsreichen Seiten
   (Mitgliederliste, Buchungen) vollständig unter Karten und Tabellen. Am
   Inhaltsende steht es dagegen auf jeder Seite frei. Rein dekorativ: nimmt
   keine Zeigerereignisse an, lässt sich nicht markieren, ist im Markup
   aria-hidden und im Druck ausgeblendet – die PDF-Exporte bringen ihr
   eigenes Wasserzeichen mit. */
.jk-wz {
  color: var(--jk-text);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Die Szene ist leicht querformatig (viewBox aus motiv.svg); die Höhe folgt der Breite. */
.jk-wz__motiv { display: block; width: 100%; }
.jk-wz svg { width: 100%; height: auto; display: block; }

/* Weil .jk-content wächst (flex: 1 1 auto), rutscht das Zeichen auf kurzen
   Seiten von selbst an den unteren Fensterrand – es entsteht kein Loch
   zwischen Inhalt und Motiv. */
.jk-wz--fuss {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: .9rem 1rem 2rem;
  opacity: .07;
}

.jk-wz--fuss .jk-wz__motiv { width: 178px; }

/* Dunkel: die helle Linie auf dunklem Grund trägt weniger, darum etwas mehr. */
[data-bs-theme="dark"] .jk-wz--fuss { opacity: .085; }

/* Mobil zurückhaltender – auf schmalen Schirmen wirkt jedes Motiv schnell
   zu präsent. */
@media (max-width: 767.98px) {
  .jk-wz--fuss { padding: .8rem 1rem 1.6rem; opacity: .06; }
  [data-bs-theme="dark"] .jk-wz--fuss { opacity: .075; }
  .jk-wz--fuss .jk-wz__motiv { width: 132px; }
}

@media print {
  .jk-wz { display: none; }
}

/* 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);
}

/* z. B. Monate, die per Buchwert gedeckt sind */
.table > :not(caption) > tr.table-warning > * {
  --bs-table-bg-state: var(--jk-warning-soft);
  color: var(--jk-text);
}

/* Monatsübersicht: Die ganze Zeile öffnet die zugeordnete Buchung. Die
   Zeilenfarbe bleibt, beim Überfahren wird sie nur eine Spur kräftiger. */
tr.jk-deckung { cursor: pointer; }

tr.jk-deckung:hover > * { filter: brightness(.96); }

tr.jk-deckung:focus-visible {
  outline: 2px solid var(--jk-primary);
  outline-offset: -2px;
}

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

/* Großes Wasserzeichen in der Markenfläche, unter Claim und Fußzeile. */
.jk-auth__wasserzeichen {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: 56%;
  color: #fff;
  opacity: .09;
  pointer-events: none;
  user-select: none;
}

.jk-auth__wasserzeichen svg {
  width: 100%;
  height: auto;
  display: block;
}

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

/* Umschalter Verwaltung / Mitglied.
   Beide Formulare stehen im Dokument; sichtbar ist nur das gewählte. Die
   steuernden Radios liegen als erste Kinder von .jk-auth, damit die
   Geschwisterregeln beide Spalten erreichen. Sie sind unsichtbar, aber
   fokussierbar – der Umschalter bleibt so mit der Tastatur bedienbar
   (Tab auf die Gruppe, Pfeiltasten zum Wechseln). */
.jk-auth__wahl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jk-auth__nur--verwaltung,
.jk-auth__nur--mitglied { display: none; }

#jk-bereich-verwaltung:checked ~ * .jk-auth__nur--verwaltung,
#jk-bereich-mitglied:checked ~ * .jk-auth__nur--mitglied { display: block; }

.jk-auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--jk-border);
  border-radius: 999px;
  background: var(--jk-surface-3);
}

.jk-auth__switch label {
  margin: 0;
  padding: .5rem .75rem;
  border-radius: 999px;
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
  color: var(--jk-text-muted);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}

.jk-auth__switch label:hover { color: var(--jk-text-soft); }

#jk-bereich-verwaltung:checked ~ * label[for="jk-bereich-verwaltung"],
#jk-bereich-mitglied:checked ~ * label[for="jk-bereich-mitglied"] {
  background: var(--jk-surface);
  color: var(--jk-text);
  box-shadow: 0 1px 2px rgba(26, 35, 31, .12);
}

/* Der Fokusring gehoert sichtbar an die Beschriftung, nicht an das
   ausgeblendete Radio. */
#jk-bereich-verwaltung:focus-visible ~ * label[for="jk-bereich-verwaltung"],
#jk-bereich-mitglied:focus-visible ~ * label[for="jk-bereich-mitglied"] {
  outline: 2px solid var(--jk-primary);
  outline-offset: 2px;
}

@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; }
  /* Im kompakten Kopfblock steht Text fast überall – Wasserzeichen
     kleiner und blasser, sonst wirkt es aufdringlich. */
  .jk-auth__wasserzeichen { width: 45%; opacity: .06; bottom: -4%; }
}

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

/* Öffentliche Leseansicht: eigene Seite ohne App-Rahmen. Das Spaltenlayout
   über die volle Höhe schiebt das Schlusszeichen ans Seitenende – sonst
   hinge es auf kurzen Seiten mitten im Bild. */
.jk-oeffentlich {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

.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. Textseiten – gerenderter Markdown-Text, sein Editor und das Wiki
       (Aufgaben und Tutorials)
   ------------------------------------------------------------------------- */
/* 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;
  }
}

/* --- Wiki (Tutorials): Inhaltsverzeichnis, Sprungmarken, Videos ---------- */

/* Sprungmarke: die Kopfzeile klebt oben und wuerde die angesprungene
   Ueberschrift sonst verdecken. Der Zuschlag laesst zusaetzlich Luft. */
.jk-wiki h1,
.jk-wiki h2,
.jk-wiki h3,
.jk-wiki h4,
.jk-wiki__oben { scroll-margin-top: calc(var(--jk-topbar-h) + 1rem); }

/* Inhaltsverzeichnis: eingerueckte Liste ohne Aufzaehlungszeichen. Die
   Gliederung traegt schon die Einrueckung. */
.jk-toc__liste {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.jk-toc__liste .jk-toc__liste {
  margin: .2rem 0 .5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--jk-border);
}

.jk-toc__liste li { margin-bottom: .25rem; }

.jk-toc__liste > li > a {
  font-weight: 600;
  color: var(--jk-text);
}

.jk-toc__liste a {
  color: var(--jk-text-soft);
  text-decoration: none;
}

.jk-toc__liste a:hover,
.jk-toc__liste a:focus-visible { color: var(--jk-primary); text-decoration: underline; }

/* Ab Tablet nebeneinander: ein Wiki hat viele Kapitel, gestapelt waere das
   Verzeichnis eine eigene Bildschirmseite. Nur die aeusserste Liste wird
   gespalten – die Unterpunkte bleiben bei ihrem Kapitel. */
@media (min-width: 768px) {
  .jk-toc > .card-body > .jk-toc__liste {
    columns: 2;
    column-gap: 2rem;
  }
  /* Ein Kapitel samt Unterpunkten soll nicht mitten in der Spalte reissen. */
  .jk-toc > .card-body > .jk-toc__liste > li { break-inside: avoid; }
}

@media (min-width: 1200px) {
  .jk-toc > .card-body > .jk-toc__liste { columns: 3; }
}

/* Video: das eingebettete Feld behaelt sein Seitenverhaeltnis, egal wie
   breit die Spalte gerade ist. */
.jk-video {
  margin: 1.2rem 0;
}

.jk-video__buehne,
.jk-video__platzhalter {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--jk-radius-sm);
  overflow: hidden;
  background: var(--jk-surface-3);
}

.jk-video__buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Noch ohne Aufnahme oder mit gesperrter Herkunft: gestrichelter Rahmen,
   damit die Luecke als solche zu erkennen ist. */
.jk-video__platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1rem;
  text-align: center;
  border: 1px dashed var(--jk-border-strong);
  background: var(--jk-surface-2);
  color: var(--jk-text-muted);
}

.jk-video--gesperrt .jk-video__platzhalter {
  border-color: var(--jk-warning);
  background: var(--jk-warning-soft);
  color: var(--jk-warning);
}

.jk-video__hinweis { font-weight: 600; }

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

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