/* ==========================================================================
   V3 – jeder Bereich nach etablierten Mustern (Mobbin)
   Lädt nach app.css, objekt.css, design.css und alt.css.

   Farbsystem: eine Akzentfarbe (Blau), alle Werte zentral in css/app.css (--accent, --sel-bg …).
   - Grün/Rot ausschließlich für Plus/Minus, Orange für Handlungsbedarf.
   - Neutrale Flächen in warmem Grau, schwarze Hauptknöpfe außerhalb der Bereiche.
   ========================================================================== */

/* ---------- Kennzahlenreihe: 7 Kacheln passen in eine Zeile ---------- */
.metrics-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Demo-Hinweis neutral (Stripe „Test mode“) ---------- */
.demo-leiste { background: var(--card); color: var(--ink-2); box-shadow: var(--shadow) !important; }
.demo-leiste > .ic { color: var(--accent-text); }
.demo-leiste b { color: var(--ink); }

/* ---------- Reiter laufen beim Scrollen mit (Zillow, Stripe) ---------- */
.content > .tabs { position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--page); margin-left: -4px; margin-right: -4px; padding: 0 4px; }
@media (max-width: 1023.98px) { .content > .tabs { top: calc(56px + env(safe-area-inset-top, 0px)); } }

/* ---------- Schieberegler (Telegram, v0): dünne Spur, Füllung im Akzent ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; --fill: 50%; }
input[type=range]:focus-visible { box-shadow: none; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-rund); background: linear-gradient(to right, var(--track) 0, var(--track) var(--von, 0%), var(--ink) var(--von, 0%), var(--ink) var(--fill), var(--track) var(--fill), var(--track) 100%); } /* taste-skill-ignore: gefüllter Teil der Reglerspur (harte Kanten, kein Farbverlauf) */
input[type=range]::-moz-range-track { height: 4px; border-radius: var(--r-rund); background: var(--track); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: var(--r-rund); background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: var(--r-rund); background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(17,19,21,.14), 0 2px 6px rgba(17,19,21,.18); transition: transform var(--dauer-1); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: var(--r-rund); background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(17,19,21,.14), 0 2px 6px rgba(17,19,21,.18); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .25), 0 0 0 1px rgba(17,19,21,.14); }
input[type=range]:disabled { opacity: .45; cursor: not-allowed; }
.slider-field { padding: 14px 0; }
.slider-field .val input { height: 30px; border-radius: var(--r-klein); }

/* ---------- Szenario: Ergebnisse bleiben sichtbar (Klaviyo-Editor) ---------- */
.scn-grid > .stack { position: sticky; top: calc(var(--head-h) + 12px); }
@media (max-width: 1023.98px) { .scn-grid > .stack { position: static; } }

/* ---------- Befehlspalette (Gumloop, Mintlify, Raycast) ---------- */
.palette { border-radius: var(--r-gross); margin-top: 14vh; }
.palette-input { padding: 0 14px; gap: 10px; }
.palette-input input { height: 52px; font-size: 15px; }
.palette-input input:focus, .palette-input input:focus-visible { box-shadow: none !important; outline: none; }
.palette-item { border-radius: var(--r-mittel); padding: 8px 10px; font-size: 13.5px; }
.palette-item .ic { color: var(--ink-3); }
.palette-item[aria-selected="true"] { background: var(--sel-bg); }
.palette-item[aria-selected="true"] .ic { color: var(--accent-text); }
.palette-item[aria-selected="true"]::after { content: "↵"; margin-left: 8px; font-size: 12px; color: var(--ink-3); flex: none; }
.palette-group { font-size: 10.5px; letter-spacing: .06em; padding: 12px 10px 4px; }
.palette-fuss { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--inset); font-size: 12px; color: var(--ink-3); }
.palette-fuss span { display: inline-flex; align-items: center; gap: 4px; }
.palette-fuss .kbd { padding: 0 5px; min-width: 18px; text-align: center; line-height: 18px; }
@media (max-width: 640px) { .palette-fuss { display: none; } }

/* ---------- Gemeinsame Zusammenfassungs-Leiste (Square) ---------- */
.tx-summe, .fr-summe { margin-bottom: 16px; padding: 18px 22px; }
.ms-wert.pos { color: var(--pos); } .ms-wert.neg { color: var(--neg); } .ms-wert.crit { color: var(--crit-text); }

/* ---------- Transaktionen (Square, Mercury, Shopify) ---------- */
.tx-liste { padding: 0; overflow: hidden; }
.tx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.select.pill, .input.pill { width: auto; max-width: 210px; height: 32px; border-radius: var(--r-mittel); padding: 0 30px 0 12px; font-size: 13px; background-color: var(--card); }
.input.pill { padding: 0 10px; }
.select.pill.aktiv { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 550; }
.tx-zeitraum { display: inline-flex; align-items: center; gap: 6px; }
.tx-zeitraum > .label:first-child { margin-right: 2px; }
.tx-seiten { justify-content: center; padding: 14px; gap: 12px; }
table.t tr.gruppe td { background: transparent !important; padding: 18px 12px 8px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
table.t tbody tr.gruppe:first-child td { padding-top: 10px; }
.g-titel { font-weight: 650; color: var(--ink); margin-right: 10px; }
.g-anz { color: var(--ink-3); }
.g-sum { font-weight: 650; }
.g-sum.pos { color: var(--pos); } .g-sum.neg { color: var(--neg); }
table.t tr.gruppe:hover td { background: transparent !important; }

/* Objekt: geplante Zahlungen eingeklappt (Mercury „Pending“) */
.geplant-block { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-mittel); background: var(--inset); }
.geplant-block > summary { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; font-size: 13.5px; }
.geplant-block > summary::-webkit-details-marker { display: none; }
.geplant-block > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dauer-1); }
.geplant-block[open] > summary::after { transform: rotate(-135deg); }
.geplant-block > .table-wrap { padding: 0 8px 8px; }

/* ---------- Buchung erfassen (Base, Copilot) ---------- */
.art-umschalter .seg { width: 100%; }
.art-umschalter .seg button { flex: 1; height: 34px; font-size: 13.5px; }
.art-umschalter .seg[data-art="einnahme"] button[aria-pressed="true"] { color: var(--pos); }
.art-umschalter .seg[data-art="ausgabe"] button[aria-pressed="true"] { color: var(--neg); }
.betrag-gross .input { height: 64px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; padding-right: 44px; font-variant-numeric: tabular-nums; }
.betrag-gross .unit { font-size: 22px !important; right: 18px !important; }
.betrag-gross > label, .betrag-gross > .flabel { font-size: 12px; }

/* ---------- Fristen & Aufgaben: eine Liste mit Gruppenköpfen (hilos, Todoist) ---------- */
.fr-liste { padding: 6px 20px 12px; }
.fr-gruppe { display: flex; align-items: center; gap: 8px; padding: 18px 0 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); border-bottom: 1px solid var(--line); position: sticky; top: var(--head-h); background: var(--card); z-index: 2; }
.fr-gruppe.crit { color: var(--crit-text); }
.fr-gruppe .ml-zahl { text-transform: none; letter-spacing: 0; }
.fr-liste .list-item { padding: 10px 2px; }
.fr-liste .frist-datum { width: 46px; height: 42px; border-radius: var(--r-mittel); }
/* Aktionen erst beim Überfahren (Linear, Todoist) */
@media (hover: hover) {
  .frist-zeile > .btn.ghost, .aufgaben-liste .list-item > .btn.ghost { opacity: 0; transition: opacity var(--dauer-1); }
  .frist-zeile:hover > .btn.ghost, .frist-zeile:focus-within > .btn.ghost,
  .aufgaben-liste .list-item:hover > .btn.ghost, .aufgaben-liste .list-item:focus-within > .btn.ghost { opacity: 1; }
}
.fr-buendel > summary { list-style: none; cursor: pointer; }
.fr-buendel > summary::-webkit-details-marker { display: none; }
.fr-anzahl { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: var(--r-klein); background: var(--track); color: var(--ink-2); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.fr-pfeil { color: var(--ink-3); display: grid; transition: transform var(--dauer-1); }
.fr-buendel[open] .fr-pfeil { transform: rotate(90deg); }
.fr-buendel-liste { margin: 0 0 6px 58px; border-left: 2px solid var(--line); padding-left: 10px; }
.fr-buendel-liste .frist-datum { display: none; }
.schnell-neu { position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; }
.schnell-neu .input { height: 40px; padding-left: 36px; padding-right: 36px; border-style: dashed; background: var(--inset); box-shadow: none; }
.schnell-neu .input:focus { border-style: solid; background: var(--card); }
.sn-plus { position: absolute; left: 12px; color: var(--ink-3); display: grid; pointer-events: none; }
.schnell-neu .kbd { position: absolute; right: 10px; }

/* ---------- Deal-Rechner: Eingaben links, Ergebnis fest rechts (Square, Meetup) ---------- */
.deal-grid { display: block; }
.deal-liste { position: static; margin-bottom: 16px; padding: 14px 18px; }
.deal-liste .card-head { margin-bottom: 8px; }
.deal-liste .list { flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.deal-liste .list-item.deal-item { flex: 0 0 auto; min-width: 260px; max-width: 320px; border: 1px solid var(--line); border-radius: var(--r-mittel); padding: 10px 12px; }
.deal-liste .list-item.deal-item.aktiv { border-color: var(--accent); background: var(--sel-bg); }
.deal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--gap); align-items: start; }
.deal-aside { position: sticky; top: calc(var(--head-h) + 12px); }
.deal-aside .metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.deal-aside .metric-tile { padding: 12px 14px; }
.deal-aside .metric-tile .big { font-size: 21px; }
.deal-bar { position: sticky; bottom: 12px; z-index: 15; box-shadow: var(--shadow-pop) !important; padding: 12px 16px; }
@media (max-width: 1100px) { .deal-layout { grid-template-columns: minmax(0, 1fr); } .deal-aside { position: static; order: -1; } }

/* ---------- Finanzassistent als Posteingang (Klaviyo Helpdesk) ---------- */
.score-faktoren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
@media (max-width: 900px) { .score-faktoren { grid-template-columns: minmax(0, 1fr); } }
.inbox { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 520px; }
.inbox-links { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.inbox-reiter { padding: 4px 12px 0; border-bottom: 1px solid var(--line); }
.inbox-liste { overflow-y: auto; max-height: 640px; padding: 6px; outline: none; }
.inbox-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 10px; border-radius: var(--r-mittel); cursor: pointer; color: var(--ink); }
.inbox-item:hover { background: var(--hover); }
.inbox-item[aria-selected="true"] { background: var(--sel-bg); box-shadow: inset 2px 0 0 var(--accent); }
.inbox-punkt { width: 8px; height: 8px; border-radius: var(--r-rund); margin-top: 6px; flex: none; background: var(--deco); }
.inbox-punkt.crit { background: var(--crit); } .inbox-punkt.warn { background: var(--warn-fill); } .inbox-punkt.good { background: var(--pos); } .inbox-punkt.accent { background: var(--accent); }
.inbox-titel { display: block; font-weight: 560; font-size: 13.5px; line-height: 1.35; }
.inbox-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.inbox-detail { padding: 18px 26px 26px; min-width: 0; }
.inbox-nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-bottom: 8px; }
.inbox-nav .label { margin-right: 6px; }
.inbox-karte .hint-card { gap: 16px; }
.inbox-karte .h3 { font-size: 20px !important; letter-spacing: -.02em; margin: 6px 0 4px; }
.inbox-karte .hint-basis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .inbox { grid-template-columns: minmax(0, 1fr); } .inbox-links { border-right: 0; border-bottom: 1px solid var(--line); } .inbox-liste { max-height: 320px; } .inbox-detail { padding: 16px; } }

/* ---------- Einstellungen (Unify, Mintlify, Stripe) ---------- */
.set-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--head-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.set-nav a { display: block; padding: 7px 10px; border-radius: var(--r-klein); color: var(--ink-3); text-decoration: none; font-size: 13.5px; font-weight: 520; }
.set-nav a:hover { color: var(--ink); background: var(--hover); }
.set-nav a.active { color: var(--ink); background: var(--nav-active, var(--card)); box-shadow: var(--shadow); }
.set-inhalt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; padding: 24px; scroll-margin-top: calc(var(--head-h) + 16px); }
.set-kopf .h3 { font-size: 15px; margin-bottom: 6px !important; }
.set-kopf p { margin: 0 !important; font-size: 13px; color: var(--ink-3); }
.set-kopf .row { margin-bottom: 6px; }
.set-feld { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.set-feld > .row { margin-top: 4px !important; }
@media (max-width: 1100px) { .set-sec { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 860px) { .set-layout { grid-template-columns: minmax(0, 1fr); } .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; } .set-nav a { flex: none; } }

/* ---------- Hilfe: Glossar-Suche ---------- */
.glossar-suche { width: 100%; margin-bottom: 8px; }
.glossar-suche .input { height: 38px; }

/* ---------- Neue Immobilie: verbundene Schritte + feste Navigation (Snowflake, Meetup) ---------- */
.steps { gap: 0; background: var(--card); box-shadow: var(--shadow); border-radius: var(--r-mittel); padding: 6px; width: fit-content; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.step { background: transparent; border-radius: var(--r-mittel); height: 34px; white-space: nowrap; }
.step + .step { margin-left: 2px; }
.step.active { background: var(--sel-bg); color: var(--ink); }
.step.active b { background: var(--ink); color: var(--page); }
.step.done b { background: var(--ink); color: var(--card); }
.wiz-nav { position: sticky; bottom: 0; background: var(--card); margin: 22px -22px -22px !important; padding: 14px 22px !important; border-radius: 0 0 var(--r-gross) var(--r-gross); z-index: 5; }

/* ---------- Mobile Feinheiten ---------- */
@media (max-width: 640px) {
  .tx-summe .ms-wert, .fr-summe .ms-wert { font-size: 19px; }
  .fr-liste { padding: 4px 14px 10px; }
  .fr-buendel-liste { margin-left: 8px; }
  .betrag-gross .input { height: 56px; font-size: 26px; }
}

/* Nachbesserungen */
.set-feld > .btn, .set-feld > a.btn { align-self: flex-start; }
.metrics-row:has(> :nth-child(6)) .metric-tile .big { font-size: 21px; }
.deal-liste:not(:has(.deal-item)) { padding: 12px 18px; }
.deal-liste:not(:has(.deal-item)) .card-head { margin: 0; }
.deal-liste:not(:has(.deal-item)) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.deal-liste:not(:has(.deal-item)) > p { margin: 0; }

/* ---------- Dokumente: Ablagefläche (Mistral, Dropbox) ---------- */
.dok-drop { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 16px; padding: 14px 18px; border-radius: var(--r-gross); border: 1.5px dashed var(--line-2); background: var(--card); text-align: left; cursor: pointer; color: var(--ink); transition: border-color var(--dauer-1), background var(--dauer-1); }
.dok-drop:hover { border-color: var(--line-2); } .dok-drop.over { border-color: var(--accent); background: var(--sel-bg); }
.dok-drop b { display: block; font-weight: 600; font-size: 14px; }
.dok-drop .label { display: block; margin-top: 2px; }
@media (max-width: 640px) { .dok-drop > .kbd { display: none; } }

/* ---------- Finanzierungen: Zinsbindung als Laufzeitbalken ---------- */
.zb-balken { height: 4px; border-radius: var(--r-klein); background: var(--track); margin-top: 6px; max-width: 120px; overflow: hidden; }
.zb-balken > i { display: block; height: 100%; background: var(--ink-3); border-radius: var(--r-klein); }
.zb-rest { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* ---------- Objekt-Tabelle: Sprungleiste im Kopf ---------- */
.ob-sprung { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ob-sprung::-webkit-scrollbar { display: none; }
.ob-sprung button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 520; cursor: pointer; }
.ob-sprung button:hover { background: var(--hover); color: var(--ink); }
.ob-sprung button b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-klein); background: var(--track); color: var(--ink-2); font-size: 11px; font-weight: 650; }

/* ---------- Mobil: Filter seitlich scrollen, Score kompakt ---------- */
@media (max-width: 640px) {
  .tx-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; }
  .tx-filter::-webkit-scrollbar { display: none; }
  .tx-filter > * { flex: none; }
  .tx-filter > .grow { display: none; }
  .score-ring { width: 110px !important; height: 110px !important; }
  .score-ring .big { font-size: 30px !important; }
  .score-faktoren { gap: 10px; }
  .score-faktoren .label { display: none; }
}

/* ==========================================================================
   Bank-Abgleich und Nachrichten
   ========================================================================== */
.bank-t td { vertical-align: top; }
.bank-t tr.aus td { opacity: .5; }
.bank-t .select.pill { max-width: 260px; }
.bank-t .select.pill.fehlt { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.bank-zweck { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-grund { color: var(--accent-text); font-size: 11.5px; margin-top: 2px; }
.bank-zus { border: 1px solid var(--line); border-radius: var(--r-mittel); padding: 14px 18px; }
.bank-liste { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.bank-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-mittel); background: none; text-align: left; cursor: pointer; color: var(--ink); font-size: 14px; }
.bank-item:hover { background: var(--hover); }
.bank-item img { width: 32px; height: 32px; object-fit: contain; border-radius: var(--r-klein); background: #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
.bank-item .ic { color: var(--ink-3); }
.bank-konto .chip { flex: none; }
.bank-konto-wert { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 640px) {
  /* Handy: Kontostand und Status in eine zweite Zeile unter den Namen */
  .bank-konto { flex-wrap: wrap; row-gap: 6px; }
  .bank-konto > .grow { flex: 1 1 0; }
  .bank-konto-wert { order: 3; width: 100%; padding-left: 48px; justify-content: space-between; }
}
.bank-leer { display: flex; gap: 14px; align-items: center; padding: 10px 2px; }
.bank-schritte { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.bank-schritte li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; font-size: 13.5px; }
.bank-schritte li::before { content: counter(s); grid-row: span 2; width: 22px; height: 22px; border-radius: var(--r-klein); background: var(--track); color: var(--ink-2); font-size: 11.5px; font-weight: 650; display: grid; place-items: center; }
.bank-schritte span { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.bank-live { display: flex; align-items: center; gap: 10px; margin: -4px 0 16px; padding: 10px 14px; border-radius: var(--r-mittel); background: var(--card); box-shadow: var(--shadow); font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.bank-punkt { width: 9px; height: 9px; border-radius: var(--r-rund); background: var(--deco); flex: none; }
.bank-punkt.an { background: var(--pos-fill); box-shadow: 0 0 0 4px var(--pos-soft); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .bank-punkt.an { animation: none; } }

.msg-vorschau { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.msg-verlauf { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.msg-blase { max-width: 88%; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--inset); }
.msg-blase.aus { align-self: flex-end; background: var(--sel-bg); }
.msg-kopf { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; font-size: 13px; }
.msg-text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--ink); }
.msg-antwort { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-antwort .field { max-width: 420px; }

/* Bank verbinden: Schritte, Freigabe, Laden */
.bank-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.bank-stepper li { display: flex; align-items: center; gap: 7px; }
.bank-stepper li span { width: 20px; height: 20px; border-radius: var(--r-rund); display: grid; place-items: center; font-size: 11px; font-weight: 650; background: var(--track); color: var(--ink-2); flex: none; }
.bank-stepper li.aktiv { color: var(--ink); font-weight: 600; }
.bank-stepper li.aktiv span { background: var(--ink); color: var(--card); }
.bank-stepper li.fertig span { background: var(--accent-soft); color: var(--accent-text); }
.bank-kuerzel { width: 32px; height: 32px; border-radius: var(--r-mittel); background: var(--inset); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); flex: none; }
.bank-kuerzel.gross { width: 44px; height: 44px; border-radius: var(--r-mittel); font-size: 14px; }
.bank-freigabe { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-mittel); background: var(--inset); }
.bank-freigabe-kopf { display: flex; align-items: center; gap: 12px; }
.bank-rechte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.bank-rechte li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.bank-rechte li .ic, .bank-rechte li svg { flex: none; color: var(--ink-3); }
.bank-rechte li.ja svg { color: var(--pos); }
.bank-rechte li.nein svg { color: var(--neg); }
.bank-knoepfe { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bank-laden { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 12px; }
.bank-ring { width: 28px; height: 28px; border-radius: var(--r-rund); border: 3px solid var(--track); border-top-color: var(--ink-2); margin-bottom: 8px; animation: bank-dreh .8s linear infinite; }
@keyframes bank-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bank-ring { animation-duration: 2.4s; } }