:root{
  color-scheme: dark;
  --grund:#080b0f; --flaeche:#0e1319; --kopf:#131a22; --erhoben:#172029;
  --linie:#1b2530; --linie-stark:#29333f;
  --text:#e6eaef; --gedaempft:#97a1ad; --leise:#828c9a;
  --marke:#a3c4e6;
  --gewinn:#4bb488; --verlust:#c05f45; --warnung:#c9a35f;
  --rund:10px;
  --anzeige:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
    Georgia,"Times New Roman",serif;
  --schrift:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --zahlen:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:14px/1.55 var(--schrift);-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%}
.huelle{max-width:1180px;margin:0 auto;padding:26px 20px 80px}

header{display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;flex-wrap:wrap;margin-bottom:26px}
h1{font-family:var(--anzeige);font-size:17px;font-weight:400;margin:0;
  letter-spacing:.14em;text-transform:uppercase}
.marke{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leise);border:1px solid var(--linie-stark);border-radius:4px;
  padding:3px 8px;margin-left:10px;vertical-align:2px}
.unter{color:var(--leise);font-size:12px;margin:5px 0 0;font-variant-numeric:tabular-nums}
.kopfzahl{text-align:right}
.kopfzahl .gross{font:600 34px/1 var(--zahlen);letter-spacing:-.03em}
.kopfzahl .dazu{font:500 13px/1 var(--zahlen);margin-top:8px}
.chip{display:inline-block;padding:2px 7px;border-radius:5px;font-size:12px;margin-left:7px}
.chip.gewinn{background:color-mix(in srgb,var(--gewinn) 16%,transparent)}
.chip.verlust{background:color-mix(in srgb,var(--verlust) 16%,transparent)}

.raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:16px;align-items:start}
.karte{background:var(--flaeche);border-radius:var(--rund);overflow:hidden}
.karte > .titel{background:var(--kopf);padding:11px 15px;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.karte > .titel .neben{font-weight:500;letter-spacing:.04em;text-transform:none;
  font-size:11px;color:var(--leise)}
.zeile{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 15px;border-bottom:1px solid var(--linie)}
.karte .zeile:last-child{border-bottom:none}
.zeile .lab{color:var(--gedaempft);font-size:13px}
.zeile .val{font:500 13.5px/1.3 var(--zahlen);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.zeile .val .klein{display:block;font-size:11.5px;margin-top:3px}

.karte table{width:100%;border-collapse:collapse;font-size:13px}
.karte thead th{background:var(--kopf);text-align:left;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--leise);
  padding:9px 15px;white-space:nowrap}
.karte td{padding:10px 15px;border-bottom:1px solid var(--linie);
  font-variant-numeric:tabular-nums}
.karte tbody tr:last-child td{border-bottom:none}
.karte tbody tr:hover{background:var(--erhoben)}
.z{text-align:right;font-family:var(--zahlen)}
.nam{color:var(--leise);font-size:12px}

.tick a{color:var(--text);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--linie-stark);padding-bottom:1px}
.tick a:hover{border-bottom-color:var(--marke);color:var(--marke)}
.tick{font-weight:600}

.karte th.heb, .karte td.heb{background:color-mix(in srgb,var(--gewinn) 6%,transparent)}
.karte thead th.heb{background:color-mix(in srgb,var(--gewinn) 11%,transparent);
  color:var(--gedaempft)}
.karte tbody tr:hover td.heb{background:color-mix(in srgb,var(--gewinn) 11%,transparent)}

.gewinn{color:var(--gewinn)} .verlust{color:var(--verlust)}
.pfeil{font-size:8.5px;margin-right:3px;opacity:.9;font-family:var(--schrift)}

.hinweis{background:var(--flaeche);border-left:2px solid var(--gedaempft);
  border-radius:0 var(--rund) var(--rund) 0;padding:12px 15px;font-size:12.5px;
  color:var(--gedaempft);margin:16px 0;line-height:1.6}
.hinweis b{color:var(--text);font-weight:600}
.warn{border-left-color:var(--warnung)}
footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--linie);
  font-size:11px;color:var(--leise);line-height:1.6}

@media (max-width:680px){
  .huelle{padding:20px 14px 60px}
  .kopfzahl{text-align:left} .kopfzahl .gross{font-size:27px}
  header{gap:14px} .weg-klein{display:none}
  .karte td,.karte thead th,.zeile{padding-left:12px;padding-right:12px}
}

.funke{width:78px;height:20px;display:block}

.regler{background:var(--flaeche);border-radius:var(--rund);padding:14px 16px;margin-top:16px}
.knoepfe{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.knoepfe button{background:var(--erhoben);color:var(--gedaempft);border:1px solid var(--linie-stark);
  border-radius:999px;padding:5px 13px;font:500 12px var(--schrift);cursor:pointer;
  white-space:nowrap}
.knoepfe button:hover{color:var(--text);border-color:var(--gedaempft)}
.knoepfe button[aria-pressed="true"]{background:color-mix(in srgb,var(--gewinn) 16%,transparent);
  border-color:var(--gewinn);color:var(--gewinn)}
.schieber{display:grid;gap:9px;grid-template-columns:auto 1fr auto;align-items:center}
.schieber label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--leise)}
.schieber output{font:500 12.5px var(--zahlen);color:var(--text);min-width:8ch;text-align:right}
.schieber input[type=range]{width:100%;accent-color:var(--gewinn);height:22px}

.diagramm{position:relative;background:var(--flaeche);border-radius:var(--rund);
  padding:16px 16px 8px;margin-top:14px}
.diagramm svg{display:block;width:100%;height:auto;overflow:visible}
.d-gitter{stroke:var(--linie);stroke-width:1}
.d-achse{fill:var(--leise);font:500 10px var(--zahlen)}
.d-linie{fill:none;stroke:var(--gewinn);stroke-width:1.8;stroke-linejoin:round}
.d-flaeche{fill:url(#verlauf)}
.d-kreuz{stroke:var(--linie-stark);stroke-width:1;stroke-dasharray:3 3}
.d-punkt{fill:var(--gewinn);stroke:var(--flaeche);stroke-width:2}
.d-wolke{position:absolute;pointer-events:none;background:var(--kopf);
  border:1px solid var(--linie-stark);border-radius:7px;padding:7px 10px;
  font:12px var(--zahlen);color:var(--text);white-space:nowrap;opacity:0;
  transition:opacity .08s;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:3}
.d-wolke .d-zeit{color:var(--leise);font-size:11px;display:block;margin-bottom:2px}

.jahre{display:grid;gap:4px;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));
  margin-top:2px;padding:14px 15px}
.jahre .jb{text-align:center}
.jahre .balken{height:62px;display:flex;flex-direction:column;justify-content:center;
  gap:1px;margin-bottom:5px}
.jahre .oben,.jahre .unten{flex:1;display:flex}
.jahre .oben{align-items:flex-end}
.jahre .oben i,.jahre .unten i{display:block;width:100%;border-radius:2px 2px 0 0}
.jahre .unten i{border-radius:0 0 2px 2px}
.jahre .oben i{background:var(--gewinn)}
.jahre .unten i{background:var(--verlust)}
.jahre .jl{font:500 10px var(--zahlen);color:var(--leise)}
.jahre .jw{font:500 11px var(--zahlen);margin-top:2px}
.jahre .teil{opacity:.55}

.kacheln{display:grid;gap:1px;background:var(--linie);border-radius:var(--rund);
  overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px}
.kacheln > div{background:var(--flaeche);padding:13px 15px}
.kacheln .titel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--leise);margin-bottom:6px}
.kacheln .wert{font:600 19px/1.1 var(--zahlen);letter-spacing:-.02em}
.kacheln .neben{font-size:11px;color:var(--leise);margin-top:4px}