/* Gesamtexport „Alle Daten“ (seit 0.9, Paket X): Einstellungen → Datenschutz & GoBD → Alle Daten und das Band auf der Übersicht.
   Nur Variablen aus app.css, Präfix gx-. Weitere Bausteine (rc-hinweis, rc-meldung, rc-pruefwert) kommen aus recht.css. */

/* ---------- Band auf der Übersicht ---------- */
.gx-band { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; color: inherit; text-decoration: none; transition: border-color .15s; }
.gx-band:hover { border-color: var(--line-2); }
.gx-band-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gx-band-text strong { font: 600 19px/1.1 var(--display); letter-spacing: .02em; }
.gx-band-text span { color: var(--ink-3); font-size: 13.5px; }
.gx-band .rc-weiter { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--copper-dark); font-weight: 500; font-size: 14px; }
:root[data-theme="dark"] .gx-band .rc-weiter { color: var(--copper-light); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gx-band .rc-weiter { color: var(--copper-light); } }

/* ---------- Export erstellen ---------- */
.gx-start h2.sec { margin-bottom: 4px; }
.gx-inhalt { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gx-inhalt li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.gx-inhalt li .ico { flex: none; margin-top: 2px; color: var(--copper-dark); }
:root[data-theme="dark"] .gx-inhalt li .ico { color: var(--copper-light); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gx-inhalt li .ico { color: var(--copper-light); } }

/* ---------- Fortschritt ---------- */
.gx-balken { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.gx-balken > span { position: absolute; inset: 0 auto 0 0; width: 2%; border-radius: 7px; background: var(--copper); transition: width .4s ease; }
.gx-schritt { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 10px 0 6px; font-size: 14px; }
.gx-schritt strong { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.gx-schritt span { color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }

/* ---------- Bereit ---------- */
.gx-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.gx-zahlen > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-width: 0; }
.gx-zahlen strong { font: 600 22px/1.1 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gx-zahlen span { color: var(--ink-3); font-size: 12.5px; }
.gx-bereit p { margin: 0 0 10px; }
.gx-knoepfe { justify-content: flex-end; }

/* ---------- Liste ---------- */
.gx-liste .m span { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .gx-band { align-items: flex-start; }
  .gx-band .rc-weiter { display: none; }
  .gx-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-knoepfe { flex-direction: column-reverse; align-items: stretch; }
  .gx-knoepfe .btn { width: 100%; }
  .gx-liste li { align-items: flex-start; }
}