/* Darstellungen: data-theme auf <html> = auto | hell | dunkel | kontrast | papier
   (gesetzt von theme.js, bevor die Seite gezeichnet wird). */
:root {
  /* Seitenrand so, dass Kopf, Reiter und Inhalt dieselbe Mittelspalte nutzen */
  --spalte: 1280px;
  --bg: #f5f6f8;
  --karte: #ffffff;
  --text: #1f2937;
  --dezent: #6b7280;
  --linie: #e5e7eb;
  --hell: #f3f4f6;
  --akzent: #2563eb;
  --tief: #2563eb;
  --hoch: #d97706;
  --markt: #7c3aed;
  --gut: #047857;
  --gut-bg: #ecfdf5;
  --warn-bg: #fffbeb;
  --warn: #92400e;
  --gefahr: #b42318;
  --auf-akzent: #ffffff;
  --radius: 10px;
  --kurve: 2.5px;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0f1115;
    --karte: #181b21;
    --text: #e5e7eb;
    --dezent: #9ca3af;
    --linie: #2b303a;
    --hell: #222630;
    --akzent: #60a5fa;
    --tief: #60a5fa;
    --hoch: #fbbf24;
    --markt: #a78bfa;
    --gut: #34d399;
    --gut-bg: #0f2a22;
    --warn-bg: #2a2110;
    --warn: #fcd34d;
  --gefahr: #f97066;
    --auf-akzent: #0b1220;
    --schatten: none;
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --bg: #0f1115;
  --karte: #181b21;
  --text: #e5e7eb;
  --dezent: #9ca3af;
  --linie: #2b303a;
  --hell: #222630;
  --akzent: #60a5fa;
  --tief: #60a5fa;
  --hoch: #fbbf24;
  --markt: #a78bfa;
  --gut: #34d399;
  --gut-bg: #0f2a22;
  --warn-bg: #2a2110;
  --warn: #fcd34d;
  --gefahr: #f97066;
  --auf-akzent: #0b1220;
  --schatten: none;
  color-scheme: dark;
}
:root[data-theme="kontrast"] {
  --bg: #ffffff;
  --karte: #ffffff;
  --text: #000000;
  --dezent: #2b2b2b;
  --linie: #000000;
  --hell: #e8e8e8;
  --akzent: #0033cc;
  --tief: #0033cc;
  --hoch: #b33c00;
  --markt: #6a0dad;
  --gut: #005a2b;
  --gut-bg: #d8f5e3;
  --warn-bg: #fff1b8;
  --warn: #000000;
  --gefahr: #a00000;
  --auf-akzent: #ffffff;
  --kurve: 4px;
  --schatten: none;
  color-scheme: light;
}
:root[data-theme="papier"] {
  --bg: #f3ead7;
  --karte: #fbf6ea;
  --text: #3b2f20;
  --dezent: #7a6a55;
  --linie: #e0d3b8;
  --hell: #efe4cc;
  --akzent: #8b5a2b;
  --tief: #2f5d8a;
  --hoch: #b5651d;
  --markt: #7b4b94;
  --gut: #3f6b2a;
  --gut-bg: #e7efd6;
  --warn-bg: #f7e6bf;
  --warn: #6b4510;
  --gefahr: #9b2c1c;
  --auf-akzent: #fffaf0;
  --schatten: 0 1px 2px rgba(80,60,20,.08);
  color-scheme: light;
}
:root[data-theme="kontrast"] .karte, :root[data-theme="kontrast"] .kachel { border-width: 2px; }
:root[data-theme="kontrast"] a { text-decoration: underline; }
:root[data-theme="kontrast"] .tab th, :root[data-theme="kontrast"] .tab td { border-bottom-color: #555; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { margin: 0; }
h1 { font-size: 1.2rem; }
h2 { font-size: 1rem; margin-bottom: .6rem; }
a { color: var(--akzent); }
.dezent { color: var(--dezent); font-weight: normal; font-size: .9rem; }

/* ------------------------------------------------------------ Kopf */
.kopf {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px max(20px, calc((100% - var(--spalte)) / 2)); background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; gap: 12px; align-items: center; }
.logo {
  width: 34px; height: 34px; border-radius: 8px; background: var(--akzent);
  -webkit-mask: none; position: relative; flex: none;
}
.logo::after {
  content: ""; position: absolute; inset: 8px;
  background: #fff;
  clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
}
.sub { margin: 0; color: var(--dezent); font-size: .82rem; }
.profilleiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profilleiste .vers { color: var(--dezent); font-size: .85rem; }
.profilleiste select { width: auto; min-width: 160px; max-width: 240px; }
.profilleiste select#darstellung { min-width: 0; width: auto; }

.reiter {
  display: flex; gap: 2px; background: var(--karte);
  padding: 0 max(20px, calc((100% - var(--spalte)) / 2 - 14px));
  border-bottom: 1px solid var(--linie); overflow-x: auto;
}
.reiter button {
  border: 0; background: none; color: var(--dezent); font: inherit; padding: 10px 14px;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }

.banner {
  margin: 14px max(20px, calc((100% - var(--spalte)) / 2)) 0; padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn); font-size: .9rem;
}
.banner a { color: inherit; font-weight: 600; }

main { padding: 16px 20px 40px; max-width: calc(var(--spalte) + 40px); margin: 0 auto; }
.seite { display: none; }
.seite.aktiv { display: block; }

/* ------------------------------------------------------------ Karten */
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--schatten); margin-bottom: 14px; min-width: 0;
}
.kartenkopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.raster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }
.parameter { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }

/* ------------------------------------------------------------ Formular */
.feld { margin-bottom: 12px; }
.feld label, .label { display: block; font-size: .82rem; color: var(--dezent); margin-bottom: 4px; }
.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type=text], input[type=number], select {
  width: 100%; font: inherit; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 7px; padding: 7px 9px; min-height: 36px;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.hilfe { font-size: .8rem; color: var(--dezent); margin: 6px 0 0; }
.schalter { display: flex !important; gap: 8px; align-items: center; color: var(--text) !important; font-size: .95rem !important; cursor: pointer; }
.schalter input { width: 18px; height: 18px; }

.segment { display: flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.segment button {
  flex: 1; border: 0; background: var(--karte); color: var(--text); font: inherit; font-size: .88rem;
  padding: 7px 6px; cursor: pointer;
}
.segment button + button { border-left: 1px solid var(--linie); }
.segment button.aktiv { background: var(--akzent); color: var(--auf-akzent); }

.knopf {
  font: inherit; font-size: .88rem; padding: 7px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--linie); background: var(--karte); color: var(--text);
}
.knopf:hover { background: var(--hell); }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf.primaer:hover { filter: brightness(1.08); }
.knopf.leise { color: var(--dezent); }
.knopf.vorsicht { color: var(--gefahr); border-color: var(--gefahr); }
.knopf.vorsicht:hover { background: var(--gefahr); color: var(--auf-akzent); }
.knopf:disabled { opacity: .5; cursor: default; }

.suche { position: relative; }
.vorschlaege {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0;
  list-style: none; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto;
}
.vorschlaege li { padding: 6px 10px; cursor: pointer; font-size: .9rem; }
.vorschlaege li small { color: var(--dezent); }
.vorschlaege li.markiert, .vorschlaege li:hover { background: var(--hell); }

.kostenwahl { display: flex; gap: 10px; align-items: center; }
.kostenwahl input[type=range] { flex: 1; accent-color: var(--akzent); }
.chfein { display: flex; align-items: center; gap: 4px; width: 118px; }
.chfein span { color: var(--dezent); font-size: .8rem; }

/* ------------------------------------------------------------ Ergebnis */
.fazit { font-size: 1.05rem; border-left: 4px solid var(--akzent); }
.fazit .haupt { font-size: 1.15rem; font-weight: 650; }
.fazit .neben { color: var(--dezent); font-size: .9rem; margin-top: 4px; }
.fazit .t { color: var(--tief); }
.fazit .h { color: var(--hoch); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }

/* Break-even: die Kernaussage, deshalb eigene, hervorgehobene Karte */
.breakeven { border: 2px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 6%, var(--karte)); }
.be-kopf { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.be-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.be-wert { font-size: 2.1rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.be-erklaerung { flex: 1; min-width: 240px; margin: 0; font-size: .95rem; }
.be-erklaerung .t { color: var(--tief); font-weight: 650; }
.be-erklaerung .h { color: var(--hoch); font-weight: 650; }
.be-skala { position: relative; height: 54px; margin: 16px 0 4px; }
.be-zone { position: absolute; top: 14px; height: 18px; display: flex; align-items: center;
  font-size: .74rem; font-weight: 600; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.be-zone.h { left: 0; background: color-mix(in srgb, var(--hoch) 22%, var(--karte)); color: var(--text); border-radius: 9px 0 0 9px; }
.be-zone.t { right: 0; background: color-mix(in srgb, var(--tief) 22%, var(--karte)); color: var(--text); border-radius: 0 9px 9px 0; justify-content: flex-end; }
.be-strich { position: absolute; top: 6px; height: 34px; width: 3px; margin-left: -1.5px; background: var(--text); border-radius: 2px; }
.be-strich.kosten { background: var(--gut); top: 10px; height: 26px; }
.be-marke { position: absolute; font-size: .74rem; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.be-marke.oben { top: -8px; }
.be-marke.unten { top: 38px; color: var(--gut); }
.be-skalatext { position: absolute; top: 38px; font-size: .7rem; color: var(--dezent); }
.kachel {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--schatten); border-top: 3px solid var(--linie);
}
.kachel.tief { border-top-color: var(--tief); }
.kachel.hoch { border-top-color: var(--hoch); }
.kachel.besser { background: var(--gut-bg); }
.kachelkopf { font-size: .82rem; color: var(--dezent); }
.gross { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.klein { font-size: .8rem; color: var(--dezent); }
.marke-besser { color: var(--gut); font-weight: 600; }

.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--dezent); }
.legende .l::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legende .tief::before { background: var(--tief); }
.legende .hoch::before { background: var(--hoch); }
.legende .markt::before { background: var(--markt); }

.diagramm { width: 100%; height: 320px; position: relative; }
.diagramm svg { width: 100%; height: 100%; display: block; overflow: visible; }
.diagramm .achse { stroke: var(--linie); }
.diagramm .gitter { stroke: var(--hell); }
.diagramm text { fill: var(--dezent); font-size: 11px; font-family: inherit; }
.diagramm .kurve { fill: none; stroke-width: var(--kurve); stroke-linejoin: round; }
.diagramm .marker { stroke-width: 1.2; }
.diagramm .marker.dick { stroke-width: 2.4; }
.diagramm .markertext { font-weight: 600; fill: var(--text); }
.diagramm .punkt { stroke: var(--karte); stroke-width: 2; }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none; background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; font-size: .82rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); font-variant-numeric: tabular-nums;
}
.tooltip b { display: block; margin-bottom: 2px; }
.tooltip .z { display: flex; gap: 12px; justify-content: space-between; }
.tooltip .f { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ------------------------------------------------------------ Tabellen */
.tabrahmen { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tab th, .tab td { padding: 6px 8px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.tab th { font-weight: 600; color: var(--dezent); font-size: .8rem; background: var(--hell); }
.tab th:first-child, .tab td:first-child, .tab .links { text-align: left; }
.tab tr.summe td { font-weight: 700; border-top: 2px solid var(--text); }
.tab tr.beste td { background: var(--gut-bg); }
.tab tr.gewaehlt td { background: var(--hell); font-weight: 600; }
.tab.klickbar tbody tr { cursor: pointer; }
.tab.klickbar tbody tr:hover td { background: var(--hell); }
.tab td.name { white-space: normal; min-width: 160px; }
.tab input { width: 100px; text-align: right; min-height: 30px; padding: 4px 6px; }
.tab .t { color: var(--tief); }
.tab .h { color: var(--hoch); }
.tab .gut { color: var(--gut); font-weight: 600; }
.etikett { display: inline-block; font-size: .72rem; padding: 1px 6px; border-radius: 99px; background: var(--hell); color: var(--dezent); margin-left: 6px; }

.hinweise ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.hinweise li { margin-bottom: 4px; }

.importstatus { display: flex; gap: 12px; align-items: center; margin: 10px 0; font-size: .88rem; }
.balken { flex: 0 0 220px; height: 8px; background: var(--hell); border-radius: 99px; overflow: hidden; }
.balken div { height: 100%; width: 0; background: var(--akzent); transition: width .4s; }
.datenkennzahlen { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0; font-size: .9rem; }
.datenkennzahlen b { display: block; font-size: 1.2rem; }

.meldung {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--text); color: var(--karte); padding: 10px 16px; border-radius: 8px; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* ------------------------------------------------------------ Fuss, Dialoge */
.fuss {
  max-width: 1320px; margin: 0 auto; padding: 4px 20px 28px; display: flex; flex-wrap: wrap;
  gap: 8px 20px; justify-content: space-between; color: var(--dezent); font-size: .82rem;
}
.dialog {
  border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); color: var(--text);
  padding: 18px 20px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow-x: hidden;
}
.dialog.breit { width: min(680px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog h3 { font-size: .95rem; margin: 16px 0 6px; }
.dialog p, .dialog li { font-size: .9rem; }
.dialog ul { padding-left: 18px; margin: 0; }
.dialogkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialogkopf h2 { margin: 0; }
.schliessen { border: 0; background: none; color: var(--dezent); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.qrbox { display: flex; justify-content: center; margin: 10px 0; }
.qrbox img { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 8px; }
.linkzeile { display: flex; gap: 8px; }
.linkzeile input { flex: 1; min-width: 0; font-size: .82rem; }
.changelog .version { margin-bottom: 10px; }
.dialogknoepfe { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.knopf.klein { font-size: .78rem; padding: 3px 8px; margin-left: 6px; }
.versjahr { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.versjahr small { display: block; color: var(--dezent); }
.versjahr .knopf { flex: none; }
.etikett.eigen { background: var(--akzent); color: var(--auf-akzent); }
/* Marktübersicht: feste Spalten, damit beim Filtern nichts springt */
#marktTabelle { table-layout: fixed; min-width: 880px; }
#marktTabelle td { overflow: hidden; text-overflow: ellipsis; }
#marktTabelle td.name, #marktTabelle td.typ { white-space: normal; overflow-wrap: anywhere; }
.changelog .version b { font-size: .92rem; }
.changelog .version span { color: var(--dezent); font-size: .82rem; margin-left: 6px; }
.changelog ul { margin-top: 4px; }

/* ------------------------------------------------------------ schmal */
@media (max-width: 900px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .parameter { position: static; }
}
@media (max-width: 600px) {
  .kopf, main { padding-left: 16px; padding-right: 16px; }
  .reiter { padding: 0 8px; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .diagramm { height: 260px; }
  .profilleiste select { min-width: 0; flex: 1; }
}