/* ═══════════════════════════════════════════════════════════════════
   Asal Design System — Components
   ═══════════════════════════════════════════════════════════════════
   Standard-Klassen fuer die Layout-Bausteine, die in JEDER Asal-App
   identisch aussehen sollen:
     1. .app-topbar          — App-Header oben, weiss, 56px
     2. .page-header-hero    — Sticky Hero unter der Topbar
     3. .page-content        — Container links/rechts, max-width
     4. .bottom-nav          — Mobile Tab-Nav unten
     5. .menu-list           — Listen-Pattern fuer Menue-Eintraege

   Voraussetzung: tokens.css ist eingebunden.
   Stand: 2026-05-03
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. App-Topbar ─────────────────────────────────────────────── */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  min-height: var(--topbar-h);
  box-sizing: border-box;
}
.app-topbar-logo {
  height: 28px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.app-topbar-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

/* ── 2. Page-Header-Hero (Sticky-Header pro View) ──────────────── */
/* HTML-Pattern:
     <header class="page-header-hero">
       <span class="page-header-hero-eyebrow">Konto</span>
       <h1 class="page-header-hero-title">Menue</h1>
     </header>
*/
.page-header-hero,
.top-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  /* flex-start statt flex-end: damit Eyebrow IMMER bei padding-top sitzt,
     unabhaengig von der Hoehe der rechten Action-Buttons. flex-end fuehrte
     zu 2-3px Diff zwischen Apps mit groesseren Buttons (z.B. btn-lg) und
     kleineren (icon-btn 40px). */
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  /* Hero-Internals nur. max-width und L+R-padding kommen von .page-content (Wrapper). */
  padding: 0.5rem 0 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.page-header-hero-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}
.page-header-hero-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 575px) {
  .page-header-hero-title { font-size: 1.5rem; }
}

/* Hero-Action-Container — Buttons rechts neben Title sind IMMER 40px hoch
   (= identisch zu .icon-btn). Vorgabe = CRM. App-spezifisches `btn-lg`
   wird im Hero-Kontext zurueckgesetzt, damit alle 4 Apps gleich aussehen. */
.page-header-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-header-hero-actions .btn,
.page-header-hero-actions .btn-lg,
.page-header-hero-actions .btn-tonal {
  min-height: 40px;
  height: 40px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ── 3. Page-Content (zentrale Box, max-width, Padding) ────────── */
/* Wrapper-Container — identisch zu Paketversand `<div class="container py-4">`.
   Inhalt (Hero, Body, Cards) liegt INNERHALB; Hero und Body haben selber kein
   max-width oder L+R-padding mehr. */
.page-content,
.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.page-content {
  padding: var(--container-pad-y) var(--container-pad-x);
}
/* Bootstrap .container Override — alle Asal-Apps mit Bootstrap nutzen automatisch
   die Asal-max-widths statt Bootstrap-Default 1140/1320. */
@media (min-width: 1200px) {
  .page-content,
  .container { max-width: var(--container-max-md); }
}
@media (min-width: 1600px) {
  .page-content,
  .container { max-width: var(--container-max-lg); }
}

/* ── 4. Bottom-Nav (Mobile-Kacheln unten) ──────────────────────── */
/* HTML-Pattern (App-spezifisch befuellen):
     <nav class="bottom-nav">
       <a class="bottom-nav-item active" ...>...</a>
       <a class="bottom-nav-item" ...>...</a>
     </nav>
   Letztes Item ist per Konvention immer "Menue" (Icons.menu()).
*/
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-4);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  min-height: var(--tap);
  position: relative;
}
.bottom-nav-item svg,
.bottom-nav-item i { width: 22px; height: 22px; font-size: 22px; line-height: 1; }
.bottom-nav-item-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}

/* Body-Padding wenn Bottom-Nav sichtbar ist */
body.has-bottom-nav { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 60px); }

/* ── 5. Menu-List (Listen-Pattern fuer Menue-Eintraege) ────────── */
/* HTML-Pattern:
     <div class="menu-section-label">Konto</div>
     <ul class="menu-list">
       <li><a class="menu-list-item" href="...">
         <i class="..."></i>
         <span class="menu-list-item-label">Mein Profil</span>
         <i class="bi bi-chevron-right"></i>
       </a></li>
     </ul>
*/
.menu-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1.5rem 0 0.5rem;
  padding-left: 0.25rem;
}
.menu-list {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.menu-list li + li { border-top: 1px solid var(--border); }
.menu-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.menu-list-item:active { background: var(--surface-sunken); }
.menu-list-item-label {
  flex: 1;
  font-weight: 500;
}
.menu-list-item-meta {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-right: 0.5rem;
}
.menu-list-item-danger { color: var(--warn); }
.menu-list-item-danger .menu-list-item-label { color: var(--warn); }

/* ── Icon-Button (40x40 quadratisch, fuer Aktionen + Datum-Pfeile) ── */
.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-sunken); }
.icon-btn:active { background: var(--surface-sunken); border-color: var(--ink-3); }
.icon-btn svg, .icon-btn i { width: 20px; height: 20px; font-size: 1.25rem; }
/* Wenn das Icon im .icon-svg-Wrapper steckt, das `1em`-Default ueberschreiben:
   sonst rendern die SVGs auf 16px (Body-Font) statt 20px → Button wirkt leer. */
.icon-btn .icon-svg { font-size: 1.25rem; line-height: 1; }
.icon-btn .icon-svg svg { width: 1em; height: 1em; }

/* ── Asal-Button-Hierarchie (verbindlich fuer alle 4 Apps) ──────── */
/* Primary (Solid Akzentgruen): Haupt-CTA der Seite, Hero-Action
     <a class="btn btn-primary">…</a>  oder  <a class="btn btn-success">…</a>
     (success = primary; gleiche Farbe, identische Optik)
   Tonal: Sekundaer-CTA, gedaempfter („Heute"-Button im Date-Picker)
     <a class="btn-tonal">…</a>
   Outline: Tertiaer („Abbrechen", „Zurueck")
     <button class="btn btn-outline-secondary">…</button>
   Ghost/Icon-Btn: ikonisch, neutral (Pfeile, Toolbar)
     <a class="icon-btn">…</a> */

/* PRIMARY — Solid Akzentgruen, weisser Text. Zentral hier definiert,
   damit alle 4 Apps (Vanilla CRM + Bootstrap-Apps) identisch rendern. */
.btn-primary, .btn-success, .btn.btn-primary, .btn.btn-success {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover, .btn-success:hover,
.btn.btn-primary:hover, .btn.btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-fg);
}

/* TONAL — Sekundaer-CTA */
.btn-tonal {
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-md);
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.btn-tonal:hover, .btn-tonal:active { filter: brightness(0.96); }

/* ── Datums-Wechsler ─────────────────────────────────────────── */
/* HTML-Pattern:
     <div class="date-bar">
       <a class="icon-btn" href="...prev...">{{ icon('chevronLeft') }}</a>
       <span class="date-bar-display"><strong>So, 03.05.26</strong></span>
       <a class="icon-btn" href="...next...">{{ icon('chevronRight') }}</a>
       <a class="btn-tonal" href="...heute...">Heute</a>
     </div> */
.date-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  margin-top: 0;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.date-bar-display {
  height: 40px;
  padding: 0 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* date-bar-input: Wrapper um Display-Span + nativen Date-Input. Span zeigt
   den formatierten Text, Input liegt darunter (transparent), Calendar-Icon
   bleibt sichtbar rechts (David's Vorgabe). Klick irgendwo oeffnet den
   Picker — span hat pointer-events:none, Input bekommt den Click. */
.date-bar-input {
  position: relative;
  display: inline-block;
  height: 40px;
  min-width: 160px;
}
.date-bar-input input[type="date"] {
  color: transparent;
  caret-color: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  height: 40px;
  width: 100%;
  padding: 0 0.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
}
.date-bar-input input[type="date"]::-webkit-datetime-edit { color: transparent; }
.date-bar-input input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  /* Explizite Groesse — ohne diese rendert Chrome je nach inheritied
     font-size unterschiedlich (CRM vs Aufgaben sahen unterschiedlich aus).
     16x16 ist Lucide-Standard und passt zu icon-svg im Hero. */
  width: 16px;
  height: 16px;
  padding: 0;
}
.date-bar-input input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.date-bar-input .date-bar-display {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  pointer-events: none;
  padding: 0 0.75rem;
  /* Platz fuer den nativen Calendar-Indicator rechts (Chrome ~22px) */
  padding-right: 32px;
  height: 40px;
}

/* ── KPI-Strip (Dashboard-Kacheln) ───────────────────────────── */
/* CANONICAL PATTERN — gespiegelt aus CRM/heute.js. Zurueckhaltend:
   default = bg-raised + Border. Nur kpi-warn bekommt subtilen Tint.
   HTML-Pattern:
     <div class="kpi-strip">
       <a class="kpi-card kpi-warn" href="...">
         <div class="kpi-value">5</div>
         <div class="kpi-label">Warnungen</div>
         <div class="kpi-sub">Aufgaben oder Planung pruefen</div>
       </a>
       ...
     </div> */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 0.875rem;
}
@media (min-width: 992px) {
  .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: 0.875rem; }
}
.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 0.875rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.kpi-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.kpi-card.kpi-urgent {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent);
}
.kpi-card.kpi-urgent .kpi-value { color: var(--warn); }
.kpi-card.kpi-warn {
  border-color: #e67e22;
  background: #fff8f1;
}
.kpi-card.kpi-warn:hover { border-color: #d35400; }
.kpi-card.kpi-warn .kpi-value { color: #d35400; }
.kpi-card.kpi-info {
  border-color: color-mix(in srgb, var(--info) 50%, transparent);
}
.kpi-card.kpi-info .kpi-value { color: var(--info); }
.kpi-value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kpi-of { font-size: 1rem; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.kpi-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-top: 0.25rem;
}
.kpi-sub { font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.125rem; }

/* ── Collapsible-Card (k360-Stil) ────────────────────────────── */
/* CANONICAL PATTERN — gespiegelt aus CRM/.k360-card. Standard fuer
   alle aufklappbaren Sektionen (Worker-Cards, Detail-Sektionen, etc.).
   HTML-Pattern:
     <details class="k360-card" open>
       <summary>
         <span class="k360-title">Mitarbeiter Max</span>
         <span class="k360-meta">3 offen · 1 blockiert</span>
       </summary>
       <div class="k360-body">
         ...content...
       </div>
     </details> */
.k360-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.k360-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  user-select: none;
  background: linear-gradient(180deg, var(--bg-raised) 0%, color-mix(in srgb, var(--surface-sunken) 60%, var(--bg-raised)) 100%);
  transition: background 0.18s var(--ease);
}
.k360-card[open] > summary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 40%, var(--bg-raised)) 0%, var(--bg-raised) 100%);
  border-bottom: 1px solid var(--border);
}
.k360-card > summary:hover {
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--surface-sunken) 100%);
}
.k360-card > summary::-webkit-details-marker,
.k360-card > summary::marker { display: none; content: ''; }
.k360-card > summary .k360-title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
}
.k360-card > summary .k360-title::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid var(--ink-3);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.18s var(--ease);
  flex-shrink: 0;
}
.k360-card[open] > summary .k360-title::before { transform: rotate(90deg); }
.k360-card > summary .k360-meta {
  font-size: 0.6875rem;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.k360-card .k360-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--accent-tint);
  color: var(--accent);
}
.k360-card .k360-body {
  padding: 0.875rem 1rem 1rem;
}
.k360-card[open] .k360-body {
  animation: k360-open 0.2s var(--ease);
}
@keyframes k360-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Section-Card (Box mit Eyebrow + Titel um eine Inhaltsgruppe) ── */
/* CANONICAL — CRM `.dashboard-focus`-Pattern. Wird verwendet um eine
   logische Gruppe (z.B. KPI-Strip oder eine Aktions-Liste) in eine
   sichtbare Sektion mit Header zu wickeln.
   HTML-Pattern:
     <section class="section-card">
       <div class="section-card-head">
         <div>
           <div class="section-card-eyebrow">Tagesplanung</div>
           <h2 class="section-card-title">Was zaehlt heute?</h2>
         </div>
         <button class="btn btn-secondary btn-sm">Aktion</button>
       </div>
       <div class="section-card-body">...content...</div>
     </section> */
.section-card {
  margin: 0 0 0.875rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.section-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.section-card-eyebrow {
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-card-title {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-card-body { display: block; }

/* Wenn .kpi-strip direkt in .section-card-body liegt, kein extra-Margin */
.section-card-body > .kpi-strip { margin: 0; }

/* ── Card-Grid (mehrere k360-Cards nebeneinander auf Desktop) ── */
/* HTML-Pattern:
     <div class="card-grid">
       <details class="k360-card">...</details>
       <details class="k360-card">...</details>
       ...
     </div> */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.card-grid > .k360-card { margin-bottom: 0; }
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
}

/* k360-row: Pills + Action-Button auf einer Zeile im k360-body */
.k360-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.k360-row .pills { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }

/* ── 6. Globale Body-Stile ───────────────────────────────────── */
/* Bootstrap setzt body { line-height: 1.5 } — App ohne Bootstrap muss das
   selber machen, sonst rendern Inline-Elemente ~3px niedriger.
   Bootstrap setzt ausserdem body { background: #fff } — DAS ueberschreiben
   wir hier explizit auf var(--bg), damit alle 4 Asal-Apps dieselbe
   off-white Body-Farbe haben (sonst wirkt CRM cremig, Aufgaben pur weiss). */
html {
  /* WICHTIG: scrollbar-gutter reserviert die Scrollbar-Breite IMMER, egal ob
     der Content scrollt oder nicht. Ohne diese Regel SPRINGT das Layout um
     ~15px wenn man zwischen einer kurzen Seite (kein Scrollbar) und einer
     langen Seite (mit Scrollbar) wechselt — Container + Topbar verschieben
     sich seitlich. David hatte das mehrfach beanstandet. */
  scrollbar-gutter: stable;
}
body {
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
}

/* ── 7. Sortier-Pfeil fuer Tabellen ──────────────────────────── */
/* HTML-Pattern (entweder in Templates oder per JS gesetzt):
     <th class="sortable" data-sort="num" data-sort-active="asc|desc">…</th>
   Pfeil erscheint NUR bei aktiv sortierter Spalte (data-sort-active gesetzt).
   Klickbares Verhalten kommt von App-JS — CSS macht nur den Visual-Indicator. */
.sortable-table thead th[data-sort]:not([data-sort="no"]),
th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem;
}
.sortable-table thead th[data-sort]:not([data-sort="no"]):hover,
th.sortable:hover {
  background: var(--surface-sunken);
}
/* Pfeil NUR bei aktiv-sortierter Spalte (asc oder desc) */
.sortable-table thead th[data-sort-active]::after,
th.sortable[data-sort-active]::after {
  content: '';
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sortable-table thead th[data-sort-active="asc"]::after,
th.sortable[data-sort-active="asc"]::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
}
.sortable-table thead th[data-sort-active="desc"]::after,
th.sortable[data-sort-active="desc"]::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cpolyline points='19 12 12 19 5 12'/%3E%3C/svg%3E");
}

/* ── 6. Icon-Wrapper (fuer SVG-Icons aus icons.js / icons.py) ── */
/* Pattern: <span class="icon-svg [bootstrap-classes]">{{ icon('search') | safe }}</span>
   Das SVG erbt die Schriftgroesse vom Parent (display-4, fs-1, etc.) — wirkt
   damit identisch zu Bootstrap-Icons-Web-Font, ist aber offline-faehig. */
.icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
  line-height: 1;
}
.icon-svg svg {
  width: 1em;
  height: 1em;
}