/* ============================================================================
   OTBT shared design system — LIGHT + DARK brand theme
   Freeman (display) + Noto Sans (body), signal-yellow pill buttons with the
   brand's "hard" offset shadow, chunky 2px borders, playful pastels.

   All internal tools (/docker, /builds, /sounds, /wordpress/dashboard,
   /person, /openproject/planning, /ausschreibungen) and the OS load this
   file — tweak it here to restyle everything at once.

   THEMING: every color lives in a token. /design/theme.js stamps
   data-theme="light|dark" (+ data-bs-theme for Bootstrap 5.3) on <html>
   BEFORE first paint; the @media block below is only the no-JS fallback.
   ============================================================================ */

/* Fonts selbst gehostet (13.08.2026): Freeman + Noto Sans als woff2 in
   /design/fonts/ — kein Google-Fonts-Request mehr. Details in fonts.css. */
@import url('/design/fonts.css');

/* ── Icons: Flaticon UIcons ──────────────────────────────────────────────
   Markup:  <i class="fi fi-rr-name"></i>      fi-rr-* = Linie (Standard)
            <i class="fi fi-sr-name"></i>      fi-sr-* = gefüllt (aktive/
                                               betonte Zustände, früher -fill)
            <i class="fi fi-brands-name"></i>  Marken (Discord, GitHub, …)
   Die Fonts kommen aus /design/icons.css (generiert, siehe
   tools/icons/README.md). `fi` selbst trägt nur die Ausrichtung — die
   Font-Zuweisung hängt am fi-rr-/fi-sr-Präfix. Icons gehören auf <i>/<span>,
   auf anderen Elementen greift der Selektor der UIcons-CSS nicht.
   Die bunten Vogel-PNGs bleiben den Firmen-Tools vorbehalten (os/shell.js). */
.fi { display: inline-block; line-height: 1; vertical-align: -.125em; }
.fi::before { line-height: 1; }

:root {
  --tile-gap: 1rem;

  /* Surfaces */
  --bg: #edeae1;            /* cream page background — bewusst dunkler als die
                               weißen Cards, damit Blöcke ohne Rand tragen */
  --panel: #ffffff;        /* white cards */
  --panel2: #f5f3ec;       /* subtle alt surface */
  --panel-alt: #fef8e8;    /* warm tint */
  --field: #ffffff;        /* form control background */

  /* Ink / text (Brand: Grayscale-Font 1F1F1F, Black Font 000000) */
  --ink: #1f1f1f;          /* Grayscale-Font */
  --text: #1f1f1f;         /* alias (tools reference --text) */
  --muted: #5a5a5a;        /* secondary text */
  --line: #d3d3d3;         /* Grayscale-Line */

  /* Borders — Hierarchie: Interaktives (Buttons, Toggles, Inputs) trägt den
     fetten 2px-Brand-Rand (--border); Container/Blöcke (Cards, Panels,
     Topbar, Modals) bekommen den dünneren, ruhigeren Block-Rand. */
  --border: #1f1f1f;       /* chunky brand border (interaktive Elemente) */
  --border-strong: #1f1f1f;
  --border-block: #b7b3a7; /* Container/Blöcke: dünner + wärmeres Mittelgrau */
  --border-soft: #d3d3d3;  /* inputs / soft dividers (Grayscale-Line) */
  --chip-bd: #1f1f1f;      /* status chip border */
  --bd-block: none; /*1.5px solid var(--border-block); /* Shorthand für Block-Ränder */

  /* Accent */
  --accent: #ffe726;       /* OTBT Main Gelb — identisch in beiden Themes */
  --accent-hover: #f5da00; /* darker yellow (hover) */
  --accent-ink: #000000;   /* Black Font on yellow */
  --focus-ring: rgba(255, 231, 38, .55);
  --good: #16a34a;
  --bad: #e2483d;

  /* Semantische Status-Farben (Pills, Badges, Charts) — je bg + fg */
  --ok-bg: #adefcc;    --ok-fg: #065f46;
  --warn-bg: #fde08a;  --warn-fg: #92400e;
  --crit-bg: #efa4a4;  --crit-fg: #7f1d1d;
  --info-bg: #94bde8;  --info-fg: #1e3a5f;

  /* Geldrichtung (Ein-/Ausgang bei Transaktionen). Bewusst NICHT ok/crit:
     eine Ausgabe ist kein Fehler, und die Tints sitzen auf jeder Zeile —
     deshalb deutlich blasser als die Status-Farben. */
  --money-in-bg: #e0f6ea;  --money-in-fg: #05614a;  --money-in-bd: #93d6b6;
  --money-out-bg: #fdeceb; --money-out-fg: #a92c23; --money-out-bd: #eeb3ae;

  /* Brand-Farben (Cards + Website-Deko) */
  --p-mint: #adefcc;       /* Grün */
  --p-blue: #94bde8;       /* Blau */
  --p-lavender: #caa9ee;   /* Violett */
  --p-salmon: #efa4a4;     /* Rot */
  --p-orange: #fdbf30;     /* Cards-Orange */
  --deco-orange: #f7cb63;  /* Blob-Orange (Website-Deko) */

  /* Kategorie-Tints (To-dos u.ä.): Gelb / Blau / Violett, sanft */
  --tint-general: #fff9cc;
  --tint-arbeit: #e2edf9;
  --tint-projekte: #f0e8fb;
  --tint-waiting: #f6ebdf;

  /* Zeilen-Zustände in Tabellen & Listen */
  --row-hover: #faf6e6;
  --row-stripe: #fbfaf4;

  /* Code-/Log-Flächen */
  --code-bg: rgba(26, 26, 26, .06);

  /* Overlays hinter Modals */
  --overlay: rgba(26, 26, 26, .45);

  --display-font: 'Freeman', system-ui, sans-serif;
  /* Fließtext-Token (13.08.2026): es gibt genau ZWEI Schriften im OS —
     Freeman (Display) und Noto Sans (alles andere). Auch Leseflüsse
     (Artikel-/Buch-Reader) nutzen diesen Token, keine Serifen mehr. */
  --body-font: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* The brand "hard" flat shadow (no blur, solid offset) */
  --shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.13);
  --shadow-hard-sm: 4px 4px 0 rgba(0, 0, 0, 0.13);
  --shadow-soft: 5px 10px 30px rgba(31, 31, 31, 0.07);
  --radius: 16px;
  --radius-pill: 999px;

  /* Hintergrund-Bausteine (Weave + Pastell-Washes) */
  --pattern: url('pattern.svg');
  --wash1: rgba(148, 189, 232, .16);
  --wash2: rgba(173, 239, 204, .18);
}

/* ----------------------------------------------------------------------------
   DARK tokens — warmes Kohle-Schema, Gelb bleibt. Zwei Blöcke mit identischem
   Inhalt: system preference (fallback ohne JS) + expliziter Toggle-Zustand.
   --------------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #201e1a; --panel: #393731; --panel2: #423f38; --panel-alt: #433d29;
    --field: #302e28;
    --ink: #f2efe6; --text: #f2efe6; --muted: #a8a396; --line: #4d4a41;
    --border: #e9e5da; --border-strong: #e9e5da; --border-block: #6b6650; --border-soft: #565248;
    --chip-bd: rgba(242, 239, 230, .28);
    --focus-ring: rgba(255, 231, 38, .35);
    --ok-bg: #305440;   --ok-fg: #96e8b8;
    --warn-bg: #574a20; --warn-fg: #f5d76a;
    --crit-bg: #5c3630; --crit-fg: #f0a49c;
    --info-bg: #2f4a63; --info-fg: #9cc3ef;
    --money-in-bg: #2c4b37;  --money-in-fg: #8fe0b3;  --money-in-bd: #427659;
    --money-out-bg: #4d302b; --money-out-fg: #eda49c; --money-out-bd: #7d4841;
    --tint-general: #4c4419; --tint-arbeit: #2d3f56; --tint-projekte: #40355a; --tint-waiting: #4d3a2a;
    --row-hover: #46433a; --row-stripe: #3f3c34;
    --code-bg: rgba(255, 255, 255, .08);
    --overlay: rgba(0, 0, 0, .6);
    --shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
    --shadow-hard-sm: 4px 4px 0 rgba(0, 0, 0, 0.55);
    --shadow-soft: 5px 10px 30px rgba(0, 0, 0, 0.35);
    --pattern: url('pattern-dark.svg');
    --wash1: rgba(148, 189, 232, .05);
    --wash2: rgba(173, 239, 204, .05);
  }
}
:root[data-theme="dark"] {
  --bg: #201e1a; --panel: #393731; --panel2: #423f38; --panel-alt: #433d29;
  --field: #302e28;
  --ink: #f2efe6; --text: #f2efe6; --muted: #a8a396; --line: #4d4a41;
  --border: #e9e5da; --border-strong: #e9e5da; --border-block: #6b6650; --border-soft: #565248;
  --chip-bd: rgba(242, 239, 230, .28);
  --focus-ring: rgba(255, 231, 38, .35);
  --ok-bg: #305440;   --ok-fg: #96e8b8;
  --warn-bg: #574a20; --warn-fg: #f5d76a;
  --crit-bg: #5c3630; --crit-fg: #f0a49c;
  --info-bg: #2f4a63; --info-fg: #9cc3ef;
  --money-in-bg: #2c4b37;  --money-in-fg: #8fe0b3;  --money-in-bd: #427659;
  --money-out-bg: #4d302b; --money-out-fg: #eda49c; --money-out-bd: #7d4841;
  --tint-general: #4c4419; --tint-arbeit: #2d3f56; --tint-projekte: #40355a; --tint-waiting: #4d3a2a;
  --row-hover: #46433a; --row-stripe: #3f3c34;
  --code-bg: rgba(255, 255, 255, .08);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.55);
  --shadow-hard-sm: 4px 4px 0 rgba(0, 0, 0, 0.55);
  --shadow-soft: 5px 10px 30px rgba(0, 0, 0, 0.35);
  --pattern: url('pattern-dark.svg');
  --wash1: rgba(148, 189, 232, .05);
  --wash2: rgba(173, 239, 204, .05);
}

html, body { height: 100%; }
body {
  font-family: var(--body-font);
  min-height: 100vh;
  color: var(--ink);
  /* Basis + geometrisches Streifen-Weave (pattern.svg, seamless)
     unter zwei faint pastel washes (playful brand feel) */
  background:
    radial-gradient(1100px 560px at 100% -8%, var(--wash1), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, var(--wash2), transparent 60%),
    var(--pattern) repeat,
    var(--bg);
  background-size: auto, auto, 96px 55.4px, auto;
  background-attachment: fixed;
}

/* Brand typography — Freeman, slightly tracked, uppercase for headers */
h1, h2, h3, h4, h5, h6 { font-family: var(--display-font); font-weight: 400; letter-spacing: .02em; color: var(--ink); }
a { color: var(--ink); text-decoration-color: var(--accent); }
a:hover { color: var(--text); opacity: .9; }

/* Page frame */
.content-frame {
  margin-top: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 25px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------------------
   Kompakte Topbar — der Standard-Header für alle Tools (renderBrandHeader).
   Scrollt mit dem Inhalt weg (bewusst nicht sticky); Vogel-Badge klein,
   Freeman-Titel mit Gelb-Unterstreichung, rechts Aktionen + Theme-Toggle.
   --------------------------------------------------------------------------*/
.topbar {
  background: var(--panel);
  border: var(--bd-block);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  margin-bottom: 20px;
}
.topbar-in {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; min-height: 52px; flex-wrap: wrap;
}
/* Wenn die Seite einen fixierten Zurück-Button hat, Platz dafür lassen
   (nur solange der Button neben dem Container keinen eigenen Platz hat) */
@media (max-width: 1440px) {
  body:has(.back-sticky) .topbar-in { padding-left: 112px; }
}
.mark-sm {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-hard-sm);
}
.mark-sm img { width: 24px; height: 24px; object-fit: contain; }
.mark-sm.mark-icon i { font-size: 20px; line-height: 1; color: var(--ink); }
.topbar .t-title {
  font-family: var(--display-font); font-size: 1.25rem; line-height: 1.1;
  color: var(--ink);
  padding-bottom: 2px; border-bottom: 3px solid var(--accent);
}
.topbar .t-sub { font-size: .72rem; color: var(--muted); align-self: end; padding-bottom: 5px; max-width: 44ch; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Hell/Dunkel entscheidet der Sonnenstand (theme.js) — seit 12.09.2026 gibt
   es keinen Theme-Schalter mehr (weder Topbar, Sidebar-Footer noch FAB). */

/* Einzelnes Icon der 5er-Bewertungsskala (os/ratings.js) in Stufenfarbe —
   z. B. die Journal-Stimmung in Chronik, Kontakte-Karte und Inbox. */
.rt-ic.rt-bad     { color: var(--rt-bad, #c9463d); }
.rt-ic.rt-notgood { color: var(--rt-notgood, #d97f36); }
.rt-ic.rt-meh     { color: var(--rt-meh, #8f8f96); }
.rt-ic.rt-good    { color: var(--rt-good, #5aa45f); }
.rt-ic.rt-great   { color: var(--rt-great, #2e8b46); }

/* Alter zentrierter Brand-Hero — bleibt für "Ankunftsseiten" verfügbar */
.brand { text-align: center; margin: 6px auto 26px; }
.brand-mark {
  width: 88px; height: 88px; margin: 0 auto;
  display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-hard);
}
.brand-mark img { width: 54px; height: 54px; object-fit: contain; }
.brand .title {
  font-family: var(--display-font); font-weight: 400;
  font-size: 2rem; line-height: 1.05; letter-spacing: .01em;
  margin: .85rem 0 0; color: var(--ink);
}
.brand .title::after {
  content: ""; display: block; width: 56px; height: 4px;
  background: var(--accent); border-radius: 3px; margin: .6rem auto 0;
}
.brand-sub { margin: .5rem auto 0; color: var(--muted); font-size: .95rem; max-width: 46ch; }
.brand-accent { border-bottom: 4px solid var(--accent); display: inline-block; padding-bottom: .15rem; }

/* Sticky back button — sitzt optisch in der Topbar */
.back-sticky { position: fixed; top: 9px; left: 12px; z-index: 1100; }

/* Panels / generic cards — chunky brand look */
.panel, .tile-box {
  background: var(--panel);
  border: var(--bd-block);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  color: var(--ink);
  padding: 16px;
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: 8px; }
thead th, th { background: var(--panel2); color: var(--ink); font-family: var(--display-font); font-weight: 400; letter-spacing: .02em; }
tr:hover { background: var(--row-hover); }

.table { width: 100%; border-color: var(--line); color: var(--ink); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--ink); border-color: var(--line); }
.table thead th { color: var(--ink); }
.table.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--row-stripe); }
.table.table-hover > tbody > tr:hover { background-color: var(--row-hover); }

/* Forms */
input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="email"], input[type="url"],
input[type="password"], select, textarea, .form-control, .form-select {
  background-color: var(--field) !important;
  color: var(--ink) !important;
  border: 2px solid var(--border-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
textarea { min-height: 8rem; }
input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--muted); opacity: 1; }
input:focus, textarea:focus, .form-control:focus, .form-select:focus {
  outline: none; border-color: var(--border) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Buttons — brand yellow pill with hard shadow on hover */
.btn {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: .02em;
  border-radius: var(--radius-pill);
  border-width: 2px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hard); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary, .btn-warning {
  background: var(--accent); border-color: #1f1f1f; color: var(--accent-ink);
}
.btn-primary:hover, .btn-warning:hover { background: var(--accent-hover); border-color: #1f1f1f; color: var(--accent-ink); }

/* All neutral/outline button variants → consistent pill on panel background.
   (Bootstrap's .btn-outline-light is light-on-light by default — would be
    invisible here, so it is explicitly remapped.) */
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light,
.btn-outline-primary, .btn-outline-dark {
  background: var(--panel); border-color: var(--border); color: var(--ink);
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover, .btn-outline-light:hover,
.btn-outline-primary:hover, .btn-outline-dark:hover {
  background: var(--panel2); border-color: var(--border); color: var(--ink);
}
/* Active/selected neutral buttons (tabs, filters) get the yellow fill */
.btn-outline-light.active, .btn-light.active, .btn-outline-secondary.active, .btn-check:checked + .btn {
  background: var(--accent); border-color: #1f1f1f; color: var(--accent-ink);
}
.btn-success { background: var(--good); border-color: var(--border); color: #fff; }
.btn-danger  { background: var(--bad);  border-color: var(--border); color: #fff; }

/* ----------------------------------------------------------------------------
   Chips — EIN Baustein für Status/Labels (ersetzt pill/engine-badge/badge-Wildwuchs)
   --------------------------------------------------------------------------*/
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; line-height: 1.4;
  padding: 2px 11px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--chip-bd);
  background: var(--panel2); color: var(--ink);
  white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip-crit { background: var(--crit-bg); color: var(--crit-fg); }
.chip-info { background: var(--info-bg); color: var(--info-fg); }
.chip-accent { background: var(--accent); color: var(--accent-ink); border-color: #1f1f1f; }

/* ----------------------------------------------------------------------------
   Gemeinsame Tool-Komponenten — EINE Definition für alle Seiten.
   Die Tool-CSS-Dateien enthalten nur noch Layout und echte Abweichungen.
   --------------------------------------------------------------------------*/

/* Tool-Karten — EINE Basis für alle Seiten. Historische Klassennamen
   (.card-dk docker, .card-wp wordpress, .card-au ausschreibungen,
    .project builds) teilen sich die Definition; neue Seiten nutzen .card-t.
   Die Tool-CSS-Dateien enthalten nur noch echte Abweichungen. */
.card-t, .card-dk, .card-wp, .card-au, .project {
  background: var(--panel);
  border: var(--bd-block);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--ink);
}

/* Screenshot-Box mit Hover-Refresh-Button (docker + wordpress) */
.shot-box { position: relative; flex: 0 0 320px; max-width: 320px; aspect-ratio: 16/9; background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.shot-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-refresh { position: absolute; right: 6px; bottom: 6px; display: none; align-items: center; gap: 4px; border: 1px solid var(--border-soft); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: .8rem; }
.shot-box:hover .shot-refresh { display: inline-flex; }
.shot-refresh:disabled { opacity: .6; cursor: default; display: inline-flex; }

/* Kleine Aktions-Buttons (Container-Aktionen, Feedback, Log anzeigen, …) */
.btn-action {
  font-size: .75rem; padding: 4px 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-action:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); box-shadow: var(--shadow-hard); }
.btn-action:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.btn-action.danger:hover { background: var(--crit-bg); color: var(--crit-fg); }

/* Suchfeld (Breite bestimmt das Tool) — Optik kommt aus den globalen
   Input-Regeln oben; hier nur Form + Maße */
.search-box { padding: 6px 14px; font-size: .85rem; border-radius: var(--radius-pill) !important; }

/* Inline-Editing (Klick auf Text → Eingabefeld) */
.inline-edit {
  width: 100%; font: inherit; color: var(--ink); background: var(--field);
  border: 2px solid var(--border); border-radius: 8px; padding: 2px 6px;
  outline: none; box-sizing: border-box;
}
textarea.inline-edit { resize: vertical; min-height: 56px; }

/* Toasts — eine Optik, drei historische Klassennamen
   (JS: builds → .otbt-toast, OS → .os-toast, planning → .flash) */
.otbt-toast, .os-toast, .flash {
  position: fixed; z-index: 2147483005;
  font-size: .85rem; font-weight: 600;
  border: 2px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-hard-sm);
  padding: 9px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.otbt-toast { top: 16px; right: 16px; background: var(--good); color: #fff; transform: translateY(-6px); }
.otbt-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.otbt-toast-error { background: var(--bad); }
.os-toast { bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bad); color: #fff; }
.os-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.os-toast-info { background: var(--ink); color: var(--bg); }
.flash { bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--bg); border: 0; border-radius: var(--radius-pill); max-width: min(90vw, 640px); }
.flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.flash.is-error { background: #dc2626; color: #fff; }

/* Historische Pill-/Badge-Klassen → einheitliche Chip-Basis.
   Neue Seiten nutzen direkt .chip (+ .chip-ok/-warn/-crit/-info);
   die Tools behalten nur Maße und Status-Farbzuordnung. */
.pill, .status-pill, .score-pill, .deadline-badge, .engine-badge {
  display: inline-block; border-radius: var(--radius-pill);
  border: 1.5px solid var(--chip-bd);
  background: var(--panel2); color: var(--ink);
}

/* Betrags-Chip für Transaktionen: Vorzeichen + Farbfläche zeigen, ob Geld
   rein- oder rausgeht. */
.tx-amt {
  display: inline-flex; align-items: center;
  padding: .1rem .5rem; border-radius: var(--radius-pill);
  border: 1.5px solid; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-amt-in  { background: var(--money-in-bg);  color: var(--money-in-fg);  border-color: var(--money-in-bd); }
.tx-amt-out { background: var(--money-out-bg); color: var(--money-out-fg); border-color: var(--money-out-bd); }

/* Utility */
.text-muted { color: var(--muted) !important; }

/* Collapsible chevrons */
.btn-toggle .chev { transition: transform .2s ease; display: inline-block; }
.btn-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* Large heading-like collapse trigger buttons */
.btn-title {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  margin: 0;
  color: var(--ink) !important;
  font-family: var(--display-font);
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-title:hover { transform: none !important; box-shadow: none !important; }
.btn-title:focus { box-shadow: none !important; }
.btn-title .fi { color: var(--ink); }

/* ----------------------------------------------------------------------------
   Agenten-Kopf (31.10.2026) — Milo, Winston, Sam, Quinn und Basil haben auf
   ihrer Seite denselben Kopf: rundes Bild, Zeile, Titel, Satz, Status.
   Kreis, Farbscheibe und Ring stecken im PNG selbst
   (tools/mascot_icons/agenten_avatare.py) — hier also KEIN Rahmen, kein
   Hintergrund, nur der harte Schatten. Seitenklassen (wn-/sm-/tq-/bz-)
   bleiben daneben nur als Haken für Seiten-JS.
   --------------------------------------------------------------------------*/
.ag-head { --ag-av: 104px; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.ag-avatar { flex: none; display: block; width: var(--ag-av); height: var(--ag-av); border-radius: 50%; box-shadow: var(--shadow-hard-sm); }
.ag-head-txt { min-width: 0; flex: 1; }
.ag-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); }
.ag-title { font-family: var(--display-font), sans-serif; font-size: 1.5rem; line-height: 1.15; margin: .15rem 0 .25rem; overflow-wrap: anywhere; }
.ag-say { margin: 0; font-size: .88rem; color: var(--ink); font-style: italic; }
.ag-status { margin: .25rem 0 0; font-size: .76rem; color: var(--muted); }
.ag-status:empty, .ag-say:empty { display: none; }
.ag-head > .btn { flex: none; }
@media (max-width: 767.98px) {
  /* Platz für den fixierten Menüknopf oben links (os.css .os-hamburger) */
  .ag-head { --ag-av: 72px; gap: .75rem; padding-top: 2.4rem; }
  .ag-title { font-size: 1.2rem; }
}
@media (max-width: 575px) {
  .ag-head { flex-wrap: wrap; }
  .ag-head > .btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   Bootstrap-Komponenten im Dark Mode (data-bs-theme wird von theme.js gesetzt;
   hier nur die Stellen, wo unsere Tokens gewinnen sollen)
   --------------------------------------------------------------------------*/
.modal-content { background: var(--panel); color: var(--ink); border: var(--bd-block); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--line); }
.dropdown-menu { background: var(--panel); color: var(--ink); border: var(--bd-block); }
.dropdown-item { color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--row-hover); color: var(--ink); }
.list-group-item { background: var(--panel); color: var(--ink); border-color: var(--line); }

/* ----------------------------------------------------------------------------
   Mobile — EIN gemeinsamer Layer für alle Tool-Seiten (<= 768px).
   Die Tool-CSS-Dateien ergänzen nur noch seiteneigene Breakpoints
   (z.B. das Zwei-Spalten-Layout in /sounds).
   --------------------------------------------------------------------------*/
@media (max-width: 768px) {
  .content-frame { padding: 12px !important; }

  /* Topbar: Titel kompakt, Aktions-Slot rutscht in eine eigene volle Zeile */
  .topbar-in { padding: 8px 10px; gap: 8px; }
  .topbar .t-title { font-size: 1.05rem; }
  .topbar .t-sub { display: none; }
  .topbar-actions { flex-basis: 100%; justify-content: flex-start; }
  .topbar-actions:empty { display: none; } /* sonst leere zweite Zeile (+gap) */

  /* Karten: engeres Padding, kleinerer Hard-Shadow */
  .card-t, .card-dk, .card-wp, .card-au, .project, .panel, .tile-box { padding: 12px; }
  .card-t, .card-dk, .card-wp, .card-au, .project { box-shadow: var(--shadow-hard-sm); }

  /* Screenshots: volle Breite statt fester 320px-Spalte */
  .shot-box, .card-dk.in-group .shot-box { flex: 1 1 100%; max-width: 100%; }

  /* Tabellen sprengen das Layout nicht, sondern scrollen horizontal */
  .content-frame table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Touch-Ziele: Aktions-Buttons etwas größer */
  .btn-action { padding: 6px 12px; font-size: .8rem; }

  /* Modals (Overlay-Pattern der Tools) nutzen die volle Breite */
  .modal-overlay { padding: 12px; padding-top: 40px; }
}