/* Dunkles, ruhiges Finanz-Dashboard: keine umrandeten Boxen – Gliederung
   entsteht nur über Weißraum, Typografie und sehr dezente Flächentöne. */
:root{
  --bg: #0B0C0F;
  --bg-deep: #07080A;
  --surface: rgba(255,255,255,0.025);
  --surface-hover: rgba(255,255,255,0.045);
  --parchment: #E8EAED;
  --parchment-dim: #8B919A;
  --gold: #C9A227;
  --gold-bright: #E4C55A;
  --ink: #16181C;
  --red: #9A3B32;
  --green: #3E7A5A;
  --pos: #6FD19C;
  --neg: #EE8277;
  --hairline: rgba(255,255,255,0.06);
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  header.top, .pagenav, .hero, .ledger, #kurseWarnung:not([hidden]), section {
    animation: fadeInUp .5s ease both;
  }
  header.top{ animation-delay: 0s; }
  .pagenav{ animation-delay: .03s; }
  .hero{ animation-delay: .05s; }
  .ledger{ animation-delay: .1s; }
  section:nth-of-type(1){ animation-delay: .12s; }
  section:nth-of-type(2){ animation-delay: .16s; }
  section:nth-of-type(3){ animation-delay: .2s; }
  section:nth-of-type(4){ animation-delay: .24s; }
  section:nth-of-type(5){ animation-delay: .28s; }
  section:nth-of-type(6){ animation-delay: .32s; }
  section:nth-of-type(7){ animation-delay: .36s; }
}
@keyframes syncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
#syncBtn:disabled{ animation: syncPulse 1.1s ease-in-out infinite; }

body{
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(201,162,39,0.07) 0%, transparent 70%),
    var(--bg);
  color: var(--parchment);
  font-family: 'Public Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 48px;
  /* Vertikales Scrollen bleibt nativ, horizontale Touch-Gesten gehen an JS
     (Seiten-Wischen) statt vom Browser als Geste "gestohlen" zu werden. */
  touch-action: pan-y;
}
.wrap{ max-width: 880px; margin: 0 auto; padding: 28px 20px 0; }

header.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 22px;
}
.brand{
  font-family:'Public Sans', sans-serif; font-weight:700; font-size: 1.3rem;
  letter-spacing: -0.005em;
  color: var(--parchment);
}
.brand small{ display:block; font-weight:500; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--parchment-dim); margin-top:4px; }
#syncBtn{
  background: rgba(201,162,39,0.12); border:none; color: var(--gold-bright);
  font-family:'Public Sans',sans-serif; font-size:0.8rem; font-weight:600;
  padding:9px 16px; border-radius:999px; cursor:pointer; letter-spacing:0.01em;
  transition: background .15s ease, color .15s ease;
  white-space:nowrap;
}
#syncBtn:hover{ background: var(--gold); color: var(--bg-deep); }
#syncBtn:disabled{ opacity:.5; cursor:default; }
#syncBtn:focus-visible, .pagenav a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* --- Seiten-Navigation: reine Text-Tabs, aktiver Tab dezent hinterlegt --- */
.pagenav{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom: 34px; }
.pagenav a{
  font-size:0.8rem; font-weight:500;
  padding:7px 14px; border-radius:999px;
  color: var(--parchment-dim); text-decoration:none;
  transition: color .15s ease, background-color .15s ease;
}
.pagenav a:hover{ color: var(--parchment); background: var(--surface); }
.pagenav a.active{ background: rgba(255,255,255,0.07); color: var(--parchment); font-weight:600; }

/* --- Hero --- */
.hero{
  text-align:left; padding: 6px 0 34px;
}
.hero .label{ font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--parchment-dim); margin-bottom:10px;}
.hero .plaque{
  font-family:'Public Sans', sans-serif; font-weight:600; font-size: clamp(2.6rem, 11vw, 4.2rem);
  line-height:1; font-variant-numeric: tabular-nums;
  color: var(--parchment);
  letter-spacing: -0.025em;
}
.hero .delta{ margin-top: 12px; font-family:'IBM Plex Mono', monospace; font-size:0.85rem; }
.delta.up{ color: var(--pos); }
.delta.down{ color: var(--neg); }
.delta.flat{ color: var(--parchment-dim); }

/* --- Ledger: Zeilenliste ohne Rahmen und ohne Trennlinien --- */
.ledger{
  margin: 0 -10px 34px;
}
.ledger-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 11px 10px;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.ledger-row:hover{ background-color: var(--surface); }
.ledger-row .name{ display:flex; align-items:center; gap:10px; }
.swatch{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.ledger-row .amount{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.ledger-row.total{ font-weight:600; margin-top:10px; }
.ledger-row.total .amount{ color: var(--gold-bright); }
.ledger-row.negative .amount{ color: var(--neg); }
.ledger-row.positive .amount{ color: var(--pos); }

.ledger-row.collapsible{ cursor:pointer; user-select:none; }
.ledger-row.collapsible .chevron{
  font-size:0.65rem; color: var(--parchment-dim); margin-left:2px; display:inline-block;
  transition: transform .15s ease;
}
.ledger-row.collapsible.open .chevron{ transform: rotate(180deg); }
.ledger-detail{ padding-left:18px; }
.ledger-detail .ledger-row.sub{
  font-size:0.84rem; padding:6px 10px; color: var(--parchment-dim);
}

.ziel-row{ flex-direction:column; align-items:stretch; gap:3px; padding:10px 10px; }
.ziel-row + .ziel-row{ margin-top:4px; }
.ziel-row-main{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:0.84rem; }
.ziel-row-detail{ font-size:0.7rem; color: var(--parchment-dim); font-family:'IBM Plex Mono', monospace; }

.divbar-track{ position:relative; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; width:100%; overflow:hidden; margin-top:6px; }
.divbar-fill{ position:absolute; top:0; bottom:0; border-radius:2px; }

.ziel-note, .kryptoDefiSollInput{
  background: var(--surface); border:none; border-radius:6px;
  color:var(--parchment); transition: background-color .15s ease, box-shadow .15s ease;
}
.ziel-note{
  width:100%; margin-top:8px; resize:vertical; min-height:28px;
  font-family:'Public Sans', sans-serif; font-size:0.78rem;
  padding:6px 9px;
}
.kryptoDefiSollInput{
  width:56px; font-family:'IBM Plex Mono',monospace; padding:2px 5px;
}
.ziel-note::placeholder{ color:var(--parchment-dim); opacity:.6; }
.ziel-note:focus, .kryptoDefiSollInput:focus{
  outline:none; background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(201,162,39,0.55);
}

.label{ font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--parchment-dim); margin-bottom:10px; }

section h2{
  font-family:'Public Sans', sans-serif; font-weight:600; font-size:1.05rem;
  color: var(--parchment); margin: 0 0 16px; letter-spacing:0;
}
section{ margin-bottom: 44px; }

section h2.collapsible{
  cursor:pointer; display:flex; align-items:center; gap:8px; user-select:none;
}
section h2.collapsible .chevron{
  font-size:0.75rem; color: var(--parchment-dim); transition: transform .15s ease;
}
section h2.collapsible.collapsed .chevron{ transform: rotate(-90deg); }

/* Charts stehen frei auf dem Hintergrund – kein Kasten drumherum. */
.chart-card{ padding: 4px 0 0; }
.chart-wrap{ position:relative; width:100%; height:220px; }
@media (max-width: 480px){ .chart-wrap{ height:280px; } }

.chart-resize-handle{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:16px; margin-top:2px; cursor:ns-resize; touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.chart-resize-handle::before{
  content:''; width:32px; height:3px; border-radius:2px;
  background: rgba(255,255,255,0.08);
  transition: background-color .15s ease, width .15s ease;
}
.chart-resize-handle:hover::before, .chart-resize-handle.dragging::before{
  background: var(--gold); width:48px;
}

/* --- Tabellen: keine Linien, nur Hover-Fläche --- */
table{ width:100%; border-collapse: separate; border-spacing:0; font-size:0.86rem; }
th{
  text-align:left; font-weight:500; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--parchment-dim); padding: 8px 10px 10px;
}
th[data-sort]{ cursor:pointer; white-space:nowrap; transition: color .15s ease; }
th[data-sort]:hover{ color: var(--parchment); }
th[data-sort].sorted::after{ content:' ' attr(data-arrow); color: var(--gold-bright); }

.collapsible-body{ overflow:hidden; max-height:4000px; transition: max-height .35s ease, opacity .25s ease; opacity:1; }
.collapsible-body.collapsed{ max-height:0; opacity:0; }
tbody tr{ transition: background-color .15s ease; }
tbody tr:hover{ background-color: var(--surface); }
td{ padding: 10px 10px; vertical-align:top; }
tbody tr td:first-child{ border-radius: 8px 0 0 8px; }
tbody tr td:last-child{ border-radius: 0 8px 8px 0; }
td.num, th.num{ text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
/* touch-action:auto überschreibt hier bewusst das body-weite "pan-y", damit
   breite Tabellen auf Touch-Geräten trotzdem horizontal scrollbar bleiben
   (Seiten-Wischen startet ohnehin nie innerhalb einer .table-wrap). */
.table-wrap{ overflow-x:auto; margin: 0 -10px; touch-action:auto; }
@media (max-width: 480px){
  table{ font-size:0.76rem; }
  th{ font-size:0.6rem; padding:6px 6px 8px; }
  td{ padding:8px 6px; }
  .tag{ font-size:0.66rem; }
}
/* Tag = farbiger Punkt + Text statt umrandeter Pille. Die Farbe kommt über
   --tag-color (Fallback: gedämpftes Grau). */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.74rem; color:var(--parchment-dim); white-space:nowrap;
}
.tag::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background: var(--tag-color, var(--parchment-dim));
}

.warning-banner{
  background: rgba(238,130,119,0.1); border-radius:10px;
  padding:11px 14px; margin-bottom:28px; font-size:0.82rem; color: var(--neg);
}

.empty{ color: var(--parchment-dim); font-size:0.9rem; padding: 20px; text-align:center; }
footer{ text-align:center; font-size:0.7rem; color:var(--parchment-dim); opacity:.6; margin-top: 48px; }
.ledger > .ziel-row-detail, .ledger > .empty{ padding-left:10px; padding-right:10px; }