/* Depot-Übersicht — ruhige, klare Oberfläche */
:root {
  --bg: #f5f6f8; --flaeche: #fff; --text: #1d2229; --dezent: #6b7280; --linie: #e3e6ea;
  --akzent: #1f5fbf; --akzent-hell: #e8f0fc; --plus: #1a7f4b; --minus: #c0392b; --gefahr: #c0392b;
  --radius: 10px; --schatten: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
body { margin: 0; }
h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h2.klein { font-size: .95rem; color: var(--dezent); margin: 2rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; color: var(--dezent); text-transform: uppercase; letter-spacing: .03em; }
small { font-size: .8em; }
.dezent { color: var(--dezent); }
.plus { color: var(--plus); } .minus { color: var(--minus); }
.fehler { color: var(--minus); margin: .4rem 0; }
[hidden] { display: none !important; }

header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.5rem; background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.kopf-rechts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

button { font: inherit; padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--akzent); background: var(--akzent); color: #fff; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: default; }
button.sekundaer { background: var(--akzent-hell); color: var(--akzent); }
button.leise { background: transparent; color: var(--akzent); border-color: transparent; padding: .35rem .6rem; }
button.leise:hover { background: var(--akzent-hell); }
button.gefahr { color: var(--gefahr); }
button.gefahr:hover { background: #fbeae8; }

/* Auge: Beträge verbergen (Diskret-Modus) */
.auge { display: inline-flex; align-items: center; padding: .3rem .45rem; color: var(--dezent); }
.auge .auge-zu, .auge[aria-pressed="true"] .auge-offen { display: none; }
.auge[aria-pressed="true"] .auge-zu { display: inline; }
body.diskret .kennzahlen, body.diskret .depot-kopf .wert, body.diskret .depot-kopf .gv, body.diskret .depot-kopf .einstand { display: none; }
body.diskret .positionen th:nth-child(2), body.diskret .positionen td:nth-child(2),
body.diskret .positionen th:nth-child(7), body.diskret .positionen td:nth-child(7) { display: none; }
body.diskret .pos-kennzahlen .bestand, body.diskret .pos-kennzahlen .kurswert { display: none; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kennzahl, .pos-kennzahlen > div { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.label { font-size: .8rem; color: var(--dezent); text-transform: uppercase; letter-spacing: .03em; }
.kennzahl strong { font-size: 1.45rem; font-weight: 600; }

.depot { margin-bottom: 2rem; }
.depot-kopf { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .6rem .2rem; }
.depot-kopf h2 { margin: 0; font-size: 1.2rem; }
.depot-kopf .wert { font-weight: 600; font-size: 1.05rem; }
.depot-kopf .dezent { font-size: .9rem; }
.meldung { padding: .6rem 1rem; border-radius: 8px; background: var(--akzent-hell); color: var(--akzent); margin: 0 0 1rem; }
.meldung.fehler { background: #fbeae8; color: var(--minus); }
.leer { color: var(--dezent); text-align: center; padding: 3rem 1rem; background: var(--flaeche); border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
th, td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .78rem; color: var(--dezent); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; background: #fafbfc; }
tr:last-child td { border-bottom: none; }
.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.positionen tbody tr { cursor: pointer; }
.positionen tbody tr:hover { background: var(--akzent-hell); }
.geschlossen { opacity: .85; }
.trend { white-space: nowrap; }
.trend.neutral { color: var(--dezent); }
.trends small { color: var(--dezent); font-size: .75em; }
.pos-kennzahlen .trends { font-size: 1rem; }
td.kauf { color: var(--plus); } td.verkauf { color: var(--minus); }
td.aktionen { white-space: nowrap; text-align: right; }
.transaktionen button.leise { padding: .2rem .5rem; font-size: .85rem; }

dialog { border: none; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.2); padding: 1.5rem; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
dialog::backdrop { background: rgba(20,25,35,.45); }
#dlg-pos { width: min(960px, calc(100vw - 2rem)); }
.pos-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pos-kopf p { margin: .2rem 0 0; }
.pos-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; margin: 1rem 0; }
.pos-kennzahlen strong { font-size: 1.1rem; }
.pos-kennzahlen small { display: block; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--dezent); margin-bottom: .8rem; }
input, select, textarea { font: inherit; color: var(--text); padding: .5rem .65rem; border: 1px solid #cfd4da; border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
.zeile { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.zeile.depotname { grid-template-columns: 1fr 2.2fr; }
.zeile.zwei { grid-template-columns: 1fr 1fr; }
.zeile.drei { grid-template-columns: 1.2fr 1fr 1fr; }
.zeile.fuenf { grid-template-columns: .8fr 1.1fr 1fr 1fr 1fr; }
.knoepfe { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.tx-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

.treffer { list-style: none; margin: -.5rem 0 1rem; padding: 0; border: 1px solid var(--linie); border-radius: 8px; max-height: 220px; overflow: auto; }
.treffer li { padding: .5rem .7rem; cursor: pointer; border-bottom: 1px solid var(--linie); }
.treffer li:last-child { border-bottom: none; }
.treffer li:hover { background: var(--akzent-hell); }

body.login { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: var(--flaeche); padding: 2rem; border-radius: var(--radius); box-shadow: var(--schatten); width: min(340px, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .6rem; }
.login-box h1 { margin-bottom: .5rem; }
.login-box label { margin: 0; }
.login-box input { width: 100%; }

@media (max-width: 720px) {
  main { padding: 1rem; }
  header { padding: .7rem 1rem; }
  .zeile.drei, .zeile.fuenf { grid-template-columns: 1fr 1fr; }
  th:nth-child(3), td:nth-child(3), th:nth-child(6), td:nth-child(6), th:nth-child(10), td:nth-child(10) { display: none; }
  .transaktionen th:nth-child(7), .transaktionen td:nth-child(7) { display: none; }
}