/* Objektkonto — Oberfläche in der Gestaltungssprache des Stillhalter Trackers.
 *
 * Kern der Optik: durchscheinende „Glas"-Flächen über einem leicht eingefärbten Grund,
 * weiche Schatten, großzügige Radien, farbige Icon-Chips als Blickfang und eine
 * iOS-nahe Akzentpalette. Damit das Glas wirkt, braucht der Hintergrund Struktur —
 * deshalb die beiden sehr dezenten Radialverläufe auf dem Body. Ohne die wirkt
 * `backdrop-filter` wie eine gewöhnliche graue Fläche.
 *
 * Hell- und Dunkelmodus hängen an `:root[data-theme=...]` (der Umschalter in base.html
 * setzt das Attribut). Der Dunkelmodus ist der Referenzzustand, der Hellmodus spiegelt
 * ihn mit umgekehrten Glaswerten.
 *
 * WICHTIG: Die Variablennamen (--surface, --text, --text-muted, --accent, --income,
 * --expense …) sind bewusst stabil geblieben — die Templates verwenden sie in vielen
 * Inline-Styles. Nicht umbenennen, sonst werden quer durch die App Texte unsichtbar.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Lokal ausgeliefert — die Datenschutzerklärung sagt zu, dass außer Cloudflare
     Turnstile keine Verbindung zu Dritten entsteht. Google Fonts wäre genau das. */
  src: url('../vendor/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --radius: 16px;
  --radius-sm: 10px;

  --bg: #f2f3f6;
  --bg-tint-a: rgba(0, 122, 255, 0.07);
  --bg-tint-b: rgba(52, 199, 89, 0.05);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(15, 20, 30, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.92);

  --text: #14171c;
  --text-muted: #626873;

  --accent: #007aff;
  --accent-hover: #0066d6;
  --accent-soft: rgba(0, 122, 255, 0.12);

  --income: #198754;
  --income-soft: rgba(25, 135, 84, 0.14);
  --expense: #dc3545;
  --expense-soft: rgba(220, 53, 69, 0.13);

  --orange: #e07b00;
  --teal: #1c8fa3;
  --purple: #8e44d0;

  --shadow: 0 4px 20px rgba(20, 25, 40, 0.08);
  --shadow-hover: 0 10px 28px rgba(20, 25, 40, 0.14);

  /* Aliase für Bestandstemplates */
  --surface: var(--glass-bg);
  --surface-alt: rgba(15, 20, 30, 0.045);
  --border: var(--glass-border);
}

:root[data-theme="dark"] {
  --bg: #14161a;
  --bg-tint-a: rgba(0, 122, 255, 0.13);
  --bg-tint-b: rgba(52, 199, 89, 0.08);

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(255, 255, 255, 0.09);

  --text: #eef0f3;
  --text-muted: #969ba4;

  --accent: #0a84ff;
  --accent-hover: #3d9bff;
  --accent-soft: rgba(10, 132, 255, 0.18);

  --income: #34c759;
  --income-soft: rgba(52, 199, 89, 0.16);
  --expense: #ff453a;
  --expense-soft: rgba(255, 69, 58, 0.16);

  --orange: #ff9500;
  --teal: #30b0c7;
  --purple: #af52de;

  --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5);

  --surface-alt: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, var(--bg-tint-a) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 12%, var(--bg-tint-b) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

h1, h2, h3 { letter-spacing: -0.3px; font-weight: 600; }
a { color: inherit; text-decoration: none; }

/* --- Navigation --- */

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  height: 60px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

nav .brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Die Bildmarke bringt ihre eigene Farbe mit (blaues Feld, weisses Zeichen) und
   funktioniert deshalb in beiden Modi ohne Sonderbehandlung. */
.brand-mark { display: block; border-radius: 7px; flex-shrink: 0; }

nav .nav-links { display: flex; align-items: center; gap: 2px; }

nav .nav-links a, nav .nav-links button {
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s, color .18s;
}

nav .nav-links a:hover, nav .nav-links button:hover {
  background: var(--surface-alt);
  color: var(--text);
}
nav .nav-links a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.container { max-width: 1220px; margin: 0 auto; padding: 26px; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.6px; }

/* --- Glaskarten --- */

.card, .property-card, .chart-card, .modal {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card, .chart-card { padding: 20px; }
.property-card { padding: 22px; margin-bottom: 16px; }
.card + .card { margin-top: 16px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

/* Kennzahl-Kacheln heben sich beim Überfahren leicht an — der Effekt, der die Oberfläche
   des Stillhalter Trackers lebendig macht. */
.cards-grid .card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.cards-grid .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.card h3, .chart-card h3, .category-group h3 {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.card .value {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.card .value.income, .card .value.surplus.positive { color: var(--income); }
.card .value.expense, .card .value.surplus.negative { color: var(--expense); }

/* Farbige Icon-Chips */
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.stat-icon.blue   { background: var(--accent-soft);  color: var(--accent); }
.stat-icon.green  { background: var(--income-soft);  color: var(--income); }
.stat-icon.red    { background: var(--expense-soft); color: var(--expense); }
.stat-icon.orange { background: rgba(255, 149, 0, .16);  color: var(--orange); }
.stat-icon.teal   { background: rgba(48, 176, 199, .16); color: var(--teal); }
.stat-icon.purple { background: rgba(175, 82, 222, .16); color: var(--purple); }

.property-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.property-card-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.4px; }
.property-card-head a.button { font-size: 13px; }

.mini-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.mini-stats div span, .mini-stats div span.label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.mini-stats div strong, .mini-stats div span.num {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- Badges --- */

.badge, .plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--surface-alt);
  color: var(--text-muted);
}
.badge.income, .plan-badge.active { background: var(--income-soft); color: var(--income); }
.badge.expense, .plan-badge.expired { background: var(--expense-soft); color: var(--expense); }
.plan-badge { border-radius: 999px; padding: 4px 13px; font-size: 13px; }
.plan-badge.trial { background: var(--accent-soft); color: var(--accent); }

/* --- Buttons --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 0 18px;
  height: 38px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
  transition: background .18s, box-shadow .18s, transform .12s;
}
.button:hover { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(0, 122, 255, 0.32); }
.button:active { transform: translateY(1px); }

.button.secondary {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--glass-border);
  box-shadow: none;
}
.button.secondary:hover { background: var(--glass-strong); box-shadow: var(--shadow); }

.button.danger {
  background: var(--expense-soft);
  color: var(--expense);
  box-shadow: none;
}
.button.danger:hover { background: var(--expense); color: #fff; box-shadow: 0 4px 14px rgba(220, 53, 69, .3); }

.button.small { height: 32px; padding: 0 13px; font-size: 13px; }

.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Tabellen --- */

table.ledger {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  font-size: 14px;
}

table.ledger th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 2px solid var(--glass-border);
  background: var(--surface-alt);
  white-space: nowrap;
}

table.ledger td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}
table.ledger tr:last-child td { border-bottom: none; }
table.ledger tbody tr { transition: background .15s; }
table.ledger tbody tr:hover td { background: var(--surface-alt); }

td.amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.amount.income, .income { color: var(--income); }
td.amount.expense, .expense { color: var(--expense); }

.row-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.row-actions button, .row-actions a {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.row-actions button:hover, .row-actions a:hover { background: var(--surface-alt); color: var(--text); }

.attachment-link { font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }

/* --- Formulare --- */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}

input, select, textarea {
  width: 100%;
  padding: 9px 13px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-strong);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: rgba(0, 0, 0, 0.25); }

textarea { height: auto; min-height: 88px; padding: 11px 13px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px; accent-color: var(--accent);
}
input[type="file"] { height: auto; padding: 9px 13px; }

.field { margin-bottom: 16px; }
.field small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.type-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
.type-toggle label {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  transition: all .15s;
}
.type-toggle input { display: none; width: auto; }
.type-toggle label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.checkbox-field input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }
.checkbox-field label { margin: 0; font-weight: 400; color: var(--text); font-size: 13.5px; }

.file-input-wrap { border: 1px dashed var(--glass-border); border-radius: var(--radius-sm); padding: 9px 13px; }
.code-input { font-size: 26px; letter-spacing: 10px; text-align: center; height: 56px; font-weight: 700; }

.year-select {
  display: flex;
  gap: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  padding: 3px;
}
.year-select a {
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.year-select a.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,122,255,.25); }

/* --- Meldungen --- */

.flash {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.flash.success { background: var(--income-soft); border-color: transparent; color: var(--income); }
.flash.error { background: var(--expense-soft); border-color: transparent; color: var(--expense); }

.trial-banner {
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--glass-border);
}
.trial-banner.expired { background: var(--expense-soft); color: var(--expense); }
.trial-banner a { font-weight: 700; text-decoration: underline; margin-left: 6px; }

/* --- Modal --- */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-backdrop.open { display: flex; }

.modal {
  padding: 26px;
  width: 100%;
  max-width: 470px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .modal { background: #1c1f25; }
:root[data-theme="light"] .modal, :root:not([data-theme="dark"]) .modal { background: #fff; }
.modal h3 { margin-top: 0; font-size: 18px; color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 20px; gap: 9px; }

/* --- Diagramme ---
   Chart.js braucht einen Container mit definierter Höhe; ohne den leitet es die Größe aus
   der gemessenen Elternbreite ab und liegt daneben, sobald sich das Layout danach ändert.
   Und niemals `max-width` auf das Canvas: Chart.js setzt die Breite per Inline-Style und
   misst danach neu — die CSS-Deckelung erzeugt eine Rückkopplung, bei der das Diagramm
   mit jedem Durchlauf schrumpft. */
.chart-box { position: relative; height: 240px; width: 100%; }
.chart-box canvas { display: block; }

/* --- Sonstiges --- */

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
/* Grid-Kinder haben implizit `min-width: auto` und schrumpfen nicht unter ihre
   Inhaltsbreite — die breite Buchungstabelle sprengte damit ihre Spalte und das Grid
   rechnete sich auf die doppelte Containerbreite auf. */
.two-col > * { min-width: 0; }
.two-col > div:first-child { overflow-x: auto; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }

.category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.category-group ul { list-style: none; padding: 0; margin: 0; }
.category-group li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 7px;
  background: var(--glass-bg);
  transition: background .15s;
}
.category-group li:hover { background: var(--glass-strong); }

.auth-page { max-width: 420px; margin: 60px auto; }
.auth-page .card { padding: 32px; }
.auth-page h1 { font-size: 22px; margin-top: 0; margin-bottom: 8px; }
.auth-page .form-footer { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center; }

.app-footer {
  border-top: 1px solid var(--glass-border);
  margin-top: 48px;
  padding: 22px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.app-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 0;
  padding-bottom: 0;
}
.app-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.app-footer-links a { color: var(--text-muted); }
.app-footer-links a:hover { color: var(--text); }

@media (max-width: 800px) {
  .two-col, .form-grid, .category-list { grid-template-columns: 1fr; }
  nav { padding: 0 16px; }
  .container { padding: 16px; }
  table.ledger { display: block; overflow-x: auto; }
}

/* ==========================================================================
   Mobil
   ==========================================================================
   Ziel: auf dem Handy soll man wirklich arbeiten können, nicht nur nachsehen.
   Dafür drei Dinge — Navigation nach unten (dort ist der Daumen), Tabellen und
   Formulare kompakter, und Bedienelemente groß genug zum Treffen.

   Die Grenze liegt bei 992px wie beim Stillhalter Tracker. Wer in den Einstellungen
   die Desktop-Ansicht erzwingt, bekommt einen festen Viewport von 1220px — dann
   greift keine dieser Regeln mehr, ganz ohne Sonderfall im Code. */

.tab-bar { display: none; }

@media (max-width: 991.98px) {
  /* Kopfzeile behält nur Marke und Abmelden; die Navigation wandert nach unten. */
  nav:not(.tab-bar) .nav-links a:not(.button) { display: none; }
  nav:not(.tab-bar) .nav-links a[href$="/logout"],
  nav:not(.tab-bar) .nav-links button { display: inline-flex; }
  nav:not(.tab-bar) { padding: 0 14px; height: 54px; }
  nav:not(.tab-bar) .brand { font-size: 15px; }

  .container { padding: 14px; }
  .page-header { margin-bottom: 16px; }
  .page-header h1 { font-size: 21px; }

  /* Kennzahlen zweispaltig statt untereinander — sonst scrollt man ewig. */
  .cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards-grid .card { padding: 14px; }
  .cards-grid .card .value { font-size: 20px; }
  .stat-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; margin-bottom: 8px; }
  /* Der Anhebe-Effekt beim Überfahren ergibt ohne Mauszeiger keinen Sinn. */
  .cards-grid .card:hover { transform: none; box-shadow: var(--shadow); }

  .mini-stats { gap: 16px; }
  .mini-stats div span, .mini-stats div span.label { font-size: 11px; }
  .mini-stats div strong, .mini-stats div span.num { font-size: 15px; }

  /* Tabellen: kompakter, und waagerecht scrollbar statt gequetscht. */
  table.ledger { font-size: 13px; }
  table.ledger th { font-size: 10.5px; padding: 9px 10px; }
  table.ledger td { padding: 9px 10px; }

  /* Formularfelder: 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  input, select, textarea { font-size: 16px; height: 44px; }
  textarea { height: auto; }
  .button { height: 44px; padding: 0 16px; }
  .button.small { height: 38px; }
  .row-actions button, .row-actions a { padding: 9px 12px; }

  .modal { max-width: 100%; border-radius: var(--radius) var(--radius) 0 0; }
  .modal-backdrop { align-items: flex-end; }

  .app-footer { margin-top: 28px; }
  .app-footer .container { flex-direction: column; align-items: flex-start; }

  /* Platz für die Tab-Leiste, inklusive der Home-Indikator-Zone auf iPhones. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  .tab-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Ohne diese beiden Zeilen erbt die Leiste `top: 0` und die feste Hoehe aus der
       allgemeinen nav-Regel (beide Leisten sind <nav>) und klebt dann oben statt unten. */
    top: auto;
    height: auto;
    z-index: 30;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Der Blur allein reicht nicht — ohne blickdichten Grund scheint der Inhalt durch. */
  :root[data-theme="dark"] .tab-bar { background: rgba(20, 22, 26, 0.92); }
  :root:not([data-theme="dark"]) .tab-bar { background: rgba(250, 250, 252, 0.94); }

  .tab-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 7px;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-bar a i { font-size: 20px; line-height: 1; }
  .tab-bar a.active { color: var(--accent); }
}

@media (max-width: 560px) {
  /* Auf sehr schmalen Geräten sind zwei Kennzahlen nebeneinander zu eng. */
  .cards-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .row-actions, .page-header .row-actions form { width: 100%; }
  .page-header .row-actions .button { width: 100%; }
}