/* Design "ARES Enterprise Klar" – IT-Lizenzbestellung
   Markenwerte laut ARES-Markenleitfaden (vom Nutzer bestätigt):
     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/Signal-CTA; 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 (Kopfzeile-Unterlage, CTA-Band) */
  --color-primary-soft: #F3EEF6;     /* Lila-Tönung: Hover, Auswahl, "Controlling"-Badge */
  --color-on-accent: #391846;        /* dunkle Schrift auf Grün (12:1) */
  --color-accent-soft: #F4FACD;      /* helle Grün-Tönung: Erfolgs-Hinweise, Badge-Hintergrund */
  --color-on-dark-muted: #D8C7E2;    /* gedämpfter Text auf Lila (6,6:1) bzw. Dunkellila (9,5:1) */
  --color-border-on-dark: #8E65A1;   /* Linien auf Lila-Flächen */
  --color-surface-alt: #F5F4F2;      /* sehr helles Neutralgrau – Sekundärflächen, Tabellenkopf */
  --color-border-strong: #7C7583;    /* Eingabefelder (4,0:1 auf Grau, 4,4:1 auf Weiß – UI-Komponenten ≥ 3: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;
  --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 */

  /* ---- Ü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;
}

* { 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); }

/* ---- 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); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary-hover); }
/* Signal-CTA: Grün + dunkle Schrift – nur auf dunklen Lila-Flächen (z. B. "Abruf auslösen") */
.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); }

/* ---- 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;
}

/* ---- 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 { 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; }
.input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 3px 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-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }   /* Controlling */
.badge-primary { background: var(--color-primary-dark); color: var(--color-on-primary); border-color: var(--color-primary-dark); } /* Einkauf */
.badge-success { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-primary-dark); }    /* Abruf ausgelöst */
.badge-warning { background: #FFF4DB; color: var(--color-warning); border-color: var(--color-warning); }
.badge-error   { background: #FDE9E7; color: var(--color-error); border-color: var(--color-error); }

/* ---- Hinweisbox ---- */
.alert {
  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-success { border-color: var(--color-primary-dark); border-left-color: var(--color-accent); background: var(--color-accent-soft); }
.alert-warning { border-color: var(--color-warning); background: #FFF4DB; }
.alert-error   { border-color: var(--color-error);   background: #FDE9E7; }
.alert-info    { border-color: var(--color-primary); background: var(--color-primary-soft); }