/* ============================================================================
 * Mahnbescheid-Formular - Theme-Skeleton
 * ============================================================================
 *
 * Diese Datei listet jeden Selektor auf, mit dem du das Widget gezielt
 * stylen kannst - leer, damit du nach Belieben Werte eintraegst.
 *
 * Nicht-leer sind nur ein paar "Reset"-Regeln (Abschnitt 5b und 7), die das
 * Widget braucht damit Icon-Buttons nicht versehentlich wie primary Buttons
 * aussehen und ein programmatischer Focus auf Headings nicht stoert.
 *
 * Aufbau:
 *   1)  ROOT
 *   2)  ALLE TEXT-FELDER (Input, Select, Textarea)
 *   3)  CHECKBOXES & RADIOS
 *   4)  LABELS & LEGENDS
 *   5)  BUTTONS
 *       5a) Primary (Weiter, Zurueck, Kostenpflichtig beauftragen, ...)
 *       5b) Icon-Buttons (Info-Icon, Overlay-Close) - RESET enthalten
 *   6)  LINKS
 *   7)  HEADINGS
 *   8)  FORTSCHRITTSANZEIGE
 *   9)  FELD-HILFE (Inline + Icon + Overlay + Panel)
 *  10)  SERVICE-KONTAKT-BOX
 *  11)  FEHLER (Banner + Inline + Invalid-State)
 *  12)  HINWEIS-BOXEN
 *  13)  VERGUETUNGS-MODAL (lebt ausserhalb von .mahnbescheid-root)
 *  14)  SONSTIGES
 *
 * Tipp: fast alle Selektoren sind unter .mahnbescheid-root gescoped, damit
 *       deine Aenderungen nicht die restliche WordPress-Seite beeinflussen.
 *       Ausnahme: Klassen mit .mahnbescheid-verguetung-* leben im Modal,
 *       das via React Portal in document.body gerendert wird.
 * ============================================================================
 */

/* Keine Variablen-Bruecke noetig - die Regeln in dieser Datei greifen direkt
   auf die Theme-Tokens (--c-primary, --c-primary-050, --c-primary-100) aus
   tokens.css zu, die vom WP-Theme auf :root definiert sind. Status-Farben
   (Grün/Rot) sind palette-unabhaengig als feste Hex-Werte eingetragen. */

/* ==========================================================================
 * 1) ROOT
 * ========================================================================== */

.mahnbescheid-root :focus-visible {
  outline: unset;
}

/* ==========================================================================
 * 2) ALLE TEXT-FELDER (Input, Select, Textarea)
 *    Hier setzt du z.B. font-size, padding, border, border-radius, background
 *    fuer ALLE Felder gleichzeitig.
 * ========================================================================== */

.mahnbescheid-root input[type="text"],
.mahnbescheid-root input[type="email"],
.mahnbescheid-root input[type="tel"],
.mahnbescheid-root input[type="number"],
.mahnbescheid-root input[type="date"],
.mahnbescheid-root select,
.mahnbescheid-root textarea {
  font-size: 15px;
  padding: 10px;
  border: 1px solid var(--c-line);
  font-family: inherit;
  /* Explizite Farbe + Hintergrund: iOS Safari faerbt selects sonst grau
     bzw. blau (System-Default) und ignoriert die geerbte Theme-Farbe. */
  color: var(--c-ink);
  background-color: #ffffff;
}

/* Eigener Dropdown-Pfeil fuer <select>:
   - native Pfeil deaktiviert via appearance: none
   - Pfeil als inline-SVG (chevron-down) im background-image
   - background-position legt fest, wo der Pfeil sitzt - "right 16px center"
     heisst 16px vom rechten Rand entfernt. Wert erhoehen, um den Pfeil
     weiter nach links zu schieben.
   - padding-right reserviert Platz, damit der Text nicht ueberlappt. */
.mahnbescheid-root select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23555555' stroke-width='2'><path d='M1 1.5L6 6.5L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

.mahnbescheid-root input[type="text"]:focus,
.mahnbescheid-root input[type="email"]:focus,
.mahnbescheid-root input[type="tel"]:focus,
.mahnbescheid-root input[type="number"]:focus,
.mahnbescheid-root input[type="date"]:focus,
.mahnbescheid-root select:focus,
.mahnbescheid-root textarea:focus {
  border-color: var(--c-primary);
}

.mahnbescheid-root input[type="text"]:disabled,
.mahnbescheid-root input[type="email"]:disabled,
.mahnbescheid-root input[type="tel"]:disabled,
.mahnbescheid-root input[type="number"]:disabled,
.mahnbescheid-root input[type="date"]:disabled,
.mahnbescheid-root select:disabled,
.mahnbescheid-root textarea:disabled {
  /* Deaktivierter Zustand (z.B. background, opacity) */
}

.mahnbescheid-root fieldset {
  border: 0;
  padding: 0;
  margin-left: 0;
}


/* ==========================================================================
 * 3) CHECKBOXES & RADIOS
 *    Die Felder behalten standardmaessig den Browser-Look.
 * ========================================================================== */

.mahnbescheid-root input[type="checkbox"] {
  /* */
}

.mahnbescheid-root input[type="radio"] {
  /* */
}

.mahnbescheid-root input[type="checkbox"]:focus,
.mahnbescheid-root input[type="radio"]:focus {
  /* */
}

/* --- Radio-Karten (Card-Style) ---
   Jede Option ist eine klickbare Karte mit Border und Radio-Button links.
   Layout-Regeln (Row/Column je nach Anzahl) liegen im Widget-CSS (embed.css). */

.mahnbescheid-radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  background: #ffffff;
  cursor: pointer;
}

.mahnbescheid-radio-option:hover {
  border-color: var(--c-primary);
}

/* Selektierte Karte */
.mahnbescheid-radio-option:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-050);
}

/* Radio-Button selbst */
.mahnbescheid-radio-input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--c-primary);
  cursor: pointer;
}

/* Label-Text neben dem Radio - normale Schriftstärke (überschreibt das
   globale label{font-weight:bold}, sonst sähe der Option-Text fett aus). */
.mahnbescheid-radio-label {
  font-weight: normal;
}

/* Der äußere <label>-Wrapper erbt vom globalen label-Style font-weight:bold -
   das hier zurücksetzen, damit nur der Label-Span fett werden könnte. */
.mahnbescheid-root label.mahnbescheid-radio-option {
  font-weight: normal;
  margin-bottom: 0;
  padding: 10px;
}


/* ==========================================================================
 * 4) LABELS & LEGENDS
 *    Labels gibt es ueber jedem Feld; <legend> bei Radio-Gruppen
 *    ("Sind Sie ...") und Fieldsets.
 * ========================================================================== */

.mahnbescheid-root label,
.mahnbescheid-root legend {
  font-weight: bold;
}

.mahnbescheid-root legend {
  margin-bottom: .25rem;
  padding-left: 0;
}


/* ==========================================================================
 * 5) BUTTONS
 * ========================================================================== */

/* --- 5a) Primary-Buttons --------------------------------------------------
 * Trifft den "Weiter"-, "Zurueck"-, "Kostenpflichtig beauftragen"-Button
 * sowie alle "+ Forderung hinzufuegen", "Bearbeiten", "entfernen" Buttons.
 *
 * WICHTIG: die :not()-Ausschluesse verhindern, dass Icon-Buttons (Info,
 *          Overlay-Close) versehentlich wie Action-Buttons aussehen.
 * -------------------------------------------------------------------------- */

.mahnbescheid-root button:not(.mahnbescheid-info-icon):not(.mahnbescheid-help-overlay-close) {
  cursor: pointer;
}

.mahnbescheid-root button:not(.mahnbescheid-info-icon):not(.mahnbescheid-help-overlay-close):hover {
  /* Hover-Zustand */
}

.mahnbescheid-root button:disabled {
  /* Deaktiviert */
}

.mahnbescheid-root .mahnbescheid-button-next {
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 16px;
}
.mahnbescheid-root .mahnbescheid-button-next:hover {
  background: var(--c-primary-700);
  border-color: var(--c-primary-700);
}
.mahnbescheid-root .mahnbescheid-button-back {
  background: #f5f5f5;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 16px;
  font-weight: bold;
  padding: 10px 16px;
  /* iOS Safari macht <button> sonst rund + system-blau ohne diese Resets */
  -webkit-appearance: none;
  appearance: none;
 }
.mahnbescheid-root .mahnbescheid-button-back:hover {
  background: rgb(239, 239, 239);
}

/* --- Add-Button ("+ weiteren ... hinzufuegen") als Text-Link mit Icon --- */
.mahnbescheid-root .mahnbescheid-button-add {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

.mahnbescheid-root .mahnbescheid-button-add:hover {
  text-decoration: underline;
}

/* Das Plus-Icon (Font Awesome circle-plus) - Farbe per CSS-Variable */
.mahnbescheid-button-plus {
  color: #18a31c;
  display: inline-flex;
  align-items: center;
  font-size: 1.1em;
}

/* --- Heading-Row der Personen-Blocks (Daten des 2. Antragstellers etc.):
       Titel links, "entfernen"-Button rechts --- */
.mahnbescheid-entity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0rem;
  border-top: 1px solid var(--c-line);
  padding-top: 1rem;
}

.mahnbescheid-entity-heading h3 {
  margin: 0!important;
}

/* --- Remove-Button (entfernen) als Text-Link mit Icon, rechts ausgerichtet --- */
.mahnbescheid-root .mahnbescheid-button-remove {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
}

.mahnbescheid-root .mahnbescheid-button-remove:hover {
  text-decoration: underline;
}

/* Das Minus-Icon (Font Awesome circle-minus) - eigene Farbe */
.mahnbescheid-button-minus {
  color: #c00027;
  display: inline-flex;
  align-items: center;
  font-size: 1.1em;
}

/* --- 5b) Icon-Buttons -- RESET enthalten ---------------------------------
 * Damit das ⓘ und das ✕ wirklich wie Icons aussehen statt wie Buttons.
 * Du kannst die Werte natuerlich aendern - aber das background:transparent
 * und border:0 solltest du behalten, sonst werden sie wieder zu Buttons.
 * -------------------------------------------------------------------------- */

.mahnbescheid-info-icon {
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  font: inherit;
  font-size: 1em;
  color: inherit;
  /* hier eigene Farbe/Hover etc. */
}

.mahnbescheid-info-icon:hover {
  /* */
}

.mahnbescheid-help-overlay-close {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* */
}

.mahnbescheid-help-overlay-close:hover {
  /* */
}


/* ==========================================================================
 * 6) LINKS
 *    Trifft <a> Tags im Formular (z.B. AGB, Widerrufsbelehrung,
 *    Datenschutz-Links in Schritt 4) sowie den Telefon-/E-Mail-Link in der
 *    Service-Kontaktbox (siehe auch Abschnitt 10).
 * ========================================================================== */

.mahnbescheid-root a {
  /* Mobile WP-Themes setzen oft text-decoration: underline als Default.
     Hier zuruecksetzen, damit Links nur beim Hover unterstrichen werden -
     analog zum Desktop-Verhalten. */
  text-decoration: none;
}

.mahnbescheid-root a:hover {
  text-decoration: underline;
}


/* ==========================================================================
 * 7) HEADINGS
 *    h2: Schritt-Titel ("Ihre Daten", "Forderung(en)", ...)
 *    h3: Abschnitts-Titel ("1. Antragsteller", "Forderung 1", ...)
 *    h4: kleinere Untertitel
 *
 * RESET: das h2 wird beim Step-Wechsel programmatisch fokussiert
 * (Screenreader-Accessibility). Damit der Browser dafuer keinen sichtbaren
 * Outline-Rahmen rendert, nur bei echtem Keyboard-Focus zeigen.
 * ========================================================================== */

.mahnbescheid-root h2 {
  margin-bottom: 1rem;
}

.mahnbescheid-root h3 {
  font-size: 19px!important;
  margin-bottom: .3333em;
}

.mahnbescheid-root h4 {
  /* */
}

.mahnbescheid-root h2:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
 * 8) FORTSCHRITTSANZEIGE
 *    Die kleinen Kreise mit den Zahlen (1, 2, 3, 4) plus Step-Labels.
 * ========================================================================== */

.mahnbescheid-progress-dot {
  font-weight: bold;
  background: #ffffff;
}

.mahnbescheid-progress-dot--upcoming {
  opacity: 1;
  border-color: var(--c-line);
}

.mahnbescheid-progress-dot--reached {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}

.mahnbescheid-progress-dot--current {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #ffffff;
}

.mahnbescheid-progress-step-label {
  /* Text neben dem Kreis */
  font-weight: bold;
}

.mahnbescheid-progress-separator {
  background: var(--c-line);
  opacity: 1;
}


/* ==========================================================================
 * 9) FELD-HILFE
 *    Die kleinen Hilfetexte zu Feldern, die per ⓘ-Icon aufrufbar sind.
 * ========================================================================== */

/* --- 9a) Visually-hidden Inline-Hilfe (fuer Screenreader via
 *          aria-describedby). Default ist clip-rect-versteckt - i.d.R.
 *          nichts aendern.                                                  */
.mahnbescheid-field-help {
  /* */
}

/* --- 9b) Overlay-Popup, das beim Klick auf das Info-Icon aufgeht ---------- */
.mahnbescheid-help-overlay {
  /* background, border, padding, box-shadow */
}

.mahnbescheid-help-overlay-title {
  /* Titel im Popup (z.B. "Vorname") */
}

.mahnbescheid-help-overlay-body {
  /* Textinhalt im Popup */
}

/* --- 9c) Rechtes Hilfe-Panel auf Desktop (>=1025px) ----------------------- */

/* WICHTIG: das WP-Theme setzt auf .form-layout ein align-items:start, sodass
   die Aside-Spalte nur Content-Hoehe bekommt (kurz). Der innere
   .helpFloatWrapper kann dann nicht weit genug nach unten reichen, sodass
   das Hilfe-Panel beim Fokus auf weiter unten liegende Felder hart am
   Wrapper-Boden gekappt wird ("immer an der gleichen Stelle"). Override:
   die Aside auf Form-Hoehe stretchen, dann fliesst flex:1 im inneren
   Wrapper sauber durch. */
.form-aside {
  align-self: stretch;
}

.mahnbescheid-help-panel {
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--c-line);
}

/* Pfeil links am Hilfe-Panel, der auf das fokussierte Feld zeigt.
   Zwei Pseudo-Elemente: ::before in Border-Farbe (1px groesser),
   ::after in Background-Farbe (ueberdeckt Inneres des Border-Pfeils). */
.mahnbescheid-help-panel::before,
.mahnbescheid-help-panel::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mahnbescheid-help-panel::before {
  /* Aeusserer Pfeil in Border-Farbe.
     Vertikale Position kommt aus der CSS-Variablen, die React per Inline-Style
     setzt - bei normaler Position 14px, wenn das Panel am unteren Wrapper-
     Rand gekappt wurde entsprechend weiter unten. */
  top: var(--mb-help-panel-arrow-top, 14px);
  left: -13px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 13px solid var(--c-line);
}

.mahnbescheid-help-panel::after {
  /* Innerer Pfeil in Background-Farbe - 1px nach rechts/unten versetzt,
     sodass der Border-Pfeil als duenne Umrandung uebrig bleibt */
  top: calc(var(--mb-help-panel-arrow-top, 14px) + 1px);
  left: -12px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #ffffff;
}

.mahnbescheid-help-panel-title {
  /* */
}


/* ==========================================================================
 * 10) SERVICE-KONTAKT-BOX (rechte Spalte auf Desktop)
 * ========================================================================== */

.mahnbescheid-contact-box {
  padding: 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-primary);
}

.mahnbescheid-contact-box-title {
  font-size: 19px;
  margin-bottom: .3333em;
}

.mahnbescheid-contact-box-text {
  margin: 0 0 .5em 0!important;
}

ul.mahnbescheid-contact-list {
  margin-top: 0!important;
  gap: .25rem;
  margin-left: 0!important
}

.mahnbescheid-contact-item {
  /* einzelne <li> */
}

.mahnbescheid-contact-icon {
  /* SVG-Icons (Phone, Envelope) - z.B. width/height/color */
}

.mahnbescheid-contact-link {
  /* Telefon- und E-Mail-Link (<a> Tags) */
}

.mahnbescheid-contact-link:hover {
  /* */
}


/* ==========================================================================
 * 11) FEHLER
 *    Banner: rote Sammel-Box oben im Schritt mit allen Fehlern.
 *    Inline: Fehler-Text direkt unter einem ungueltigen Feld.
 *    Plus Invalid-Style fuer das Feld selbst.
 * ========================================================================== */

.mahnbescheid-error-banner {
 background: #ffecec;
 border: 1px solid #d20000;
 margin: 1rem 0;
}

ul.mahnbescheid-error-banner-list {
  margin-left: 0!important;
}

.mahnbescheid-error-inline {
  color: #d20000;
}

/* Ungueltiges Feld (z.B. roter Border) - greift auf dem Field-Wrapper
   .mahnbescheid-field--error und stylt alle Eingabe-Elemente sowie
   Radio-Karten in dem Wrapper. */
.mahnbescheid-field--error input[type="text"],
.mahnbescheid-field--error input[type="email"],
.mahnbescheid-field--error input[type="tel"],
.mahnbescheid-field--error input[type="number"],
.mahnbescheid-field--error input[type="date"],
.mahnbescheid-field--error select,
.mahnbescheid-field--error textarea {
  border-color: #d20000;
}

/* Radio-Karten innerhalb eines ungueltigen Feldes ebenfalls rot umranden. */
.mahnbescheid-field--error .mahnbescheid-radio-option {
  border-color: #d20000;
}

/* Native Checkbox bei Pflicht-Verstoss rot umranden. Native Checkbox-Borders
   lassen sich nicht direkt stylen - outline mit offset legt einen 1px-Ring
   ueber die native Box, ohne das Layout zu verschieben. */
.mahnbescheid-field--error input[type="checkbox"] {
  outline: 1px solid #d20000;
  outline-offset: 1px;
}

/* Direkter Input-Hook ueber aria-invalid (Fallback falls die Wrapper-Klasse
   irgendwo fehlt). */
.mahnbescheid-root input[aria-invalid="true"],
.mahnbescheid-root select[aria-invalid="true"],
.mahnbescheid-root textarea[aria-invalid="true"] {
  border-color: #d20000;
}

.mahnbescheid-root input[aria-invalid="true"]:focus,
.mahnbescheid-root select[aria-invalid="true"]:focus,
.mahnbescheid-root textarea[aria-invalid="true"]:focus {
  /* */
}


/* ==========================================================================
 * 12) HINWEIS-BOXEN
 *    Trifft z.B. den Mieter-Hinweis ("Bitte achten Sie darauf, dass...")
 *    und den Vermieter-Hinweis im Schuldner-Schritt.
 * ========================================================================== */

.mahnbescheid-note {
  /* background, border, padding */
}


/* ==========================================================================
 * 13) VERGUETUNGS-MODAL
 *     Das Modal lebt via React Portal AUSSERHALB von .mahnbescheid-root.
 *     Klassen sind daher NICHT gescoped, koennen aber dank Praefix nichts
 *     ausserhalb des Modals treffen.
 * ========================================================================== */

table.mahnbescheid-verguetung-tabelle th {
  border: 1px solid var(--c-line);
  background: #f5f5f5;
  border-width: 1px !important;
  vertical-align: middle;
}

.mahnbescheid-verguetung-tabelle th,
.mahnbescheid-verguetung-tabelle td {
  border: 1px solid var(--c-line);
  padding: 10px;
}

.mahnbescheid-verguetung-th-group {
  /* "Mahnbescheid"/"Vollstreckungsbescheid" Header-Zellen (zentriert) */
}

table.mahnbescheid-verguetung-signatur td {
  border: 0!important;
  padding-left: 0;
  padding-right: 25px;
}

.mahnbescheid-verguetung-signatur td span {
  border-top: 1px solid #000000;
  display: block;
}

/* ==========================================================================
 * 14) SONSTIGES
 * ========================================================================== */
 
.mahnbescheid-root ol {
  margin: 0 0 1.5rem !important;
}

.mahnbescheid-root p {
  line-height: 1.5em;
  margin-bottom: 1rem;
}

.mahnbescheid-root p.description {
  background: var(--c-primary-050);
  padding: 10px;
  border: 1px solid var(--c-primary-100);
}

.mahnbescheid-root .mahnbescheid-help-toggle {
  color: var(--c-primary);
}

.mahnbescheid-root .mahnbescheid-columns {
  padding: 0 25px;
}

/* ──────────────────────────────────────────────────────────────────────
   DayPicker (react-day-picker) Theme
   ────────────────────────────────────────────────────────────────────── */

.mahnbescheid-root .mahnbescheid-day-picker {
  /* Akzentfarbe fuer selected day + today */
  --rdp-accent-color: var(--c-primary);
  --rdp-accent-background-color: var(--c-primary-050);
  --rdp-today-color: var(--c-primary);
  --rdp-selected-border: 2px solid var(--c-primary);

  /* Kompaktere Tageszellen + Button fuellt die ganze Zelle (kein Kreis-Effekt) */
  --rdp-day-height: 32px;
  --rdp-day-width: 32px;
  --rdp-day_button-height: 32px;
  --rdp-day_button-width: 32px;
}

/* Weekday-Header zentriert + bold */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-weekday {
  text-align: center;
  font-weight: bold;
}

/* Border-Collapse-Fix: damit ALLE vier Borders einer td-Zelle die Farbe
   annehmen. Default ist "collapse", wo benachbarte Zellen sich ihre Borders
   "teilen" - dann zeichnen sich Color-Aenderungen oft nur auf 2 Seiten.
   Mit "separate" hat jede Zelle ihre eigenen 4 Borders.
   Der transparente Default-Border auf .rdp-day reserviert 2px Platz auf
   jeder Seite, damit das Setzen einer farbigen Border bei Hover/Selected
   die Zellgroesse nicht veraendert. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-month_grid {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 10px;
}

/* Globale WP-Theme td/th-Borders innerhalb des Pickers neutralisieren -
   sonst zeichnet sich rechts/unten an jeder Zelle ein 1px-Strich, der mit
   dem Strich der Nachbarzelle wie ein 2px-Doppelstrich wirkt.
   !important weil viele WP-Themes ihre table-Regeln mit !important schreiben. */
.mahnbescheid-root .mahnbescheid-day-picker table,
.mahnbescheid-root .mahnbescheid-day-picker thead,
.mahnbescheid-root .mahnbescheid-day-picker tbody,
.mahnbescheid-root .mahnbescheid-day-picker tr,
.mahnbescheid-root .mahnbescheid-day-picker td,
.mahnbescheid-root .mahnbescheid-day-picker th {
  border: 0 !important;
  outline: 0;
  box-shadow: none;
}

/* Button im Picker reseten - auch hier setzt das WP-Theme oft Borders. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day_button {
  border: 0;
  background: transparent;
}

/* Transparenter 2px-Border auf .rdp-day reserviert Platz auf jeder Seite,
   damit Hover/Selected die Zellgroesse nicht veraendern. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day {
  border: 2px solid transparent;
}

/* Ansatz: td hat die 1px graue Default-Border (via border-collapse: collapse,
   geteilt mit Nachbarn, kein doubling). Hover/Selected werden ueber den
   <button> INSIDE des td gezeichnet. Der Button ist ein normales Element
   (kein Table-Cell), daher funktioniert position+z-index zuverlaessig.
   Der Button wird per absolute Positionierung 1px nach aussen erweitert,
   sodass sein box-shadow exakt ueber der td-Border sitzt und sie ersetzt. */
.mahnbescheid-root .mahnbescheid-day-picker td.rdp-day {
  padding: 0;
  border: 1px solid var(--c-line) !important;
  position: relative;
}

/* Button fuellt die Zelle und ragt 1px nach aussen, sodass sein box-shadow
   die graue td-Border ueberdeckt. border-radius: 0 entfernt den default
   --rdp-day_button-border-radius (4px), damit der Inset-Shadow eckig laeuft. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day_button {
  position: absolute;
  inset: -1px;
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* SELECTED Day - shadow auf dem Button. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day.rdp-selected .rdp-day_button {
  z-index: 2;
  background: var(--c-primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* react-day-picker default style.css setzt auf .rdp-selected ein
   font-size: large + font-weight: bold; ueberschreiben. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-selected {
  font-size: inherit;
  font-weight: inherit;
}

/* HOVER auf nicht-selected, nicht-disabled days. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day:not(.rdp-disabled):not(.rdp-selected):hover .rdp-day_button {
  z-index: 2;
  background: var(--c-primary-050);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* HOVER auf selected day. */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-day.rdp-selected:hover .rdp-day_button {
  z-index: 2;
  background: var(--c-primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* Heutiges Datum hervorheben (wenn nicht ohnehin selected) */
.mahnbescheid-root .mahnbescheid-day-picker .rdp-today:not(.rdp-selected) .rdp-day_button {
  color: inherit;
}

/* Popover-Container */
.mahnbescheid-root .mahnbescheid-day-picker-popover {
  background: #fff;
  border: 1px solid var(--c-primary-100);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mahnbescheid-root nav.rdp-nav {
  padding: 0;
  border: 0;
}

.mahnbescheid-root .rdp-today:not(.rdp-outside) {
  color: inherit;
}

.mahnbescheid-root .mahnbescheid-note {
  margin: .5rem 0 1rem !important;
  border-color: var(--c-primary);
}
/* Innerhalb eines entityBlocks (PersonForm / ForderungForm) regelt das
   flex-gap den Abstand zum naechsten Sibling - eigenes margin-bottom
   waere ein Aufschlag und wuerde die Note "zu tief" absetzen. */
.mahnbescheid-root .mahnbescheid-entity-block .mahnbescheid-note {
  margin-bottom: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   STEP 4 - Bestell-Uebersicht (Summary-Tabellen)
   ────────────────────────────────────────────────────────────────────── */

/* Tabelle - Borders + thin grid */
.mahnbescheid-root .mahnbescheid-summary-table {
  border: 1px solid var(--c-line);
  margin: 0;
}
.mahnbescheid-root .mahnbescheid-summary-table th,
.mahnbescheid-root .mahnbescheid-summary-table td {
  border: 1px solid var(--c-line);
}
.mahnbescheid-root .mahnbescheid-summary-table tr:last-child th,
.mahnbescheid-root .mahnbescheid-summary-table tr:last-child td {
  border-bottom: 0;
}
.mahnbescheid-root .mahnbescheid-summary-table th {
  font-weight: bold;
  width: 50%;
  background: #ffffff;
}
.mahnbescheid-root .mahnbescheid-summary-table td {
  font-weight: normal;
  background: #ffffff;
}

/* Section-Header-Zeile ("X. Antragsteller/in", "X. Antragsgegner/in",
   "X. Forderung") mit hellem Hintergrund, spans beide Spalten */
.mahnbescheid-root .mahnbescheid-summary-section-header th {
  background: #f5f5f5;
  font-weight: bold;
  width: auto;
}

/* Volle-Breite-Cell (z.B. Anschrift-Block) - mehrere Zeilen mit Label oben */
.mahnbescheid-root .mahnbescheid-summary-cell-full {
  width: auto;
}

/* Section-Heading: h3 links, Bearbeiten-Button rechts */
.mahnbescheid-root .mahnbescheid-summary-heading h3 {
  font-size: 1.25rem;
}

/* Bearbeiten-Button - kompakter als Zurueck-Button, aber gleiche Optik */
.mahnbescheid-root .mahnbescheid-summary-edit {
  font-size: 14px;
  padding: 3px 9px;
  font-weight: normal;
}

/* ──────────────────────────────────────────────────────────────────────
   Button als Text-Link (z.B. "Vergütungsvereinbarung")
   ────────────────────────────────────────────────────────────────────── */
.mahnbescheid-root .mahnbescheid-button-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--c-primary);
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  display: inline;
}
.mahnbescheid-root .mahnbescheid-button-link:hover {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────
   Checkbox-Label NICHT fett - ueberschreibt das globale label-Bold.
   :has(input[type="checkbox"]) trifft jedes <label>, das eine Checkbox
   enthaelt (CheckboxField-Struktur).
   ────────────────────────────────────────────────────────────────────── */
.mahnbescheid-root label:has(> input[type="checkbox"]),
.mahnbescheid-root label:has(> input[type="checkbox"]) * {
  font-weight: normal;
}

/* Checkbox-Block in Step 4: line-height + Abstand zwischen den Checkboxen.
   Letzter Block bekommt kein margin-bottom (vor der Nav-Reihe).
   gap: 0 ueberschreibt das default .field { gap: 0.25rem } aus dem CSS-Modul,
   damit der Error-Text direkt unter der Checkbox sitzt - nicht durch
   einen Flex-Gap getrennt. */
.mahnbescheid-root .mahnbescheid-checkbox-field {
  line-height: 1.5em;
  margin-bottom: 0.5rem;
  gap: 0;
}
.mahnbescheid-root .mahnbescheid-checkbox-field:last-of-type {
  margin-bottom: 0;
}

/* Groessere Checkboxen im Step 4 - Brand-Akzentfarbe.
   accent-color faerbt die native Checkbox in der Brand-Farbe ein. */
.mahnbescheid-root .mahnbescheid-checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--c-primary);
  cursor: pointer;
}

/* Error-Text im CheckboxField eingerueckt auf die Labeltext-Spalte
   (= 20px Checkbox-Breite + 0.5rem Gap). Sonst beginnt der Error
   am linken Rand unter dem Checkbox-Kasten. */
.mahnbescheid-root .mahnbescheid-checkbox-field .mahnbescheid-error-inline {
  padding-left: calc(20px + 0.5rem);
}

@media (max-width: 768px) {
  
}