/* Claude 23.10.2026: Finanzen (Ueberblick, Abos, Budget, Konto verbinden, Zahlung vorbereiten). Nutzt die Farbvariablen des Themes; kein style-Attribut noetig. */
.finanzen{--fin-0:#4f9cf0;--fin-1:#3fbf7f;--fin-2:#f0b24f;--fin-3:#b07af0;--fin-4:#ef6a8a;--fin-5:#4fd0d0;--fin-6:#e08a4f;--fin-7:#8a96a8;margin-bottom:20px;display:flex;flex-direction:column;gap:14px}
@media (prefers-color-scheme:light){.finanzen{--fin-0:#1f6fcf;--fin-1:#1f9a5c;--fin-2:#b9780f;--fin-3:#7a43c4;--fin-4:#c43d62;--fin-5:#17908f;--fin-6:#b8601f;--fin-7:#5d6878}}
.finanzen h3,.finanzen h4{margin:0 0 8px}.finanzen h4{margin-top:12px;font-size:1rem}
.finanzen p{margin:0 0 8px}
.fin-karte{padding:16px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:14px;background:var(--theme-card,rgba(255,255,255,.04))}
.fin-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:space-between}
.fin-beispiel{padding:10px 14px;border-radius:12px;border:1px dashed var(--fin-2);background:rgba(240,178,79,.1)}
.fin-pille{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.25));font-size:.8rem}
.fin-gross{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.fin-saldo{display:flex;flex-direction:column;gap:4px}
.fin-konten{list-style:none;margin:8px 0 0;padding:0}.fin-konten li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.fin-zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-ring-karte{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.fin-ring{width:160px;height:160px;flex:0 0 auto;transform:rotate(-90deg)}
.fin-ring-grund{fill:none;stroke:var(--line,rgba(255,255,255,.14));stroke-width:14}
.fin-seg{fill:none;stroke-width:14}
.fin-farbe-0{stroke:var(--fin-0);background:var(--fin-0)}.fin-farbe-1{stroke:var(--fin-1);background:var(--fin-1)}.fin-farbe-2{stroke:var(--fin-2);background:var(--fin-2)}.fin-farbe-3{stroke:var(--fin-3);background:var(--fin-3)}
.fin-farbe-4{stroke:var(--fin-4);background:var(--fin-4)}.fin-farbe-5{stroke:var(--fin-5);background:var(--fin-5)}.fin-farbe-6{stroke:var(--fin-6);background:var(--fin-6)}.fin-farbe-7{stroke:var(--fin-7);background:var(--fin-7)}
.fin-ring-text{flex:1 1 180px;min-width:0}
.fin-legende{list-style:none;margin:0;padding:0}.fin-legende-zeile{display:flex;align-items:center;gap:8px;padding:4px 0}
.fin-punkt{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.fin-prozent{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8}
.fin-balkengrafik{width:100%;height:auto;max-height:220px}
.fin-ein{fill:var(--fin-1);stroke:none}.fin-aus{fill:var(--fin-4);stroke:none}
.fin-achse{fill:currentColor;font-size:10px;opacity:.7;stroke:none}
.fin-balken{display:block;height:10px;border-radius:6px;background:var(--line,rgba(255,255,255,.14));overflow:hidden}
.fin-balken-grund{fill:var(--line,rgba(255,255,255,.14))}
.fin-balken-fuellung{fill:var(--fin-1)}
.fin-status-ok{fill:var(--fin-1);background:var(--fin-1)}.fin-status-achtung{fill:var(--fin-2);background:var(--fin-2)}.fin-status-ueber{fill:var(--fin-4);background:var(--fin-4)}
.fin-status-text-ok{color:var(--fin-1)}.fin-status-text-achtung{color:var(--fin-2)}.fin-status-text-ueber{color:var(--fin-4)}
.fin-budget-zeile{padding:8px 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.fin-budget-kopf{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.fin-liste{list-style:none;margin:0;padding:0}
.fin-abo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.fin-abo-name{font-weight:600;overflow:hidden;text-overflow:ellipsis}.fin-abo-betrag{font-variant-numeric:tabular-nums;text-align:right}
.fin-marke{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;font-size:.78rem;border:1px solid var(--line,rgba(255,255,255,.25))}
.fin-marke-preis{border-color:var(--fin-2);color:var(--fin-2)}.fin-marke-doppelt{border-color:var(--fin-4);color:var(--fin-4)}
.fin-reiter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.fin-reiter-knopf{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.2));background:transparent;color:inherit;font:inherit;cursor:pointer}
.fin-reiter-knopf.aktiv{border-color:var(--fin-0);background:rgba(79,156,240,.15)}
.fin-linie{fill:none;stroke:var(--fin-0);stroke-width:2}.fin-kurve{fill:none;stroke:var(--fin-0);stroke-width:2;stroke-linejoin:round}
.fin-null{stroke:var(--line,rgba(255,255,255,.35));stroke-width:1;stroke-dasharray:4 4}
.fin-knapp{color:var(--fin-4);font-weight:600}
.fin-kommende{list-style:none;margin:8px 0 0;padding:0}
.fin-tipp{padding:10px 0;border-top:1px solid var(--line,rgba(255,255,255,.1))}
.fin-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.fin-formular{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.fin-formular input,.fin-formular select,.fin-formular textarea{flex:1 1 160px;min-width:0;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.2));background:transparent;color:inherit;font:inherit}
.fin-formular textarea{min-height:96px;flex-basis:100%}
.finanzen button:not(.fin-reiter-knopf){min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.2));background:transparent;color:inherit;font:inherit;cursor:pointer}
.fin-gefahr{border-color:var(--fin-4)!important;color:var(--fin-4)}
.fin-anbieter{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.fin-anbieter-karte{padding:12px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:12px;display:flex;flex-direction:column;gap:6px}
.fin-sieht{margin:8px 0;padding-left:20px}
.fin-entwurf{padding:12px;margin-top:8px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:12px}
.fin-status{min-height:1.2em;font-size:.9rem}
.fin-klein{font-size:.85rem}.fin-leise{opacity:.75;font-size:.85rem}.fin-fett{font-weight:700}
@media (max-width:480px){.fin-karte{padding:12px}.fin-gross{font-size:1.7rem}.fin-ring{width:130px;height:130px}.fin-anbieter{grid-template-columns:1fr}}