/* ============================================================
   mahnbescheid - Rechner
   Gemeinsame Optik aller Rechner. Wird nur geladen, wo ein
   Rechner tatsächlich steht; der Renderer bindet sie ein.

   Die Werte stammen aus den bisherigen fr-*-Regeln in
   landing.css, damit der migrierte Forderungsrechner unverändert
   aussieht. Nach der Migration können die fr-*-Regeln entfallen.
   ============================================================ */

.mb-r{ max-width: 560px; margin: 16px 0 0; }

.mb-r-titel{
  margin: 0 0 16px; font-weight: 700; font-size: 17px;
  color: var(--c-ink);
}

/* --- Eingaben --------------------------------------------- */

.mb-r-feld{ margin-bottom: 18px; }
.mb-r-feld > label,
.mb-r-feld > .mb-r-label{
  display: block; font-weight: 600;
  color: var(--c-ink); margin: 0 0 7px;
}
.mb-r-feldhinweis{
  margin: 6px 0 0; font-size: 13px; color: var(--c-muted);
}

.mb-r-input{
  font: inherit; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 10px 12px; width: 200px; max-width: 100%;
  box-sizing: border-box;
}
.mb-r-input:focus{
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-050);
}

/* Der Rahmen liegt an den Buttons, nicht am Container, damit der aktive
   Button seine eigene Randfarbe bekommt. Die Buttons überlappen sich um
   1px, sonst entstünde zwischen ihnen eine doppelte Trennlinie. */
.mb-r-seg{
  display: inline-flex; max-width: 100%;
  border-radius: var(--r-md); overflow: hidden;
}
.mb-r-seg button{
  border: 1px solid var(--c-line); background: #fff; font: inherit; cursor: pointer;
  padding: 10px 18px; color: var(--c-ink-soft);
}
.mb-r-seg button + button{ margin-left: -1px; }
.mb-r-seg button[aria-pressed="true"]{
  background: var(--c-primary); border-color: var(--c-primary);
  color: #fff; font-weight: 600;
  position: relative; z-index: 1;
}

/* --- Ergebnis --------------------------------------------- */

.mb-r-ergebnis{
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 4px 18px; margin: 4px 0 12px;
}
.mb-r-zeile{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--c-line-soft);
  font-size: 15px; color: var(--c-ink-soft);
}
.mb-r-zeile:last-child{ border-bottom: 0; }
.mb-r-zeile b{ color: var(--c-ink); font-weight: 600; }
.mb-r-zeile.is-gesamt{ font-size: 19px; }
.mb-r-zeile.is-gesamt span,
.mb-r-zeile.is-gesamt b{ color: var(--c-ink); font-weight: 700; }
.mb-r-sub{ color: var(--c-muted); font-size: 13px; }

/* Einordnung unter dem Ergebnis - die Rechnung füllt sie selbst. */
.mb-r-befund{
  margin: 0 0 16px; padding: 12px 14px;
  border-left: 4px solid var(--c-primary);
  background: var(--c-surface-2);
  font-size: 15px; line-height: 1.55; color: var(--c-ink);
}
.mb-r-befund.is-warnung{ border-left-color: #8f5b00; }
.mb-r-befund.is-abgelaufen{ border-left-color: #a3271f; }

.mb-r-cta{ margin-top: 4px; }

.mb-r-hinweis{
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--c-line);
  font-size: 13px; line-height: 1.6; color: var(--c-muted);
}

@media (max-width: 560px){
  .mb-r-input{ width: 100%; }
  .mb-r-seg{ width: 100%; }
  .mb-r-seg button{ flex: 1; }
}

/* --- Im Ratgeber ------------------------------------------
   Das Blatt ist rund 740 px breit und trägt die Amtsoptik: keine
   weichen Radien. Der Rechner fügt sich ein, statt hineinzuragen.
   ---------------------------------------------------------- */

.rg-text .mb-r{ max-width: none; margin: 26px 0; }
.rg-text .mb-r-input,
.rg-text .mb-r-seg,
.rg-text .mb-r-ergebnis{ border-radius: 0; }
.rg-text .mb-r-seg button{ border-radius: 0; }

/* Vier Elemente des Rechners sind Absätze, und `.rg-text p` ist spezifischer
   als ihre Klassen - im Beitrag verloren sie deshalb ihre Abstände. Sichtbar
   wurde es am Hinweis: Seine Trennlinie klebte ohne den oberen Abstand
   direkt an der Schaltfläche.

   Dieselbe Ursache wie bei der Beschriftung der Schaltfläche, die `.rg-text a`
   grün auf grün färbte. Wer hier einen Absatz ergänzt, muss ihn mit
   aufnehmen. */
.rg-text .mb-r-titel{ margin: 0 0 16px; }
.rg-text .mb-r-feldhinweis{ margin: 6px 0 0; }
.rg-text .mb-r-befund{ margin: 0 0 16px; }
.rg-text .mb-r-hinweis{ margin: 22px 0 0; }

/* --- Tabellen ---------------------------------------------
   Waagerecht scrollbar, weil die Blattspalte im Ratgeber nur
   rund 740 px breit ist. Senkrecht begrenzt, weil die
   Pfändungstabelle über 300 Zeilen hat - sonst schöbe sie
   alles Weitere aus dem Blick.
   ---------------------------------------------------------- */

.mb-t{ margin: 26px 0; }
/* Gescrollt wird der Rahmen, nicht die Tabelle. `display:block` auf der
   <table> war der Fehler: Die Spalten rückten links zusammen, der Rahmen
   behielt die Blattbreite, und rechts blieb eine leere Fläche innerhalb der
   Umrandung stehen. Waagerecht scrollt ohnehin schon `.rg-tabelle`. */
.mb-t-rahmen{ max-width: 100%; overflow: auto; max-height: 60vh; }
.mb-t table{ width: 100%; }
/* Der Kopf bleibt beim Scrollen stehen - sonst weiß man nach ein paar Zeilen
   nicht mehr, welche Spalte welche ist. Die Hintergrundfarbe muss gesetzt
   sein, sonst scheinen die Zeilen darunter durch. */
.mb-t thead th{
  position: sticky; top: 0; z-index: 1;
  background: var(--rg-tint-2, var(--c-surface-2));
}
/* Die von der Betragssuche gefundene Stufe. Nicht nur Farbe: Wer sie nicht
   unterscheidet, sieht am Balken links, welche Zeile gemeint ist. */
.mb-t tbody tr.is-treffer td{
  background: var(--c-primary-050);
  color: var(--c-ink);
}
/* Der Balken nur an der ersten Zelle: auf allen Zellen entstünde an jeder
   Spaltengrenze ein zweiter Strich. */
.mb-t tbody tr.is-treffer td:first-child{ box-shadow: inset 3px 0 0 var(--c-primary); }

/* --- Suchfeld über einer Tabelle -------------------------
   Dieselbe Optik über Gebühren, Pfändungsfreigrenzen und dem
   Hauptforderungs-Katalog. Bis zum 04.09.2026 hatte nur der
   Katalog eine Suche, die Staffeln wurden stattdessen gekürzt.
   -------------------------------------------------------- */
.rg-zeilensuche{ margin: 0 0 12px; }
.rg-zeilensuche label{
  display: block; font-weight: 600; font-size: .94rem; margin-bottom: 6px; color: var(--c-ink);
}
.rg-zeilensuche input[type="search"]{
  width: 100%; max-width: 420px; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-surface); color: var(--c-ink);
}
.rg-zeilensuche input[type="search"]:focus-visible{
  outline: 2px solid var(--c-primary); outline-offset: 1px;
}
.rg-zeilensuche-zahl{ margin: 6px 0 0; font-size: .86rem; color: var(--c-muted); }
/* Im Ratgeber sitzt das Feld im Blatt: dort keine weichen Radien. */
.rg-text .rg-zeilensuche input[type="search"]{ border-radius: 0; }

/* Der Tabellenname für vorlesende Programme. Nicht display:none - das
   nähme ihn auch ihnen weg. */
.mb-t .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}