/**
 * idf-inline-add — Button am Ende einer Liste, der einen neuen
 * Eintrag anlegt.
 *
 * Markup wird vom JS gerendert (siehe idf-inline-add.js):
 *   <div class="idf-inline-add">
 *     <button type="button" class="idf-inline-add-btn">
 *       <i class="fa-solid fa-plus"></i>
 *       <span>Neue Aufgabe hinzufügen</span>
 *     </button>
 *   </div>
 *
 * Voraussetzung: _shared/tokens/design-tokens/idf-tokens.css.
 *
 * Hover-Pattern wie in v1: dashed Border heller, Background tönt sich
 * leicht ein. Im Default leicht zurückhaltend, damit der Button als
 * "Bei Bedarf" und nicht als "Primary-Action" wirkt — die Primary-
 * Action ist die laufende Liste, der Button ist ihre Verlängerung.
 */

.idf-inline-add {
  padding: var(--space-3, 12px) var(--space-8, 32px) var(--space-5, 20px);
}

.idf-inline-add-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1.5px dashed var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: transparent;
  /* v0.2.0 (2026-05-06): color von var(--soft) (Brand-Braun) auf
     var(--mid) (neutrales Mid-Grau) gezogen — passt zum Tonalitäts-
     Konzept der dezenten Default-Buttons (Joerg-Review, Inline-Add
     wirkte vorher braun-stichig). Hover ändert nichts, war schon mid. */
  color: var(--mid, #555);
  font-family: inherit;
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-medium, 500);
  line-height: var(--leading-tight, 1);
  cursor: pointer;
  transition:
    border-color var(--motion-base, 120ms),
    color        var(--motion-base, 120ms),
    background   var(--motion-base, 120ms);
}

.idf-inline-add-btn:hover {
  border-color: var(--mid, #555);
  color:        var(--mid, #555);
  background:   var(--bg, #fafafa);
}

.idf-inline-add-btn:focus-visible {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: 2px;
}

.idf-inline-add-btn i {
  font-size: var(--font-md, 0.875rem);
}