/* rentbuy.css – „Mieten oder kaufen?“ /<l>/rent-or-buy/ (tools/rentbuy-page.mjs, static/js/rentbuy.js). Baut auf site.css auf (Farben, .btn, .wrap, .kicker, .gd-bc).
   Handy zuerst (390 px ohne seitliches Scrollen), logische Eigenschaften → gleiches Layout LTR + RTL (fa/ar/he; Diagramm bleibt links→rechts).
   Glas = Verlauf + Lichtkante, KEIN Live-Blur (iPhone-Tempo). Schrift ≥ 12 px, Tippflächen ≥ 44 px, keine Endlos-Animation, „weniger Bewegung“ = ohne Übergänge.
   Diagramm-Farben (dataviz-Validator, dunkle Fläche #0d1117): Mieten #3987e5 · Kaufen #b98a2e – Texte nie in Linienfarbe. */
.is-rentbuy{--rb-r:#3987e5;--rb-b:#b98a2e;--rb-pane:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));background:radial-gradient(1100px 620px at 88% -8%,rgba(214,178,112,.11),transparent 62%),radial-gradient(900px 640px at -6% 38%,rgba(57,135,229,.08),transparent 70%),radial-gradient(800px 500px at 50% 110%,rgba(47,184,176,.06),transparent 70%),var(--bg)}
.is-rentbuy p{text-wrap:pretty}
.rb{padding-bottom:3.4rem}
.rb [hidden]{display:none!important}
.rb-wrap{max-width:1180px}
.rb-head{max-width:46rem;margin-bottom:1.4rem}
.rb-k{display:inline-flex;align-items:center;gap:.5rem}.rb-k svg{width:18px;height:18px;color:var(--gold)}
.rb-h1{font-size:clamp(2rem,6vw,3.3rem);max-width:20ch}
.rb-head .lead{margin-bottom:0}
/* Glas-Karte mit Gold-Lichtkante (Maske) */
.rb-glass{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:var(--rb-pane);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -34px rgba(0,0,0,.8)}
.rb-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(243,220,170,.55),rgba(214,178,112,0) 34%,rgba(214,178,112,0) 66%,rgba(214,178,112,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.rb-app{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:980px){.rb-app{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}.rb-out{position:sticky;top:88px}}
.rb-form{padding:18px 16px 8px}
@media (min-width:640px){.rb-form{padding:22px 22px 10px}}
.rb-fs{border:0;margin:0 0 1.1rem;padding:0;min-width:0}
.rb-lg{display:flex;align-items:center;gap:.55rem;padding:0;margin:0 0 .7rem;font-weight:800;font-size:1.02rem;letter-spacing:.01em}
.rb-key{display:inline-block;flex:none;width:18px;height:3px;border-radius:3px;background:var(--rb-r)}.rb-key-b{background:var(--rb-b)}
.rb-f{margin:0 0 .95rem;min-width:0}
.rb-f>label,.rb-pc>label{display:block;margin:0 0 .4rem;font-size:max(12px,.86rem);color:#d6d1c8;font-weight:600}
.rb-in{display:flex;align-items:center;min-width:0;border:1px solid var(--line2);border-radius:14px;background:rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s}
.rb-in:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,178,112,.18)}
.rb-in input{flex:1;min-width:0;min-height:50px;padding:0 14px;border:0;background:transparent;color:var(--text);font:700 16px/1 var(--ff);font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
[dir=rtl] .rb-in input{text-align:end}
.rb-in input:focus{outline:none}
.rb-in input::placeholder{color:#6f7782;font-weight:500}
.rb-u{flex:none;padding-inline:4px 14px;color:var(--muted);font-weight:700;font-family:var(--sys)}
.rb-n{margin:.45rem 0 0;font-size:max(12px,.8rem);line-height:1.5;color:var(--muted)}
.rb-ql{margin:.75rem 0 .45rem;font-size:max(12px,.8rem);color:var(--muted);font-weight:600}
/* Projekt-Chips: am Handy waagrecht wischbar, ab 980 px umbrechend */
.rb-chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.rb-chips::-webkit-scrollbar{display:none}
@media (min-width:980px){.rb-chips{flex-wrap:wrap;overflow:visible}}
.rb-chip{flex:none;display:grid;gap:1px;min-height:48px;padding:.45rem .8rem;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.035);color:var(--text);text-align:start;font:inherit;cursor:pointer;scroll-snap-align:start;transition:border-color .2s,background .2s}
.rb-chip b{font-size:max(12px,.82rem);font-weight:700;white-space:nowrap}
.rb-chip span{font-size:max(12px,.76rem);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-chip:hover,.rb-chip:focus-visible{border-color:rgba(214,178,112,.6)}
.rb-chip[aria-pressed=true]{border-color:var(--gold);background:linear-gradient(135deg,rgba(243,220,170,.16),rgba(168,133,74,.1))}
.rb-chip[aria-pressed=true] span{color:var(--gold2)}
/* % | ฿ */
.rb-seg{display:flex;flex:none;gap:2px;margin-inline-end:5px;padding:3px;border-radius:11px;background:rgba(255,255,255,.06)}
.rb-seg button{min-width:44px;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:800 15px/1 var(--sys);cursor:pointer}
.rb-seg button[aria-pressed=true]{background:linear-gradient(135deg,var(--gold2),var(--gold-d));color:#16120a}
/* Zeitraum */
.rb-yr{display:flex;align-items:center;gap:14px}
.rb-yr input{flex:1;min-width:0;height:44px;margin:0;background:transparent;accent-color:var(--gold);cursor:pointer}
.rb-yr output{flex:none;min-width:5.5em;padding:.5rem .7rem;border:1px solid rgba(214,178,112,.4);border-radius:12px;text-align:center;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums}
/* Annahmen: Stufen-Knöpfe (iPhone-Zifferntastatur hat kein Minus) */
.rb-pc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem .8rem;margin:0 0 .65rem}
.rb-pc>label{margin:0}
.rb-st{display:flex;align-items:center;gap:6px}
.rb-sb{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.04);color:var(--gold2);cursor:pointer}
.rb-sb svg{width:18px;height:18px}
.rb-sb:hover,.rb-sb:focus-visible{border-color:var(--gold)}
.rb-in-p{width:5.6rem}
.rb-in-p input{min-height:44px;padding:0 6px 0 10px;text-align:center}
@media (max-width:420px){.rb-pc{grid-template-columns:minmax(0,1fr)}.rb-st{justify-content:flex-start}}
/* Ergebnis */
.rb-out{padding:18px 16px}
@media (min-width:640px){.rb-out{padding:22px}}
.rb-empty{display:grid;justify-items:center;gap:.6rem;padding:1.2rem .4rem 1.4rem;text-align:center;color:#cfc9bf}
.rb-empty p{margin:0;max-width:30rem;font-size:.95rem}
.rb-ghost{width:min(320px,100%);height:auto;opacity:.75}
.rb-gg path{stroke:rgba(255,255,255,.07);stroke-width:1;fill:none}.rb-gr,.rb-gb{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;opacity:.55}.rb-gr{stroke:var(--rb-r)}.rb-gb{stroke:var(--rb-b)}
.rb-rh{margin:0 0 .9rem;font-size:1.15rem}
.rb-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rb-tile{display:grid;align-content:start;gap:.2rem;min-width:0;padding:12px 12px 13px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.22)}
.rb-tk{display:flex;align-items:center;gap:.45rem;font-size:max(12px,.8rem);color:#d6d1c8;font-weight:700}
.rb-tile b{font-size:clamp(1.15rem,5.2vw,1.7rem);line-height:1.15;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;unicode-bidi:isolate}
.rb-fx{min-height:1.1em;font-size:max(12px,.78rem);color:var(--muted)}
.rb-tile em{font-style:normal;font-size:max(12px,.76rem);line-height:1.4;color:var(--muted)}
.rb-diff{margin:.85rem 0 0;padding:.65rem .85rem;border-radius:12px;background:rgba(255,255,255,.04);font-weight:700;font-size:.95rem}
.rb-fig{position:relative;margin:1rem 0 0}
.rb-fc{font-weight:700;font-size:.95rem;margin:0 0 .35rem}
.rb-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;list-style:none;margin:0 0 .4rem;padding:0;font-size:max(12px,.8rem);color:#d6d1c8}
.rb-legend li{display:flex;align-items:center;gap:.45rem}
.rb-chart{position:relative;direction:ltr;touch-action:pan-y;border-radius:12px;outline-offset:3px}
.rb-chart:focus-visible{outline:2px solid var(--gold)}
.rb-chart svg{display:block;width:100%;height:auto;overflow:visible}
.rb-grid{stroke:rgba(255,255,255,.08);stroke-width:1}.rb-zero{stroke:rgba(255,255,255,.22)}
.rb-ax{fill:var(--muted);font:600 12px var(--ff);font-variant-numeric:tabular-nums}
.rb-el{fill:#e6e1d8;font:700 12px var(--ff);font-variant-numeric:tabular-nums}
.rb-l{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.rb-l-r{stroke:var(--rb-r)}.rb-l-b{stroke:var(--rb-b)}
.rb-end,.rb-hd{stroke:#0d1117;stroke-width:2}.rb-end-r,.rb-hd-r{fill:var(--rb-r)}.rb-end-b,.rb-hd-b{fill:var(--rb-b)}
.rb-xm{fill:#0d1117;stroke:#e6e1d8;stroke-width:1.6}
.rb-hl{stroke:rgba(255,255,255,.35);stroke-width:1}
.rb-tip{position:absolute;z-index:3;min-width:150px;max-width:240px;padding:9px 11px;border:1px solid var(--line2);border-radius:12px;background:rgba(10,13,18,.96);box-shadow:0 14px 34px -14px rgba(0,0,0,.9);pointer-events:none}
.rb-tip p{display:flex;align-items:center;gap:.45rem;margin:0;font-size:max(12px,.8rem);line-height:1.5}
.rb-tip .rb-tt{color:var(--muted);font-weight:700;margin-bottom:.15rem}
.rb-tip b{font-variant-numeric:tabular-nums;color:var(--text)}.rb-tip span{color:var(--muted)}
.rb-ln{display:inline-block;flex:none;width:14px;height:2px;border-radius:2px;background:var(--rb-r)}.rb-ln-b{background:var(--rb-b)}
.rb-cross{margin:.6rem 0 0;font-size:.92rem;color:#d6d1c8}
.rb-break{margin:1rem 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rb-break div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .85rem;border-bottom:1px solid var(--line);font-size:.88rem}
.rb-break div:last-child{border-bottom:0}
.rb-break dt{color:var(--muted)}.rb-break dd{margin:0;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.rb-break .rb-sum{background:linear-gradient(135deg,rgba(243,220,170,.12),rgba(168,133,74,.08))}.rb-break .rb-sum dt{color:var(--text);font-weight:700}.rb-break .rb-sum dd{color:var(--gold2)}
.rb-neg,.rb-int,.rb-disc,.rb-pay,.rb-priv{display:flex;gap:.55rem;align-items:flex-start;font-size:max(12px,.84rem);line-height:1.55;color:#cfc9bf}
.rb-neg,.rb-int{margin:.7rem 0 0}
.rb-neg svg,.rb-int svg,.rb-disc svg,.rb-pay svg,.rb-priv svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--gold)}
.rb-cap{margin:.8rem 0 0;font-size:max(12px,.86rem);color:#d6d1c8}
.rb-tbl{margin:1rem 0 0;border:1px solid var(--line);border-radius:14px}
.rb-tbl summary{min-height:46px;display:flex;align-items:center;padding:0 .9rem;font-weight:700;font-size:.9rem;cursor:pointer}
.rb-tw{overflow-x:auto;overscroll-behavior-x:contain;border-top:1px solid var(--line)}
.rb-tw table{width:100%;border-collapse:collapse;font-size:max(12px,.82rem);min-width:520px}
.rb-tw th,.rb-tw td{padding:.5rem .7rem;text-align:end;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-tw thead th{font-weight:700;color:var(--muted);background:rgba(255,255,255,.03)}
.rb-tw th[scope=row],.rb-tw thead th:first-child{text-align:start}
.rb-tw tbody tr:last-child>*{border-bottom:0}
.rb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.1rem 0 0}
.rb-acts .btn{min-height:48px}
.rb-acts .btn svg{width:18px;height:18px}
.rb-wa{flex:1 1 15rem;justify-content:center}
.rb-reset{min-height:44px;padding:0 .6rem;border:0;background:transparent;color:var(--muted);font:600 max(12px,.84rem) var(--ff);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rb-reset:hover{color:var(--gold2)}
.rb-msg{min-height:1.2em;margin:.5rem 0 0;font-size:max(12px,.84rem);color:var(--gold2)}
.rb-adv{margin:.2rem 0 0;font-size:max(12px,.8rem);color:var(--muted)}
.rb-ns{margin:1rem 0 0;padding:1rem;border:1px dashed var(--line2);border-radius:14px}
/* Erklärung, Recht, Weiterlesen */
.rb-how{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:2rem}
@media (min-width:860px){.rb-how{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rb-hw{padding:18px 18px 8px}
.rb-hw .h3{margin:0 0 .8rem;font-size:1.12rem}
.rb-hl,.rb-nl{margin:0 0 .8rem;padding-inline-start:1.2rem;display:grid;gap:.5rem;color:#d4cfc6;font-size:.92rem;line-height:1.55}
.rb-hl li::marker{color:var(--gold);font-weight:800}.rb-nl li::marker{color:var(--gold)}
.rb-legal{display:grid;gap:.55rem;margin:1.4rem 0 0;padding:1rem 1.1rem;border:1px dashed var(--line2);border-radius:16px;background:rgba(255,255,255,.02)}
.rb-legal p{margin:0}
.rb-legal a,.rb-more a{color:var(--gold2)}
.rb-more{margin-top:1.8rem}
.rb-more .h3{margin:0 0 .7rem;font-size:1.1rem}
.rb-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:700px){.rb-more ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rb-more a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:52px;padding:.6rem .95rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);font-weight:700;font-size:.92rem;transition:border-color .2s}
.rb-more a:hover,.rb-more a:focus-visible{border-color:rgba(214,178,112,.6)}
.rb-more svg{width:18px;height:18px;flex:none;color:var(--gold)}
[dir=rtl] .rb-more svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.rb-in,.rb-chip,.rb-more a{transition:none}}