/* ERGO Design System - Komponenten
   Alle Werte referenzieren die offiziellen Tokens aus tokens.css (doc-eds v2.6.0).
   Keine hartkodierten Farben oder Masse, damit ein Token-Update automatisch durchschlaegt. */

/* ============================================================
   BUTTON  (Quelle: --eds-component-button-*)
   Varianten: primary, secondary, tertiary, destructive
   Groessen: sm (32px), md (40px, Default), lg (48px)
   ============================================================ */

.eds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eds-component-button-md-gap);
  height: var(--eds-component-button-md-height);
  padding: 0 var(--eds-component-button-md-padding-horizontal);
  border-radius: var(--eds-component-button-md-border-radius);
  border: var(--eds-semantic-dimension-border-width-sm) solid transparent;
  font-family: var(--eds-font-primary);
  font-size: var(--eds-semantic-typography-font-size-xs); /* 16px Label */
  font-weight: var(--eds-semantic-typography-font-weight-demi);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.eds-button:focus-visible {
  outline: var(--eds-semantic-dimension-border-width-lg) solid var(--eds-semantic-color-border-brand-primary-default);
  outline-offset: 2px;
}

/* Groessen */
.eds-button--sm {
  height: var(--eds-component-button-sm-height);
  gap: var(--eds-component-button-sm-gap);
  border-radius: var(--eds-component-button-sm-border-radius);
}
.eds-button--lg {
  height: var(--eds-component-button-lg-height);
  gap: var(--eds-component-button-lg-gap);
  border-radius: var(--eds-component-button-lg-border-radius);
  padding: 0 var(--eds-component-button-lg-padding-horizontal);
  font-size: var(--eds-semantic-typography-font-size-sm); /* 18px */
}

/* Primary */
.eds-button--primary {
  background: var(--eds-component-button-primary-background-color-default);
  color: var(--eds-component-button-primary-label-color-default);
}
/* Jede :hover- und :active-Regel setzt die Schriftfarbe mit, auch wo das Token sich nicht aendert:
   `a:hover` aus base.css (0,1,1) schlaegt `.eds-button--primary` (0,1,0). Ohne eigene Farbe
   bekam ein Link-Knopf beim Ueberfahren die Linkfarbe #601028 auf fast gleichem Grund, die
   Schrift verschwand (Rueckmeldung 2026-10-15). */
.eds-button--primary:hover {
  background: var(--eds-component-button-primary-background-color-hover);
  color: var(--eds-component-button-primary-label-color-hover);
}
.eds-button--primary:active {
  background: var(--eds-component-button-primary-background-color-active);
  color: var(--eds-component-button-primary-label-color-active);
}

/* Secondary (Outline, Brand) */
.eds-button--secondary {
  background: transparent;
  border-color: var(--eds-component-button-secondary-border-color-default);
  color: var(--eds-component-button-secondary-label-color-default);
}
.eds-button--secondary:hover {
  border-color: var(--eds-component-button-secondary-border-color-hover);
  color: var(--eds-component-button-secondary-label-color-hover);
}
.eds-button--secondary:active {
  border-color: var(--eds-component-button-secondary-border-color-active);
  color: var(--eds-component-button-secondary-label-color-active);
}

/* Tertiary (Neutral) */
.eds-button--tertiary {
  background: var(--eds-component-button-tertiary-background-color-default);
  border-color: var(--eds-component-button-tertiary-border-color-default);
  color: var(--eds-component-button-tertiary-label-color-default);
}
.eds-button--tertiary:hover {
  background: var(--eds-component-button-tertiary-background-color-hover);
  border-color: var(--eds-component-button-tertiary-border-color-hover);
  color: var(--eds-component-button-tertiary-label-color-hover);
}
.eds-button--tertiary:active {
  background: var(--eds-component-button-tertiary-background-color-active);
  border-color: var(--eds-component-button-tertiary-border-color-active);
  color: var(--eds-component-button-tertiary-label-color-active);
}

/* Destructive */
.eds-button--destructive {
  background: var(--eds-component-button-destructive-primary-background-color-default);
  color: var(--eds-component-button-destructive-primary-label-color-default);
}
.eds-button--destructive:hover {
  background: var(--eds-component-button-destructive-primary-background-color-hover);
  color: var(--eds-component-button-destructive-primary-label-color-hover);
}
.eds-button--destructive:active {
  background: var(--eds-component-button-destructive-primary-background-color-active);
  color: var(--eds-component-button-destructive-primary-label-color-active);
}

/* Disabled (generisch fuer gefuellte Varianten) */
.eds-button:disabled, .eds-button[aria-disabled="true"] {
  background: var(--eds-component-button-primary-background-color-disabled);
  border-color: transparent;
  color: var(--eds-component-button-primary-label-color-disabled);
  cursor: not-allowed;
}
/* Disabled fuer Outline-Varianten */
.eds-button--secondary:disabled, .eds-button--tertiary:disabled {
  background: transparent;
  border-color: var(--eds-semantic-color-border-disabled);
  color: var(--eds-semantic-color-content-disabled);
}

/* ============================================================
   INPUT FIELD  (Quelle: --eds-component-input-field-* + semantic)
   ============================================================ */

.eds-field { display: flex; flex-direction: column; gap: var(--eds-semantic-dimension-gap-4-xs); }
.eds-field__label {
  font-size: var(--eds-semantic-typography-font-size-xs);
  color: var(--eds-semantic-color-content-secondary);
}
.eds-field__input {
  height: var(--eds-component-input-field-lg-height);
  padding: 0 var(--eds-semantic-dimension-gap-xs);
  border-radius: var(--eds-component-input-field-lg-border-radius);
  border: var(--eds-semantic-dimension-border-width-sm) solid var(--eds-semantic-color-border-primary-default);
  background: var(--eds-semantic-color-surface-primary-default);
  color: var(--eds-semantic-color-content-primary);
  font-family: var(--eds-font-primary);
  font-size: var(--eds-semantic-typography-font-size-xs);
}
.eds-field__input::placeholder { color: var(--eds-semantic-color-content-tertiary); }
.eds-field__input:hover  { border-color: var(--eds-semantic-color-border-primary-hover); }
.eds-field__input:focus  {
  outline: none;
  border-color: var(--eds-semantic-color-border-brand-primary-default);
  border-width: var(--eds-semantic-dimension-border-width-lg);
}
.eds-field__input:disabled {
  border-color: var(--eds-semantic-color-border-disabled);
  color: var(--eds-semantic-color-content-disabled);
  cursor: not-allowed;
}
.eds-field--error .eds-field__input { border-color: var(--eds-semantic-color-border-error-default); }
.eds-field__hint  { font-size: var(--eds-semantic-typography-font-size-xs); color: var(--eds-semantic-color-content-tertiary); }
.eds-field--error .eds-field__hint { color: var(--eds-semantic-color-content-error-default); }

/* ============================================================
   CARD  (Quelle: semantic surface/border/radius)
   ============================================================ */

.eds-card {
  background: var(--eds-semantic-color-surface-primary-default);
  border: var(--eds-semantic-dimension-border-width-sm) solid var(--eds-semantic-color-border-primary-default);
  border-radius: var(--eds-semantic-dimension-border-radius-md);
  padding: var(--eds-semantic-dimension-gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--eds-semantic-dimension-gap-2-xs);
}
.eds-card__title { font-size: var(--eds-semantic-typography-font-size-lg); line-height: var(--eds-semantic-typography-line-height-lg); margin: 0; }
.eds-card__body  { color: var(--eds-semantic-color-content-secondary); margin: 0; }

/* ============================================================
   ALERT / STATUS  (Quelle: semantic status content + background)
   ============================================================ */

/* Kein dicker Akzent-Strich links mehr (Live-Feedback 19.08.: "typisches
   Claude-KI-Design, nicht Design-Best-Practice"). Ein durchgehender, duenner
   Rahmen in derselben Tonlage wie die Flaeche wirkt ruhiger und ist naeher an
   modernen Status-Karten (Notion, Linear) als an einer klassischen
   Bootstrap-Warnleiste. Zusaetzlich groesserer Radius und groessere Schrift,
   passend zum Rest der Anwendung an diesem Tag ("alles ist immer noch zu
   klein"). */
.eds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--eds-semantic-dimension-gap-2-xs);
  padding: var(--eds-semantic-dimension-gap-sm);
  border: 1px solid transparent;
  border-radius: var(--eds-semantic-dimension-border-radius-md);
  font-size: var(--eds-semantic-typography-font-size-sm);
  color: var(--eds-semantic-color-content-primary);
}
.eds-alert--error   { background: var(--eds-semantic-color-background-extended-red);    border-color: var(--eds-semantic-color-border-error-default); }
.eds-alert--success { background: var(--eds-semantic-color-background-extended-green);  border-color: var(--eds-semantic-color-content-extended-green-on-subtle-surface); }
.eds-alert--info    { background: var(--eds-semantic-color-background-extended-blue);   border-color: var(--eds-semantic-color-border-extended-blue); }
.eds-alert--warning { background: var(--eds-semantic-color-background-extended-orange); border-color: var(--eds-semantic-color-content-extended-orange-on-subtle-surface); }
.eds-alert__title { font-weight: var(--eds-semantic-typography-font-weight-bold); }

/* ============================================================
   CHIP / BADGE  (Quelle: semantic accent/brand)
   ============================================================ */

.eds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--eds-semantic-dimension-gap-4-xs);
  height: 28px;
  padding: 0 var(--eds-semantic-dimension-gap-2-xs);
  border-radius: var(--eds-semantic-dimension-border-radius-max);
  background: var(--eds-semantic-color-background-brand-primary-subtle);
  color: var(--eds-semantic-color-content-brand-primary-default);
  font-size: var(--eds-semantic-typography-font-size-xs);
  border: var(--eds-semantic-dimension-border-width-sm) solid var(--eds-semantic-color-border-brand-primary-subtle-default);
}