/* Design "ARES Enterprise Klar" – Stifteverwaltung
   Basis: Design-Template ares-2 (vom Nutzer gewählt). Die :root-Farben, Schriften und Radien sind
   unverändert übernommen; ergänzt wurden nur Soft-Farben für Zustände sowie Klassen, die die
   Stifteverwaltung braucht (.btn-danger, .btn-sm, .label, .hint, .field-error, .swatch, .skeleton,
   .alert-Struktur, .card.is-interactive).
   Markenwerte laut ARES-Markenleitfaden:
     Lila #5A2A6E (~22 %: Navigation, Überschriften, Strukturflächen)
     Dunkellila #391846 (sehr dunkle Flächen)
     Grün #DBF207 (~8 %: ausschließlich Akzente, Status, Signal-CTA – nie große Flächen, nie Text auf Weiß)
     Linien #E0DEDB, ~70 % Weiß / Neutralgrau.
   Formsprache: eckig (Radius 0), gerade Linien, keine Verläufe, kaum Schatten.
   Schriften: Montserrat (Überschriften 600–700), Inter (UI/Fließtext 400–500),
   IBM Plex Mono (technische Werte) – jeweils mit System-Fallback, offline-fähig.
   Zum Anpassen der Marke NUR diesen :root-Block ändern. */
:root {
  /* ---- Pflicht-Farben (WCAG AA geprüft, siehe design.md) ---- */
  --color-primary: #5A2A6E;          /* ARES-Lila – Primary Buttons, Navigation, aktive Elemente (10,5:1 mit Weiß) */
  --color-primary-hover: #391846;    /* Dunkellila – Hover, dunkle Strukturflächen */
  --color-on-primary: #FFFFFF;       /* Text auf Lila (10,5:1) */
  --color-secondary: #391846;        /* Dunkellila – Secondary-Text, Rahmen; Secondary-Button = Weiß mit Lila-Kontur */
  --color-accent: #DBF207;           /* ARES-Grün – NUR Akzent/Status/aktive Markierung; Text darauf: --color-on-accent (12:1) */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text: #1B1320;             /* fast Schwarz mit Lila-Stich, 18,1:1 auf Weiß */
  --color-text-muted: #5F5866;       /* 6,8:1 auf Weiß, 6,2:1 auf Grau */
  --color-border: #E0DEDB;           /* Linien/Trenner laut Marke (dekorativ) */
  --color-success: #4A6200;          /* dunkles Oliv – Text/Symbole für Erfolg (6,9:1 auf Weiß) */
  --color-warning: #8A5A00;          /* 5,9:1 auf Weiß */
  --color-error: #B7322A;            /* 6,0:1 auf Weiß */

  /* ---- Ergänzende Farben ---- */
  --color-primary-dark: #391846;     /* Alias für sehr dunkle Flächen */
  --color-primary-soft: #F3EEF6;     /* Lila-Tönung: Hover, Auswahl, aktive Zeile */
  --color-on-accent: #391846;        /* dunkle Schrift auf Grün (12:1) */
  --color-accent-soft: #F4FACD;      /* helle Grün-Tönung */
  --color-on-dark-muted: #D8C7E2;    /* gedämpfter Text auf Lila (6,6:1) */
  --color-border-on-dark: #8E65A1;   /* Linien auf Lila-Flächen */
  --color-surface-alt: #F5F4F2;      /* sehr helles Neutralgrau – Tabellenkopf, Skeleton, Sekundärflächen */
  --color-border-strong: #7C7583;    /* Eingabefelder, Farbfeld-Rahmen (4,4:1 auf Weiß – UI ≥ 3:1) */
  /* Soft-Flächen für Zustands-Badges und Hinweise (Text darauf ≥ 4,5:1) */
  --color-success-soft: #F4FACD;     /* Oliv #4A6200 darauf 6,3:1 */
  --color-warning-soft: #FFF4DB;     /* #8A5A00 darauf 5,4:1 */
  --color-error-soft: #FDE9E7;       /* #B7322A darauf 5,3:1 */
  --color-info: #5A2A6E;
  --color-info-soft: #F3EEF6;        /* Lila #5A2A6E darauf 9,6:1 */

  /* ---- Schrift (System-Fallback, offline-fähig) ---- */
  --font-heading: Montserrat, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem;
  --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-kpi: 2.5rem;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Abstände / Radien (eckig: überall 0) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 0; --radius: 0; --radius-lg: 0; --radius-pill: 0;

  /* ---- Schatten (praktisch keine) ---- */
  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(57, 24, 70, .08);
  --shadow-lg: 0 6px 18px rgba(57, 24, 70, .14);   /* nur für Overlays/Dialoge */
  --scrim: rgba(57, 24, 70, .55);                  /* Abdunkelung hinter Dialogen */

  /* ---- Übergänge / Fokus ---- */
  --transition: 120ms ease;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #5A2A6E;           /* auf hellen Flächen */
  --focus-ring-on-dark: 0 0 0 2px #391846, 0 0 0 4px #DBF207;   /* auf Lila-Flächen */

  /* ---- Hintergrund: schlicht, einfarbig weiß, kein Verlauf ---- */
  --bg-page: none;
}

/* ================= Basis ================= */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--fs-base); font-weight: var(--fw-normal); line-height: 1.55;
  color: var(--color-text); min-height: 100vh;
  background-color: var(--color-bg); background-image: var(--bg-page); background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-primary); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
code, kbd, .mono-value { font-family: var(--font-mono); }
@media (max-width: 480px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 20px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Primary: Lila Fläche + weiße Schrift */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
/* Secondary: Weiß mit Lila-Kontur – zurückhaltend */
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--color-primary-soft); border-color: var(--color-primary-hover); color: var(--color-primary-hover); }
/* Ghost: nur Text, bei Hover Lila-Tönung */
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary-hover); }
/* Danger (Löschen): Weiß mit roter Kontur, bei Hover rote Fläche */
.btn-danger { background: var(--color-surface); color: var(--color-error); border-color: var(--color-error); }
.btn-danger:hover:not(:disabled) { background: var(--color-error); color: var(--color-surface); border-color: var(--color-error); }
/* Signal-CTA: Grün + dunkle Schrift – nur auf dunklen Lila-Flächen */
.btn-signal { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn-signal:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-on-accent); }
.btn-signal:focus-visible { box-shadow: var(--focus-ring-on-dark); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); }

/* ================= Karte: eckig, 1 px Linie, kein Schatten ================= */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: none;
}
.card.is-interactive { transition: border-color var(--transition), box-shadow var(--transition); }
.card.is-interactive:hover { border-color: var(--color-primary); box-shadow: inset 0 3px 0 var(--color-primary); }

/* ================= Eingabefelder ================= */
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover { border-color: var(--color-secondary); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input:disabled, .input[readonly] { background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed; }
/* Fehler: rote Kontur + Balken links (nicht nur Farbe) – Meldung steht zusätzlich als Text darunter */
.input[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; padding: 9px 11px; box-shadow: inset 4px 0 0 var(--color-error); }
textarea.input { min-height: 120px; resize: vertical; }

/* ================= Badge (immer mit Text; Symbol ergänzt die Farbe) ================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.5; white-space: nowrap;
  background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border-strong);
}
.badge-info    { background: var(--color-info-soft); color: var(--color-info); border-color: var(--color-info); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.badge-error   { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }

/* ================= Hinweis (alert): Balken links, Symbol + Text ================= */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); border: 1px solid var(--color-border); border-left-width: 6px;
  background: var(--color-surface-alt); color: var(--color-text);
}
.alert > .alert-icon { flex: none; font-weight: var(--fw-bold); line-height: 1.55; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: var(--fw-semibold); margin: 0 0 2px; }
.alert-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.alert-info    { border-color: var(--color-info); background: var(--color-info-soft); }
.alert-info .alert-icon { color: var(--color-info); }
.alert-success { border-color: var(--color-success); border-left-color: var(--color-accent); background: var(--color-success-soft); }
.alert-success .alert-icon { color: var(--color-success); }
.alert-warning { border-color: var(--color-warning); background: var(--color-warning-soft); }
.alert-warning .alert-icon { color: var(--color-warning); }
.alert-error   { border-color: var(--color-error); background: var(--color-error-soft); }
.alert-error .alert-icon { color: var(--color-error); }

/* ================= Zusatzkomponenten Stifteverwaltung ================= */
.label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); color: var(--color-text); }
.label .req { color: var(--color-error); }
.hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.field-error { font-size: var(--fs-sm); color: var(--color-error); font-weight: var(--fw-medium); margin: var(--space-1) 0 0; }
/* Farbfeld: Wert kommt per Inline-Variable --c (Daten, keine Designfarbe); Rahmen hält Weiß/Hellgelb sichtbar */
.swatch {
  display: inline-block; flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--c, var(--color-border)); border: 1px solid var(--color-border-strong);
}
.swatch-lg { width: 100%; height: 72px; border: 0; border-bottom: 1px solid var(--color-border); }
.skeleton {
  display: block; height: 14px; border-radius: var(--radius-sm); background: var(--color-surface-alt);
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }