/* Topcard — Design-System v3 (gem. Designvorlage: Creme/Navy/Gold, Charcoal-Buttons) */

:root {
  --navy: #0a183f;
  --navy-deep: #051234;
  --navy-mid: #14214b;
  --creme: #f0ede5;
  --card: #ffffff;
  --charcoal: #444444;
  --charcoal-hover: #333333;
  --gold: #b38624;
  --text: #444444;
  --text-strong: #222222;
  --muted: #8a8a8a;
  --border: #e5e1d8;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--creme);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ===== Banner (schmal auf Mobile) ===== */
.appbar {
  background: var(--navy-deep) url("/static/img/header_bg.jpg") center/cover no-repeat;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
}
.appbar-inner {
  max-width: 480px;
  margin: 0 auto;
  height: 64px;              /* schmal auf Mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand img { height: 26px; display: block; }

/* ===== Layout ===== */
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

/* ===== Hero (Saldo) ===== */
.hero {
  padding: 8px 4px 20px;
}
.hero-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}
.hero-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.hero-amount {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-strong);
  margin-top: 2px;
}
.hero-amount .cur {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}
.hero-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

/* ===== Karten ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(5, 18, 52, 0.08);
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.row + .row { border-top: 1px solid var(--border); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.amount { font-size: 16px; font-weight: 700; color: var(--text-strong); }

/* ===== Link-Karten (Chevron) ===== */
.link-card { cursor: pointer; }
.link-card > .row > span:first-child {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 15px;
}
.chev {
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* ===== Transaktionsliste ===== */
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 4px 8px;
}
.list-head h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.tx-list {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(5, 18, 52, 0.08);
  overflow: hidden;
}
.tx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.tx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-desc {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-meta { font-size: 12px; color: var(--muted); }
.tx-amount { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tx-amount.neg { color: var(--text-strong); }
.tx-amount.pos { color: #2e7d32; }
.tx-sep { height: 1px; background: var(--border); margin: 0 16px; }

/* ===== Buttons ===== */
.btn-primary {
  display: block;
  background: var(--charcoal);
  color: #eaf5f9;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 24px;
  border-radius: 8px;
  margin: 16px 0 8px;
}
.btn-primary:active { background: var(--charcoal-hover); }
.btn-secondary {
  display: block;
  background: #000000;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 8px;
  margin: 16px 0 8px;
}
.btn-secondary:active { background: #1a1a1a; }

/* ===== Page-Head / Back ===== */
.page-head { padding: 4px 4px 14px; }
.back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 6px;
}
.page-head h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
}

/* ===== Archiv ===== */
.arch-item { cursor: pointer; }
.arch-title { font-weight: 600; color: var(--text-strong); font-size: 15px; }

/* ===== Footnote ===== */
.footnote {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 4px;
  line-height: 1.5;
}

/* ===== Desktop-Hinweis (mobile only) ===== */
@media (min-width: 700px) {
  .appbar-inner, .app { max-width: 480px; }
}