/* Nettokompass – Marke: Kompassnadel. Blau = was bleibt, Vermillon = was abgeht. */
:root {
  --paper: oklch(0.985 0.004 250);
  --ink: oklch(0.2 0.02 262);
  --mute: oklch(0.4 0.025 262);
  --rule: oklch(0.89 0.008 262);
  --blue: oklch(0.52 0.2 264);
  --blue2: oklch(0.78 0.09 264);
  --red: oklch(0.6 0.2 32);
  --red2: oklch(0.82 0.08 32);
  --emp: oklch(0.9 0.006 262);
  --band: oklch(0.45 0.2 264);
  --band-ink: oklch(0.985 0.004 250);
  --band-hot: oklch(0.74 0.16 32);
  --stamp: oklch(0.58 0.2 32);
  --receipt: oklch(0.97 0.004 250);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: oklch(0.17 0.012 262);
  --ink: oklch(0.95 0.006 262);
  --mute: oklch(0.76 0.015 262);
  --rule: oklch(0.3 0.014 262);
  --blue: oklch(0.7 0.15 264);
  --blue2: oklch(0.45 0.1 264);
  --red: oklch(0.7 0.15 32);
  --red2: oklch(0.47 0.09 32);
  --emp: oklch(0.28 0.012 262);
  --band: oklch(0.33 0.15 264);
  --stamp: oklch(0.72 0.15 32);
  --receipt: oklch(0.2 0.012 262);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.45 "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }
button { font: inherit; color: inherit; }
.wide { font-stretch: 125%; }
.over { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); }
[hidden] { display: none !important; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 16px; border-bottom: 1px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.needle circle:first-child { stroke: var(--ink); }
.n-red { fill: var(--red); } .n-blue { fill: var(--blue); } .n-pin { fill: var(--paper); }
.wordmark { font-stretch: 125%; font-size: 27px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
.wordmark b { font-weight: 800; }
.eu { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mute); padding-top: 4px; }
.topnav { display: flex; align-items: center; gap: 34px; font-size: 15px; }
.theme { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.theme svg { stroke: var(--ink); }
.track { position: relative; width: 42px; height: 24px; border: 1.6px solid var(--ink); border-radius: 12px; }
.knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); transition: left .2s; }
[data-theme="dark"] .knob { left: 21px; }

/* SEO-Kopf: echte H1 und Einleitung, bewusst klein gehalten, damit die Maske oben bleibt */
.seo-h1 { margin: 10px 0 -4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--mute); }
.method .seo-lead { grid-column: 2; margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--mute); max-width: 1100px; text-wrap: pretty; }
@media (max-width: 760px) { .seo-h1 { font-size: 13px; margin-top: 8px; } }

/* inputs */
.inputs { display: grid; grid-template-columns: 250px auto minmax(0, 1fr); align-items: start; gap: 14px 40px; padding: 14px 0 16px; }
.f-hh { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hh-row { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: start; }
/* Eine Zeile, feste Höhe: sonst springt die Maske, sobald der Hinweis länger wird */
.gross-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: nowrap; min-height: 22px; }
.gross-foot small { white-space: nowrap; flex: none; }
#quick { width: auto; font-size: 12px; padding: 2px 4px; border: 0; border-bottom: 1px dotted var(--mute); border-radius: 0; background: transparent; color: var(--blue); cursor: pointer; max-width: 140px; min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
#quick option { color: var(--ink); background: var(--paper); }
.pkv .num { width: 120px; }
.f { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f legend { padding: 0; margin-bottom: 4px; }
.f small { font-size: 12.5px; color: var(--mute); }
.f { position: relative; }
/* Hinweis unter dem Feld ohne Layout-Sprung: absolut positioniert */
.f small.warn { color: var(--red); white-space: nowrap; position: absolute; left: 0; top: 100%; margin-top: 2px; font-size: 11.5px; }
.over .flag { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.num { display: flex; align-items: baseline; gap: 6px; border-bottom: 1.5px solid var(--ink); transition: border-color .15s; }
.num:focus-within { border-color: var(--blue); box-shadow: 0 1.5px 0 var(--blue); }
.num input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; width: 100%; min-width: 0; padding: 0 0 1px; outline: none; }
.num span { color: var(--mute); font-size: 14px; }
.num.big { border-bottom-width: 2px; }
.num.big input { font-stretch: 125%; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.f-gross { width: 250px; }
input[type=range] { width: 100%; margin: 4px 0 0; accent-color: var(--blue); }
.caps { display: flex; gap: 16px; }
.caps label, .pkv { display: flex; flex-direction: column; gap: 0; width: 100px; }
.caps label > span:first-child, .pkv > span:first-child { font-size: 12.5px; color: var(--mute); }
.tg { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 2px; }
.tg button { background: none; border: 0; padding: 1px 0 4px; cursor: pointer; color: var(--mute); font-size: 14.5px; }
.tg button:hover { color: var(--ink); }
.tg button.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blue); }
.tg.small button { font-size: 14px; }
.flag { display: inline-block; width: 22px; height: 15px; border-radius: 2px; box-shadow: inset 0 0 0 1px oklch(0 0 0 / .14); flex: none; }

/* Brutto: Jahr/Monat-Schalter, Schnellauswahl */
.over-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tg.tiny { padding-top: 0; gap: 10px; }
.tg.tiny button { font-size: 12px; padding: 0 0 3px; }
.tg.tiny button.on { box-shadow: inset 0 -2px 0 var(--blue); }
.sheet-head, .mbar, .sheet-bg { display: none; }

/* band (Plakat) */
.band { background: var(--band); color: var(--band-ink); padding: 26px 0 18px; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.lead { margin: 0; font-size: 18px; opacity: .85; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lead b { font-weight: 700; }
.lead .flag { width: 26px; height: 17px; box-shadow: 0 0 0 1px oklch(1 0 0 / .35); }
.band-main { min-width: 0; }
/* Feste Höhe (größte Schrift), auch wenn fitHero die Zahl verkleinert – sonst rutscht alles darunter */
.bignum { font-size: clamp(72px, 10vw, 148px); font-weight: 800; letter-spacing: -0.06em; line-height: .88; margin: 8px 0 12px; white-space: nowrap;
  min-height: calc(clamp(72px, 10vw, 148px) * 0.88); display: flex; align-items: flex-end; }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { border-top: 1px solid oklch(1 0 0 / .32); padding: 4px 0 5px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.facts dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.facts dd { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; text-align: right; line-height: 1.05; white-space: nowrap; }
.facts dd small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; opacity: .75; font-stretch: 100%; margin-top: 1px; white-space: normal; }
.facts dd.hot { color: var(--band-hot); }
.facts dt .flag { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px oklch(1 0 0 / .35); }
.band-tabs { margin-top: 26px; display: flex; }
.band-tg button { color: oklch(1 0 0 / .7); font-size: 15px; }
.band-tg button:hover { color: var(--band-ink); }
.band-tg button.on { color: var(--band-ink); box-shadow: inset 0 -3px 0 var(--band-hot); }
/* Abstand zu den Reitern: die Balkenwerte und die oberste Achsenzahl brauchen Luft nach oben */
.hz { position: relative; margin-top: 34px; }
.hz-in { position: relative; padding-left: 58px; }
.hz-grid { position: absolute; left: 0; right: 0; top: 0; bottom: 22px; pointer-events: none; }
.hz-line { position: absolute; left: 0; right: 0; border-top: 1px solid oklch(1 0 0 / .22); }
.hz-line span { position: absolute; left: 0; bottom: 3px; font-size: 12px; color: oklch(1 0 0 / .7); font-variant-numeric: tabular-nums; }
.horizon { display: flex; align-items: flex-end; gap: 5px; height: 164px; position: relative; }
.horizon button { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--band-ink); }
.hz-bar { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 0; }
.horizon i { display: block; position: relative; background: oklch(1 0 0 / .42); transition: background-color .15s; border-radius: 1px 1px 0 0; }
.horizon i b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding-bottom: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--band-ink); }
.horizon button.sel i b { color: var(--band-hot); }
.horizon .hf { display: block; flex: none; width: min(24px, 100%); aspect-ratio: 3 / 2; margin: 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px oklch(1 0 0 / .35); opacity: .9; transition: box-shadow .15s, opacity .15s; }
.horizon button:hover i { background: oklch(1 0 0 / .8); }
.horizon button:hover .hf { opacity: 1; }
.horizon button.sel i { background: var(--band-hot); }
.horizon button.sel .hf { opacity: 1; box-shadow: 0 0 0 2px var(--band-hot); }
.horizon button:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 2px; }
/* Einkommensverteilung: P10–P90 je Land, Median-Strich, Ø-Punkt, dein Brutto als Linie */
.dist { margin-top: 18px; position: relative; }
.dist-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; height: 18px; }
.dist-row .cc { color: var(--band-ink); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dist-row.ref .cc { color: var(--band-hot); }
.dist-row .cc .flag { width: 20px; height: 14px; box-shadow: 0 0 0 1px oklch(1 0 0 / .3); }
.dist-track { position: relative; height: 12px; }
.dist-range { position: absolute; top: 2px; height: 8px; border-radius: 4px; background: oklch(1 0 0 / .32); }
.dist-row.ref .dist-range { background: var(--band-hot); }
.dist-med { position: absolute; top: 0; width: 3px; height: 12px; margin-left: -1.5px; background: var(--band-ink); border-radius: 1px; }
.dist-mean { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; border: 2px solid var(--band-ink); box-sizing: border-box; background: var(--band); }
.dist { padding-top: 22px; }
.dist-you { position: absolute; top: 0; bottom: 58px; width: 2px; margin-left: -1px; background: var(--band-hot); z-index: 1; pointer-events: none; }
.dist-you span { position: absolute; top: -2px; left: 6px; font-size: 12px; font-weight: 700; color: var(--band-hot); white-space: nowrap; background: var(--band); padding: 0 4px; }
.dist-axis { position: relative; height: 22px; margin-left: 86px; margin-right: 58px; margin-top: 6px; border-top: 1px solid oklch(1 0 0 / .32); }
.dist-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: oklch(1 0 0 / .7); }
.dist-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 13px; color: oklch(1 0 0 / .8); }
.dist-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dist-legend i { display: inline-block; }
.dist-legend .l-range { width: 22px; height: 8px; border-radius: 4px; background: oklch(1 0 0 / .32); }
.dist-legend .l-med { width: 3px; height: 12px; background: var(--band-ink); }
.dist-legend .l-mean { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--band-ink); box-sizing: border-box; }
.dist-legend .l-you { width: 2px; height: 12px; background: var(--band-hot); }
.dist-row button { all: unset; cursor: pointer; display: contents; }

/* Gehaltserhöhung: Steuerzeile über den Balken */
.raise-ctl { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; font-size: 14px; color: oklch(1 0 0 / .85); }
.num.inv { width: 170px; border-bottom-color: oklch(1 0 0 / .6); }
.num.inv input { color: var(--band-ink); font-size: 20px; }
.num.inv span { color: oklch(1 0 0 / .7); white-space: nowrap; }
.tg.inv button { color: oklch(1 0 0 / .7); }
.tg.inv button.on { color: var(--band-ink); box-shadow: inset 0 -2px 0 var(--band-hot); }
.rows-val.gain { color: var(--band-ink); }

/* Zeilenbalken im Band (Gleiches Netto, Arbeitsstunden) */
.rows { margin-top: 22px; display: grid; gap: 4px; }
.rows-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 118px; gap: 12px; align-items: center; height: 22px; }
.rows-row button { all: unset; display: contents; cursor: pointer; }
.rows-row .cc { color: var(--band-ink); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.rows-row .cc .flag { width: 20px; height: 14px; box-shadow: 0 0 0 1px oklch(1 0 0 / .3); }
.rows-bar { height: 14px; background: oklch(1 0 0 / .42); border-radius: 0 3px 3px 0; position: relative; }
.rows-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--band-hot); }
.rows-row.ref .rows-bar { background: var(--band-hot); }
.rows-row.ref .cc, .rows-row.ref .rows-val { color: var(--band-hot); }
.rows-val { color: var(--band-ink); font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
.rows-val small { font-weight: 400; opacity: .75; }
.rows-axis { position: relative; height: 22px; margin-left: 86px; margin-right: 130px; margin-top: 8px; border-top: 1px solid oklch(1 0 0 / .32); }
.rows-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: oklch(1 0 0 / .7); }
.rows-note { margin-top: 12px; font-size: 13px; color: oklch(1 0 0 / .8); text-wrap: pretty; }
.rows-note b { color: var(--band-ink); }
.dist-pc { position: absolute; right: 0; top: -2px; font-size: 12px; font-weight: 700; color: var(--band-ink); }
.dist-row { grid-template-columns: 74px minmax(0, 1fr) 46px; }
.dist-row .dist-pc { position: static; text-align: right; }

/* Zeitreihe Deutschland */
.hist .chart .lg { fill: none; stroke: var(--mute); stroke-width: 2; }
.hist .chart .lnom { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 6 4; }
.hist .chart .lreal { fill: none; stroke: var(--blue); stroke-width: 3.5; }
.hist .chart .lbl { font-size: 11.5px; font-weight: 700; }
.cleg i.g { border-top: 2px solid var(--mute); } .cleg i.nom { border-top: 2.5px dashed var(--blue); } .cleg i.real { border-top: 3.5px solid var(--blue); }

.band-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; font-size: 14px; }
.band-foot > span { opacity: .7; }
.share { display: inline-flex; align-items: center; gap: 8px; background: var(--band-ink); color: var(--band); border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.share:hover { background: var(--band-hot); color: oklch(0.2 0.02 262); }

/* split */
.split { padding: 36px 0 54px; }
.splitbar { display: flex; height: 30px; }
.splitbar i, .bar i { display: block; height: 100%; }
.gap { flex: 0 0 2px; }
.k-net, .s-net { background: var(--blue); } .k-ben, .s-ben { background: var(--blue2); }
.k-tax, .s-tax { background: var(--red); } .k-soc, .s-soc { background: var(--red2); } .k-cap, .s-cap { background: var(--ink); }
.k-emp, .s-emp { background: repeating-linear-gradient(135deg, var(--emp) 0 5px, transparent 5px 8px); box-shadow: inset 0 0 0 1px var(--rule); }
.splitlegend { display: flex; flex-wrap: wrap; gap: 10px 34px; padding-top: 12px; font-size: 14px; color: var(--mute); }
.splitlegend div { display: flex; align-items: baseline; gap: 8px; }
.splitlegend b { color: var(--ink); font-size: 17px; }
.splitlegend i { width: 10px; height: 10px; display: inline-block; align-self: center; }

/* Arbeiten vs. Bürgergeld (DE) */
.work { padding: 0 0 56px; margin-bottom: 8px; }
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px 48px; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.work-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; display: flex; align-items: center; gap: 12px; }
.work-head h2 .flag { width: 30px; height: 20px; }
.work-head p { margin: 0; font-size: 15px; color: var(--mute); text-wrap: pretty; }
.work-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding-top: 22px; }
.tiles { margin: 0; display: grid; gap: 0; align-content: start; }
.tiles div { border-top: 1px solid var(--rule); padding: 10px 0 12px; }
.tiles div:first-child { border-top-color: var(--ink); }
.tiles dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.tiles dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.tiles dd small { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--mute); font-stretch: 100%; }
.tiles dd.hot { color: var(--red); }
.tiles dd.ok { color: var(--blue); }
.chart .la { fill: none; stroke: var(--blue); stroke-width: 3; }
.chart .ln { fill: none; stroke: var(--mute); stroke-width: 1.6; stroke-dasharray: 5 4; }
.chart .lb { fill: none; stroke: var(--red); stroke-width: 1.6; }
.chart .zone { fill: var(--red); opacity: .07; }
.chart .dead { fill: url(#deadHatch); }
.cleg i.zd { height: 10px; border: 0; background: repeating-linear-gradient(135deg, var(--red) 0 2px, transparent 2px 5px); opacity: .8; }
.cleg .hint { margin-left: auto; }
.tip em.bad { color: oklch(0.8 0.15 32); }
.work-foot p { margin: 0 0 6px; }
.work-foot .deadnote { color: var(--ink); }
.work-foot .deadnote b { color: var(--red); }
.work-foot .fine { font-size: 13.5px; }
.cleg i.a { border-top: 3px solid var(--blue); } .cleg i.n { border-top: 1.6px dashed var(--mute); } .cleg i.b { border-top: 1.6px solid var(--red); }
.cleg i.z { height: 10px; border: 0; background: var(--red); opacity: .18; }
.wc { position: relative; }
.wc svg { cursor: crosshair; touch-action: none; }
.chart .hit { pointer-events: all; }
.chart .hx { stroke: var(--ink); stroke-width: 1; }
.chart .hd { fill: var(--paper); stroke: var(--blue); stroke-width: 2.5; }
.chart .hn { fill: var(--paper); stroke: var(--mute); stroke-width: 1.6; }
.chart .pd { fill: var(--red); stroke: var(--paper); stroke-width: 2; }
.chart .pl { fill: var(--red); font-weight: 700; font-size: 12.5px; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.chart .px { fill: var(--red); font-weight: 700; font-size: 12px; }
.chart .pm { stroke: var(--red); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); padding: 10px 12px; font-size: 13.5px; line-height: 1.4; display: grid; gap: 2px; min-width: 210px; z-index: 2; }
.tip b { font-size: 13px; }
.tip .big { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.tip span { display: flex; justify-content: space-between; gap: 14px; opacity: .85; }
.tip span.big { opacity: 1; display: block; }
.tip .sep { border-top: 1px solid oklch(1 0 0 / .25); padding-top: 4px; margin-top: 4px; opacity: 1; }
.tip em { font-style: normal; font-weight: 600; }
.tip[hidden] { display: none; }
.work-foot { padding-top: 14px; font-size: 15px; color: var(--mute); text-wrap: pretty; max-width: 900px; }
.work-foot b { color: var(--ink); }

.work-actions { padding-top: 18px; }
.share.dark { background: var(--ink); color: var(--paper); }
.share.dark:hover { background: var(--blue); color: #fff; }
.hl { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.hl input { font-size: 16px; }
#cardTitle { font-size: 18px; }
#cardNotes { display: grid; gap: 8px; margin: 6px 0 12px; }
.cn { display: flex; gap: 8px; align-items: flex-start; }
.cn textarea { flex: 1; font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 8px; resize: vertical; min-height: 52px; }
.cn textarea:focus { border-color: var(--blue); outline: none; }
.cn .x { padding: 4px; color: var(--mute); }
.cn .x:hover { color: var(--red); }
#cardTexts .tg { margin-bottom: 6px; }
.hl input { font: inherit; font-size: 18px; font-weight: 700; font-stretch: 125%; letter-spacing: -0.02em; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 4px 0; outline: none; }
.hl input:focus { border-color: var(--blue); }

/* list */
.toolbar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 28px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.toolbar h2 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; font-size: 15px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--blue); width: 15px; height: 15px; margin: 0; }
.sel { display: flex; align-items: center; gap: 8px; }
.sel span { color: var(--mute); }
.sel select { font: inherit; font-weight: 700; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 2px 2px 2px 0; cursor: pointer; }
.sel select option { background: var(--paper); color: var(--ink); }
.thead, .row { display: grid; grid-template-columns: 30px 72px minmax(110px, 170px) minmax(120px, 1fr) 104px 78px 78px 96px 104px; gap: 18px; align-items: center; }
.v.md { color: var(--mute); }
.thead { padding: 14px 0 8px; border-bottom: 1px solid var(--rule); }
.r { text-align: right; }
.row { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; padding: 11px 0; cursor: pointer; }
.row:hover, .row.open { background: color-mix(in oklch, var(--blue) 6%, transparent); }
.row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rk { font-size: 14px; color: var(--mute); text-align: right; }
.cc { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.nm { font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.ref .nm { font-weight: 800; }
.bar { display: flex; height: 12px; }
.v { text-align: right; }
.v.net { font-size: 17px; font-weight: 700; }
.v.q, .v.m { color: var(--mute); }
.v.d { font-weight: 600; }
.pos { color: var(--blue); } .neg { color: var(--red); } .refl { color: var(--mute); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; font-size: 14px; color: var(--mute); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; display: inline-block; }

/* detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; padding: 30px 0 42px 120px; border-bottom: 1px solid var(--ink); }
.receipt { position: relative; background: var(--receipt); padding: 22px 26px 24px; font-family: "Courier Prime", "Courier New", monospace; font-size: 14px; line-height: 1.5;
  -webkit-mask: radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, #0000 98%, #000) 0 100% / 14px 51% repeat-x;
          mask: radial-gradient(circle 5px at 50% 0, #0000 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, #0000 98%, #000) 0 100% / 14px 51% repeat-x; }
.rc-head { text-align: center; font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.rc-sub { text-align: center; font-size: 13px; color: var(--mute); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--mute); }
.ln { display: flex; align-items: baseline; gap: 6px; }
.ln .ld { flex: 1; border-bottom: 1.5px dotted color-mix(in oklch, var(--mute) 60%, transparent); transform: translateY(-4px); min-width: 12px; }
.ln .am { white-space: nowrap; }
.ln.grp { font-weight: 700; text-transform: uppercase; margin-top: 10px; }
.ln.sub { padding-left: 16px; color: var(--ink); font-size: 14px; }
.ln.sub .lb { overflow: hidden; text-overflow: ellipsis; }
.ln.tot { font-weight: 700; font-size: 20px; border-top: 2px solid var(--ink); margin-top: 12px; padding-top: 6px; }
.ln.tot .ld { border: 0; }
.rc-foot { margin-top: 14px; padding-top: 10px; border-top: 1.5px dashed var(--mute); font-size: 13.5px; color: var(--mute); display: grid; gap: 2px; }
.stamp { position: absolute; right: 18px; top: 58px; transform: rotate(-11deg); border: 3px solid var(--stamp); color: var(--stamp); font-weight: 700; font-size: 18px; letter-spacing: .08em; padding: 4px 10px; opacity: .88; pointer-events: none; }
.side h4 { margin: 18px 0 8px; }
.side h4:first-child { margin-top: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .ax { stroke: var(--rule); }
.chart text { fill: var(--mute); font-size: 12px; font-family: inherit; }
.chart .lc { fill: none; stroke: var(--blue); stroke-width: 3; }
.chart .lr { fill: none; stroke: var(--mute); stroke-width: 1.6; stroke-dasharray: 5 4; }
.chart .lm { fill: none; stroke: var(--red); stroke-width: 1.6; }
.chart .now { stroke: var(--ink); stroke-dasharray: 2 3; }
.chart .dot { fill: var(--blue); stroke: var(--paper); stroke-width: 2; }
.cleg { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--mute); margin-top: 6px; }
.cleg span { display: flex; align-items: center; gap: 7px; }
.cleg i { width: 18px; height: 0; border-top: 3px solid var(--blue); display: inline-block; }
.cleg i.r { border-top: 1.6px dashed var(--mute); } .cleg i.m { border-top: 1.6px solid var(--red); }
.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; text-wrap: pretty; }
.notes li { padding-left: 16px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 1.5px; background: var(--ink); }
.notes.info li { color: var(--mute); }

/* method */
.method { margin-top: 72px; padding: 22px 0 60px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
.method h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.method-grid { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; font-size: 15px; color: var(--mute); }
.method-grid p { margin: 0; text-wrap: pretty; }

/* share dialog */
.share-dlg { border: 0; padding: 26px 28px 24px; width: min(760px, 94vw); background: var(--paper); color: var(--ink); border-radius: 6px; }
.share-dlg::backdrop { background: oklch(0.2 0.05 264 / .55); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dlg-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.x { background: none; border: 0; cursor: pointer; padding: 6px; }
.preview { margin: 18px 0; display: flex; justify-content: center; background: color-mix(in oklch, var(--ink) 5%, transparent); padding: 18px; }
.preview canvas { max-width: 100%; max-height: 56vh; height: auto; width: auto; box-shadow: 0 10px 30px oklch(0 0 0 / .18); }
.dlg-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dlg-actions button { display: inline-flex; align-items: center; gap: 8px; }
.primary.ig { background: var(--ink); }
.primary.ig:hover { background: var(--red); }
.share-hint { margin: 14px 0 0; font-size: 14px; color: var(--ink); background: var(--warn-bg, oklch(0.96 0.03 80)); padding: 10px 12px; border-left: 3px solid var(--red); }
.primary { background: var(--band); color: var(--band-ink); border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 700; cursor: pointer; }
.primary:hover { background: var(--blue); }
.ghost { background: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 20px; font-weight: 600; cursor: pointer; }

/* Impressum */
.legal-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; grid-column: 1 / -1; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.legal-dlg { border: 0; padding: 26px 30px 30px; width: min(720px, 94vw); max-height: 88vh; background: var(--paper); color: var(--ink); border-radius: 6px; }
.legal-dlg::backdrop { background: oklch(0.2 0.05 264 / .55); }
.legal-body { font-size: 15px; line-height: 1.5; }
.legal-body .lede { color: var(--mute); margin-top: 0; }
.legal-body h3 { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); margin: 20px 0 4px; }
.legal-body p { margin: 0 0 8px; text-wrap: pretty; }
.legal-body a { color: var(--blue); }

/* responsive */
@media (max-width: 1060px) {
  .thead, .row { grid-template-columns: 26px 62px minmax(90px, 150px) minmax(60px, 1fr) 90px 62px 62px 80px 90px; gap: 12px; }
  .band-grid { grid-template-columns: 1fr; gap: 20px; }
  .detail { grid-template-columns: 1fr; padding-left: 0; gap: 32px; }
  .work-head, .work-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .method, .method-grid { grid-template-columns: 1fr; }
  .method .seo-lead, .method-grid { grid-column: 1; }
}
@media (max-width: 760px) {
  /* Kopfzeile muss in 375 px passen, sonst zoomt Safari die ganze Seite heraus */
  html, body { overflow-x: clip; }
  .top { padding: 12px 0 10px; gap: 10px; }
  .brand { gap: 8px; min-width: 0; }
  .brand .needle { width: 28px; height: 28px; flex: none; }
  .wordmark { font-size: 21px; white-space: nowrap; }
  .eu { display: none; }
  .topnav { gap: 12px; flex: none; }
  .topnav a { display: none; }
  .theme { gap: 6px; }
  .theme svg { display: none; }
  .band-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -18px; margin-right: -18px; padding: 0 18px; }
  .band-tabs::-webkit-scrollbar { display: none; }
  .band-tg { flex-wrap: nowrap; gap: 0 18px; }
  .band-tg button { white-space: nowrap; font-size: 14px; }
  .facts div { padding: 6px 0 7px; gap: 10px; }
  .facts dt { font-size: 11.5px; letter-spacing: .06em; }
  .facts dd { font-size: 21px; }
  .facts dd small { font-size: 12px; }
  /* Mobil: Eingaben als Bottom-Sheet, Zusammenfassung in einer festen Leiste unten */
  .inputs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 84vh; overflow-y: auto; background: var(--paper);
    padding: 14px 18px 28px; gap: 18px 24px; border-top: 1px solid var(--ink); box-shadow: 0 -12px 40px oklch(0 0 0 / .25);
    transform: translateY(102%); transition: transform .28s ease; }
  .inputs.open { transform: none; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--ink); font-size: 13px; }
  .mbar span { color: var(--ink); line-height: 1.3; }
  .mbar .primary { padding: 9px 16px; white-space: nowrap; }
  .sheet-bg { display: block; position: fixed; inset: 0; z-index: 28; background: oklch(0.2 0.05 264 / .5); }
  .sheet-bg[hidden] { display: none; }
  body { padding-bottom: 72px; }
  .inputs { display: flex; flex-wrap: wrap; }
  .f-gross, .f-cap, .f-hh { width: 100%; }
  .hh-row { gap: 12px 24px; }
  .hh-row .f { width: auto; }
  .caps { gap: 14px; } .caps label { flex: 1; width: auto; }
  .num input { font-size: 18px; }
  .num.big input { font-size: 30px; }
  .tg button { font-size: 15px; padding: 6px 0; }
  .f { gap: 6px; }
  .band { padding-top: 26px; }
  .band-grid { gap: 14px; }
  .bignum { font-size: clamp(64px, 17vw, 96px); }
  .lead { font-size: 16px; }
  .band-tabs { margin-top: 22px; }
  .hz { margin-top: 26px; }
  .band-foot { padding-top: 10px; }
  .raise-ctl { flex-wrap: wrap; }
  /* Balken bleiben lesbar: horizontal scrollen statt quetschen */
  .hz { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; padding-bottom: 4px; }
  .hz-in { min-width: 760px; padding-left: 48px; }
  .horizon { height: 150px; gap: 4px; }
  .horizon .hf { box-shadow: none; border-radius: 1px; }
  .horizon i b { font-size: 11px; }
  .hz-line span { font-size: 11px; }
  .dist-row { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
  .dist-axis { margin-left: 70px; }
  .band-foot > span { display: none; }
  .band-foot { justify-content: flex-start; }
  .facts dd { font-size: 22px; }
  .thead { display: none; }
  .row { grid-template-columns: 22px auto 1fr auto; grid-template-areas: "rk cc nm net" ". bar bar d" ". q m md"; row-gap: 6px; column-gap: 10px; }
  .row .md { grid-area: md; font-size: 12px; }
  .row .md::before { content: "Median "; }
  .row .rk { grid-area: rk; } .row .cc { grid-area: cc; } .row .nm { grid-area: nm; } .row .net { grid-area: net; }
  .row .bar { grid-area: bar; height: 7px; } .row .d { grid-area: d; font-size: 13px; }
  .row .q { grid-area: q; text-align: left; font-size: 12px; } .row .m { grid-area: m; text-align: left; font-size: 12px; }
  .row .q::before { content: "Quote "; } .row .m::before { content: "Grenze "; }
  .toolbar h2 { font-size: 26px; }
  .receipt { padding: 20px 16px; }
  .stamp { font-size: 14px; top: 50px; right: 10px; }
}