/*
 * Komponenten-Bibliothek — Grafikarchiv (Phase 2, Querschnitt Design-System)
 * --------------------------------------------------------------------------
 * Wiederverwendbare, framework-freie Komponenten-Klassen auf Basis der
 * Design-Tokens (tokens.css). Rein additiv:
 *   - Alle Klassen tragen das Praefix .ds-  -> KEINE Kollision mit Bestand
 *     (.btn, .message, .wb-*, …). Bestandsseiten aendern sich nicht.
 * Neue Seiten/Apps setzen sich aus diesen Bausteinen zusammen statt copy-paste.
 * Sichtbarer Katalog: /styleguide/
 */

/* ---------- Button ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-heading);
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius);
  background-color: var(--ds-color-accent);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ds-btn:hover {
  background-color: #3a6cd9;
  transform: translateY(-1px);
}
.ds-btn:focus-visible {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
}
.ds-btn:disabled,
.ds-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ds-btn--secondary {
  background-color: var(--ds-bg-muted);
  color: var(--ds-text);
  border-color: var(--ds-border);
}
.ds-btn--secondary:hover {
  background-color: var(--ds-border);
}

/* ---------- Card ---------- */
.ds-card {
  background-color: var(--ds-bg-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-5);
}
.ds-card__title {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: bold;
  color: var(--ds-text);
  margin: 0 0 var(--ds-space-2);
}
.ds-card__body {
  font-family: var(--ds-font-body);
  font-size: 14px;
  color: var(--ds-text-secondary);
}

/* ---------- Formularfeld ---------- */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  margin-bottom: var(--ds-space-4);
}
.ds-field__label {
  font-family: var(--ds-font-heading);
  font-size: 13px;
  color: var(--ds-text);
}
.ds-field__input {
  font-family: var(--ds-font-body);
  font-size: 14px;
  color: var(--ds-text);
  padding: 9px 12px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius);
  background-color: var(--ds-bg-surface);
}
.ds-field__input:focus {
  outline: none;
  border-color: var(--ds-color-accent);
  box-shadow: 0 0 0 3px var(--ds-color-accent-border);
}
.ds-field__hint {
  font-family: var(--ds-font-body);
  font-size: 12px;
  color: var(--ds-text-muted);
}

/* ---------- Banner / Hinweis ---------- */
.ds-banner {
  padding: 15px 20px;
  border-radius: var(--ds-radius);
  border: 1px solid transparent;
  font-family: var(--ds-font-body);
  font-size: 14px;
}
.ds-banner--success {
  background-color: var(--ds-success-bg);
  color: var(--ds-success-text);
  border-color: var(--ds-success-border);
}
.ds-banner--info {
  background-color: var(--ds-info-bg);
  color: var(--ds-info-text);
  border-color: var(--ds-info-border);
}
.ds-banner--warning {
  background-color: var(--ds-warning-bg);
  color: var(--ds-warning-text);
  border-color: var(--ds-warning-border);
}
.ds-banner--error {
  background-color: var(--ds-error-bg);
  color: var(--ds-error-text);
  border-color: var(--ds-error-border);
}

/* ---------- Seiten-Header ---------- */
.ds-page-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-6);
  background-color: var(--ds-bg-surface);
  border-bottom: 1px solid var(--ds-border);
}
.ds-page-header__title {
  font-family: var(--ds-font-heading);
  font-size: 18px;
  font-weight: bold;
  color: var(--ds-text);
  margin: 0;
}
.ds-page-header__title .rnd-icon {
  color: var(--ds-color-accent);
  margin-right: var(--ds-space-1);
}
.ds-page-header__badge {
  font-family: var(--ds-font-heading);
  font-size: 11px;
  background-color: var(--ds-color-accent-tint);
  color: var(--ds-color-accent);
  border: 1px solid var(--ds-color-accent-border);
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
}

/* ---------- Inline-Icons (Lucide-SVG, ADR-0013) ---------- */
/* Ersatz fuer Font-Awesome-<i>. Skaliert mit der Schriftgroesse (1em) und faerbt
   sich ueber currentColor. Rendern via {% icon "name" %} bzw. window.rndIcon(). */
.rnd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* optisch mittig zur Textzeile */
  flex-shrink: 0;
}