/* Mahnwesen / Offene Posten – Seite im Grundgerüst, Dialoge. Farben aus den Variablen der Seite (--ink, --line, --red, --good, --bad …).
   Eigene Klassen mit Präfix mw-. */
.mw-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; }
.mw-kopf .page-title { margin-bottom: 12px; }
.mw-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.mw-aktionen .btn { text-decoration: none; }
.mw-laedt { padding: 18px 0; }
.mw-rot { color: var(--bad); font-weight: 700; }
.mw-warn { background: #fff4e0; border: 1px solid #f1d29a; border-radius: 10px; padding: 8px 12px; color: #7a4a00; }
.mw-link { border: 0; background: none; padding: 0; font: inherit; color: var(--red); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mw-link.rot { color: var(--bad); }

/* Kacheln */
.mw-kacheln { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.mw-kacheln-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mw-kacheln-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mw-kachel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; text-align: left; display: grid; gap: 1px; font: inherit; color: var(--ink); min-width: 0; }
button.mw-kachel { cursor: pointer; }
button.mw-kachel:hover { border-color: var(--ink); }
.mw-kachel small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mw-kachel b { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.mw-kachel span { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mw-kachel.warn { border-color: #f1b5b8; background: #fff6f6; }
.mw-kachel.warn b { color: var(--bad); }

/* Reiter, Filter */
.mw-reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; overflow-x: auto; }
.mw-reiter button { border: 0; background: none; padding: 9px 14px; font: inherit; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; min-height: 44px; }
.mw-reiter button.an { color: var(--ink); border-bottom-color: var(--ink); }
.mw-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.mw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); min-height: 38px; }
.mw-chip.an { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.mw-anz { display: inline-block; min-width: 20px; text-align: center; background: #ece8e2; color: var(--ink); border-radius: 9px; padding: 0 6px; font-size: 12px; margin-left: 2px; }
.mw-chip.an .mw-anz { background: rgba(255,255,255,.25); color: #fff; }
.mw-such { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }

/* Sammelaktion */
.mw-sammel { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; background: #fff8e6; border: 1px solid #f1d29a; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.mw-sammel label { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mw-sammel input, .mw-sammel select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.mw-sammel-n { flex: 1 1 200px; }
.mw-sammel-n input { width: 100%; }

/* Tabelle */
.mw-liste-scroll { overflow-x: auto; border-radius: var(--r); }
.mw-tab { width: 100%; }
.mw-tab th { white-space: nowrap; }
.mw-tab .r, .mw-tab th.r { text-align: right; }
.mw-tab td.r { white-space: nowrap; }
.mw-tab tbody tr[data-id] { cursor: pointer; }
.mw-tab tbody tr[data-id]:hover, .mw-tab tbody tr[data-id]:focus-visible { background: #f6f2ee; outline: none; }
.mw-tab tbody tr.mw-wvz td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.mw-tab tbody tr.mw-zu td { color: var(--muted); }
.mw-tab td small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 1px; }
.mw-tab td.mw-rot small { color: var(--muted); font-weight: 400; }
.mw-note { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.mw-tab tfoot td { font-size: 13.5px; color: var(--ink); background: #faf8f5; }
.mw-chk { width: 36px; text-align: center; }
.mw-chk input { width: 18px; height: 18px; }
.mw-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; font-weight: 600; cursor: pointer; }
.mw-schritt { min-width: 190px; font-size: 13.5px; }
.mw-schritt.mw-still { color: var(--muted); }
.mw-tab-klein td, .mw-tab-klein th { padding: 5px 8px; font-size: 13px; }
.mw-tab-klein tr.mw-kopfz th, .mw-tab-klein tr.mw-kopfz td { background: #fff4e0; font-weight: 700; }
.mw-leer { text-align: center; padding: 28px 12px; background: #fff; border: 1px dashed var(--line); border-radius: var(--r); }

/* Plaketten */
.mw-badge { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; background: #ece8e2; color: var(--ink); white-space: nowrap; }
.mw-st-1 { background: #e8eefb; color: #1f4f9a; }
.mw-st-2 { background: #fff0d6; color: #8a5200; }
.mw-st-3 { background: #ffe0cc; color: #a13a00; }
.mw-st-4, .mw-st-5 { background: #fbd9db; color: #a01822; }
.mw-zu-klaerung { background: #efeaf8; color: #4b3a7a; }
.mw-zu-zusage { background: #e1f3e6; color: #1b6a39; }
.mw-zu-bezahlt { background: #dff3e4; color: #1b6a39; }
.mw-zu-abgeschrieben { background: #e6e2dc; color: #4a463f; }
.mw-reif { background: var(--bad); color: #fff; }

/* Zinsen */
.mw-info p { margin: 6px 0; }
.mw-stichtag { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.mw-stichtag label { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.mw-stichtag input { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.mw-zins h2 { font-size: 18px; margin: 22px 0 8px; }
.mw-zins .card details summary { cursor: pointer; font-weight: 600; margin-top: 6px; }

/* Verlauf */
.mw-feed { display: grid; gap: 2px; }
.mw-ev { display: flex; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.mw-ev:last-child { border-bottom: 0; }
.mw-ev[data-id] { cursor: pointer; border-radius: 8px; }
.mw-ev[data-id]:hover, .mw-ev[data-id]:focus-visible { background: #f6f2ee; outline: none; }
.mw-ev-ic { width: 26px; text-align: center; flex: none; }
.mw-ev-kopf { font-size: 14px; }
.mw-ev-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

/* Dialog */
.mw-dlg { border: 0; border-radius: 16px; padding: 0; width: min(1080px, calc(100vw - 24px)); max-height: calc(100vh - 24px); color: var(--ink); background: var(--bg); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mw-dlg-imp { width: min(760px, calc(100vw - 24px)); }
.mw-dlg::backdrop { background: rgba(43,38,33,.5); }
.mw-dlg[open] { display: flex; flex-direction: column; }
.mw-dlg-kopf { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.mw-dlg-kopf h2 { margin: 0; font-size: 20px; }
.mw-x { border: 0; background: none; font-size: 20px; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); flex: none; margin: -6px -8px 0 0; }
.mw-x:hover { background: #f1ede8; }
.mw-dlg-rumpf { padding: 16px 18px 18px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.mw-dlg-rumpf.zwei { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mw-sp { display: grid; gap: 14px; min-width: 0; }
.mw-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mw-box h3 { margin: 0 0 8px; font-size: 15px; }
.mw-box-zins { border-left: 5px solid var(--red); }
.mw-kv { width: 100%; box-shadow: none; border-radius: 0; }
.mw-kv th { width: 44%; background: none; color: var(--muted); font-weight: 400; font-size: 13.5px; padding: 5px 4px; }
.mw-kv td { padding: 5px 4px; }
.mw-kv tr.mw-sum th, .mw-kv tr.mw-sum td { border-top: 2px solid var(--ink); font-size: 15px; color: var(--ink); }
.mw-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 10px 0 4px; }
.mw-form label { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.mw-form input, .mw-form select, .mw-box textarea, .mw-map input, .mw-map select, .mw-basis input { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); max-width: 100%; }
.mw-form .mw-gross { flex: 1 1 200px; }
.mw-form .mw-gross input { width: 100%; }
.mw-box textarea { width: 100%; resize: vertical; }
.mw-vorschlag { background: #fff8e6; border: 1px solid #f1d29a; border-radius: 10px; padding: 7px 10px; margin: 0 0 6px; }
.mw-zahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mw-box .mw-feed { max-height: 420px; overflow: auto; }
.mw-dlg-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mw-imp p { margin: 8px 0; }
.mw-imp h3 { margin: 18px 0 6px; font-size: 16px; }
.mw-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0; }
.mw-map label { display: grid; gap: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mw-map .mw-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--ink); }
.mw-map .mw-check input { margin-top: 4px; }
.mw-datei { display: inline-block; cursor: pointer; margin: 6px 0; }
.mw-datei input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mw-datei input:focus-visible + .btn { outline: 3px solid #1f5fa6; outline-offset: 2px; }
.mw-impl { margin: 6px 0 0 18px; padding: 0; }
.mw-impl li { margin: 2px 0; }
.mw-imp details { margin: 8px 0; }
.mw-imp details summary { cursor: pointer; font-weight: 600; }
.mw-basis { display: flex; gap: 10px; align-items: flex-end; margin: 6px 0; flex-wrap: wrap; }
.mw-basis label { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mw-frei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 8px 0; }
.mw-frei label { display: flex; gap: 8px; align-items: center; }

/* Hinweis unten */
.mw-toast { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10000; max-width: min(92vw, 520px); font-size: 14px; }
.mw-toast.an { opacity: 1; transform: translate(-50%, 0); }
.mw-toast.schlecht { background: var(--bad); }

@media (max-width: 1100px) {
  .mw-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mw-dlg-rumpf.zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mw-kacheln, .mw-kacheln-3, .mw-kacheln-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-map, .mw-frei { grid-template-columns: minmax(0, 1fr); }
  .mw-dlg { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 14px; }
  .mw-dlg-rumpf { padding: 12px; }
  .mw-aktionen .btn { flex: 1 1 auto; text-align: center; }
  /* Tabellen als Karten */
  .mw-tab:not(.mw-tab-klein) thead { display: none; }
  .mw-tab:not(.mw-tab-klein), .mw-tab:not(.mw-tab-klein) tbody, .mw-tab:not(.mw-tab-klein) tr, .mw-tab:not(.mw-tab-klein) td, .mw-tab:not(.mw-tab-klein) tfoot { display: block; width: 100%; }
  .mw-tab:not(.mw-tab-klein) { background: none; box-shadow: none; }
  .mw-tab:not(.mw-tab-klein) tbody tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 8px 12px; position: relative; }
  .mw-tab:not(.mw-tab-klein) td { border: 0; padding: 3px 0; display: flex; gap: 10px; justify-content: space-between; align-items: baseline; text-align: right; }
  .mw-tab:not(.mw-tab-klein) td::before { content: attr(data-l); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: left; flex: none; }
  .mw-tab:not(.mw-tab-klein) td.mw-chk { position: absolute; right: 6px; top: 4px; width: auto; display: block; }
  .mw-tab:not(.mw-tab-klein) td.mw-chk::before { content: none; }
  .mw-tab:not(.mw-tab-klein) td > b, .mw-tab:not(.mw-tab-klein) td > span { text-align: right; }
  .mw-tab:not(.mw-tab-klein) td small { text-align: right; }
  .mw-note { max-width: 62vw; }
  .mw-tab:not(.mw-tab-klein) tfoot tr { background: #faf8f5; border-radius: 10px; padding: 8px 12px; }
  .mw-tab:not(.mw-tab-klein) tfoot td:empty { display: none; }
  .mw-schritt { min-width: 0; }
  .mw-tab-klein { font-size: 12px; }
}

/* ---- Arbeitsliste im Aufbau der Buchhaltung: Ampel, Stand-Spalte, Abhaken ---- */
.mw-legende { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.mw-p { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.mw-p.rot { background: #e63741; } .mw-p.gelb { background: #f2c21b; } .mw-p.gruen { background: #5aae2f; }
.mw-tab tbody tr.mw-amp-rot td:first-child { box-shadow: inset 6px 0 0 #e63741; }
.mw-tab tbody tr.mw-amp-gelb td:first-child { box-shadow: inset 6px 0 0 #f2c21b; }
.mw-tab tbody tr.mw-amp-gruen td:first-child { box-shadow: inset 6px 0 0 #5aae2f; }
.mw-tab tbody tr.mw-zu td:not(.mw-akt) { text-decoration: line-through; text-decoration-color: rgba(31, 122, 63, .55); }
.mw-tab tbody tr.mw-zu td:first-child { box-shadow: inset 6px 0 0 #1f7a3f; }
.mw-stand { min-width: 240px; max-width: 420px; }
.mw-stand-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13.5px; }
.mw-stand-t i { color: var(--muted); }
.mw-schritt-k { color: #7a4a00; }
.mw-neu { color: #1f5fa6; font-size: 14px; margin-left: 2px; }
.mw-abs { background: #efeaf8; color: #4b3a7a; }
.mw-akt { width: 64px; text-align: center; white-space: nowrap; }
.mw-ok { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #1f7a3f; background: #fff; color: #1f7a3f; font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1; }
.mw-ok:hover, .mw-ok:focus-visible { background: #1f7a3f; color: #fff; }
.mw-erledigt { color: #1f7a3f; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.mw-box-stand { border-left: 5px solid #ef7d22; }
.mw-box-bezahlt { border-left: 5px solid #1f7a3f; }
.mw-box .mw-check { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--ink); font-size: 14px; flex: 1 1 100%; }

/* ---- Chat zur Rechnung ---- */
.mw-chat .mw-chat-feed { max-height: 520px; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #f6f2ee; border-radius: 12px; }
.mw-tag { align-self: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff; border-radius: 999px; padding: 1px 10px; }
.mw-msg { align-self: flex-start; max-width: 90%; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 7px 11px; }
.mw-msg.eigen { align-self: flex-end; background: #e6f4ea; border-color: #bfe0c8; border-radius: 14px 14px 4px 14px; }
.mw-msg.stand { border-left: 4px solid #ef7d22; background: #fff8e6; }
.mw-msg-kopf { display: flex; gap: 10px; justify-content: space-between; font-size: 12px; color: var(--muted); }
.mw-msg-kopf b { color: var(--ink); }
.mw-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.mw-sys { align-self: center; max-width: 94%; text-align: center; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.mw-sys small { display: block; }
.mw-chat-eingabe { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.mw-chat-eingabe textarea { flex: 1 1 auto; min-width: 0; }

/* ---- Erfolgssignal beim Abhaken ---- */
.mw-erfolg { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .35); animation: mwEin .2s ease-out; }
.mw-erfolg.weg { opacity: 0; transition: opacity .45s; }
.mw-erfolg-box { position: relative; background: #fff; border-radius: 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); padding: 22px 34px 24px; display: grid; justify-items: center; gap: 6px; text-align: center; animation: mwPop .45s cubic-bezier(.2, 1.4, .4, 1); }
.mw-erfolg-box b { font-size: 22px; color: #1f7a3f; }
.mw-erfolg-box span { color: var(--muted); }
.mw-haken { width: 92px; height: 92px; }
.mw-haken circle { fill: #e6f4ea; stroke: #1f7a3f; stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: mwZeichne .5s .05s ease-out forwards; }
.mw-haken path { fill: none; stroke: #1f7a3f; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: mwZeichne .35s .4s ease-out forwards; }
.mw-konf { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.mw-konf i { position: absolute; width: 9px; height: 14px; background: var(--c); border-radius: 2px; opacity: 0; animation: mwKonf 1.5s var(--d) cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes mwEin { from { opacity: 0; } to { opacity: 1; } }
@keyframes mwPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mwZeichne { to { stroke-dashoffset: 0; } }
@keyframes mwKonf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mw-erfolg, .mw-erfolg-box, .mw-haken circle, .mw-haken path { animation: none; stroke-dashoffset: 0; } .mw-konf { display: none; } }

/* ---- Zinsforderung als Kurve ---- */
.mw-kurve { width: 100%; height: auto; max-height: 150px; display: block; }
.mw-kurve path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.mw-kurve circle { fill: var(--red); }
@media (max-width: 700px) {
  .mw-tab:not(.mw-tab-klein) td.mw-akt { justify-content: flex-end; width: 100%; }
  .mw-stand { max-width: none; min-width: 0; }
  .mw-tab:not(.mw-tab-klein) td.mw-stand { display: block; text-align: left; }
  .mw-tab:not(.mw-tab-klein) td.mw-stand::before { display: block; margin-bottom: 2px; }
  .mw-chat .mw-chat-feed { max-height: 360px; }
  .mw-chat-eingabe { flex-direction: column; align-items: stretch; }
}
/* Chat bleibt neben der Rechnung stehen, während man links scrollt */
.mw-dlg-rumpf.zwei > .mw-sp:last-child { position: sticky; top: 0; }
.mw-chat .mw-chat-feed { max-height: min(520px, calc(100vh - 330px)); }
@media (max-width: 1100px) { .mw-dlg-rumpf.zwei > .mw-sp:last-child { position: static; } .mw-chat .mw-chat-feed { max-height: 360px; } }