/* Bürgergeld vs. Arbeit – Rechner 2025 (gekapselt unter .bgr) */
.bgr{
  --surface:oklch(0.205 0.028 262);--card:oklch(0.172 0.024 262);--field:oklch(0.235 0.026 262);
  --line:oklch(0.31 0.022 262);--line2:oklch(0.4 0.022 262);--fg:#fff;--muted:#fff;
  --green:oklch(0.82 0.18 148);--red:oklch(0.71 0.19 27);--amber:#ffc50d;--brand:#ffc50d;--blue:oklch(0.75 0.12 245);--violet:oklch(0.75 0.14 295);
  --onAccent:oklch(0.19 0.03 262);
  container-type:inline-size;
  font-family:var(--bgr-font,"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  color:var(--fg);line-height:1.45;font-size:15px;-webkit-font-smoothing:antialiased;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(14px,3cqi,32px);
}
.bgr[data-theme="light"]{
  --surface:oklch(0.995 0.003 85);--card:oklch(0.972 0.006 85);--field:oklch(1 0 0);
  --line:oklch(0.89 0.01 85);--line2:oklch(0.8 0.012 85);--fg:oklch(0.19 0.03 262);--muted:oklch(0.45 0.02 262);
  --green:oklch(0.55 0.16 150);--red:oklch(0.56 0.2 27);--amber:oklch(0.64 0.14 70);--brand:oklch(0.62 0.15 70);--blue:oklch(0.55 0.15 250);--violet:oklch(0.55 0.17 295);
  --onAccent:oklch(1 0 0);
}
.bgr *{box-sizing:border-box}
.bgr h2,.bgr h3,.bgr h4,.bgr .val{font-family:var(--bgr-display,"Bricolage Grotesque",var(--bgr-font,"Geist",ui-sans-serif,system-ui,sans-serif))}
.bgr .top{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.bgr .top h2{font-size:clamp(24px,4cqi,40px);margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.bgr .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:960px){.bgr .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}}
.bgr .card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(14px,2.4cqi,24px)}
.bgr .cardTitle{margin:0 0 4px;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.bgr label{display:block;font-size:.84rem;font-weight:500;color:var(--muted);margin:.8rem 0 .35rem}
.bgr input[type=number],.bgr input[type=text],.bgr select{width:100%;background:var(--field);border:1px solid var(--line);color:var(--fg);padding:11px 13px;border-radius:12px;font:inherit;font-size:15px;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.bgr input:focus,.bgr select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklch,var(--brand) 30%,transparent)}
.bgr select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.bgr select option{background:var(--field);color:var(--fg)}
.bgr input:disabled{opacity:.45;cursor:not-allowed}
.bgr .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bgr .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@container (max-width:380px){.bgr .row,.bgr .row3{grid-template-columns:1fr}}
.bgr .hint{font-size:.78rem;line-height:1.45;color:var(--muted);margin-top:6px}
.bgr .badge{display:inline-block;padding:.12rem .5rem;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:500;vertical-align:middle;margin-left:4px;line-height:1.4}
.bgr .presetRow{display:flex;gap:8px;align-items:stretch}
.bgr .presetRow select{flex:1 1 auto;min-width:0}
.bgr .resetLink{flex:0 0 auto;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:transparent;color:var(--fg);font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.bgr .resetLink.hidden{display:none}
.bgr .resetLink:hover{border-color:var(--fg)}
/* Switch */
.bgr .noWorkLabel{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 16px;padding:14px 16px;border-radius:18px;border:1px solid color-mix(in oklch,var(--red) 45%,transparent);background:color-mix(in oklch,var(--red) 10%,transparent);cursor:pointer;color:var(--fg);font-size:1rem}
.bgr .noWorkLabel strong{font-weight:600}
.bgr .noX{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--onAccent);font-size:20px;font-weight:700;line-height:1}
.bgr .switch{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:48px;height:28px;margin:0 0 0 auto;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;transition:background .2s}
.bgr .switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.bgr .switch:checked{background:var(--red)}
.bgr .switch:checked::after{transform:translateX(20px)}
/* Checkboxes */
.bgr input[type=checkbox]:not(.switch){appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;flex:0 0 auto;border:1.5px solid var(--line2);border-radius:6px;background:var(--field);display:inline-grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.bgr input[type=checkbox]:not(.switch)::after{content:"";width:9px;height:5px;border-left:2px solid var(--onAccent);border-bottom:2px solid var(--onAccent);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.bgr input[type=checkbox]:not(.switch):checked{background:var(--brand);border-color:var(--brand)}
.bgr input[type=checkbox]:not(.switch):checked::after{opacity:1}
/* Sections */
.bgr .inputs{counter-reset:sec}
.bgr .sectionTitle{counter-increment:sec;display:flex;align-items:center;gap:10px;margin:26px 0 2px;padding-top:20px;border-top:1px solid var(--line);font-size:1.02rem;font-weight:600;letter-spacing:-.005em}
.bgr .sectionTitle::before{content:counter(sec,decimal-leading-zero);font-family:inherit;font-size:.72rem;font-weight:700;color:var(--onAccent);background:var(--brand);border-radius:6px;padding:3px 6px;line-height:1}
.bgr .sectionTitle strong{font-weight:inherit}
.bgr .pregBox{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--fg);font-size:.88rem;cursor:pointer}
.bgr .smallNote{font-size:.82rem;margin-top:8px}
#minWageNote{color:var(--red);background:color-mix(in oklch,var(--red) 12%,transparent);border:1px solid color-mix(in oklch,var(--red) 50%,transparent);padding:10px 12px;border-radius:12px;font-weight:600;line-height:1.4}
#minWageNote::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--red);color:var(--onAccent);font-size:12px;font-weight:800;vertical-align:-3px}
@keyframes wiggle{0%{transform:rotate(0)}15%{transform:rotate(-1.5deg)}30%{transform:rotate(1.5deg)}45%{transform:rotate(-1deg)}60%{transform:rotate(1deg)}100%{transform:rotate(0)}}
#minWageNote.wiggle{animation:wiggle 600ms ease}
.bgr .dimField{opacity:.55}
.bgr .devBanner{display:none;margin:12px 0;padding:12px 14px;border-radius:14px;border:1px solid color-mix(in oklch,var(--red) 50%,transparent);background:color-mix(in oklch,var(--red) 10%,transparent);color:var(--fg);font-size:.88rem}
/* Number steppers */
.bgr input[type=number]::-webkit-inner-spin-button,.bgr input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bgr input[type=number]{-moz-appearance:textfield}
.bgr .numWrap{position:relative}
.bgr .numWrap>input[type=number]{padding-right:32px}
.bgr .numBtn{position:absolute;right:6px;width:22px;height:15px;border:none;background:transparent;color:var(--muted);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px}
.bgr .numBtn.up{top:calc(50% - 15px)}
.bgr .numBtn.down{top:50%}
.bgr .numBtn:hover{color:var(--fg);background:var(--line)}
.bgr .numBtn svg{width:13px;height:13px;pointer-events:none;display:block}
.bgr .numWrap.tight>input[type=number]{padding-right:26px}
.bgr .numWrap.tight .numBtn{right:3px;width:18px}
/* Cost items */
.bgr .flexWrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.bgr .costItem{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:14px;padding:12px;transition:border-color .15s,background .15s}
.bgr .costItem:has(>input[type=checkbox]:checked){border-color:color-mix(in oklch,var(--brand) 60%,transparent);background:color-mix(in oklch,var(--brand) 8%,var(--field))}
.bgr .costItem>label:first-of-type{grid-column:2/4;margin:0;color:var(--fg);font-size:.86rem;line-height:1.3;cursor:pointer}
.bgr .costItem .numWrap{grid-column:2;max-width:150px}
.bgr .costItem .amt{padding-top:8px;padding-bottom:8px}
.bgr .costItem .perKid{grid-column:3;display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:.8rem;white-space:nowrap;cursor:pointer}
.bgr .costItem .perKid input{width:17px;height:17px}
.bgr .hr{height:1px;background:var(--line);margin:20px 0}
.bgr details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.95rem}
.bgr details summary::-webkit-details-marker{display:none}
.bgr details summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:16px;color:var(--muted)}
.bgr details[open] summary::after{content:"–"}
.bgr details .flexWrap{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 12px;margin-top:4px}
/* Results */
.bgr .res h3:not(.cardTitle){margin:0 0 6px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.bgr .kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.bgr .kpi .box{position:relative;background:var(--field);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.bgr .kpi .box .lab{display:flex;align-items:flex-start;gap:6px;font-size:.8rem;line-height:1.35;color:var(--muted)}
.bgr .kpi .box .val{font-size:clamp(1.3rem,3cqi,1.8rem);font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:6px;line-height:1.1}
.bgr .kpi .box.feature{grid-column:1/-1;padding:18px 18px}
.bgr .kpi .box.feature .val{font-size:clamp(1.8rem,4.6cqi,2.6rem)}
.bgr .kpi .box.hero{background:color-mix(in oklch,var(--violet) 10%,var(--field));border-color:color-mix(in oklch,var(--violet) 40%,transparent)}
.bgr .val.pos{color:var(--green)}
.bgr .val.neg{color:var(--red)}
.bgr .info{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:17px;height:17px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);font-size:10px;font-weight:700;font-style:normal;cursor:help;position:relative;line-height:1}
.bgr .info .tooltip{display:none;position:absolute;z-index:20;top:22px;right:-6px;min-width:220px;max-width:300px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font-size:.78rem;font-weight:400;line-height:1.45;color:var(--fg);box-shadow:0 14px 40px rgba(0,0,0,.35);text-align:left}
.bgr .info:hover .tooltip,.bgr .info:focus .tooltip{display:block}
.bgr .ampelPanel{margin-top:10px;border-radius:16px;border:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:14px;background:var(--field);line-height:1.5;font-size:.92rem}
.bgr .ampelIcon{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.bgr .ampelIcon i{display:block;width:12px;height:12px;border-radius:50%;background:var(--line2);opacity:.55;transition:all .25s}
.bgr .ampelPanel[data-state=red],.bgr .ampelPanel[data-state=nowork]{background:color-mix(in oklch,var(--red) 11%,var(--field));border-color:color-mix(in oklch,var(--red) 45%,transparent)}
.bgr .ampelPanel[data-state=yellow]{background:color-mix(in oklch,var(--amber) 11%,var(--field));border-color:color-mix(in oklch,var(--amber) 45%,transparent)}
.bgr .ampelPanel[data-state=green]{background:color-mix(in oklch,var(--green) 11%,var(--field));border-color:color-mix(in oklch,var(--green) 45%,transparent)}
.bgr .ampelPanel[data-state=red] .ampelIcon i:nth-child(1),.bgr .ampelPanel[data-state=nowork] .ampelIcon i:nth-child(1){background:var(--red);opacity:1;box-shadow:0 0 10px var(--red)}
.bgr .ampelPanel[data-state=yellow] .ampelIcon i:nth-child(2){background:var(--amber);opacity:1;box-shadow:0 0 10px var(--amber)}
.bgr .ampelPanel[data-state=green] .ampelIcon i:nth-child(3){background:var(--green);opacity:1;box-shadow:0 0 10px var(--green)}
.bgr #chart{display:block;width:100%;height:340px;margin-top:10px;background:var(--field);border:1px solid var(--line);border-radius:16px}
.bgr .wb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@container (max-width:540px){.bgr .wb{grid-template-columns:1fr}}
.bgr .wb .col{background:var(--field);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.bgr .wb h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:1rem}
.bgr .wb h4::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green)}
.bgr .wb .col+.col h4::before{background:var(--blue)}
.bgr .wb .row{display:flex;justify-content:space-between;gap:12px;margin:6px 0;font-size:.88rem;color:var(--muted)}
.bgr .wb .row strong{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.bgr .wb .sum{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-weight:700;color:var(--fg)}
.bgr .wb .delta{grid-column:1/-1;border:1px dashed var(--line2);border-radius:14px;padding:12px;text-align:center;font-variant-numeric:tabular-nums}
.bgr #details{font-size:.82rem;color:var(--muted)}
.bgr #details .dRow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.bgr #details .dRow b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;display:inline-flex;gap:6px;align-items:center}
.bgr .legendCard{margin-top:16px}
.bgr .legend{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
@container (min-width:760px){.bgr .legend{grid-template-columns:repeat(3,1fr)}}
.bgr .tier{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:14px;font-size:.9rem;line-height:1.45}
.bgr .tier .dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;margin-top:4px}
.bgr .tier.green{background:color-mix(in oklch,var(--green) 10%,transparent);border-color:color-mix(in oklch,var(--green) 40%,transparent)}
.bgr .tier.green .dot{background:var(--green)}
.bgr .tier.yellow{background:color-mix(in oklch,var(--amber) 10%,transparent);border-color:color-mix(in oklch,var(--amber) 40%,transparent)}
.bgr .tier.yellow .dot{background:var(--amber)}
.bgr .tier.red{background:color-mix(in oklch,var(--red) 10%,transparent);border-color:color-mix(in oklch,var(--red) 40%,transparent)}
.bgr .tier.red .dot{background:var(--red)}
.bgr .foot{color:var(--muted);font-size:.8rem;margin-top:14px;line-height:1.5}
.bgr .foot b{color:var(--fg)}
@container (max-width:520px){.bgr .kpi .box{padding:12px}.bgr .kpi .box .val{font-size:1.25rem}.bgr .kpi .box.feature .val{font-size:1.7rem}}