:root {
  /* Verbindlich von gemuese-quelle.de abgeleitet (Computed Styles, 27.08.2026). */
  --brand-primary: #20553a;
  --brand-primary-hover: #18392b;
  --brand-primary-soft: #dcefe1;
  --brand-accent: #91c91d;
  --brand-accent-soft: #edf7d9;
  --brand-lime: #b3df44;
  --brand-dark: #0d2219;
  --brand-dark-muted: #1c4431;
  --brand-coral: #e04b35;
  --erp-canvas: #f7f5ee;
  --erp-surface: #ffffff;
  --erp-surface-elevated: #ffffff;
  --erp-surface-muted: #eff8f1;
  --erp-border: #cad7cd;
  --erp-border-strong: #8ead98;
  --erp-text: #14251b;
  --erp-text-secondary: #31483b;
  --erp-muted: #52665a;
  --erp-green: var(--brand-primary);
  --erp-green-dark: var(--brand-dark);
  --erp-green-soft: var(--brand-primary-soft);
  --erp-sidebar-top: #0d2219;
  --erp-sidebar-middle: #18392b;
  --erp-sidebar-bottom: #0d2219;
  --erp-sidebar-flyout: #18392b;
  --erp-success: #276b46;
  --erp-warning: #77510a;
  --erp-danger: #a33024;
  --erp-info: #20553a;
  --erp-focus: rgba(145, 201, 29, .32);
  --erp-shadow: 0 1px 2px rgba(13, 34, 25, .05), 0 10px 35px rgba(13, 34, 25, .07);
  --erp-control-radius: .75rem;
  --erp-control-height: 2.625rem;
}

.erp-skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-160%); padding: .75rem 1rem; background: var(--erp-surface); color: var(--erp-text); border: 2px solid var(--brand-primary); }
.erp-skip-link:focus { transform: none; }
.erp-form-errors { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--erp-danger); border-left-width: 4px; background: #fef2f2; color: var(--erp-danger); border-radius: var(--erp-control-radius); }
.erp-form-errors a { text-decoration: underline; text-underline-offset: 2px; }
.erp-field-error { margin-top: .35rem; color: var(--erp-danger); font-size: .875rem; font-weight: 600; }
.erp-edit-status { font-size: .875rem; color: var(--erp-muted); margin-block: .5rem; }
.erp-content :is(h1,h2,h3), .erp-content td .truncate { overflow-wrap: anywhere; }
.erp-content td .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
.erp-content .overflow-x-auto { max-width: 100%; }

html, body { background: var(--erp-canvas) !important; }

body {
  color: var(--erp-text);
  font-family: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Website-Geometrie, in der Warenwirtschaft bewusst etwas kompakter eingesetzt. */
.rounded-3xl { border-radius: 1rem !important; }
.rounded-2xl { border-radius: .875rem !important; }
.rounded-xl { border-radius: .75rem !important; }
.rounded-lg { border-radius: .625rem !important; }
.shadow-soft, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--erp-shadow) !important; }

.erp-sidebar {
  background: linear-gradient(
    180deg,
    var(--erp-sidebar-top) 0%,
    var(--erp-sidebar-middle) 52%,
    var(--erp-sidebar-bottom) 100%
  ) !important;
  border-right: 1px solid rgba(179, 223, 68, .12);
  box-shadow: 8px 0 30px rgba(13, 34, 25, .12) !important;
}

.erp-sidebar-flyout {
  background: var(--erp-sidebar-flyout) !important;
  box-shadow: 0 16px 32px rgba(7, 45, 27, .28) !important;
}

.erp-sidebar .text-emerald-200\/65,
.erp-sidebar .text-emerald-200\/55 {
  color: rgba(209, 250, 229, .82) !important;
}

.erp-brand { transition: background-color .15s ease; }
.erp-brand:hover { background: rgba(255,255,255,.08); }

.erp-header {
  background-color: rgba(247, 245, 238, .94) !important;
  box-shadow: 0 1px 0 rgba(13,34,25,.04);
  backdrop-filter: blur(10px);
}

.erp-notice, .erp-alert { box-shadow: 0 1px 2px rgba(15,23,42,.035); }

.erp-content { max-width: 1680px; }
.erp-content h1,
.erp-content h2,
.erp-content h3,
.erp-login h1 { font-family: Manrope, "DM Sans", sans-serif; }
.erp-content h1 { color: var(--erp-text); letter-spacing: -.025em; }
.erp-content h2, .erp-content h3 { color: var(--erp-text); letter-spacing: -.012em; }
.erp-content h1.text-3xl {
  font-size: 1.75rem !important;
  line-height: 2.1rem !important;
}

/* Alle Steuerelemente zeigen verlässlich Interaktivität. */
a[href], button, summary, label[for], select, input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}

a[href], button {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease,
              box-shadow .14s ease, opacity .14s ease, transform .14s ease, filter .14s ease !important;
}

button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed !important;
  opacity: .68;
}

.erp-content a[href][class*="bg-"]:hover,
.erp-content a[href][class*="border"]:hover,
.erp-content button:hover:not(:disabled),
.erp-header a[href]:hover,
.erp-header button:hover:not(:disabled) {
  filter: brightness(.975);
  box-shadow: 0 2px 8px rgba(13,34,25,.1);
}

.erp-content a:hover,
.erp-content button:hover,
.erp-content article:hover,
.erp-header a:hover,
.erp-header button:hover { transform: none !important; }

.erp-content button:active:not(:disabled),
.erp-content a[href][class*="bg-"]:active { transform: translateY(1px) !important; }

/* Farbzustände nur über vollständige Klassen-Tokens ansprechen. Eine Prüfung auf
   "bg-forest" würde auch helle Sekundäraktionen (bg-forest-50) abdunkeln und
   deren dunkelgrüne Beschriftung unlesbar machen. */
.erp-content a[href][class~="bg-forest-700"]:hover,
.erp-content button[class~="bg-forest-700"]:hover:not(:disabled) {
  background-color: var(--brand-primary-hover) !important;
  color: #fff !important;
}

.erp-content a[href][class~="bg-forest-800"]:hover,
.erp-content button[class~="bg-forest-800"]:hover:not(:disabled) {
  background-color: var(--brand-dark) !important;
  color: #fff !important;
}

/* Kontraststabile Hoverzustände für helle Aktionsflächen. */
.erp-content a[href][class~="bg-forest-50"]:hover,
.erp-content button[class~="bg-forest-50"]:hover:not(:disabled) {
  background-color: var(--brand-primary-soft) !important;
  color: var(--brand-primary-hover) !important;
}

.erp-content a[href][class~="bg-red-50"]:hover,
.erp-content button[class~="bg-red-50"]:hover:not(:disabled) {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.erp-content a[href][class~="bg-amber-50"]:hover,
.erp-content button[class~="bg-amber-50"]:hover:not(:disabled) {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

.erp-content a[href][class~="bg-slate-50"]:hover,
.erp-content button[class~="bg-slate-50"]:hover:not(:disabled) {
  background-color: #e2e8f0 !important;
  color: #334155 !important;
}

.erp-content a[href]:not([class*="bg-"]):hover { text-decoration-color: currentColor; }
.erp-content a[href].font-bold:not([class*="bg-"]):not([class*="border"]):hover,
.erp-content a[href].font-semibold:not([class*="bg-"]):not([class*="border"]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Einheitliche Formulare der Warenwirtschaft. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  min-height: var(--erp-control-height);
  border-radius: var(--erp-control-radius) !important;
  border-color: var(--erp-border-strong) !important;
  background-color: #fff !important;
  color: var(--erp-text) !important;
  box-shadow: inset 0 1px 1px rgba(13,34,25,.025) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover { border-color: var(--brand-primary) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--erp-green) !important;
  box-shadow: 0 0 0 3px var(--erp-focus) !important;
  outline: none !important;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--erp-green); }

input::placeholder,
textarea::placeholder { color: #617368 !important; opacity: 1; }

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  border-color: #d5ddd7 !important;
  background: #edf0ed !important;
  color: #52665a !important;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--erp-danger) !important;
  box-shadow: 0 0 0 3px rgba(224, 75, 53, .16) !important;
}

input[type="file"]::file-selector-button {
  margin-right: .75rem;
  border: 1px solid var(--erp-border);
  border-radius: .625rem;
  background: var(--erp-surface-muted);
  padding: .55rem .8rem;
  color: var(--brand-primary-hover);
  font-weight: 700;
}

/* Einheitliche Select-Pfeile mit ausreichend Abstand zur rechten Kante. */
select:not([multiple]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 3rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem 1rem !important;
}

/* Aktionsbeschriftungen bleiben in der gesamten Anwendung einzeilig. */
button:not(.allow-wrap),
input[type="button"],
input[type="submit"],
input[type="reset"],
.erp-action-primary,
.erp-action-secondary,
.erp-action-icon,
.erp-action-menu-item,
.erp-selection-bar a,
.erp-selection-bar button {
  white-space: nowrap !important;
}

.erp-content a[href][class*="rounded"][class*="px-"][class*="py-"]:not(.allow-wrap) {
  white-space: nowrap;
}

/* Datenraster: kompakt, klar und immer mit Hover-Zeile. */
.erp-content table { border-collapse: separate; border-spacing: 0; }
.erp-content thead { background: #e8f1ea !important; }
.erp-content thead th {
  color: #31483b !important;
  font-size: .69rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  white-space: nowrap;
}
.erp-content thead th:last-child:empty::after { content: "Aktion"; }
.erp-content thead th:last-child > .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.erp-content tbody tr { transition: background-color .12s ease, box-shadow .12s ease; }
.erp-content tbody tr:hover { background-color: #eff8f1 !important; }
.erp-content tbody tr:has(a, button):hover { box-shadow: inset 3px 0 0 var(--brand-accent); }
.erp-content tbody td { border-color: #e1e9e3 !important; }
.erp-content tbody a[aria-label],
.erp-content tbody a[title],
.erp-content tbody button[aria-label],
.erp-content tbody button[title] { border: 1px solid transparent; }
.erp-content tbody a[aria-label]:hover,
.erp-content tbody a[title]:hover,
.erp-content tbody button[aria-label]:hover,
.erp-content tbody button[title]:hover {
  border-color: var(--erp-border);
  background-color: #fff;
}

/* Karten und Listen bekommen einen sichtbaren Interaktionszustand. */
.erp-content a.rounded-2xl,
.erp-content a.rounded-xl,
.erp-content article,
.erp-content section { transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; }
.erp-content a.rounded-2xl:hover,
.erp-content a.rounded-xl:hover {
  border-color: #8ec49d !important;
  box-shadow: var(--erp-shadow) !important;
}

.erp-content .divide-y > a:hover,
.erp-content .divide-y > div:has(a, button):hover { background: #eff8f1; }

.erp-header nav a:hover { transform: none !important; background-color: #eff8f1; }
.erp-header nav a:active { background-color: #dcefe1; }
.erp-shell > main a:hover,
.erp-shell > main button:hover { transform: none !important; }
.erp-shell > main button:hover:not(:disabled) { filter: brightness(.97); box-shadow: 0 2px 8px rgba(13,34,25,.1); }

/* Status-Pills bleiben kompakt; große Rundungen gelten nur für Status. */
.rounded-full { box-shadow: none !important; }

/* Modalflächen wirken wie Arbeitsdialoge, nicht wie schwebende Landingpage-Karten. */
.erp-modal { backdrop-filter: blur(3px) !important; }
.erp-modal > div { max-height: calc(100dvh - 2rem); overflow-y: auto; border-radius: 1rem; }
.erp-modal > div > section { border: 1px solid var(--erp-border); background: var(--erp-surface); }

/* Kompaktes Aktionssystem: pro Screen eine Hauptaktion, eine Nebenaktion
   und alle seltenen Vorgänge in einem eindeutig erkennbaren Kontextmenü. */
.erp-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  white-space: nowrap;
}
.erp-action-primary,
.erp-action-secondary,
.erp-action-icon {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: .75rem;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.erp-action-primary {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
  padding: 0 1rem;
}
.erp-action-primary:hover:not(:disabled) { background: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: #fff !important; }
.erp-action-secondary {
  border: 1px solid var(--erp-border);
  background: #fff;
  color: var(--erp-text-secondary);
  padding: 0 1rem;
}
.erp-action-secondary:hover:not(:disabled) { border-color: #8ec49d !important; background: #eff8f1 !important; color: var(--brand-primary-hover) !important; }
.erp-action-icon {
  width: 2.5rem;
  border: 1px solid var(--erp-border);
  background: #fff;
  color: var(--erp-text-secondary);
  padding: 0;
}
.erp-action-icon:hover:not(:disabled) { border-color: #8ec49d !important; background: #eff8f1 !important; color: var(--brand-primary-hover) !important; }
.erp-action-menu {
  position: absolute;
  right: 0;
  z-index: 40;
  margin-top: .5rem;
  width: min(18rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--erp-border);
  border-radius: .75rem;
  background: #fff;
  padding: .375rem;
  box-shadow: 0 14px 36px rgba(13, 34, 25, .16);
}
.erp-action-menu-label {
  padding: .55rem .625rem .25rem;
  color: #94a3b8;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.erp-action-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .625rem;
  border-radius: .375rem;
  padding: .625rem;
  color: var(--erp-text-secondary);
  font-size: .8125rem;
  font-weight: 650;
  text-align: left;
}
.erp-action-menu-item:hover { background: #eff8f1 !important; color: var(--brand-primary-hover) !important; text-decoration: none !important; }
.erp-action-menu-item-danger { color: var(--erp-danger); }
.erp-action-menu-item-danger:hover { background: #fbe9e6 !important; color: #8f2d22 !important; }
.erp-action-menu-divider { height: 1px; margin: .375rem .25rem; background: #e1e9e3; }

/* Technische Details und Historien bleiben erreichbar, dominieren aber nicht. */
.erp-details {
  overflow: hidden;
  border: 1px solid var(--erp-border);
  border-radius: .875rem;
  background: #fff;
}
.erp-details > summary {
  display: flex;
  min-height: 3.25rem;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  color: var(--erp-text-secondary);
  font-size: .875rem;
  font-weight: 700;
}
.erp-details > summary::-webkit-details-marker { display: none; }
.erp-details > summary::after { content: "+"; color: #64748b; font-size: 1.125rem; font-weight: 500; }
.erp-details[open] > summary { border-bottom: 1px solid var(--erp-border); background: #eff8f1; }
.erp-details[open] > summary::after { content: "−"; }
.erp-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #baddc4;
  background: #eff8f1;
  padding: .625rem 1rem;
}
.erp-kpi-strip {
  overflow: hidden;
  border: 1px solid var(--erp-border);
  border-radius: .875rem;
  background: #fff;
}
.erp-kpi-strip > a {
  border: 0 !important;
  border-right: 1px solid var(--erp-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem !important;
}
.erp-kpi-strip > a:last-child { border-right: 0 !important; }
.erp-kpi-strip > a:hover { background: #eff8f1 !important; box-shadow: inset 0 -3px 0 var(--brand-accent) !important; }
.erp-kpi-strip > a p:nth-child(2) { margin-top: .4rem !important; font-size: 1.5rem !important; }

@media (max-width: 639px) {
  .erp-page-actions { width: 100%; justify-content: flex-start; }
  .erp-action-primary { flex: 1 1 auto; }
  .erp-action-secondary { padding-inline: .75rem; }
  .erp-kpi-strip > a { border-right: 0 !important; border-bottom: 1px solid var(--erp-border) !important; }
  .erp-kpi-strip > a:last-child { border-bottom: 0 !important; }
}

/* Warm-neutrale Tailwind-Aliasse: vorhandene Templates erben das Branding zentral. */
.text-slate-900, .text-slate-800 { color: var(--erp-text) !important; }
.text-slate-700 { color: var(--erp-text-secondary) !important; }
.text-slate-600 { color: #465b4e !important; }
.text-slate-500, .text-slate-400 { color: var(--erp-muted) !important; }
.bg-slate-50 { background-color: #f3f6f2 !important; }
.bg-slate-100 { background-color: #e8eee9 !important; }
.bg-slate-200 { background-color: #d7e0d9 !important; }
.border-slate-100 { border-color: #e1e9e3 !important; }
.border-slate-200 { border-color: var(--erp-border) !important; }
.border-slate-300 { border-color: var(--erp-border-strong) !important; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #e1e9e3 !important; }

.bg-forest-50 { background-color: #eff8f1 !important; }
.bg-forest-100 { background-color: #dcefe1 !important; }
.bg-forest-700 { background-color: var(--brand-dark-muted) !important; }
.bg-forest-800 { background-color: var(--brand-primary-hover) !important; }
.bg-forest-900 { background-color: var(--brand-dark) !important; }
.text-forest-600 { color: var(--brand-primary) !important; }
.text-forest-700, .text-forest-800, .text-forest-900 { color: var(--brand-dark-muted) !important; }
.border-forest-100, .border-forest-200 { border-color: #baddc4 !important; }
.border-forest-300, .border-forest-400, .border-forest-500, .border-forest-600 { border-color: #8ec49d !important; }

/* Semantische Zustände mit AA-tauglichen Textfarben. */
.bg-emerald-50, .bg-emerald-100 { background-color: #e6f3e9 !important; }
.text-emerald-700, .text-emerald-800, .text-emerald-900 { color: #1f603e !important; }
.border-emerald-100, .border-emerald-200, .border-emerald-300 { border-color: #acd3b8 !important; }
.bg-amber-50, .bg-amber-100 { background-color: #fff4d6 !important; }
.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900 { color: #77510a !important; }
.border-amber-200, .border-amber-400 { border-color: #e7c875 !important; }
.bg-red-50, .bg-red-100 { background-color: #fbe9e6 !important; }
.text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900 { color: #a33024 !important; }
.border-red-100, .border-red-200, .border-red-300, .border-red-400 { border-color: #e7aca3 !important; }
.bg-sky-50, .bg-violet-50 { background-color: #e8f2eb !important; }
.text-sky-700, .text-sky-900, .text-violet-600, .text-violet-700 { color: var(--brand-primary) !important; }
.border-sky-200 { border-color: #baddc4 !important; }

/* Primär-, Sekundär- und Gefahraktionen unabhängig vom Einzeltemplate. */
.erp-content a[class~="bg-forest-700"],
.erp-content a[class~="bg-forest-800"],
.erp-content button[class~="bg-forest-700"],
.erp-content button[class~="bg-forest-800"],
.erp-header button[class~="bg-forest-700"] {
  min-height: 2.625rem;
  border: 1px solid var(--brand-dark-muted) !important;
  border-radius: .75rem !important;
  background: var(--brand-dark-muted) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(13,34,25,.08);
}
.erp-content a[class~="bg-forest-700"]:hover,
.erp-content a[class~="bg-forest-800"]:hover,
.erp-content button[class~="bg-forest-700"]:hover:not(:disabled),
.erp-content button[class~="bg-forest-800"]:hover:not(:disabled),
.erp-header button[class~="bg-forest-700"]:hover:not(:disabled) {
  border-color: var(--brand-primary-hover) !important;
  background: var(--brand-primary-hover) !important;
  color: #fff !important;
}
.erp-content a[class~="bg-red-600"],
.erp-content a[class~="bg-red-700"],
.erp-content button[class~="bg-red-600"],
.erp-content button[class~="bg-red-700"] {
  border-color: #a33024 !important;
  background: #a33024 !important;
  color: #fff !important;
}
.erp-content a[class~="border-slate-200"][class~="bg-white"],
.erp-content button[class~="border-slate-200"][class~="bg-white"] {
  color: var(--erp-text-secondary) !important;
}

/* Pill-Badges bleiben kompakt und erhalten klare Konturen. */
.erp-content .rounded-full[class*="bg-"]:not(.erp-avatar),
.erp-header .rounded-full[class*="bg-"]:not(.erp-avatar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.625rem;
  border: 1px solid currentColor;
  line-height: 1.1;
}

.erp-profile-link,
.erp-avatar {
  display: inline-flex;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.erp-profile-link { border-radius: 9999px; }

/* Ladefeedback für jede HTMX-Aktion. */
.htmx-request button:not(:disabled),
button.htmx-request:not(:disabled),
a.htmx-request {
  cursor: wait !important;
  opacity: .72;
  pointer-events: none;
}
.htmx-request button:not(.allow-wrap)::after,
button.htmx-request:not(.allow-wrap)::after,
a.htmx-request:not(.allow-wrap)::after {
  content: "";
  width: .8rem;
  height: .8rem;
  margin-left: .45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: erp-spin .7s linear infinite;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }

.erp-login {
  background:
    radial-gradient(circle at 12% 8%, rgba(145,201,29,.16), transparent 28rem),
    linear-gradient(145deg, #eff8f1 0%, var(--erp-canvas) 62%);
}
.erp-login-header {
  background:
    radial-gradient(circle at 88% -30%, rgba(179,223,68,.18), transparent 13rem),
    linear-gradient(135deg, var(--brand-dark), var(--brand-primary-hover)) !important;
}

/* Horizontale Datenbereiche bleiben auf Notebook und Mobilgeräten bedienbar. */
.erp-content .overflow-x-auto {
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #8ec49d transparent;
}
.erp-content .overflow-x-auto > table {
  width: 100%;
  min-width: 42rem;
}

/* Grid-Inhalte dürfen ihre Spalte nicht über die Seitenbreite hinaus aufziehen. */
.erp-content .grid > * { min-width: 0; }

.erp-content thead th:last-child:empty {
  min-width: 5.5rem;
  padding-right: 1.25rem;
  text-align: right;
}

@media (max-width: 1023px) {
  .erp-header { padding-inline: 1rem !important; }
  .erp-content { max-width: 100%; }
  .erp-page-actions { flex-wrap: wrap; }
}

@media (max-width: 639px) {
  .erp-content h1.text-3xl { font-size: 1.5rem !important; line-height: 1.85rem !important; }
  .erp-content section[class*="p-6"],
  .erp-content article[class*="p-6"] { padding: 1rem !important; }
  .erp-modal > div { max-height: calc(100dvh - 1rem); }
  .erp-modal form > div:last-child[class*="flex"] { flex-wrap: wrap; }
  .erp-modal form > div:last-child[class*="flex"] > * { flex: 1 1 auto; }
}

/* Tastaturbedienung und Bewegung. */
:focus-visible { outline: 3px solid var(--brand-primary) !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}