/* The income-limit calculator, table and curve (includes/modules/einkommensgrenzen.php), in the design's
   Haushaltsbuch look: white sheets, Königsblau for the reader's own figure, the highlighter under the
   answer, ledger figures in Mono. Colours and fonts are the theme's tokens. Every selector starts with
   .wgr-einkommensgrenzen. */

.wgr-einkommensgrenzen { color: var(--ink); --pad: clamp(16px, 3vw, 32px); }
.wgr-einkommensgrenzen [hidden] { display: none !important; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__label { display: inline-block; font: 700 15px/1.2 var(--font-text); letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: var(--radius, 4px); padding: 2px 6px; margin-right: 4px; color: var(--ink); background: var(--sheet); white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__label--e { color: var(--cut); border-color: var(--cut); border-style: dashed; background: var(--cut-soft); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__vh, .wgr-einkommensgrenzen .wgr-einkommensgrenzen__ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__quelle { font-size: 15px; line-height: 1.5; color: var(--ink-2); border-left: 2px solid var(--rule); padding: 2px 0 2px 12px; margin: 16px 0 0; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__quelle a { color: var(--blue); }

/* ---- the calculator: one sheet, questions left, answer right from 1000 px ---- */
.wgr-einkommensgrenzen[data-tool] { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius, 4px); box-shadow: var(--shadow); margin: 0 calc(-1 * var(--bleed, 16px)); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kopf { padding: 24px var(--pad) 16px; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__titel { margin: 0; font-size: 26px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kopf p { margin: 0; color: var(--ink-2); font-size: 16px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__koerper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__form { padding: 8px var(--pad) 24px; box-shadow: 1px 0 0 var(--rule); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__feld { padding: 20px 0 8px 46px; border-bottom: 1px dashed var(--rule); position: relative; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__feld > label { display: block; font-weight: 700; font-size: 18px; line-height: 1.35; margin: 0 0 8px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__nr { position: absolute; left: 0; top: 18px; font: 700 26px/1 var(--font-text); color: var(--blue); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__auswahl, .wgr-einkommensgrenzen .wgr-einkommensgrenzen__eingabe { position: relative; max-width: 22rem; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__auswahl::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__auswahl select, .wgr-einkommensgrenzen .wgr-einkommensgrenzen__eingabe input {
	font: 400 19px/1.2 var(--font-text); color: var(--ink); background: var(--sheet); width: 100%;
	border: 1.5px solid var(--line); border-radius: var(--radius, 4px); min-height: 50px; padding: 10px 40px 10px 12px; appearance: none;
}
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__eingabe input { text-align: right; padding-right: 108px; font-family: var(--font-num); font-size: 20px; font-variant-numeric: tabular-nums; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__eingabe input::placeholder { color: var(--ink-2); opacity: 1; font: 400 16px/1.2 var(--font-text); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__einheit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--ink-2); pointer-events: none; white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__auswahl select:focus, .wgr-einkommensgrenzen .wgr-einkommensgrenzen__eingabe input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__hilfe { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 8px 0; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__hilfe a { color: var(--blue); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__los { margin-top: 20px; font: 700 18px/1 var(--font-text); color: var(--on-blue, #fff); background: var(--blue); border: 0; border-radius: var(--radius, 4px); min-height: 54px; padding: 0 32px; cursor: pointer; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__antwort { padding: 24px var(--pad) 24px; align-self: start; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__vorab { margin: 0; font-size: 17px; color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__betrag { margin: 4px 0 12px; font: 800 clamp(52px, 9vw, 76px)/1.05 var(--font-head); font-variant-numeric: lining-nums; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__betrag mark { background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%); color: inherit; padding: 0 4px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__betrag span { font: 400 18px/1.2 var(--font-text); color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kein { margin: 4px 0 12px; font: 800 44px/1.1 var(--font-head); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__satz { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__fehler { margin: 8px 0 16px; font-size: 17px; line-height: 1.5; border-left: 3px solid var(--cut); padding: 2px 0 2px 12px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__mehr { margin: 0; border-top: 2px solid var(--ink); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__mehr > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__mehr dt { font-size: 16px; line-height: 1.45; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__mehr dd { margin: 0; font: 700 19px/1.2 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__e dd { color: var(--cut); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__fuss { padding: 0 var(--pad) 20px; border-top: 1px solid var(--rule); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__hinweis { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 16px 0 0; }

/* ---- the table: seven levels side by side; on a phone two halves, I–IV over V–VII ---- */
.wgr-einkommensgrenzen--tafel, .wgr-einkommensgrenzen--kurve { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius, 4px); box-shadow: var(--shadow); padding: 20px clamp(12px, 3vw, 24px); margin: 0 0 var(--sp-5, 24px); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__h { margin: 0 0 8px; font: 700 20px/1.3 var(--font-text); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__status { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__text { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabellen { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle { display: table; width: auto; overflow: visible; background: transparent; flex: 1 1 15rem; min-width: 0; border-collapse: collapse; font-size: 16px; line-height: 1.3; margin: 0; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle th, .wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle td { padding: 8px clamp(2px, 1.6vw - 3px, 8px); border-bottom: 1px solid var(--rule); text-align: left; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle thead th { font-size: 15px; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--ink); -webkit-hyphens: manual; hyphens: manual; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle tbody th { font: 700 17px/1.3 var(--font-num); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle .n { text-align: right; font-family: var(--font-num); font-size: clamp(15px, 4.6vw, 16px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__tabelle thead .n { font-family: var(--font-head); font-size: 17px; color: var(--ink); }

/* ---- the curve ---- */
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kurve { position: relative; margin: 8px 0 0 44px; padding-bottom: 28px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kurve svg { display: block; width: 100%; height: clamp(180px, 40vw, 280px); overflow: visible; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kurve .g { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kurve .h { fill: none; stroke: var(--blue); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__kurve .e { fill: none; stroke: var(--cut); stroke-width: 3; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__yachse { position: absolute; left: -44px; top: 0; width: 38px; height: clamp(180px, 40vw, 280px); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__yachse span { position: absolute; right: 0; transform: translateY(-50%); font: 400 15px/1 var(--font-num); color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__xachse { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__xachse span { position: absolute; top: 4px; transform: translateX(-50%); font: 400 15px/1 var(--font-num); color: var(--ink-2); white-space: nowrap; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__xachse span:first-child { transform: none; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__achsen { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__legende { list-style: none; margin: 12px 0 0; padding: 0; font-size: 16px; line-height: 1.5; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__legende li { display: block; position: relative; padding-left: 40px; margin: 0 0 8px; }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__legende i { position: absolute; left: 0; top: 0.75em; width: 28px; height: 0; border-top: 3px solid var(--blue); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__legende i.e { border-top: 3px dashed var(--cut); }
.wgr-einkommensgrenzen .wgr-einkommensgrenzen__label--b { border-color: var(--ink); }