:root {
  --bg: #F3F4F8; --flaeche: #FFFFFF; --flaeche2: #F7F8FB; --linie: #E6E8EF; --linie2: #EEF0F5;
  --text: #0F172A; --text2: #475569; --text3: #8590A3;
  --akzent: #4F46E5; --akzent2: #7C3AED; --akzent-weich: #EEF0FF;
  --gut: #059669; --gut-weich: #E6F6EF; --warn: #B45309; --warn-weich: #FEF4E6; --schlecht: #DC2626; --schlecht-weich: #FDECEC;
  --wert: #4F46E5; --kosten: #F59E0B;
  --radius: 16px;
  --schatten: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -6px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0E14; --flaeche: #141821; --flaeche2: #1A1F2A; --linie: #262C38; --linie2: #1F2430;
    --text: #F1F3F7; --text2: #B4BBC8; --text3: #7D8696;
    --akzent: #8B8CF8; --akzent2: #A78BFA; --akzent-weich: #20234A;
    --gut: #34D399; --gut-weich: #10302A; --warn: #FBBF24; --warn-weich: #33280F; --schlecht: #F87171; --schlecht-weich: #3A1A1A;
    --wert: #8B8CF8; --kosten: #FBBF24;
    --schatten: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--flaeche) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--linie); padding: 12px 32px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.marke { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--akzent), var(--akzent2)); color: #fff; display: grid; place-items: center; font-weight: 750; letter-spacing: .5px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--akzent) 70%, transparent); }
h1 { font-size: 17px; margin: 0; letter-spacing: -.25px; font-weight: 700; }
.unter { margin: 0; color: var(--text3); font-size: 12.5px; }
.abzeichen { white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--warn-weich); color: var(--warn); }
.abzeichen.live { background: var(--gut-weich); color: var(--gut); }
.abzeichen.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: puls 2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }
.zeitraum { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.segmente { display: flex; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 11px; padding: 3px; }
.segmente button, .reiter button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--text2); white-space: nowrap; transition: background .15s, color .15s; }
.segmente button:hover { color: var(--text); }
.segmente button.aktiv { background: var(--flaeche); color: var(--akzent); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--linie); }
.eigen { display: flex; align-items: center; gap: 6px; color: var(--text3); }
.eigen input { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px; padding: 5px 8px; }
.knopf { border: 1px solid var(--akzent); background: var(--akzent); color: #fff; padding: 7px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: filter .15s; }
.knopf:hover { filter: brightness(1.08); }
.knopf.leise { background: var(--flaeche); color: var(--text); border-color: var(--linie); font-weight: 500; }
.knopf:disabled { opacity: .5; cursor: wait; }

main { max-width: 1320px; margin: 0 auto; padding: 24px 32px 44px; display: grid; gap: 18px; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: -6px; }
.abschnitt-kopf h2 { font-size: 16px; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kz { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px 15px; box-shadow: var(--schatten); display: flex; flex-direction: column; min-height: 132px; }
.kz .label { color: var(--text2); font-size: 12.5px; font-weight: 550; }
.kz .wert { font-size: 30px; font-weight: 700; letter-spacing: -.8px; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kz .zusatz { color: var(--text3); font-size: 12px; margin-top: auto; padding-top: 8px; }
.kz.hero { background: linear-gradient(140deg, #4F46E5, #7C3AED); border-color: transparent; color: #fff; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--akzent) 75%, transparent); }
.kz.hero .label, .kz.hero .zusatz { color: rgba(255,255,255,.82); }
.kz.hero .delta { background: rgba(255,255,255,.18); color: #fff; }
.delta { align-self: flex-start; margin-top: 8px; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.delta span { font-size: 9px; }
.delta.gut { background: var(--gut-weich); color: var(--gut); }
.delta.schlecht { background: var(--schlecht-weich); color: var(--schlecht); }
.delta.neutral { background: var(--flaeche2); color: var(--text2); }
.delta.leer { background: none; color: var(--text3); padding-left: 0; font-weight: 500; }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--schatten); min-width: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.karte-unter { margin: 2px 0 0; }
h2 { font-size: 15.5px; margin: 0; letter-spacing: -.2px; font-weight: 700; }
h3 { font-size: 14px; margin: 18px 0 8px; }
.schalter { color: var(--text3); font-size: 12.5px; display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* Lohnt sich ein Termin? */
.lohnt { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 28px; align-items: start; }
.lohnt-aussage { background: var(--flaeche2); border: 1px solid var(--linie2); border-radius: 14px; padding: 18px; }
.lohnt-aussage .gross { font-size: 40px; font-weight: 750; letter-spacing: -1.2px; color: var(--wert); line-height: 1.15; margin: 4px 0; font-variant-numeric: tabular-nums; }
.faktor { margin-top: 12px; font-weight: 650; font-size: 13px; padding: 8px 10px; border-radius: 10px; }
.faktor.gut { background: var(--gut-weich); color: var(--gut); }
.faktor.schlecht { background: var(--schlecht-weich); color: var(--schlecht); }
.grenze { margin-top: 10px; }
.lohnt-liste { display: grid; gap: 4px; }
.lohnt-kopf, .lohnt-zeile { display: grid; grid-template-columns: minmax(130px, 190px) 1fr 1fr minmax(150px, auto); gap: 14px; align-items: center; }
.lohnt-kopf { color: var(--text3); font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.lohnt-zeile { padding: 9px 0; border-bottom: 1px solid var(--linie2); }
.lohnt-zeile:last-child { border-bottom: 0; }
.lohnt-zeile.gesamt .lohnt-name { font-weight: 650; }
.lohnt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lohnt-urteil { text-align: right; }
.lb-spur { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 13px; }
.lb-spur span { color: var(--text2); min-width: 54px; }
.lb { height: 10px; border-radius: 5px; flex: none; max-width: calc(100% - 62px); }
.lb.wert { background: var(--wert); }
.lb.kosten { background: var(--kosten); }
.lb-mini { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lb-mini.wert { background: var(--wert); }
.lb-mini.kosten { background: var(--kosten); }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: right; font-weight: 550; color: var(--text3); font-size: 12px; padding: 9px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; background: var(--flaeche2); }
th:first-child { border-radius: 10px 0 0 10px; }
th:last-child { border-radius: 0 10px 10px 0; }
thead th { border-bottom: 0; }
td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--linie2); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
td.links, th.links { text-align: left; }
td.betont { color: var(--wert); font-weight: 650; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 1px solid var(--linie); background: var(--flaeche2); }
tfoot td:first-child { border-radius: 10px 0 0 10px; }
tfoot td:last-child { border-radius: 0 10px 10px 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--flaeche2); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 9px; vertical-align: 0; }
.leer { color: var(--text3); }
.balken { display: inline-block; height: 6px; border-radius: 3px; background: var(--akzent); opacity: .45; vertical-align: middle; margin-left: 8px; }
.fussnote { color: var(--text3); font-size: 12px; margin: 14px 0 0; }

/* Diagramm */
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text2); }

/* Reiter */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: -4px -4px 16px; overflow-x: auto; }
.reiter button { border-radius: 8px 8px 0 0; padding: 10px 13px; }
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--akzent); box-shadow: inset 0 -2px 0 var(--akzent); font-weight: 600; }

/* Hinweise */
.meldung { border-radius: 14px; padding: 13px 16px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.meldung.warn { background: var(--warn-weich); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.meldung.info { background: var(--akzent-weich); border-color: color-mix(in srgb, var(--akzent) 22%, transparent); }
.meldung.fehler { background: var(--schlecht-weich); border-color: color-mix(in srgb, var(--schlecht) 30%, transparent); }
.meldung b { display: block; margin-bottom: 2px; }
.meldung a { color: var(--akzent); font-weight: 600; }
.meldung code { white-space: nowrap; }
#meldungen:empty { display: none; }

.tag { display: inline-block; font-size: 11.5px; font-weight: 550; padding: 2px 9px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--linie); color: var(--text2); white-space: nowrap; }
.tag.gut { background: var(--gut-weich); color: var(--gut); border-color: transparent; }
.tag.warn { background: var(--warn-weich); color: var(--warn); border-color: transparent; }
.tag.schlecht { background: var(--schlecht-weich); color: var(--schlecht); border-color: transparent; }

/* Formulare */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.feld label { display: block; font-size: 12.5px; color: var(--text2); margin-bottom: 4px; }
.feld input, .feld select { width: 100%; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; }
.feld input:focus, .feld select:focus, .eigen input:focus { outline: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 1px; }
.feld .eur { position: relative; }
.feld .eur::after { content: "€"; position: absolute; right: 10px; top: 8px; color: var(--text3); }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.klein { color: var(--text3); font-size: 12.5px; }
code { background: var(--flaeche2); border: 1px solid var(--linie); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.check li { display: flex; gap: 10px; align-items: flex-start; }
.klein-knopf { padding: 3px 9px; font-size: 12px; margin-top: 6px; }

.fuss { text-align: center; color: var(--text3); font-size: 12px; padding: 0 0 28px; }
.lade { color: var(--text3); padding: 24px 0; text-align: center; }

@media (max-width: 1100px) {
  .lohnt { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lohnt-kopf { display: none; }
  .lohnt-zeile { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .lohnt-name { grid-column: 1 / -1; }
  .lohnt-urteil { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .kopf, main { padding-left: 16px; padding-right: 16px; }
  .kz { min-height: 0; }
  .kz .wert { font-size: 23px; }
  .lohnt-aussage .gross { font-size: 32px; }
  .segmente { overflow-x: auto; max-width: 100%; }
  .zeitraum, .eigen { width: 100%; }
  .eigen input { flex: 1; min-width: 0; }
  .eigen .knopf { padding: 6px 10px; }
}

/* Anmeldung */
.login-seite { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-karte { width: 100%; max-width: 360px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 28px; display: grid; gap: 12px; }
.login-karte .logo { margin-bottom: 4px; }
.login-karte .klein { margin: -6px 0 4px; }
.login-karte .knopf { width: 100%; padding: 10px; }
.login-fehler { color: var(--schlecht); font-size: 13px; margin: 0; min-height: 1em; }
.abmelden { color: var(--text3); }