/* Versus — Gestaltung
   Ruhige Statistik-Ansicht: Karten, Kennzahl-Kacheln,
   Chip-Leisten. Alle Farben laufen über Variablen; der Dunkelmodus
   definiert nur die Variablen neu. */

:root {
    color-scheme: light dark;

    --grund:     #f4f4f5;
    --surface:   #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f4f4f5;
    --surface-4: #e4e4e7;
    --line:      #e4e4e7;

    --ink:   #18181b;
    --ink-2: #3f3f46;
    --ink-3: #71717a;
    --ink-4: #a1a1aa;

    --akzent:      #4f46e5;
    --akzent-hell: #eef2ff;
    --auf-akzent:  #ffffff;

    --ein: #059669;   /* Einnahmen */
    --aus: #e11d48;   /* Ausgaben */
    --gut: #047857;
    --schlecht: #be123c;
    --warn-grund: #fffbeb;
    --warn-linie: #fde68a;
    --warn-text:  #92400e;

    /* Jahresfarben: ein Jahr behält seine Farbe in jeder Ansicht */
    --j0: #4f46e5;
    --j1: #0891b2;
    --j2: #d97706;
    --j3: #059669;
    --j4: #c026d3;
    --j5: #dc2626;
    --j6: #65a30d;
    --j7: #0f766e;

    --radius: .85rem;
    --schatten: 0 1px 2px rgb(0 0 0 / .04), 0 1px 1px rgb(0 0 0 / .02);
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund:     #09090b;
        --surface:   #18181b;
        --surface-2: #1f1f23;
        --surface-3: #27272a;
        --surface-4: #3f3f46;
        --line:      #27272a;

        --ink:   #fafafa;
        --ink-2: #e4e4e7;
        --ink-3: #a1a1aa;
        --ink-4: #71717a;

        --akzent:      #818cf8;
        --akzent-hell: #1e1b4b;
        --auf-akzent:  #0b0b12;

        --ein: #34d399;
        --aus: #fb7185;
        --gut: #34d399;
        --schlecht: #fb7185;
        --warn-grund: #1f1a0c;
        --warn-linie: #713f12;
        --warn-text:  #fcd34d;

        --j0: #818cf8;
        --j1: #22d3ee;
        --j2: #fbbf24;
        --j3: #34d399;
        --j4: #e879f9;
        --j5: #f87171;
        --j6: #a3e635;
        --j7: #2dd4bf;

        --schatten: none;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--ink);
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "tnum";
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
p { margin: 0; }

button, input, select { font: inherit; color: inherit; }

/* ── Rahmen ─────────────────────────────────────────────────────────── */

.kopf {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--grund) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}

.kopf-innen {
    max-width: 72rem;
    margin: 0 auto;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.marke {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .45rem;
}
.marke:hover { text-decoration: none; }
.marke-zeichen {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: .5rem;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-size: .8rem;
    letter-spacing: -.06em;
}

.navi { display: flex; gap: .25rem; }
.navi a {
    padding: .4rem .75rem;
    border-radius: .55rem;
    color: var(--ink-3);
    font-weight: 500;
    font-size: .92rem;
}
.navi a:hover { color: var(--ink); background: var(--surface-3); text-decoration: none; }
.navi a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: var(--schatten); }
.navi-symbol { display: none; }

main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.4rem 1rem 3rem;
}

.seitenkopf { margin-bottom: 1.2rem; }
.seitenkopf p { color: var(--ink-3); margin-top: .25rem; }

/* Auf dem Handy wandert die Navigation nach unten, in Daumenreichweite. */
@media (max-width: 720px) {
    /* backdrop-filter macht die Kopfzeile zum Bezugsrahmen für
       position: fixed — die Navigation klebte dadurch oben statt unten. */
    .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--grund); }
    .kopf-innen { justify-content: center; }
    .navi {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        justify-content: space-around;
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
        border-top: 1px solid var(--line);
    }
    .navi a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .1rem;
        font-size: .68rem;
        padding: .3rem .5rem;
        min-width: 3.6rem;
    }
    .navi a[aria-current="page"] { background: none; box-shadow: none; color: var(--akzent); }
    .navi-symbol { display: block; width: 1.35rem; height: 1.35rem; }
    main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    h1 { font-size: 1.35rem; }
}

/* ── Karten und Kacheln ─────────────────────────────────────────────── */

.karte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    min-width: 0;
}
.karte > h2 { margin-bottom: .2rem; }
.karte > .erklaerung { color: var(--ink-3); font-size: .88rem; margin-bottom: .9rem; }

.raster-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .raster-2 { grid-template-columns: 1fr 1fr; } }
.raster-2 > .karte { margin-bottom: 0; }
.raster-2 { margin-bottom: 1rem; }

.kacheln { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
@media (min-width: 900px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kacheln.drei { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.kachel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: .8rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.karte .kachel { background: var(--surface-2); box-shadow: none; }
.kachel-lbl { font-size: .8rem; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: .4rem; }
.kachel-num { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.kachel-sub { font-size: .78rem; color: var(--ink-3); }

.punkt { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: none; }

.plus { color: var(--gut); }
.minus { color: var(--schlecht); }
.ein { color: var(--ein); }
.aus { color: var(--aus); }
.leise { color: var(--ink-3); }
.klein { font-size: .8rem; }

.hinweis {
    background: var(--warn-grund);
    border: 1px solid var(--warn-linie);
    color: var(--warn-text);
    border-radius: .6rem;
    padding: .55rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.zeile-info { font-size: .82rem; color: var(--ink-3); margin-bottom: 1rem; }

/* ── Auswahl: Chips und Segmente ────────────────────────────────────── */

.auswahl { display: grid; gap: .8rem; }
.auswahl-zeile { display: grid; gap: .35rem; }
.auswahl-titel { font-size: .75rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--ink-4); }
.chip.an { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.chip.an .punkt { box-shadow: 0 0 0 2px var(--auf-akzent); }
.chip.nebensache { background: none; border-style: dashed; color: var(--ink-3); }

.segmente {
    display: inline-flex;
    padding: .2rem;
    border-radius: .65rem;
    background: var(--surface-3);
    gap: .15rem;
    max-width: 100%;
    overflow-x: auto;
}
.segmente a {
    padding: .3rem .8rem;
    border-radius: .5rem;
    color: var(--ink-3);
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}
.segmente a:hover { color: var(--ink); text-decoration: none; }
.segmente a.an { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: .6rem;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
}
.knopf:hover { border-color: var(--ink-4); text-decoration: none; }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.gefahr { color: var(--schlecht); }

/* ── Tabellen ───────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; margin: 0 -1.2rem; padding: 0 1.2rem; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th {
    text-align: left;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.summe td { font-weight: 700; border-top: 2px solid var(--line); }
.zahl { text-align: right; white-space: nowrap; }
td .unter { display: block; font-size: .75rem; color: var(--ink-3); font-weight: 400; }
tbody tr:hover td { background: var(--surface-2); }
td.name { font-weight: 600; white-space: nowrap; }
td.name a { color: inherit; }

.zellbalken { display: block; height: 3px; border-radius: 2px; background: var(--surface-4); margin-top: .3rem; overflow: hidden; }
.zellbalken > span { display: block; height: 100%; border-radius: 2px; }

/* ── Buchungslisten ─────────────────────────────────────────────────── */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .1rem .8rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
}
.liste li:last-child { border-bottom: 0; }
.liste .titel { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.liste .betrag { text-align: right; font-weight: 600; white-space: nowrap; }
.liste .meta { font-size: .76rem; color: var(--ink-3); grid-column: 1 / -1; }
.liste a.zeile { display: contents; color: inherit; }

details.mehr > summary {
    cursor: pointer;
    color: var(--akzent);
    font-size: .88rem;
    font-weight: 500;
    padding: .5rem 0 0;
    list-style: none;
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] > summary { padding-bottom: .3rem; }
details.mehr[open] > summary .zu { display: none; }
details.mehr:not([open]) > summary .auf { display: none; }

/* ── Balken (Gruppenanteile) ────────────────────────────────────────── */

.anteile { display: grid; gap: .55rem; }
.anteil { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; font-size: .88rem; }
.anteil .balken { grid-column: 1 / -1; height: .45rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.anteil .balken > span { display: block; height: 100%; border-radius: 999px; }
.anteil .wert { font-weight: 600; white-space: nowrap; }
.anteil .wert small { color: var(--ink-3); font-weight: 400; margin-left: .35rem; }

/* Säulen: Einnahmen und Ausgaben je Jahr */
.saeulen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(2.6rem, 1fr);
    align-items: end;
    gap: .6rem;
    height: 13rem;
    padding-top: 1rem;
    overflow-x: auto;
}
.saeule { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .35rem; }
.saeule-paar { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.saeule-paar > span { width: 42%; max-width: 1.4rem; border-radius: .3rem .3rem 0 0; min-height: 2px; }
.saeule-lbl { text-align: center; font-size: .75rem; color: var(--ink-3); }
.saeule-lbl a { color: inherit; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--ink-2); margin-top: .7rem; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Liniendiagramm ─────────────────────────────────────────────────── */

.linien { position: relative; }
.linien svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.linien .achse { stroke: var(--line); stroke-width: 1; }
.linien .achse-null { stroke: var(--ink-4); stroke-width: 1; }
.linien .beschriftung { fill: var(--ink-3); font-size: 11px; }
.linien .linie { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.linien svg.klickbar { cursor: pointer; }
.tooltip .tip-fuss { margin-top: .3rem; color: var(--ink-3); font-size: .74rem; }
.linien .fadenkreuz { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 3 3; }
.tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .55rem;
    box-shadow: 0 6px 20px rgb(0 0 0 / .12);
    padding: .45rem .65rem;
    font-size: .8rem;
    min-width: 9rem;
    z-index: 5;
}
.tooltip b { display: block; margin-bottom: .2rem; }
.tooltip div { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.tooltip div span:first-child { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); }

/* ── Import ─────────────────────────────────────────────────────────── */

.ablage {
    display: grid;
    place-items: center;
    text-align: center;
    gap: .5rem;
    padding: 2.2rem 1rem;
    border: 2px dashed var(--surface-4);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ablage:hover, .ablage.drueber { border-color: var(--akzent); background: var(--akzent-hell); }
.ablage input { display: none; }
.ablage strong { font-size: 1.05rem; }

.fehler { color: var(--schlecht); font-weight: 500; margin-top: .6rem; }

.schalterliste { display: grid; gap: .1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.schalterliste label { display: flex; align-items: center; gap: .55rem; padding: .35rem .2rem; cursor: pointer; }
.schalterliste input { width: 1.05rem; height: 1.05rem; accent-color: var(--akzent); }

.suchfeld {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: .7rem;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 1rem;
    outline: none;
}
.suchfeld:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }

.monatsleiste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.monatswahl { position: relative; }
.monatspicker {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 20;
    width: 17rem;
    padding: .7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / .15);
}
.monatspicker[hidden] { display: none; }
.mp-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mp-kopf .knopf { padding: .3rem .7rem; }
.mp-kopf .knopf:disabled { opacity: .35; cursor: default; }
.mp-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.mp-raster button {
    padding: .5rem 0;
    border-radius: .5rem;
    border: 1px solid transparent;
    background: var(--surface-2);
    cursor: pointer;
    font-weight: 500;
}
.mp-raster button:hover:not(:disabled) { border-color: var(--ink-4); }
.mp-raster button.an { background: var(--akzent); color: var(--auf-akzent); }
.mp-raster button:disabled { opacity: .35; cursor: default; }

.leer { text-align: center; padding: 3rem 1rem; color: var(--ink-3); }
.leer h2 { color: var(--ink); margin-bottom: .4rem; }
.leer .knopf { margin-top: 1rem; }

/* Ein Element mit hidden bleibt verborgen, auch wenn seine Klasse display setzt. */
.knopf[hidden], .tooltip[hidden] { display: none; }

/* Schlüssel-Wert-Tabelle (Daten): lange Dateinamen umbrechen statt die Karte zu sprengen */
table.info td:first-child { white-space: nowrap; color: var(--ink-3); width: 1%; }
table.info td:last-child { overflow-wrap: anywhere; }

.unterkopf { font-size: .8rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6rem; }

tr.gewaehlt td { background: var(--akzent-hell); }
.jahresspalten { display: grid; gap: 1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.unterkopf .punkt { vertical-align: 1px; }
.tagmarke { color: var(--akzent); }
.auswahl-zeile > .klein { margin-top: .1rem; }

/* Aufklappbare Unterzeilen (Tags einer Gruppe) */
.klapp {
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0 .35rem 0 0;
    font-size: .8rem;
    transition: transform .15s;
    display: inline-block;
}
.klapp[aria-expanded="true"] { transform: rotate(90deg); }
tr.unterzeile td { background: var(--surface-2); font-size: .82rem; color: var(--ink-2); padding-top: .35rem; padding-bottom: .35rem; }
tr.unterzeile td:first-child { padding-left: 1.9rem; }

/* Monate × Jahre im Überblick */
table.matrix td, table.matrix th { padding: .4rem .55rem; }
table.matrix td.zahl { min-width: 6.5rem; }
a.zelllink { color: inherit; }
a.zelllink:hover { color: var(--akzent); text-decoration: none; }
.chip.ausschluss.an { background: var(--schlecht); border-color: var(--schlecht); text-decoration: line-through; }

/* Tag-Zeilen: etwas kleiner, alte Tags eingeklappt */
.tag-chips .chip, .alte-tags .chip { padding: .22rem .55rem; font-size: .78rem; }
.alte-tags { display: grid; gap: .35rem; }
.alte-tags > summary { list-style: none; justify-self: start; }
.alte-tags > summary::-webkit-details-marker { display: none; }
.alte-tags > summary::before { content: '▸'; font-size: .7em; transition: transform .15s; }
.alte-tags[open] > summary::before { transform: rotate(90deg); }
.alte-tags:not([open]) > .klein { display: none; }

/* Kompakte Tabellen im Vergleich: die Zahlen rücken zusammen, der Platz
   bleibt beim Namen. */
table.eng td.zahl, table.eng th.zahl { width: 1%; }
table.eng td.verlauf, table.eng th.verlauf { width: 6rem; }
table.eng td:last-child, table.eng th:last-child { width: 1%; white-space: nowrap; }