/*
 * Gestaltung für Kanzlei- und Mandantenbereich (docs/gestaltung.md).
 *
 * Leitmotiv ist der senkrechte Strich aus dem Kanzleilogo: aktiver
 * Navigationspunkt, Schrittleiste, Anmeldung und Wortmarke – sonst nirgends.
 * Alles andere bleibt ruhig: keine Verläufe, Schatten nur für schwebende
 * Elemente, Bewegung nur als Antwort auf eine Aktion.
 *
 * Hauptfarbe und Akzent setzt das dynamische Stylesheet branding.css
 * (überschreibt --color-primary* und --color-accent*, jeweils mit lesbarer
 * Textfarbe). Mobile-first, responsiv ab 360 px.
 */

/* --- Schriften (lokal, SIL Open Font License, siehe static/fonts/README.md) --- */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------------ */

:root {
  /* Kanzleifarben (Standard; branding.css überschreibt sie) */
  --color-primary: #0152a3;
  --color-on-primary: #ffffff;
  --color-primary-accent: #0152a3;
  --color-primary-mark: #0152a3;
  --color-primary-text: #0152a3;
  --color-primary-strong: #014182;
  --color-accent: #ffcc08;
  --color-accent-hover: #e0b307;
  --color-on-accent: #0a2f5c;
  --color-accent-border: transparent; /* Kante der Akzentfläche (branding.css) */
  --color-accent-mark: #ffcc08;
  --color-accent-raw: #ffcc08; /* gespeicherte Akzentfarbe unverändert (Farbmuster) */

  /* Grundpalette */
  --color-deep: #0a2f5c; /* Tiefblau: Überschriften, Kopf-Text, Tabellenköpfe */
  --color-ink: #1e2833; /* Tinte: Fließtext */
  --color-mist: #f3f5f8; /* Nebel: Seitenhintergrund */
  --color-line: #d8dee6; /* Linie: Trennlinien */
  --color-surface: #ffffff;
  --color-muted: #56616e; /* Nebentext, >= 4.5:1 auf Weiß und Nebel */
  --color-field-border: #838fa0; /* Feldrand, >= 3:1 auf Weiß (WCAG 1.4.11) */

  /* Zustände (Text/Strich und heller Hintergrund-Ton) */
  --color-success: #1f7a4d;
  --color-success-bg: #eaf4ee;
  --color-warning: #9a6700;
  --color-warning-bg: #fdf5df;
  --color-warning-text: #8a5c00; /* Warntext auf --color-warning-bg, >= 4.5:1 (#9a6700 nur 4,47:1) */
  --color-error: #b42318;
  --color-error-bg: #fcecea;
  --color-info: var(--color-primary-text);
  --color-info-bg: #eaf1f9;

  /* Schrift: Skala 1,25 (13 / 16 / 20 / 25 / 31 / 39 px) */
  --font-heading: "Figtree", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9375rem;
  --text-2xl: 2.4375rem;
  --leading: 1.55;
  --measure: 70ch;

  /* Abstände: 4-px-Raster */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Rundung nach Hierarchie, Strich, Schatten nur für Schwebendes */
  --radius-surface: 12px;
  --radius-control: 8px;
  --bar: 3px;
  --shadow-float: 0 12px 32px rgb(10 47 92 / 14%), 0 2px 6px rgb(10 47 92 / 10%);

  --container-staff: 75rem;
  --container-client: 42.5rem;
}

/* --- Grundlagen --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-ink);
  background: var(--color-mist);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-deep);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-md);
  font-weight: 600;
}

h3 {
  font-size: var(--text-base);
  font-weight: 600;
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

p {
  max-width: var(--measure);
}

a {
  color: var(--color-primary-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-primary-strong);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fokus: gelber Ring mit dunkler Kontur, auf hellem wie auf blauem Grund sichtbar */
:focus-visible {
  outline: 2px solid var(--color-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-accent-mark);
}

.site-main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -10rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  color: var(--color-deep);
  background: var(--color-surface);
  border-radius: var(--radius-control);
}

.skip-link:focus {
  top: var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--container-staff);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* --- Wortmarke: Kanzleiname mit Strich ---------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-deep);
  text-decoration: none;
}

a.brand:hover {
  color: var(--color-deep);
}

.brand__logo {
  display: block;
  max-height: 2.5rem;
  width: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-deep);
  white-space: nowrap;
}

.wordmark__bar {
  display: block;
  width: var(--bar);
  height: 1.15em;
  background: var(--color-accent-mark);
}

/* --- Kopf ---------------------------------------------------------------------- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-6);
  row-gap: 0;
  min-height: 4rem;
}

/* Navigation des Kanzleibereichs: aktiver Punkt mit gelbem Strich statt Fläche */
.main-nav {
  order: 3;
  width: 100%;
  overflow-x: auto;
}

.main-nav__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--space-2);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}

.main-nav__link:hover {
  color: var(--color-deep);
}

.main-nav__link[aria-current="page"] {
  font-weight: 600;
  color: var(--color-deep);
}

/* Der Eintrag reicht über die ganze Kopfhöhe: Fokusring nach innen legen,
   damit er nicht am Rand des Kopfs abgeschnitten wird */
.main-nav__link:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 5px var(--color-accent-mark);
}

/* Strich auf der Unterkante des Kopfs, genau so breit wie der Eintrag */
.main-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--bar);
  background: var(--color-accent-mark);
}

/* Benutzermenü: nimmt den Platz neben der Wortmarke; ein langer Name wird gekürzt,
   statt den Kopf in eine weitere Zeile umbrechen zu lassen */
.user-menu {
  position: relative;
  display: flex;
  flex: 1 1 6rem;
  justify-content: flex-end;
  min-width: 6rem;
  margin-left: auto;
}

.user-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: min(100%, 16rem);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font: inherit;
  font-weight: 500;
  color: var(--color-deep);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.user-menu__toggle:hover {
  background: var(--color-mist);
}

.user-menu__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Winkel als Rahmen, kein Zeichen */
.user-menu__toggle::after {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  margin-top: -0.2em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate 150ms ease;
}

.user-menu__toggle[aria-expanded="true"]::after {
  margin-top: 0.2em;
  rotate: 225deg;
}

.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 50;
  width: max-content;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-float);
  transition:
    opacity 140ms ease,
    translate 140ms ease;
}

@starting-style {
  .user-menu__panel {
    opacity: 0;
    translate: 0 -4px;
  }
}

.user-menu__email {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
  overflow-wrap: anywhere;
}

.user-menu__actions {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-menu__actions form {
  margin: 0;
}

.user-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  text-align: left;
  color: var(--color-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.user-menu__item:hover {
  color: var(--color-deep);
  background: var(--color-mist);
}

/* Kopf des Mandantenbereichs: Rückfragen per Telefon */
.area-client .site-header__inner {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  row-gap: var(--space-2);
}

.site-header__contact {
  margin: 0 0 0 auto;
  color: var(--color-muted);
  white-space: nowrap;
}

.site-header__contact a {
  font-weight: 600;
  color: var(--color-deep);
  text-decoration: none;
}

.site-header__contact a:hover {
  text-decoration: underline;
}

/* --- Hauptbereich -------------------------------------------------------------- */

.site-main {
  flex: 1 0 auto;
  padding: var(--space-5) 0 var(--space-8);
}

/* Titelzeile: Überschrift links, höchstens eine Hauptaktion rechts */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.page-head h1 {
  margin: 0;
}

.lead {
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--color-ink);
}

.muted {
  color: var(--color-muted);
}

/* --- Hinweise: getönte Fläche in der Zustandsfarbe, ohne Strich ----------------------- */

.notices {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.notice {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink);
  background: var(--color-info-bg);
  border-radius: var(--radius-control);
}

.notices .notice {
  margin: 0;
}

.notice > :last-child {
  margin-bottom: 0;
}

/* Kurzer fetter Einstieg („Nur jetzt sichtbar.“) in der Zustandsfarbe */
.notice > strong:first-child,
.notice > p:first-child > strong:first-child {
  color: var(--color-deep);
}

.notice--success {
  background: var(--color-success-bg);
}

.notice--warning {
  background: var(--color-warning-bg);
}

.notice--error {
  background: var(--color-error-bg);
}

/* --- Formulare ------------------------------------------------------------------ */

.form {
  max-width: 36rem;
  margin: 0 0 var(--space-4);
}

/* Einstellungsabschnitte: Überschrift und Erklärung links, Felder rechts,
   getrennt durch Haarlinien statt Kacheln */
.settings {
  max-width: 56rem;
}

.form-section {
  display: grid;
  gap: 0 var(--space-7);
  min-width: 0;
  margin: 0;
  padding: var(--space-5) 0 var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--color-line);
}

.form-section__head {
  margin-bottom: var(--space-4);
}

.form-section__head h2 {
  margin-bottom: var(--space-2);
}

.form-section__intro {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Alle Abschnitte teilen Breite und rechte Kante (die der Haarlinie) */
.form-section__fields {
  min-width: 0;
}

.field {
  margin-bottom: var(--space-5);
}

.field > label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-deep);
}

.field__help {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.field__help ul {
  margin: 0;
  padding-left: 1.1em;
}

.field input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
}

.field input:hover:not([type="checkbox"], [type="radio"], [type="file"], [type="color"]),
.field select:hover {
  border-color: var(--color-deep);
}

/* Ungültige Felder (auch Farbfelder): 2px-Rand in der Fehlerfarbe rundum, ohne
   Balken (der Balken bleibt der Markierung vorbehalten); 1px Rand + 1px Schatten,
   damit sich die Feldgröße nicht ändert */
.field input[aria-invalid="true"],
.field input[aria-invalid="true"]:hover,
.field select[aria-invalid="true"],
.field select[aria-invalid="true"]:hover,
.field textarea[aria-invalid="true"],
.color-field input[type="color"][aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

/* Gleiche Spezifität wie die Fehlerregel und danach notiert: der gelbe Fokusring
   liegt bei ungültigen Feldern außen um den Fehlerrand und bleibt sichtbar */
.field input[aria-invalid="true"]:focus-visible,
.field select[aria-invalid="true"]:focus-visible,
.field textarea[aria-invalid="true"]:focus-visible,
.color-field input[type="color"][aria-invalid="true"]:focus-visible {
  box-shadow:
    0 0 0 1px var(--color-error),
    0 0 0 4px var(--color-accent-mark);
}

/* Zahlenfelder (Tage, Versuche) brauchen keine volle Breite */
.field input[type="number"] {
  max-width: 8rem;
  font-variant-numeric: tabular-nums;
}

.field input[type="file"] {
  max-width: 100%;
  font: inherit;
}

.field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-text);
  background: var(--color-surface);
  border: 1px solid var(--color-primary-text);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.field input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary-text);
}

/* Code aus der Authenticator-App: groß, gut lesbar, Ziffern gleich breit */
.field--code input {
  max-width: 12rem;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

/* Farbfelder mit gespeicherter Farbe als Muster */
.color-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.color-field input[type="color"] {
  flex: none;
  width: 3.5rem;
  height: 2.75rem;
  padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.swatch::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(10 47 92 / 20%);
}

.swatch--primary::before {
  background: var(--color-primary-accent);
}

.swatch--accent::before {
  background: var(--color-accent-raw);
}

.errorlist {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  color: var(--color-error);
}

.errorlist li + li {
  margin-top: var(--space-1);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

/* --- Schaltflächen ------------------------------------------------------------------ */

/* Hauptaktion: Akzentfläche, genau eine je Seite */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-5);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-on-accent);
  text-align: center;
  text-decoration: none;
  background: var(--color-accent);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

/* Textfarbe beim Hover explizit setzen, sonst gewinnt bei <a class="button"> die
   spezifischere Regel a:hover und der Text verliert den Kontrast zur Füllung. */
.button:hover {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
}

/* Nebenaktion: Umriss in der Kanzleifarbe */
.button--secondary {
  color: var(--color-primary-text);
  background: transparent;
  border-color: var(--color-primary-text);
}

.button--secondary:hover {
  color: var(--color-primary-strong);
  background: var(--color-surface);
  border-color: var(--color-primary-strong);
}

/* Folgenreiche Aktion: Umriss in der Fehlerfarbe */
.button--danger {
  color: var(--color-error);
  background: transparent;
  border-color: var(--color-error);
}

.button--danger:hover {
  color: var(--color-surface);
  background: var(--color-error);
  border-color: var(--color-error);
}

.button--block {
  width: 100%;
}

/* Knopf, der wie ein Link aussieht (z. B. Abmelden in Textzeilen) */
.link-button {
  padding: 0;
  font: inherit;
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  background: none;
  border: 0;
  cursor: pointer;
}

.link-button:hover {
  color: var(--color-primary-strong);
  text-decoration-thickness: 2px;
}

/* --- Tabellen: Haarlinien, keine Kacheln -------------------------------------------- */

.table-scroll {
  position: relative; /* hält absolut positionierte, versteckte Texte im Scrollbereich */
  overflow-x: auto;
  margin: 0 0 var(--space-5);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}

.table th:first-child,
.table td:first-child {
  padding-left: calc(var(--bar) + var(--space-3));
}

.table thead th {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
  white-space: nowrap;
  border-bottom-color: var(--color-deep);
}

.table tbody tr:hover {
  background: var(--color-surface);
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.table__name {
  font-weight: 600;
}

a.table__name {
  text-decoration: none;
}

a.table__name:hover {
  text-decoration: underline;
}

.table__sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* Deaktivierte Konten treten zurück, auch der Name; der Name bleibt als Link
   erkennbar (unterstrichen, Nebentext-Farbe mit mindestens 4.5:1) */
.table tr.is-inactive td,
.table tr.is-inactive a.table__name {
  color: var(--color-muted);
}

.table tr.is-inactive a.table__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Beschriftungen nur für die gestapelte Liste auf dem Smartphone */
.table__label {
  display: none;
}

/* Klein: jede Zeile ein Block zwischen Haarlinien – Name, E-Mail, dann Rolle,
   Status und 2FA in einer Zeile (durch Kommas getrennt), zuletzt die Anmeldung */
@media (max-width: 47.99rem) {
  .table--stack,
  .table--stack tbody,
  .table--stack tr,
  .table--stack td {
    display: block;
  }

  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table--stack tr {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
  }

  .table--stack tbody tr:first-child {
    border-top: 1px solid var(--color-deep);
  }

  .table--stack td,
  .table--stack td:first-child {
    padding: 0;
    text-align: left;
    border-bottom: 0;
  }

  .table--stack .table__email {
    overflow-wrap: anywhere;
  }

  .table--stack .table__meta {
    display: inline;
  }

  /* Komma am Ende des Eintrags; der Leerraum zwischen den Zellen ergibt das Leerzeichen.
     Vor einer leeren Zelle (etwa ohne Aktion) kein Komma. */
  .table--stack .table__meta:has(+ .table__meta:not(:empty))::after {
    content: ",";
  }

  .table--stack .table__label {
    display: inline;
  }

  .table--stack .table__login {
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .table--stack .table__cell-name .table__sub {
    display: inline;
    margin-left: var(--space-2);
  }
}

/* Filterzeile über der Tabelle */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 var(--space-4);
  max-width: none;
  margin-bottom: var(--space-4);
}

.filter-bar .field {
  flex: 1 1 12rem;
  margin-bottom: var(--space-4);
}

.filter-bar .field--wide {
  flex-basis: 18rem;
}

.filter-bar .form-actions {
  margin: 0 0 var(--space-4);
}

/* --- Leerer Zustand ----------------------------------------------------------------- */

.empty-state {
  max-width: 36rem;
  padding: var(--space-5) 0;
}

/* Kleiner als die Seitenüberschrift (h1: 25 px klein, 31 px ab 768 px) */
.empty-state h2 {
  font-size: var(--text-md);
}

.empty-state > :last-child {
  margin-bottom: 0;
}

/* --- Anmeldung: Formular neben einem Strich in Kanzleiblau ----------------------------- */

.auth {
  display: grid;
  max-width: 28rem;
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  border-left: var(--bar) solid var(--color-primary-mark);
}

/* Fehlerseiten: ruhiger Textblock ohne Strich (der Strich gehört der Anmeldung) */
.error-page {
  max-width: 36rem;
}

.error-page > :last-child {
  margin-bottom: 0;
}

.auth__intro {
  color: var(--color-muted);
}

.auth .form {
  margin-bottom: 0;
}

.auth__aside {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-top: 1px solid var(--color-line);
}

.auth__aside form {
  margin: 0;
}

/* Einrichtung der Zwei-Faktor-Authentifizierung */
.otp-setup {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.otp-qr {
  width: 16rem;
  max-width: 100%;
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.otp-qr__code {
  display: block;
  width: 100%;
  height: auto;
}

.otp-qr figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

.otp-steps {
  padding-left: 1.25em;
}

.otp-steps li + li {
  margin-top: var(--space-2);
}

/* Geheimnisse zum Abschreiben/Kopieren: Figtree groß, mit einem Klick markiert */
.otp-key,
.one-time-password {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--color-deep);
  user-select: all;
}

/* Schlüssel in Vierergruppen, tabellarisch: gleich breite Spalten (bis zu vier je
   Zeile), damit Gruppen beim Abschreiben untereinander stehen; gleiche Schrift */
.otp-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0.75em;
  max-width: calc(4 * 4.5em + 3 * 0.75em);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
}

.otp-key__group {
  flex: none;
  width: 4.5em;
  white-space: nowrap;
}

.otp-key-hint {
  margin-top: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.secret {
  margin: 0 0 var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
}

/* Einmalpasswort in Vierergruppen: Abstand per Rand statt Leerzeichen, damit beim
   Kopieren das Passwort ohne Leerzeichen entsteht. Umbrochen wird nur zwischen Gruppen. */
.one-time-password {
  font-size: var(--text-xl);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.one-time-password__group {
  display: inline-block;
  margin-right: 0.6em;
  white-space: nowrap;
}

.one-time-password__group:last-child {
  margin-right: 0;
}

.secret-label {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-deep);
}

/* Aktionen auf der Detailseite eines Benutzers: je Abschnitt Erklärung und Schaltfläche,
   getrennt durch Haarlinien */
.account-actions {
  max-width: 36rem;
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.account-action {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
}

.account-action h2 {
  margin-bottom: var(--space-2);
}

.account-action > :last-child {
  margin-bottom: 0;
}

/* === Formulare: Formularverwaltung (T-024) ======================================== */
/* Liste, Formularseite, Versionsansicht und Bestätigungsseiten unter /formulare/.
   Spätere Karten (Editor, Vorschau, Export, Vergleich) ergänzen ihre Regeln hier. */

/* Rückweg über der Titelzeile */
.breadcrumb {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Kennzeichen für Status und „vorläufig“: kleine Beschriftung mit Rand, keine Fläche
   in Signalgelb (die gehört der Hauptaktion) */
.form-tag {
  display: inline-block;
  padding: 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-muted);
  white-space: nowrap;
  vertical-align: 0.1em;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.form-tag--draft {
  color: var(--color-primary-text);
  border-color: var(--color-primary-text);
}

.form-tag--published {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.form-tag--provisional {
  /* etwas dunkler als der Warnton, damit auf dem hellen Grund 4,5:1 erreicht wird */
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.page-head h1 .form-tag {
  margin-left: var(--space-2);
}

/* Eckdaten: Beschriftung klein darüber, mehrere Spalten auf breiten Bildschirmen */
.meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-4) var(--space-5);
  max-width: 56rem;
  margin: 0 0 var(--space-6);
}

.meta-list dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.meta-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.meta-list__wide {
  grid-column: 1 / -1;
}

/* Aktionen zu einer Version: Links nebeneinander, umbrechend */
.version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.version-table .version-table__note {
  max-width: 24rem;
  overflow-wrap: anywhere;
}

/* Beschriftungen nur in der gestapelten Ansicht auf dem Smartphone */
.version-table__label {
  display: none;
}

/* Klein: jede Version ein Block zwischen Haarlinien statt einer breiten Tabelle */
@media (max-width: 47.99rem) {
  .version-table,
  .version-table tbody,
  .version-table tr,
  .version-table td {
    display: block;
  }

  .version-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .version-table tr {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
  }

  .version-table tbody tr:first-child {
    border-top: 1px solid var(--color-deep);
  }

  .version-table td,
  .version-table td:first-child {
    padding: 0 0 var(--space-1);
    text-align: left;
    border-bottom: 0;
  }

  .version-table .version-table__number {
    display: inline;
    font-weight: 600;
  }

  .version-table .version-table__number + td {
    display: inline;
    margin-left: var(--space-2);
  }

  .version-table__label {
    display: inline;
    color: var(--color-muted);
  }

  .version-table .table__sub {
    display: inline;
    margin-left: var(--space-2);
  }

  .version-table .version-actions {
    margin-top: var(--space-2);
  }
}

/* Gliederung einer Version: Schritte als Liste, Abschnitte mit Elementtabelle */
.outline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.outline__step {
  margin-bottom: var(--space-6);
}

.outline__step-title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.outline__section {
  margin: 0 0 var(--space-5);
}

.outline__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.outline-table__label {
  font-weight: 500;
}

.outline-table__row--repeat .outline-table__label {
  font-weight: 600;
}

/* Gleiche Spaltenbreiten in allen Abschnitten (ab 768 px) */
@media (min-width: 48rem) {
  .outline-table {
    table-layout: fixed;
  }

  .outline-table__col-label {
    width: 36%;
  }

  .outline-table__col-type {
    width: 17%;
  }

  .outline-table__col-flag {
    width: 9%;
  }

  .outline-table__col-target {
    width: 29%;
  }

  .outline-table td {
    overflow-wrap: anywhere;
  }
}

/* Elemente einer Wiederholgruppe: eingerückt unter der Gruppe */
.outline-table .outline-table__row--child td:first-child {
  padding-left: calc(var(--bar) + var(--space-3) + var(--space-5));
}

.outline-table code,
.meta-list code,
.table__sub code {
  font-size: var(--text-sm);
}

/* Meldungen der Veröffentlichungsprüfung, nach Bereich gruppiert */
.issue-group {
  max-width: 56rem;
  margin: 0 0 var(--space-5);
}

.issue-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.issue {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}

/* Einträge ohne Einstufung (z. B. „Automatische Änderungen“ der Katalog-Umstellung) nutzen die
   ganze Breite statt der schmalen ersten Spalte. */
.issue > .issue__body:first-child {
  grid-column: 1 / -1;
}

.issue__severity {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: calc(var(--leading) * var(--text-base));
}

.issue--error .issue__severity {
  color: var(--color-error);
}

.issue--warning .issue__severity {
  color: var(--color-warning);
}

.issue__location {
  font-weight: 600;
}

/* === Ende Formulare ================================================================= */

/* === Formulare: Vergleich (Export, Import, Versionsvergleich) ======================= */

/* Vergleichen und Importieren über der Versionsliste */
.form-detail-actions {
  margin: 0 0 var(--space-3);
}

/* Fehlerliste beim Import */
.import-errors {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  overflow-wrap: anywhere;
}

/* Auswahl der Versionen: Felder nebeneinander, auf dem Smartphone untereinander */
.compare-select {
  max-width: 56rem;
  margin: 0 0 var(--space-5);
}

.compare-select fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.compare-select legend {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-weight: 600;
  color: var(--color-deep);
}

.compare-select__fields {
  display: grid;
  gap: var(--space-3) var(--space-4);
}

.compare-select__fields .field {
  margin: 0;
}

.compare-select__action {
  align-self: end;
}

@media (min-width: 48rem) {
  .compare-select__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}

.compare-summary {
  max-width: var(--measure);
  font-weight: 600;
}

/* Meldungen zur Stabilität der IDs: oben, in der Zustandsfarbe hervorgehoben */
.compare-issues .notice {
  max-width: 56rem;
}

.compare-issues h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.compare-issues .issue-list {
  margin-top: var(--space-3);
  border-top-color: rgb(10 47 92 / 20%);
}

.compare-issues .issue {
  border-bottom-color: rgb(10 47 92 / 20%);
}

.compare-issues__explanation {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* Änderungen je Knoten: Haarlinien, Eigenschaften alt → neu */
.diff-group {
  max-width: 56rem;
  margin: 0 0 var(--space-6);
}

.diff-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.diff-node {
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  border-left: var(--bar) solid var(--color-line);
}

.diff-node--added {
  border-left-color: var(--color-success);
}

.diff-node--removed {
  border-left-color: var(--color-error);
}

.diff-node--moved,
.diff-node--changed {
  border-left-color: var(--color-primary-text);
}

.diff-node p {
  margin: 0;
}

.diff-node__head {
  overflow-wrap: anywhere;
}

.diff-node__kind {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.diff-node__label {
  font-weight: 600;
}

.diff-node code {
  font-size: var(--text-sm);
}

.diff-node__context,
.diff-node__move {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.diff-node__move {
  color: var(--color-ink);
}

.diff-props {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.diff-props > div {
  display: grid;
  gap: 0 var(--space-4);
}

.diff-props dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.diff-props dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .diff-props > div {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

.diff-old {
  color: var(--color-muted);
  text-decoration: line-through;
}

.diff-arrow {
  color: var(--color-muted);
}

.diff-new {
  font-weight: 600;
}

.diff-detail {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* === Ende Formulare: Vergleich ====================================================== */

/* --- Mandantenbereich --------------------------------------------------------------- */

.area-client .container {
  max-width: 60rem;
}

.client-layout {
  display: grid;
  gap: var(--space-5);
}

.client-layout__content {
  min-width: 0;
  max-width: var(--container-client);
}

.client-sheet {
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-surface);
}

.client-sheet > :last-child {
  margin-bottom: 0;
}

.client-sheet h1 {
  font-size: var(--text-xl);
}

/* Schrittleiste: waagerecht unter dem Kopf (klein), senkrecht links (ab 768 px) */
.steps {
  margin: calc(-1 * var(--space-5)) 0 0;
  padding-top: var(--space-4);
}

.steps__bar {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-3);
}

.steps__segment {
  flex: 1;
  height: var(--bar);
  background: var(--color-line);
}

.steps__segment--done {
  background: var(--color-primary-mark);
}

.steps__segment--current {
  background: var(--color-accent-mark);
}

.steps__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.steps__status strong {
  color: var(--color-deep);
}

.steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Klein: nur der aktuelle Schritt steht in der Statuszeile, die Liste ist für
   Screenreader da. Als Übersicht (Startseite) bleibt sie sichtbar. */
.steps:not(.steps--overview) .steps__list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.steps--overview .steps__status {
  display: none;
}

.steps--overview .steps__list {
  display: grid;
  gap: var(--space-2);
  counter-reset: step;
}

.steps--overview .steps__item {
  display: flex;
  gap: var(--space-3);
  counter-increment: step;
}

.steps--overview .steps__item::before {
  content: counter(step);
  flex: none;
  width: 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.steps__item {
  color: var(--color-muted);
}

.steps__item--done {
  color: var(--color-ink);
}

.steps__item--current {
  font-weight: 600;
  color: var(--color-deep);
}

.steps--overview .steps__item--current::before {
  color: var(--color-deep);
}

/* === Formulare: Darstellung (T-032) =============================================== */
/* Formular aus Mandantensicht (templates/formulare/render/): Abschnitte, Auswahlgruppen,
   Wiederholgruppen als Unterblöcke, Fehlerübersicht und Zusammenfassung. */

.render-step__title {
  margin-bottom: var(--space-3);
}

.render-step__description {
  margin-bottom: var(--space-5);
}

.render-section {
  margin: 0 0 var(--space-5);
}

.render-section + .render-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.render-section__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.render-section__description {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
}

.render-errors {
  margin-bottom: var(--space-5);
}

.render-errors__list {
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
}

.render-errors__list a {
  color: var(--color-error);
}

.render-info {
  margin-bottom: var(--space-5);
}

.field__required {
  font-weight: 400;
  color: var(--color-muted);
}

.field__warnings {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  color: var(--color-warning);
}

/* Optionsfelder: Gruppe mit Legende statt einzelner Beschriftung */
.field--choices {
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}

.field__legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 600;
  color: var(--color-deep);
}

.choice-list {
  display: grid;
  gap: var(--space-2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.choice input[type="radio"],
.choice input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary-text);
}

.choice label {
  font-weight: 400;
  color: var(--color-ink);
}

.field--file input[type="file"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field--file input[type="file"]:disabled::file-selector-button {
  cursor: not-allowed;
}

/* Schmale Felder für kurze Angaben */
.field--plz input,
.field--date input {
  max-width: 12rem;
}

.field--iban input,
.field--steuer_id input,
.field--steuernummer input {
  max-width: 24rem;
  font-variant-numeric: tabular-nums;
}

/* Wiederholgruppen: jeder Eintrag ein Unterblock mit Strich links */
.repeat {
  margin: 0 0 var(--space-5);
}

.repeat__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.repeat__help {
  margin: 0 0 var(--space-3);
}

.repeat__item {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0 var(--space-1) var(--space-4);
  border: 0;
  border-left: var(--bar) solid var(--color-line);
}

.repeat__item-title {
  margin-bottom: var(--space-3);
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-deep);
}

.repeat__item-actions {
  margin: 0 0 var(--space-3);
}

.repeat__empty {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
}

.repeat__actions {
  margin-top: var(--space-2);
}

/* Zusammenfassung: Beschriftung und Wert zwischen Haarlinien */
.render-summary__step {
  margin: 0 0 var(--space-5);
}

.render-summary__section {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-base);
}

.render-summary__list {
  margin: 0;
}

.render-summary__row {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}

.render-summary__row dt {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.render-summary__row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
}

.render-summary__empty {
  color: var(--color-muted);
}

.render-summary__item + .render-summary__item {
  margin-top: var(--space-3);
}

.render-summary__item-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-deep);
}

.render-summary__item .render-summary__row:last-child {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .render-summary__row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }

  /* Wiederholgruppen: Einträge unter der Beschriftung über die volle Breite */
  .render-summary__row--group {
    grid-template-columns: minmax(0, 1fr);
  }

  .render-summary__row dt {
    font-size: var(--text-base);
  }
}

/* === Ende Formulare: Darstellung ==================================================== */

/* --- Fuß ------------------------------------------------------------------------------ */

.site-footer {
  padding: var(--space-5) 0;
  color: var(--color-on-primary);
  background: var(--color-primary);
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--color-on-primary);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.site-footer a:hover {
  color: var(--color-on-primary);
  text-decoration-color: currentColor;
}

/* --- htmx-Ladeanzeige (eigene Regeln, htmx fügt keine Inline-Styles ein) --------------- */

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* --- Rückmeldung bei langsamen Aktionen (static/js/beschaeftigt.js, E-131) -------------- */

/* Der angeklickte Knopf bzw. Link: Wartetext plus Ladeanzeige, Farben bleiben (Kontrast). */
.ist-beschaeftigt {
  gap: var(--space-2);
  cursor: progress;
}

.ist-beschaeftigt:hover {
  cursor: progress;
}

/* Die übrigen Absendeknöpfe desselben Formulars. */
.ist-gesperrt,
.ist-gesperrt:hover {
  cursor: not-allowed;
  opacity: 0.55;
}

.ist-beschaeftigt-seite body {
  cursor: progress;
}

.beschaeftigt__anzeige {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: beschaeftigt-drehen 0.8s linear infinite;
}

@keyframes beschaeftigt-drehen {
  to {
    transform: rotate(360deg);
  }
}

/* Ohne Bewegung: ruhender gepunkteter Ring statt Drehung. */
@media (prefers-reduced-motion: reduce) {
  .beschaeftigt__anzeige {
    border-style: dotted;
    border-right-color: currentColor;
  }
}

/* --- Ab 768 px -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  h1 {
    font-size: var(--text-xl);
  }

  .container {
    padding: 0 var(--space-6);
  }

  .site-main {
    padding-top: var(--space-6);
  }

  .main-nav {
    order: 0;
    width: auto;
    align-self: stretch;
    overflow: visible;
  }

  .main-nav__list {
    height: 100%;
  }

  .main-nav__link {
    height: 100%;
    min-height: 4rem;
  }

  /* Lange Namen umbrechen an Leerzeichen und Bindestrichen (höchstens 18rem breit),
     damit die Tabelle ohne waagerechtes Scrollen in den Inhaltsbereich passt;
     kurze Zellen (Rolle, Status, 2FA, Anmeldung) bleiben einzeilig */
  .table__name {
    display: inline-block;
    max-width: 18rem;
  }

  .table__meta,
  .table__login {
    white-space: nowrap;
  }

  /* E-Mail-Adressen bleiben möglichst einzeilig, brechen aber bei Überlänge um,
     statt die Tabelle zu verbreitern */
  .table__email {
    max-width: 22rem;
    overflow-wrap: anywhere;
  }

  .form-section {
    grid-template-columns: 15rem minmax(0, 1fr);
    padding-top: var(--space-6);
  }

  .otp-setup {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .auth {
    margin-top: var(--space-7);
    padding-left: var(--space-6);
  }

  .area-client .site-header__inner {
    padding-top: 0;
    padding-bottom: 0;
  }

  .auth h1 {
    font-size: var(--text-2xl);
  }

  .client-layout {
    grid-template-columns: 13rem minmax(0, var(--container-client));
    gap: var(--space-6);
    align-items: start;
  }

  .client-sheet {
    padding: var(--space-6);
  }

  .client-sheet h1 {
    font-size: var(--text-2xl);
  }

  .steps {
    position: sticky;
    top: var(--space-6);
    margin: 0;
    padding-top: var(--space-2);
  }

  .steps__bar,
  .steps__status,
  .steps--overview .steps__status {
    display: none;
  }

  .steps:not(.steps--overview) .steps__list {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .steps .steps__list {
    display: block;
  }

  /* Die Randstriche der Einträge bilden zusammen eine senkrechte Linie */
  .steps .steps__item {
    display: block;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    border-left: var(--bar) solid var(--color-line);
    line-height: 1.35;
  }

  .steps .steps__item::before {
    content: none;
  }

  .steps .steps__item--done {
    border-left-color: var(--color-primary-mark);
  }

  .steps .steps__item--current {
    border-left-color: var(--color-accent-mark);
  }

  .site-footer__list {
    flex-wrap: nowrap;
  }
}

@media (min-width: 64rem) {
  /* Anmeldung auf breiten Bildschirmen mittig und tiefer gesetzt */
  .auth {
    margin: var(--space-8) auto var(--space-7);
  }

  .client-layout {
    grid-template-columns: 15rem minmax(0, var(--container-client));
    gap: var(--space-7);
  }
}

/* Sehr schmal: „Fragen?“ nur für Screenreader, die Nummer bleibt sichtbar */
@media (max-width: 23.99rem) {
  .site-header__contact-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Druck -------------------------------------------------------------------------- */

@media print {
  .skip-link,
  .main-nav,
  .user-menu {
    display: none !important;
  }

  body {
    background: none;
  }

  .site-header {
    border-bottom-color: #000;
  }

  .site-footer,
  .site-footer a {
    color: #000;
    background: none;
  }

  /* Tabellen vollständig aufs Papier statt in einen Scrollbereich */
  .table-scroll {
    overflow: visible;
  }

  .table__name,
  .table__email {
    white-space: normal;
  }

  /* Links drucken nur ihren Text */
  a,
  a:visited {
    color: inherit;
    text-decoration: none;
  }

  a[href]::after {
    content: none !important;
  }
}

/* === Formulare: Editor (T-025/T-027, Seitenleiste T-081) ============================= */
/* Editor eines Entwurfs (templates/formulare/editor/): ohne Auswahl Struktur | Prüfung; mit
   Auswahl links Struktur über Prüfung, rechts die Seitenleiste (~60 %). Die Spalten richtet
   :has() nach data-open der Seitenleiste ein, damit jede HTMX-Antwort passt. Unter 60rem liegt
   die Seitenleiste als Vollbild-Ebene über der Seite. */

.editor-head__version {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.editor-meta {
  margin-bottom: var(--space-4);
}

.editor-messages .notices {
  margin-bottom: var(--space-4);
}

/* Mit JavaScript schweben die Meldungen unten rechts (oben rechts läge der Kopf der
   Seitenleiste mit dem Schließen-Knopf) und verschieben das Layout nicht. Schmal und in der
   Höhe begrenzt; editor.js hält über --editor-messages-space den Platz darüber frei, damit
   fokussierte Felder nicht dauerhaft verdeckt sind. Ebenso oben: --editor-head-space ist die
   Höhe des am Viewport stehenden Kopfes der Seitenleiste (nur wenn er Felder verdecken kann,
   sonst 0), damit Scrollen zum Fokus Felder nicht darunter ablegt (WCAG 2.4.11). */
html {
  scroll-padding-top: var(--editor-head-space, 0px);
  scroll-padding-bottom: var(--editor-messages-space, 0px);
}

.editor-messages.is-floating {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  width: min(24rem, calc(100vw - 2 * var(--space-4)));
  max-height: min(40vh, 18rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}

.editor-messages.is-floating .notices {
  margin: 0;
}

.editor-messages.is-floating .notice {
  max-width: none;
  pointer-events: auto;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-float);
  transition: opacity 200ms ease;
}

.editor-messages.is-floating .notice.is-leaving {
  opacity: 0;
}

.notice--closable {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.notice__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 auto;
  padding: 0;
  font: inherit;
  line-height: 1;
  color: var(--color-deep);
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.notice__close:hover {
  background: rgb(10 47 92 / 8%);
}

.editor {
  display: grid;
  grid-template-areas:
    "tree"
    "issues";
  gap: var(--space-5);
  align-items: start;
}

/* Schmal ohne JavaScript: die Seitenleiste steht im Fluss über der Struktur (nach dem Laden
   oben, unter den Meldungen). Mit JavaScript liegt sie als Vollbild-Ebene darüber (unten). */
.editor:has(> #editor-props[data-open="true"]) {
  grid-template-areas:
    "props"
    "tree"
    "issues";
}

.editor-tree {
  grid-area: tree;
}

.editor-issues {
  grid-area: issues;
}

.editor-props {
  grid-area: props;
}

@media (min-width: 60rem) {
  .editor {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "tree issues";
    gap: var(--space-4);
  }

  .editor:has(> #editor-props[data-open="true"]) {
    grid-template-columns: minmax(18rem, 2fr) minmax(28rem, 3fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "tree props"
      "issues props";
  }
}

.editor-pane {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
}

.editor-pane__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.editor-pane__hint {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Strukturbaum: verschachtelte Listen, Ebenen mit Haarlinie eingerückt */
.editor-tree__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor-tree__list .editor-tree__list {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-line);
}

/* Leere Abschnitte und Gruppen bleiben Ablageziel */
.editor-tree__list--elements {
  min-height: var(--space-4);
}

.editor-tree__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0 2px var(--space-1);
  border-left: var(--bar) solid transparent;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

/* Gewählter Knoten: der gelbe Strich des Kanzleibereichs */
.editor-tree__row.is-selected {
  background: var(--color-mist);
  border-left-color: var(--color-accent-mark);
}

.editor-tree__handle {
  flex: none;
  width: 10px;
  height: 1.25rem;
  background: radial-gradient(circle, var(--color-muted) 1.4px, transparent 1.6px) 0 0 / 5px 5px;
  cursor: grab;
}

.editor-tree__link {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
  padding: var(--space-1) 0;
  color: var(--color-ink);
  text-decoration: none;
}

.editor-tree__link:hover .editor-tree__label {
  text-decoration: underline;
}

.editor-tree__label {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.editor-tree__item--step > .editor-tree__row .editor-tree__label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-deep);
}

.editor-tree__item--section > .editor-tree__row .editor-tree__label,
.editor-tree__item--repeat > .editor-tree__row .editor-tree__label {
  font-weight: 600;
}

.editor-tree__type {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.editor-tree__issues {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
}

.editor-tree__issues--error {
  color: var(--color-error);
}

.editor-tree__moves {
  display: flex;
  flex: none;
  gap: 2px;
}

.editor-tree__move {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.editor-tree__move:hover:not(:disabled) {
  border-color: var(--color-primary-text);
}

.editor-tree__move:disabled {
  color: var(--color-line);
  cursor: default;
}

.editor-tree__add {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0 0 var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

/* Mindest-Zielgröße 24 px (WCAG 2.5.8) */
.editor-tree__add > a,
.editor-tree__add > button {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.editor-tree__add--step {
  margin: var(--space-3) 0 0;
  font-size: var(--text-base);
  font-weight: 600;
}

/* Platzhalter beim Ziehen */
.editor-tree__item.is-dragging > .editor-tree__row {
  background: var(--color-info-bg);
  border-left-color: var(--color-primary-mark);
}

/* Seitenleiste (T-081): auf breiten Bildschirmen in voller Länge im Seitenfluss (das Mausrad
   scrollt die Seite, kein innerer Scrollbereich); nur der Kopf bleibt oben am Viewport stehen. */
.editor-props {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Passt sie in den Viewport, läuft sie beim Scrollen durch den Baum mit (editor.js). */
@media (min-width: 60rem) {
  .editor-props.is-sticky {
    position: sticky;
    top: var(--space-4);
  }
}

.editor-props {
  scroll-margin-top: var(--space-4);
}

.editor-props.is-opening {
  animation: drawer-in 160ms ease-out;
}

@keyframes drawer-in {
  from {
    opacity: 0;
    translate: var(--space-4) 0;
  }
}

/* Klebt nur mit JavaScript: dann hält --editor-head-space fokussierte Felder frei (WCAG 2.4.11). */
.drawer__head {
  z-index: 30;
  flex: none;
  padding: var(--space-3) var(--space-4) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
}

.editor--js .drawer__head {
  position: sticky;
  top: 0;
}

/* Schmale Bildschirme mit JavaScript: Vollbild-Ebene mit eigenem Scrollbereich für den Inhalt.
   Ohne JavaScript steht die Seitenleiste im Fluss, damit die Meldungen darüber sichtbar bleiben. */
@media (max-width: 59.99rem) {
  .editor.editor--js:has(> #editor-props[data-open="true"]) {
    grid-template-areas:
      "tree"
      "issues";
  }

  .editor--js > .editor-props {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: 0;
    border-radius: 0;
  }

  .editor--js > .editor-props .drawer__head {
    position: static;
    border-radius: 0;
  }

  .editor--js > .editor-props .drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: var(--editor-messages-space, 0px);
  }
}

.drawer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.drawer__bar--plain {
  flex-wrap: nowrap;
  padding-bottom: var(--space-3);
}

.drawer__nav,
.drawer__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.drawer__tools {
  margin-left: auto;
}

.drawer__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-control);
}

.drawer__step:hover {
  background: var(--color-mist);
}

.drawer__step.is-disabled {
  color: var(--color-muted);
  background: none;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-deep);
  text-decoration: none;
  border-radius: var(--radius-control);
}

.drawer__close:hover {
  color: var(--color-deep);
  background: var(--color-mist);
}

.drawer__path {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.drawer__title {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.drawer__bar--plain .drawer__title {
  margin: 0;
}

.drawer__title .form-tag {
  margin-left: var(--space-1);
}

.drawer__save {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  min-height: 1.5rem;
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-sm);
}

.drawer__status {
  margin: 0;
  color: var(--color-muted);
}

.drawer__status.is-error {
  font-weight: 600;
  color: var(--color-error);
}

.drawer__retry,
.drawer__login {
  min-height: 1.5rem;
  font-size: var(--text-sm);
}

.drawer__login {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.drawer__login[hidden] {
  display: none;
}

/* Reiter: Unterstrich in Kanzleiblau für den aktiven Reiter */
.drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin: 0 calc(-1 * var(--space-2));
}

.drawer-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: var(--bar) solid transparent;
}

.drawer-tab:hover {
  color: var(--color-deep);
  text-decoration: none;
}

.drawer-tab.is-active {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary-text);
}

.drawer-tab:focus-visible {
  outline-offset: -2px;
}

/* Zahl der Meldungen je Reiter: Fehler rot, Hinweise dunkles Gelb (weiße Schrift >= 4.5:1) */
.drawer-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-surface);
  border-radius: 999px;
}

.drawer-tab__count--error {
  background: var(--color-error);
}

.drawer-tab__count--warning {
  background: var(--color-warning);
}

@media (max-width: 59.99rem) {
  /* Kompakter Kopf: Pfad einzeilig, Blättern als Symbolknöpfe, Reiter in einer Zeile */
  .drawer__head {
    padding: var(--space-2) var(--space-3) 0;
  }

  .drawer__bar {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .drawer__nav,
  .drawer__tools {
    flex-wrap: nowrap;
    gap: var(--space-1);
  }

  .drawer__step {
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    font-size: var(--text-md);
  }

  .drawer__step-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .drawer__path {
    margin-top: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .drawer__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .drawer__save {
    margin: 0 0 var(--space-1);
  }

  .drawer-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .drawer-tab {
    min-height: 2.5rem;
    padding: 0 var(--space-2);
  }
}

.drawer__body {
  min-width: 0;
  padding: 0 var(--space-4) var(--space-4);
}

.drawer-panel:focus-visible {
  outline-offset: -2px;
}

.drawer-panel > :first-child,
.drawer__body > .editor-group--first,
.drawer__body > .editor-confirm {
  margin-top: var(--space-4);
}

.drawer-panel > .editor-group:first-child,
.editor-group--first {
  padding-top: 0;
  border-top: 0;
}

.drawer__body > .editor-derived > .editor-group__intro:first-child {
  margin-top: var(--space-4);
}

/* Mit JavaScript speichern die Eigenschaften automatisch; die Knöpfe bleiben für ohne JS. */
.editor--js [data-autosave] .form-actions--autosave,
.editor--js [data-autosave] [data-autosave-submit] {
  display: none;
}

/* Menü „Aktionen“ im Kopf der Seitenleiste */
.editor-menu {
  position: relative;
}

.editor-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-text);
  list-style: none;
  border: 1px solid var(--color-primary-text);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.editor-menu__toggle::-webkit-details-marker {
  display: none;
}

.editor-menu__toggle:hover {
  color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

.editor-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 50;
  min-width: 13rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-float);
}

.editor-menu__list form {
  margin: 0;
}

.editor-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--color-ink);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

.editor-menu__item:hover {
  color: var(--color-deep);
  background: var(--color-mist);
}

.editor-menu__item--danger,
.editor-menu__item--danger:hover {
  color: var(--color-error);
}

.editor-props .button--small {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.editor-confirm {
  margin-bottom: var(--space-4);
}

.editor-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.editor-group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.editor-group__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.editor-group__intro {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.editor-group .field {
  margin-bottom: var(--space-4);
}

.editor-group .form-actions {
  margin-top: 0;
}

.editor-group__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.editor-field-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.editor-field-check label {
  font-weight: 600;
  color: var(--color-deep);
}

.editor-field-check .errorlist,
.editor-field-check .field__help {
  flex-basis: 100%;
}

.editor-field-choices > div {
  display: grid;
  gap: var(--space-2);
}

.editor-field-choices label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.editor-field-choices input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-primary-text);
}

/* Prüfung */
.editor-issues__summary {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.editor-issues__groups {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.editor-issues__group {
  margin-bottom: var(--space-3);
}

.editor-issues__node {
  display: inline-block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.editor-issues .issue {
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.editor-issues .issue__severity {
  line-height: inherit;
}

.editor-check {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.editor-check__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.editor-check .notice {
  margin: 0 0 var(--space-3);
}

/* === Ende Formulare: Editor ========================================================== */

/* === Formulare: Vorschau (T-029) ===================================================== */
/* Vorschau aus Mandantensicht (templates/formulare/preview/): Hinweisleiste oben,
   anwählbare Schritte in der Schrittleiste, Hinweise auf der Zusammenfassung. */

.preview-banner {
  background: var(--color-warning-bg);
  border-bottom: var(--bar) solid var(--color-warning);
}

.preview-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.preview-banner__title,
.preview-banner__meta {
  margin: 0;
}

.preview-banner__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.preview-banner__actions,
.preview-banner__form,
.preview-banner__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.preview-banner__actions {
  gap: var(--space-3) var(--space-5);
}

.preview-banner__form,
.preview-banner__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Anwählbare Schritte (client/_steps.html mit form_id) */
.steps__button {
  color: inherit;
  text-align: left;
}

/* Auf kleinen Bildschirmen zeigt die Vorschau wie der Mandantenbereich die Statuszeile
   „Schritt X von Y“ und darunter die anwählbaren Schritte. */
@media (max-width: 47.99rem) {
  .preview-steps .steps__status {
    display: block;
    margin-bottom: var(--space-3);
  }
}

.preview-problems {
  margin-bottom: var(--space-5);
}

.preview-problems__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.preview-refresh {
  margin-top: var(--space-5);
}

.preview-nav {
  justify-content: space-between;
}

.preview-nav > .button:only-child {
  margin-left: auto;
}

@media (max-width: 30rem) {
  .preview-banner__form .button,
  .preview-nav .button {
    flex: 1 1 100%;
  }

  .preview-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* === Ende Formulare: Vorschau ======================================================== */

/* === Formulare: Editor-Eigenschaften (T-026) ========================================= */
/* Optionen, Validierung, Dateiregeln, ID und DATEV-Zuordnung im Eigenschaftsbereich. */

.editor-fieldset {
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.editor-checks > div {
  display: grid;
  gap: var(--space-2);
}

.editor-checks input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  accent-color: var(--color-primary-text);
}

.editor-options {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.editor-option {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.editor-option:first-child {
  padding-top: 0;
}

.editor-option--new {
  border-bottom: 0;
}

.editor-option__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-option__fields > .notice,
.editor-option__fields > .editor-option__legend {
  grid-column: 1 / -1;
}

.editor-option__legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
}

.editor-option__fields .field {
  margin-bottom: var(--space-2);
}

.editor-option__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.editor-option__actions .button:disabled {
  color: var(--color-muted);
  background: var(--color-mist);
  border-color: var(--color-line);
  cursor: default;
}

.editor-catalog-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  font-size: var(--text-sm);
}

.editor-catalog-info div:first-child {
  grid-column: 1 / -1;
}

.editor-catalog-info dt {
  color: var(--color-muted);
}

.editor-catalog-info dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.editor-value-map {
  font-size: var(--text-sm);
}

.editor-value-map input {
  width: 100%;
  min-width: 6rem;
}

/* Zellen tragen die Klasse .field, damit Eingaben und Fehlerrand wie im übrigen
   Formular aussehen; Schrift in normaler Größe (kein Zoom auf Mobilgeräten) */
.editor-value-map td.field {
  margin-bottom: 0;
}

.editor-value-map td.field input {
  font-size: var(--text-base);
}

.editor-value-map th[scope="row"] {
  font-weight: 500;
}

.editor-value-map__key {
  display: block;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.editor-id code,
.editor-derived__fields code,
.editor-group__intro code,
.editor-group .notice code {
  overflow-wrap: anywhere;
}

.editor-derived__scope {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
}

.editor-derived__fields {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

@media (max-width: 30rem) {
  .editor-option__fields,
  .editor-catalog-info {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === Ende Formulare: Editor-Eigenschaften ============================================ */

/* === Formulare: Editor-Bedingungen (T-028) =========================================== */
/* Baukasten „Feld – Operator – Wert“, Erweitert (JSON) und Markierung im Strukturbaum. */

.editor-tree__condition {
  font-size: var(--text-sm);
  color: var(--color-primary-text);
}

.editor-condition__rules {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.editor-condition__rule {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.editor-condition__rule:first-child {
  padding-top: 0;
}

.editor-condition__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0 var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-condition__legend {
  grid-column: 1 / -1;
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
}

.editor-condition__fields .field {
  min-width: 0;
  margin-bottom: var(--space-2);
}

.editor-condition__fields select,
.editor-condition__fields input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
}

.editor-condition__values {
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-condition__rule-actions,
.editor-condition__add,
.editor-condition__refresh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.editor-condition__issues ul {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

.editor-condition__clear {
  margin: var(--space-4) 0;
}

/* Langes Etikett neben dem Kästchen umbrechen statt unter das Kästchen rutschen. */
.editor-condition .editor-field-check {
  align-items: flex-start;
}

.editor-condition .editor-field-check input[type="checkbox"] {
  flex: none;
  margin-top: 0.2em;
}

.editor-condition .editor-field-check label {
  flex: 1 1 0;
  min-width: 0;
}

.editor-condition__advanced {
  margin-top: var(--space-2);
}

.editor-condition__advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-text);
}

.editor-condition__advanced[open] > summary {
  margin-bottom: var(--space-3);
}

.editor-condition__advanced textarea {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--text-sm);
}

/* === Ende Formulare: Editor-Bedingungen ============================================== */

/* === Onboarding: Kanzlei (T-034) =================================================== */
/* Anlegen, Ergebnis mit PIN und Link, vorläufige Liste (templates/onboarding/staff/). */

.onboarding-create__intro {
  max-width: var(--measure);
}

/* Vorbelegung: eigene Gruppe unter einer Haarlinie */
.onboarding-prefill {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.onboarding-prefill__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.onboarding-prefill__legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 600;
  color: var(--color-deep);
}

.onboarding-prefill__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Ergebnisseite: PIN in zwei Dreiergruppen, größer als das Einmalpasswort */
.onboarding-created__label {
  font-size: var(--text-md);
}

.onboarding-pin {
  letter-spacing: 0.12em;
}

/* Link zum Kopieren: Feld und Knopf nebeneinander, auf dem Smartphone untereinander */
.copy-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.copy-field__input {
  flex: 1 1 16rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.copy-field__button {
  flex: none;
}

/* API-Schlüssel (T-109): Schlüssel in voller Breite, umbrechbar und in Festbreitenschrift,
   damit er ganz sichtbar ist; der Knopf steht darunter */
.copy-field--voll .copy-field__input {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Schlüssel und Server-Adresse (T-109) als schreibgeschütztes Textfeld, das an jeder Stelle
   umbricht: auch auf dem Smartphone bleibt der ganze Wert sichtbar. Wo der Browser es kann, wächst
   das Feld mit dem Inhalt (eine Zeile am Bildschirm), sonst zwei Zeilen. */
.copy-field__input--umbruch {
  resize: none;
  overflow-wrap: anywhere;
  word-break: break-all;
  field-sizing: content;
}

/* Kennung eines API-Schlüssels (Anfang) nie umbrechen oder kürzen */
.api-kennung {
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Mehrere Links in der Aktionsspalte mit Abstand */
.table__aktionen a + a {
  margin-left: var(--space-3);
}

/* Ab Tabletbreite stehen die Links der Aktionsspalte untereinander: Die Spalte bleibt schmal,
   sodass „Widerrufen“ auch auf einem 1024 px breiten Bildschirm ohne seitliches Scrollen
   sichtbar ist (Befund Handbuch-Aufnahme T-109) */
@media (min-width: 48rem) {
  /* Status mit Widerrufsdatum und Grund darf umbrechen, sonst verbreitert er die Tabelle */
  .table__meta.mcp-status {
    min-width: 8rem;
    white-space: normal;
  }

  .table__aktionen a {
    display: block;
    white-space: nowrap;
  }

  .table__aktionen a + a {
    margin-left: 0;
    margin-top: var(--space-1);
  }
}

.copy-field__status {
  min-height: 1.5em;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-success);
}

/* Status in der Liste: kleine Beschriftung mit Rand wie .form-tag */
.onboarding-status {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-muted);
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.onboarding-status--invited,
.onboarding-status--in_progress {
  color: var(--color-primary-text);
  border-color: var(--color-primary-text);
}

.onboarding-status--submitted,
.onboarding-status--imported {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.onboarding-status--returned,
.onboarding-status--expired {
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.onboarding-status--import_failed {
  color: var(--color-error);
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

/* === Ende Onboarding: Kanzlei ======================================================= */

/* === Formulare: DATEV-Auswahl (T-080) ============================================== */
/* DATEV-Ziele in verständlicher Sprache: gewähltes Ziel, Vorschläge, Suche mit Treffern nach
   Gruppen, Werte-Zuordnung, Checkliste „DATEV-Pflichtangaben“ und „Fehlende Bezeichnungen“.
   Der technische Pfad steht überall nur klein als Zusatz (.datev-path). */

.datev-map__title {
  color: var(--color-deep);
  font-size: var(--text-base);
}

.datev-path {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.datev-path code {
  font-size: inherit;
}

.issue__body .datev-path,
.diff-props .datev-path,
.compare-summary .datev-path {
  display: inline;
}

.datev-required {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius-control);
}

.datev-current {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-mist);
  border-left: 3px solid var(--color-primary-mark);
  border-radius: var(--radius-control);
}

.datev-current__caption {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.datev-current__label {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-deep);
  overflow-wrap: anywhere;
}

.datev-current__label--empty {
  color: var(--color-ink);
  font-weight: 400;
}

.datev-current__help,
.datev-current__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.datev-current .notice {
  margin: var(--space-2) 0 0;
}

.datev-current__actions {
  margin-top: var(--space-3);
}

.datev-choose,
.datev-expert {
  margin: 0 0 var(--space-4);
}

.datev-choose__summary,
.datev-expert__summary {
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  font-weight: 600;
  color: var(--color-primary-text);
  cursor: pointer;
}

.datev-expert__summary {
  font-weight: 400;
  font-size: var(--text-sm);
}

.datev-choose__heading,
.datev-results__group {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.datev-search {
  margin-top: var(--space-3);
}

.datev-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.datev-search__row input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.datev-results__summary,
.datev-results__empty {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}

.datev-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.datev-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.datev-option--current {
  border-left: 3px solid var(--color-primary-mark);
  padding-left: var(--space-2);
}

.datev-option__label {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.datev-option__help {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.datev-option__action {
  justify-self: start;
}

.datev-values__auto {
  margin-top: var(--space-3);
}

.datev-values__auto .field__help {
  margin-top: var(--space-1);
}

.datev-values select {
  width: 100%;
  min-width: 10rem;
}

.datev-group-map__related {
  margin-top: var(--space-2);
}

/* Checkliste im Prüfbereich */
.datev-checklist {
  margin: var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.datev-checklist__context {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
}

.datev-checklist__items {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.datev-checklist__item {
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-line);
}

.datev-checklist__item + .datev-checklist__item {
  margin-top: var(--space-1);
}

.datev-checklist__item--mapped {
  border-left-color: var(--color-success);
}

.datev-checklist__item--missing {
  border-left-color: var(--color-error);
}

.datev-checklist__item--fallback {
  border-left-color: var(--color-warning);
}

.datev-checklist__label {
  display: block;
  font-weight: 600;
}

.datev-checklist__status--mapped {
  color: var(--color-success);
}

.datev-checklist__status--missing {
  color: var(--color-error);
}

.datev-checklist__status--fallback {
  color: var(--color-warning);
}

.datev-checklist__status--missing a {
  font-weight: 600;
  color: var(--color-error);
}

.outline-table__target {
  display: block;
}

/* Fehlende Bezeichnungen */
.datev-missing__intro {
  max-width: 44rem;
}

.datev-missing__list {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}

.datev-missing__list li {
  margin-bottom: var(--space-1);
  overflow-wrap: anywhere;
}

@media (min-width: 30rem) {
  .datev-option {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

/* === Ende Formulare: DATEV-Auswahl =================================================== */

/* === Onboarding: Mandant (T-035) ===================================================== */

.access {
  max-width: var(--measure);
}

.access__form {
  margin-top: var(--space-5);
}

/* PIN: große Tabellenziffern mit Luft, damit sich sechs Stellen gut prüfen lassen */
.access .pin-input {
  max-width: 12rem;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.access-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-contact li + li {
  margin-top: var(--space-1);
}

/* Vorwarnung vor dem Sitzungsende: schwebt unten im Blickfeld, auch auf langen Seiten */
.session-timeout__warning {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 60;
  max-width: 28rem;
  margin: 0 auto;
  box-shadow: var(--shadow-float);
}

.session-timeout__warning form {
  margin-top: var(--space-3);
}

@media print {
  .session-timeout {
    display: none;
  }
}

/* --- Ausfüllen (T-036): Schrittleiste, Blättern, Speicherhinweis --------------------- */

/* Auf kleinen Bildschirmen Statuszeile „Schritt X von Y“ und darunter die anwählbaren Schritte */
@media (max-width: 47.99rem) {
  .fill-steps .steps__status {
    display: block;
    margin-bottom: var(--space-3);
  }
}

.fill-notice:empty {
  display: none;
}

.fill-notice {
  margin-bottom: var(--space-4);
}

.fill-refresh {
  margin-top: var(--space-5);
}

.fill-nav {
  justify-content: space-between;
}

.fill-nav > .button:only-child {
  margin-left: auto;
}

.autosave-status {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: right;
}

.autosave-status__error {
  color: var(--color-error);
}

@media (max-width: 30rem) {
  .fill-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .fill-nav .button {
    flex: 1 1 100%;
  }

  .autosave-status {
    text-align: left;
  }
}

@media print {
  .fill-nav,
  .autosave-status {
    display: none;
  }
}

/* --- Absenden (T-038): Zusammenfassung, Bestätigungen, Dank ---------------------------- */

.submit-problems {
  margin-bottom: var(--space-5);
}

.submit-problems__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.submit-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.submit-summary__edit {
  font-size: var(--text-sm);
  font-weight: 600;
}

.submit-form {
  margin-top: var(--space-6);
}

.submit-confirm {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.submit-confirm__help,
.submit-confirm__error {
  margin: 0 0 0 calc(1.25rem + var(--space-3));
}

.submit-form__note {
  margin-top: var(--space-3);
}

.submit-done .notice {
  margin-bottom: var(--space-4);
}

.submit-done__heading {
  margin: var(--space-6) 0 var(--space-3);
}

@media print {
  .submit-summary__edit,
  .submit-form {
    display: none;
  }
}

/* === Ende Onboarding: Mandant ======================================================== */

/* === Onboarding: Uploads (T-037) ===================================================== */

.upload__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--color-deep);
}

.upload__list {
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.upload__file {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  border-left: var(--bar) solid var(--color-line);
}

.upload__name {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.upload__meta {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.upload__remove {
  margin-left: auto;
  min-height: 2.75rem;
}

.upload__file--pending {
  border-left-color: var(--color-info);
}

.upload__file--clean {
  border-left-color: var(--color-success);
}

.upload__file--clean .upload__state {
  color: var(--color-success);
}

.upload__file--infected,
.upload__file--error {
  border-left-color: var(--color-error);
  background: var(--color-error-bg);
}

.upload__file--infected .upload__state,
.upload__file--error .upload__state {
  font-weight: 600;
  color: var(--color-error);
}

.upload__picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.upload__input {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

.upload__input::file-selector-button {
  min-height: 2.75rem;
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  color: var(--color-primary-text);
  background: var(--color-surface);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.upload--invalid .upload__input::file-selector-button {
  border-color: var(--color-error);
}

.upload__full {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
}

.upload__meter {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin-top: var(--space-3);
  accent-color: var(--color-primary);
}

.upload__meter[hidden] {
  display: none;
}

.upload__status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Leer bleibt die Statuszeile im Barrierefreiheitsbaum (sonst würde sie nicht vorgelesen). */
.upload__status:empty {
  margin: 0;
}

@media (max-width: 30rem) {
  .upload__picker {
    flex-direction: column;
    align-items: stretch;
  }

  /* In der Spalte würde die Basis von 16rem zur Höhe: Eingabefeld nur so hoch wie sein Inhalt. */
  .upload__input {
    flex: 0 0 auto;
  }

  .upload__button {
    width: 100%;
  }
}

@media print {
  .upload__picker,
  .upload__remove,
  .upload__meter {
    display: none;
  }
}

/* === Ende Onboarding: Uploads ======================================================== */

/* === Onboarding: Übersicht (T-042) =================================================== */

.overview-count {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Sortierbare Spaltenköpfe: Link in der Farbe des Tabellenkopfs */
.overview-sort {
  color: inherit;
  text-decoration: none;
}

.overview-sort:hover {
  text-decoration: underline;
}

.overview-table th[aria-sort] .overview-sort {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent-mark);
  text-underline-offset: 0.3em;
}

/* Status, die in der T-034-Liste noch keine eigene Farbe hatten */
.onboarding-status--in_review,
.onboarding-status--import_running {
  color: var(--color-primary-text);
  border-color: var(--color-primary-text);
}

.onboarding-status--cancelled {
  color: var(--color-muted);
}

/* Sperr- und Warnmarker unter dem Status */
.overview-markers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.overview-marker {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: nowrap;
  border-left: 3px solid currentcolor;
}

.overview-marker--gesperrt,
.overview-marker--pruefung,
.overview-marker--abgelaufen {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.overview-marker--ablauf {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

/* Fortschritt: Balken mit Prozentangabe als Text */
.overview-table__progress {
  white-space: nowrap;
}

.overview-progress {
  width: 5rem;
  height: 0.5rem;
  vertical-align: middle;
  appearance: none;
  background: var(--color-line);
  border: 0;
  border-radius: var(--radius-control);
  overflow: hidden;
}

.overview-progress::-webkit-progress-bar {
  background: var(--color-line);
  border-radius: var(--radius-control);
}

.overview-progress::-webkit-progress-value {
  background: var(--color-primary-mark);
  border-radius: var(--radius-control);
}

.overview-progress::-moz-progress-bar {
  background: var(--color-primary-mark);
  border-radius: var(--radius-control);
}

.overview-progress__text {
  margin-left: var(--space-2);
  font-size: var(--text-sm);
}

.overview-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.overview-pages__current {
  color: var(--color-muted);
}

/* Klein: gestapelte Liste; Status mit Markern und Fortschritt je eine eigene Zeile */
@media (max-width: 47.99rem) {
  .table--stack .overview-table__status,
  .table--stack .overview-table__progress {
    margin: var(--space-1) 0;
  }
}

/* Die Sortierauswahl braucht es nur, solange die Spaltenköpfe ausgeblendet sind */
@media (min-width: 48rem) {
  .overview-filter .overview-filter__sort {
    display: none;
  }
}

/* === Ende Onboarding: Übersicht ====================================================== */

/* === Onboarding: Detail (T-043 bis T-045) ============================================ */
/* Detailansicht, Korrektur, Rückgabe (templates/onboarding/staff/detail*) und der
   Rückgabe-Hinweis im Mandantenbereich (templates/onboarding/client/_return_notice.html). */

.onb-detail__back {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.onb-detail__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.onb-detail__title h1 {
  overflow-wrap: anywhere;
}

.onb-detail__status {
  margin: 0;
}

.onb-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.onb-detail__inline-form {
  margin: 0;
}

/* Eckdaten: Beschriftung klein darüber, mehrere Spalten auf breiten Bildschirmen */
.onb-detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}

.onb-detail__facts dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}

.onb-detail__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.onb-detail__access--ok {
  color: var(--color-success);
  font-weight: 600;
}

.onb-detail__access--warning {
  color: var(--color-warning);
  font-weight: 600;
}

.onb-detail__access--error {
  color: var(--color-error);
  font-weight: 600;
}

.onb-detail__hint,
.onb-detail__return {
  margin-bottom: var(--space-5);
}

.onb-detail__return-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
}

.onb-detail__return-meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.onb-detail__return-fields {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.onb-detail__section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* Angaben je Schritt */
.onb-answers__step {
  margin-bottom: var(--space-5);
}

.onb-answers__step-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  color: var(--color-deep);
}

.onb-answers__section {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-muted);
}

.onb-answers__list {
  margin: 0;
}

.onb-answers__row {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: var(--space-6);
}

.onb-answers__row dt {
  font-weight: 600;
  color: var(--color-deep);
}

.onb-answers__row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Korrigierte Felder: Strich in Kanzleiblau links */
.onb-answers__row--corrected {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary-mark);
}

.onb-answers__row--commented {
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-warning);
}

.onb-answers__row:target {
  background: var(--color-info-bg);
}

.onb-answers__value-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.onb-answers__empty {
  color: var(--color-muted);
}

.onb-answers__badge {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary-text);
  border-radius: var(--radius-control);
}

.onb-answers__correct {
  font-size: var(--text-sm);
}

.onb-answers__corrections {
  margin: var(--space-1) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  list-style: none;
}

.onb-answers__corrections del {
  color: var(--color-muted);
}

.onb-answers__corrections ins {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
}

.onb-answers__comment {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-warning);
}

.onb-answers__comment-label {
  font-weight: 600;
}

.onb-answers__item {
  margin-bottom: var(--space-3);
}

.onb-answers__item-title {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

/* Dateien und Verlauf: Zeilen mit Haarlinien */
.onb-uploads,
.onb-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.onb-uploads__row,
.onb-history__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}

.onb-uploads__field {
  flex: 1 1 12rem;
  font-weight: 600;
}

.onb-uploads__name {
  flex: 2 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Originalname des Mandanten unter dem fachlichen Namen (T-089) */
.onb-uploads__original {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.onb-uploads__meta,
.onb-history__time,
.onb-history__actor,
.onb-history__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.onb-uploads__status {
  font-size: var(--text-sm);
  font-weight: 600;
}

.onb-uploads__status--clean {
  color: var(--color-success);
}

.onb-uploads__status--pending {
  color: var(--color-muted);
}

.onb-uploads__status--infected,
.onb-uploads__status--error {
  color: var(--color-error);
}

.onb-history__time {
  flex: 0 0 10rem;
  font-variant-numeric: tabular-nums;
}

.onb-history__text {
  flex: 1 1 16rem;
}

/* Korrektur und Rückgabe */
.onb-correct__facts {
  max-width: 48rem;
}

.onb-return__intro {
  max-width: var(--measure);
}

.onb-return__form {
  max-width: 48rem;
}

.onb-return__subtitle {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-md);
}

.onb-return__step {
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.onb-return__step-title {
  padding: var(--space-2) 0;
  font-weight: 600;
  color: var(--color-deep);
  cursor: pointer;
}

.onb-return__row {
  margin: var(--space-3) 0 var(--space-4);
}

/* Mandantenbereich: Hinweisblock nach einer Rückgabe */
.return-notice {
  margin-bottom: var(--space-5);
}

.return-notice__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.return-notice__list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.return-notice__next {
  margin-bottom: 0;
}

@media (min-width: 48em) {
  .onb-answers__row {
    grid-template-columns: minmax(10rem, 1fr) 2fr;
  }
}

@media print {
  .onb-detail__actions,
  .onb-answers__correct {
    display: none;
  }
}

/* === Ende Onboarding: Detail ========================================================= */

/* === Onboarding: Verwaltungsaktionen (T-046) ========================================= */
.onb-admin-actions {
  margin-block: var(--space-4);
}

.onb-admin-actions__title {
  font-size: 1rem;
  margin: 0 0 var(--space-2);
}

.onb-admin-actions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.onb-action {
  max-width: 40rem;
}
/* === Ende Onboarding: Verwaltungsaktionen ============================================ */

/* === DATEV-Import (T-055 bis T-057) ================================================== */
.onb-import-panel__facts,
.onb-import__rows {
  display: grid;
  gap: var(--space-2) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0 0 var(--space-4);
}

.onb-import-panel__facts dt,
.onb-import__rows dt {
  font-weight: 600;
}

.onb-import-panel__facts dd,
.onb-import__rows dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.onb-import-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.onb-import__connection--online {
  color: var(--color-success);
}

.onb-import__connection--offline {
  color: var(--color-error);
}

.onb-import__choices {
  list-style: none;
  margin: 0;
  padding: 0;
}

.onb-import__choices li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-1) 0;
}

.onb-import__duplicate,
.onb-import__resolution fieldset {
  margin: 0 0 var(--space-5);
}

.onb-import__preview {
  padding-left: var(--space-5);
}

.onb-import__target {
  margin-bottom: var(--space-5);
}

.onb-import__rows--entry {
  padding-left: var(--space-4);
  border-left: 2px solid currentcolor;
}

.onb-import__step-status--ok {
  color: var(--color-success);
}

.onb-import__step-status--warning {
  color: var(--color-warning);
  font-weight: 600;
}

.onb-import__step-status--error {
  color: var(--color-error);
  font-weight: 600;
}

.onb-import__followups {
  list-style: none;
  margin: 0;
  padding: 0;
}

.onb-import__followup {
  padding: var(--space-3) 0;
  border-bottom: 1px solid currentcolor;
}

.onb-import__followup--done {
  opacity: 0.75;
}
/* --- DMS-Ablage (T-090) ----------------------------------------------------------------
   Plakette: Text in Tinte auf hellem Zustandston (Kontrast > 10:1), Zustandsfarbe nur als
   Rand und Markierung, die Bedeutung trägt immer der Text. */
.dms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  background: var(--color-mist);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
}

.dms-badge::before {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  background: currentcolor;
  border-radius: 50%;
}

.dms-badge--ok {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.dms-badge--ok::before {
  background: var(--color-success);
}

.dms-badge--info {
  background: var(--color-info-bg);
  border-color: var(--color-info);
}

.dms-badge--info::before {
  background: var(--color-info);
}

.dms-badge--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.dms-badge--warning::before {
  background: var(--color-warning);
}

.dms-badge--error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

.dms-badge--error::before {
  background: var(--color-error);
}

.dms-badge--muted::before {
  background: var(--color-muted);
}

.onb-import-panel__dms-form,
.dms-ablage__nachholen {
  margin: 0 0 var(--space-4);
}

.dms-ablage__table th[scope="row"] {
  font-weight: 600;
}

.dms-ablage__dateien {
  margin: var(--space-1) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  list-style: none;
  overflow-wrap: anywhere;
}

.dms-ablage__suche {
  margin: var(--space-2) 0 0;
}

.dms-ablage__aktionen {
  display: grid;
  gap: var(--space-3);
  min-width: 16rem;
}

.dms-ablage__form {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  margin: 0;
}

.dms-ablage__form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.dms-ablage__form legend {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

/* Häkchen und Auswahl: Klickziel mindestens 24 px (WCAG 2.5.8) */
.dms-ablage__check input[type="checkbox"],
.dms-ablage__check input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
}

.dms-ablage__mehr > summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: var(--space-1) 0;
  font-weight: 600;
  color: var(--color-primary-text);
  text-decoration: underline;
  cursor: pointer;
}

.dms-ablage__mehr[open] > summary {
  margin-bottom: var(--space-2);
}

.onb-import__dms-list {
  margin: 0 0 var(--space-4);
}
/* === Ende DATEV-Import ================================================================ */

/* === Testbetrieb (T-085) ============================================================== */

/* Banner über dem Kopf aller Seiten des Kanzleibereichs: Warnfarbe, gut sichtbar */
.testbetrieb-banner {
  color: var(--color-ink);
  background: var(--color-warning-bg);
  border-bottom: var(--bar) solid var(--color-warning);
}

.testbetrieb-banner__inner {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.testbetrieb-banner__text {
  margin: 0;
}

.testbetrieb-banner__text a {
  display: inline-block;
  min-height: 24px;
  margin-left: var(--space-2);
}

.testbetrieb-cleanup__done {
  color: var(--color-muted);
}
/* === Ende Testbetrieb ================================================================= */

/* --- Diagnose (T-085) --- */
.diagnose-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-5);
}

.diagnose-facts dt {
  color: var(--color-muted);
}

.diagnose-facts dd {
  margin: 0;
}

.diagnose-bericht {
  max-height: 40rem;
  overflow: auto;
  padding: var(--space-4);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Diagnose: Filter über der Aufzeichnungsliste (Art, Vorgang). */
.diagnose-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.diagnose-filter .field,
.diagnose-filter .form-actions {
  margin: 0;
}

/* --- Akquise (M8): Unternavigation, Pflege der Themen ---------------------------------- */

/* Unternavigation des Bereichs „Anfragen“ (Board, Themen, Vorlagen; nur für Admins). */
.akquise-subnav {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
}

.akquise-subnav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.akquise-subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: var(--bar) solid transparent;
}

.akquise-subnav__link:hover {
  color: var(--color-deep);
}

.akquise-subnav__link[aria-current] {
  font-weight: 600;
  color: var(--color-deep);
  border-bottom-color: var(--color-accent-mark);
}

/* Team eines Themas in der Liste: ein Name je Zeile. */
.akquise-team {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Pfeilknöpfe für die Reihenfolge (Klickziel mindestens 24 px, hier 36 px). */
.reihenfolge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reihenfolge__knopf {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.reihenfolge__knopf:hover:not(:disabled) {
  border-color: var(--color-primary-text);
}

.reihenfolge__knopf:disabled {
  color: var(--color-muted);
  cursor: default;
}

/* --- Akquise (M8-C): Kontaktformular im Mandantenbereich ------------------------------- */

/* Honeypot: außerhalb des sichtbaren Bereichs, nicht per Tab erreichbar (tabindex=-1). Für
   Screenreader bleibt die Beschriftung „Dieses Feld bitte leer lassen“. */
.hp-feld {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontakt__form {
  position: relative;
}

/* Gruppen ohne Rahmen; die Legende trägt die Überschrift. */
.kontakt__gruppe {
  min-width: 0;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}

.kontakt__gruppe-titel {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}

.kontakt__themen {
  margin-bottom: var(--space-6);
}

/* Thema mit Kurzbeschreibung darunter; die ganze Beschriftung ist Klickziel. */
.kontakt__themen .choice label {
  display: grid;
  gap: var(--space-1);
  min-height: 1.5rem;
}

.kontakt__thema-name {
  font-weight: 600;
  color: var(--color-deep);
}

.kontakt__thema-hilfe {
  margin: 0;
}

.kontakt__anrede select {
  max-width: 14rem;
}

.kontakt__datenschutz .choice label {
  font-weight: 600;
}

/* Datenschutzhinweis über dem Absendeknopf (A-25). */
.datenschutzhinweis {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-mist);
  border-radius: var(--radius-control);
}

/* Doppelte Klasse, damit Seitenregeln wie ``.termin-seite h2`` (0,1,1) den Titel nicht ändern. */
.datenschutzhinweis .datenschutzhinweis__titel {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

.datenschutzhinweis__liste {
  margin: 0;
}

.datenschutzhinweis__liste dt {
  font-weight: 600;
  color: var(--color-deep);
}

.datenschutzhinweis__liste dd {
  margin: 0 0 var(--space-2);
}

.datenschutzhinweis__link {
  margin: var(--space-3) 0 0;
}

/* --- Akquise (M8-D): Board, Karten, Liste und Detail ----------------------------------- */

/* Umschalter Board/Liste im Seitenkopf. */
.akquise-ansicht {
  display: flex;
  gap: var(--space-4);
}

.akquise-ansicht a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: var(--bar) solid transparent;
}

.akquise-ansicht a:hover {
  color: var(--color-deep);
}

.akquise-ansicht a[aria-current] {
  font-weight: 600;
  color: var(--color-deep);
  border-bottom-color: var(--color-accent-mark);
}

.akquise-board__hilfe {
  margin: 0 0 var(--space-2);
}

/* Statusmeldung nach dem Verschieben (role=status); leer ohne Höhe. */
.board-meldung:not(:empty) {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  color: var(--color-deep);
  background: var(--color-info-bg);
  border-left: var(--bar) solid var(--color-primary-mark);
  border-radius: var(--radius-control);
}

/* Board: Spalten nebeneinander, waagerecht scrollbar (Region mit tabindex=0). ``position``
   macht das Board zum Bezugsrahmen der visuell versteckten Texte (position: absolute); sonst
   lägen sie außerhalb des Scrollbereichs und verbreiterten die Seite (Reflow bei 320 px). */
.board {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(16rem, 1fr);
  grid-auto-flow: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-3);
  overflow-x: auto;
}

.board__spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-surface);
}

.board__titel {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.board__anzahl {
  font-weight: 500;
  color: var(--color-muted);
}

.board__hinweis,
.board__verdacht,
.board__leer,
.board__mehr {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.board__leer {
  color: var(--color-muted);
}

.board__verdacht {
  padding: var(--space-1) var(--space-2);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-left: var(--bar) solid var(--color-warning);
}

.board__verdacht a {
  color: inherit;
  font-weight: 600;
}

/* Liste der Karten; Mindesthöhe als Ablagefläche für leere Spalten. */
.board__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 3rem;
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

/* Karte: begründete Kachel (docs/gestaltung.md), Rand statt Schatten. */
.board-karte {
  padding: var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.board-karte--faellig {
  border-left: var(--bar) solid var(--color-warning);
}

.board-karte.is-dragging {
  opacity: 0.5;
}

.board-karte__kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Griff zum Ziehen: nur mit JavaScript sichtbar, Klickziel 24 × 24 px. */
.board-karte__griff {
  display: none;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  cursor: grab;
  background-image: radial-gradient(var(--color-muted) 1.5px, transparent 1.6px);
  background-position: 3px 3px;
  background-size: 6px 6px;
  border-radius: var(--radius-control);
}

.akquise-board.is-ziehbar .board-karte__griff {
  display: block;
}

.board-karte__griff:hover {
  background-color: var(--color-mist);
}

.board-karte__name {
  font-size: var(--text-base);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.board-karte__person {
  margin: 0;
  color: var(--color-muted);
}

.board-karte__fakten {
  margin: var(--space-2) 0 0;
}

.board-karte__fakten > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}

.board-karte__fakten dt {
  color: var(--color-muted);
}

.board-karte__fakten dt::after {
  content: ":";
}

.board-karte__fakten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.board-karte__status {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.board-karte__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 600;
  color: var(--color-deep);
}

.board-karte__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.board-karte__zeile select {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
}

.board-karte__knopf {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* Fokus auf der Karte nach dem Verschieben (tabindex=-1). */
.board-karte:focus {
  outline: 2px solid var(--color-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-accent-mark);
}

/* Kennzeichen auf Karte, Liste und Detail (Muster .overview-marker). */
.anfrage-marker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.marker {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  border-left: 3px solid currentcolor;
}

.marker--verdaechtig,
.marker--klaerung {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.marker--wiedervorlage,
.marker--inaktiv {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

/* Status einer Anfrage (Muster .onboarding-status). */
.anfrage-status {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-muted);
  white-space: nowrap;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.anfrage-status--qualifiziert,
.anfrage-status--termin_gebucht,
.anfrage-status--gespraech_gefuehrt {
  color: var(--color-primary-text);
  border-color: var(--color-primary-text);
}

.anfrage-status--mandat_zugesagt,
.anfrage-status--onboarding_gestartet {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.anfrage-status--spam {
  color: var(--color-error);
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

/* Detail: Aktionen im Kopf, Statusauswahl, Kontakt, Nachricht und Notizen. */
.akquise-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.akquise-status__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 var(--space-4);
}

.akquise-status__form .field {
  flex: 1 1 16rem;
  max-width: 24rem;
}

.akquise-status__form .form-actions {
  margin-top: 2rem;
}

.akquise-nachricht {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  overflow-wrap: anywhere;
  background: var(--color-mist);
  border-left: var(--bar) solid var(--color-line);
  border-radius: var(--radius-control);
}

.akquise-notizen {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.akquise-notiz {
  max-width: var(--measure);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.akquise-notiz__kopf {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.akquise-notiz__art {
  font-weight: 600;
  color: var(--color-deep);
}

.akquise-notiz__betreff {
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.akquise-notiz__text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Liste: Kennzeichen unter dem Status. */
.akquise-liste .anfrage-marker {
  margin-top: var(--space-1);
}

/* --- Akquise (M8-E): Sprech- und Sperrzeiten der Steuerberater -------------------------- */

.akquise-zeiten {
  margin: 0 0 var(--space-6);
}

/* Unterüberschrift mit einer Aktion rechts, ohne Trennlinie der Titelzeile. */
.page-head--sub {
  margin-bottom: var(--space-3);
  padding-bottom: 0;
  border-bottom: 0;
}

.page-head--sub h2 {
  margin: 0;
}

/* Zwei zusammengehörige Felder (Von/Bis, Datum/Uhrzeit) nebeneinander, auf schmalen
   Bildschirmen untereinander. */
.akquise-zeitpaar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.akquise-zeitpaar > .field {
  flex: 1 1 12rem;
  min-width: 0;
}

/* --- Akquise (M8-F): Slot-Auswahl (Buchungsseite und Kanzlei) ---------------------------- */

.slot-auswahl {
  margin: 0 0 var(--space-5);
}

.slot-wochen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.slot-wochen__titel {
  margin: 0;
  font-weight: 600;
  color: var(--color-deep);
}

.slot-wochen__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Klickziel mindestens 24 px (WCAG 2.5.8). */
.slot-wochen__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.slot-tag {
  margin-bottom: var(--space-4);
}

/* Jede Uhrzeit als Fläche: Optionsfeld plus Beschriftung bilden ein großes Klickziel. */
.slot-liste .slot {
  align-items: stretch;
  min-height: 2.75rem;
  padding: 0 0 0 var(--space-3);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.slot-liste .slot input[type="radio"] {
  align-self: center;
  margin: 0;
}

.slot-liste .slot label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.slot-liste .slot:has(input:checked) {
  border-color: var(--color-primary-text);
  background: var(--color-info-bg);
}

@media (min-width: 768px) {
  .slot-liste {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }
}

/* --- Akquise (M8-H): Buchungsseiten im Mandantenbereich ------------------------------------ */

.termin-seite {
  max-width: var(--measure);
}

.termin-seite h2 {
  margin-top: var(--space-5);
  font-size: var(--text-md);
}

/* Eckdaten eines Termins: Begriff über dem Wert, auf breiten Schirmen nebeneinander. */
.termin-eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-mist);
  border-radius: var(--radius-control);
}

.termin-eckdaten dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-deep);
}

.termin-eckdaten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.termin-seite__aktionen {
  margin-top: 0;
}

.termin-seite__hinweis {
  margin: 0 0 var(--space-4);
}

/* Art des Gesprächs: Name und Hinweis (Anschrift bzw. Rückruf) bilden ein Klickziel. */
.termin-art {
  margin-bottom: var(--space-5);
}

.termin-art .choice label {
  display: grid;
  gap: var(--space-1);
  min-height: 1.5rem;
}

.termin-art__name {
  font-weight: 600;
  color: var(--color-deep);
}

.termin-art__hilfe {
  margin: 0;
}

/* --- Akquise (M8-I): Ergebnis, Checkliste und Übergang ins Onboarding --------------------------- */
.board-karte__onboarding {
  margin: var(--space-1) 0 0;
}

.akquise-ergebnis .akquise-aktionen {
  margin-top: var(--space-3);
}

.akquise-checkliste {
  margin-top: var(--space-5);
}

.akquise-checkliste h3 {
  margin: 0 0 var(--space-3);
}

.akquise-checkliste__liste {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.akquise-checkliste__punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.akquise-checkliste__text {
  flex: 1 1 16rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.akquise-checkliste__name {
  font-weight: 600;
  color: var(--color-deep);
}

.akquise-checkliste__punkt--erledigt .akquise-checkliste__name {
  color: var(--color-success);
}

.onboarding-create__herkunft ul,
.akquise-checkliste .notice ul {
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-5);
}