/* ═══════════════════════════════════════════════════════════════════════
   mockups.css — „Echte-Optik"-Bausteine für die Geräte-Rahmen der Website.

   Ziel: In den Browser-/Handy-Rahmen der Landing- und Produktseiten NICHT
   mehr frei erfundene Platzhalter zeigen, sondern die TATSÄCHLICHEN
   Komponenten aus der Instituts-Konsole (dashboard.html) bzw. die echte
   App-Designsprache (design_handoff_monospace_redesign) — nur mit
   Mock-Daten befüllt. Kein Screenshot, kein iframe: derselbe Vektor-Look,
   scharf, skaliert mit, kein Login/Backend nötig.

   Alles ist unter `.uic` (Konsole/Browser) bzw. `.uia` (App/Handy)
   gekapselt, damit es die bestehenden Landing-Styles nicht berührt.
   Tokens sind 1:1 aus dashboard.html / mono-tokens.css übernommen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Konsole (Browser-Rahmen) ──────────────────────────────────────────── */
.uic {
  --c-red:#E2402A; --c-red-2:#C2331F;
  --c-ink:#161513; --c-mocha:#6C6A63; --c-stone:#9A988F; --c-ink3:#9A988F;
  --c-surface:#FFFFFF; --c-surface-2:#FAFAF7; --c-surface-3:#ECEBE5; --c-ground:#F4F3EF;
  --c-line:#DEDCD4; --c-line-soft:#E7E5DE; --c-line-strong:#CBC9BF;
  --c-warn:#C2331F; --c-warn-bg:#FBE9E5;
  --c-ok-bg:#ECEBE5;
  --c-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--c-ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size:13px; line-height:1.5; text-align:left;
}
.uic .num, .uic .mono { font-family:var(--c-mono); font-variant-numeric:tabular-nums; }

/* header strip */
.uic-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.uic-title { font-size:16px; font-weight:700; letter-spacing:-.3px; }
.uic-meta { font-family:var(--c-mono); font-size:12px; color:var(--c-mocha); }
.uic-lede { font-size:12.5px; line-height:1.5; color:var(--c-mocha); margin:0 0 12px; }

/* KPI tiles */
.uic-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.uic-tiles.cols-2 { grid-template-columns:repeat(2,1fr); }
.uic-tile { background:var(--c-surface); border:1px solid var(--c-line); padding:12px 12px 13px; }
.uic-tile .t-top { display:flex; align-items:center; gap:8px; }
.uic-tile .t-ic { width:26px; height:26px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.uic-tile .t-ic svg { width:14px; height:14px; }
.uic-tile .t-l { font-size:11.5px; font-weight:600; color:var(--c-mocha); }
.uic-tile .t-v { font-family:var(--c-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:500; letter-spacing:-1px; margin-top:11px; line-height:1; }
.uic-tile .t-v small { font-size:13px; color:var(--c-mocha); letter-spacing:0; }
.uic-tile .t-x { font-size:11px; color:var(--c-mocha); margin-top:6px; }
.uic-tile .t-d { font-family:var(--c-mono); font-variant-numeric:tabular-nums; font-size:10.5px; margin-left:auto; padding:2px 6px; border-radius:999px; background:var(--c-ok-bg); color:var(--c-ink); white-space:nowrap; }
.uic-tile .t-d.up::before { content:"\25B2\00A0"; }

/* icon tints */
.uic .ic-sage  { background:var(--c-ok-bg);   color:var(--c-ink); }
.uic .ic-amber { background:var(--c-warn-bg);  color:var(--c-warn); }
.uic .ic-blush { background:#F7E6E6;           color:var(--c-mocha); }
.uic .ic-terra { background:var(--c-warn-bg);  color:var(--c-red-2); }
.uic .ic-mocha { background:var(--c-surface-3);color:var(--c-mocha); }

/* two-column row */
.uic-row { display:grid; grid-template-columns:1.35fr 1fr; gap:10px; margin-top:10px; }
.uic-row.even { grid-template-columns:1fr 1fr; }

/* panels */
.uic-panel { background:var(--c-surface); border:1px solid var(--c-line); display:flex; flex-direction:column; }
.uic-panel .p-h { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--c-line-soft); }
.uic-panel .p-ic { width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.uic-panel .p-ic svg { width:15px; height:15px; }
.uic-panel .p-h h3 { font-size:13px; font-weight:700; margin:0; letter-spacing:-.1px; line-height:1.2; }
.uic-panel .p-sub { font-size:11px; color:var(--c-mocha); margin-top:1px; }
.uic-panel .p-b { padding:13px; flex:1; }
.uic .lg { display:inline-block; width:8px; height:8px; vertical-align:-1px; }
.uic .lg-gross { background:var(--c-ink); }
.uic .lg-paid { background:var(--c-ink3); }

/* bar chart (single or dual series) */
.uic-chart { display:flex; align-items:flex-end; gap:5px; height:150px; margin-top:4px; }
.uic-chart .col { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.uic-chart .bar-track { width:100%; flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.uic-chart .bar { width:60%; max-width:22px; min-height:3px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--c-red-2),var(--c-red)); }
.uic-chart.dual .bar { width:38%; max-width:14px; }
.uic-chart .bar.paid { background:var(--c-ink3); }
.uic-chart .col.now .bar.gross, .uic-chart .col.now .bar:not(.paid) { background:linear-gradient(180deg,var(--c-ink),#000); }
.uic-chart .cl { font-size:10px; color:var(--c-mocha); white-space:nowrap; }
.uic-chart .col.now .cl { color:var(--c-ink); font-weight:700; }

/* radial gauge (the signature instrument) */
.uic-gauge-wrap { display:flex; align-items:center; gap:14px; }
.uic-gauge { position:relative; width:132px; flex-shrink:0; }
.uic-gauge svg { width:100%; display:block; overflow:visible; }
.uic-gauge .g-track { fill:none; stroke:var(--c-surface-3); stroke-width:12; stroke-linecap:round; }
.uic-gauge .g-val { fill:none; stroke:var(--c-ink); stroke-width:12; stroke-linecap:round; }
.uic-gauge .g-val.warn { stroke:var(--c-red); }
.uic-gauge .g-center { position:absolute; left:0; right:0; bottom:4px; text-align:center; }
.uic-gauge .g-center .gv { font-family:var(--c-mono); font-variant-numeric:tabular-nums; font-size:22px; font-weight:500; letter-spacing:-.5px; line-height:1; }
.uic-gauge .g-center .gl { font-size:11px; color:var(--c-mocha); margin-top:3px; }
.uic-gside { min-width:0; flex:1; }
.uic-gside .gs-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid var(--c-line-soft); font-size:12px; }
.uic-gside .gs-row:last-child { border-bottom:none; }
.uic-gside .gs-row .k { color:var(--c-mocha); }
.uic-gside .gs-row .v { font-weight:600; font-family:var(--c-mono); font-variant-numeric:tabular-nums; }

/* definition rows */
.uic-dl { display:flex; flex-direction:column; }
.uic-dl .row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--c-line-soft); }
.uic-dl .row:last-child { border-bottom:none; }
.uic-dl .k { color:var(--c-mocha); font-size:12.5px; }
.uic-dl .v { font-weight:600; font-size:13px; text-align:right; }

/* team distribution bar */
.uic-distro { display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--c-surface-3); }
.uic-distro i { height:100%; }
.uic-distro .d-a { background:var(--c-red); }
.uic-distro .d-b { background:var(--c-ink); }
.uic-distro .d-c { background:var(--c-stone); }
.uic-distro-lg { display:flex; gap:16px; flex-wrap:wrap; margin-top:11px; font-size:12px; color:var(--c-mocha); }
.uic-distro-lg span { display:inline-flex; align-items:center; gap:7px; }
.uic-distro-lg i { width:9px; height:9px; border-radius:3px; display:inline-block; flex-shrink:0; }
.uic-distro-lg b { font-family:var(--c-mono); }

/* invoice list (real console status chips) */
.uic-invlist { display:flex; flex-direction:column; }
.uic-invrow { display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:11px 13px; border:1px solid var(--c-line); border-bottom:none; background:var(--c-surface); }
.uic-invrow:last-child { border-bottom:1px solid var(--c-line); }
.uic-invrow .inv-num { font-family:var(--c-mono); font-size:12.5px; color:var(--c-mocha); }
.uic-invrow .inv-who { font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uic-invrow .inv-amt { font-family:var(--c-mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; white-space:nowrap; }
.uic-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--c-mono); font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px solid var(--c-line); color:var(--c-ink); background:var(--c-surface-2); white-space:nowrap; }
.uic-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--c-stone); flex:0 0 auto; }
.uic-chip.is-issued .dot { background:#C98A12; }
.uic-chip.is-paid   .dot { background:#2F7D32; }
.uic-chip.is-open   .dot { background:#C98A12; }
.uic-chip.is-failed { color:var(--c-red); border-color:var(--c-red); }
.uic-chip.is-failed .dot { background:var(--c-red); }

/* single §14 invoice document (Rechnungs-Beleg) */
.uic-doc { background:var(--c-surface); border:1px solid var(--c-line); padding:16px; }
.uic-doc .d-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:11px; border-bottom:1px solid var(--c-line); }
.uic-doc .d-no { font-family:var(--c-mono); font-size:12.5px; font-weight:600; letter-spacing:.3px; }
.uic-doc .d-line { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--c-line-soft); font-size:13px; }
.uic-doc .d-line span:last-child { font-family:var(--c-mono); font-variant-numeric:tabular-nums; font-weight:600; }
.uic-doc .d-total { display:flex; justify-content:space-between; gap:16px; padding-top:11px; margin-top:3px; font-weight:700; font-size:15px; }
.uic-doc .d-total span:last-child { font-family:var(--c-mono); font-variant-numeric:tabular-nums; }

/* week calendar (dashboard Termine) */
.uic-week { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.uic-week .day h4 { font-family:var(--c-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-mocha); margin:0 0 8px; font-weight:600; }
.uic-week .day { border-left:1px solid var(--c-line-soft); padding-left:8px; min-height:96px; }
.uic-week .ev { background:var(--c-surface); border:1px solid var(--c-line); border-left:2px solid var(--c-ink); padding:7px 8px; margin-bottom:6px; }
.uic-week .ev.now { border-left-color:var(--c-red); }
.uic-week .ev .m { font-family:var(--c-mono); font-size:10.5px; color:var(--c-mocha); }
.uic-week .ev .t { font-size:11.5px; font-weight:600; margin-top:2px; line-height:1.25; }

@media (max-width:560px) {
  .uic-tiles { grid-template-columns:repeat(2,1fr); }
  .uic-row, .uic-row.even { grid-template-columns:1fr; }
}

/* ── App (Handy-Rahmen) ────────────────────────────────────────────────── */
/* Echte App-Designsprache (mono-tokens.css): Paper+Ink, ein Rot, JetBrains
   Mono, scharfe Kanten, Haarlinien, keine Schatten. */
.uia {
  --a-ink:#161513; --a-ink2:#6C6A63; --a-ink3:#9A988F;
  --a-paper:#F4F3EF; --a-surface:#FFFFFF; --a-line:#DEDCD4; --a-line2:#CBC9BF;
  --a-red:#E2402A; --a-red-wash:#FBE9E5;
  --a-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --a-sans:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  color:var(--a-ink); font-family:var(--a-mono); text-align:left;
}
.uia-eyebrow { font-family:var(--a-mono); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--a-ink2); }
.uia-h { font-family:var(--a-mono); font-size:20px; font-weight:600; letter-spacing:-.02em; margin:4px 0 0; line-height:1.05; }
.uia-h .soft { color:var(--a-ink2); font-weight:400; }
.uia-rule { height:1px; background:var(--a-line); margin:14px 0; }

/* list item card (Termin / Rechnung) */
.uia-item { border:1px solid var(--a-line); background:var(--a-surface); padding:11px 12px; margin-top:8px; }
.uia-item.now { border-color:var(--a-ink); border-left-width:2px; }
.uia-item-top { display:flex; align-items:center; gap:8px; }
.uia-time { font-family:var(--a-mono); font-size:12px; font-weight:600; letter-spacing:-.01em; }
.uia-tag { font-family:var(--a-mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--a-ink2); border:1px solid var(--a-line2); padding:2px 6px; margin-left:auto; }
.uia-tag.red { color:var(--a-red); border-color:var(--a-red); }
.uia-item-t { font-family:var(--a-mono); font-size:13px; font-weight:500; margin-top:8px; }
.uia-item-s { font-family:var(--a-sans); font-size:11.5px; color:var(--a-ink2); margin-top:3px; }

/* chat thread */
.uia-thread { display:flex; flex-direction:column; gap:9px; }
.uia-bub { max-width:82%; font-family:var(--a-sans); font-size:12px; line-height:1.4; padding:9px 11px; border:1px solid var(--a-line); background:var(--a-surface); }
.uia-bub .who { display:block; font-family:var(--a-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--a-ink2); margin-bottom:4px; }
.uia-bub.me { align-self:flex-end; background:var(--a-ink); color:var(--a-paper); border-color:var(--a-ink); }
.uia-bub.me .who { color:rgba(244,243,239,.6); }
.uia-bub.sys { align-self:center; text-align:center; max-width:100%; font-family:var(--a-mono); font-size:10.5px; color:var(--a-ink2); background:var(--a-paper); border-style:dashed; }

/* mini invoice on phone */
.uia-doc { border:1px solid var(--a-line); background:var(--a-surface); padding:12px; }
.uia-doc .r { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--a-line); font-family:var(--a-sans); font-size:12px; color:var(--a-ink2); }
.uia-doc .r .n { font-family:var(--a-mono); font-variant-numeric:tabular-nums; color:var(--a-ink); }
.uia-doc .r.total { border-bottom:none; padding-top:9px; font-family:var(--a-mono); font-weight:700; color:var(--a-ink); font-size:14px; }