/* Wimpel – Bausteine für Django-Templates (gleiches Markup wie die Komponenten im Design System).
   Setzt wimpel-fonts.css und wimpel-tokens.css voraus; in der Tailwind-Eingabe nach den Tokens importieren. */


/* Hilfsklasse: nur für Screenreader sichtbar */
.wm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Logo */
.wm-logo { display: block; flex: none; }
.wm-logo-bar { fill: var(--w-mark-bar); }
.wm-logo-left { fill: var(--w-mark-left); }
.wm-logo-right { fill: var(--w-mark-right); }
.wm-logo-word { fill: var(--w-text); }
.wm-logo-einfarbig .wm-logo-bar, .wm-logo-einfarbig .wm-logo-left, .wm-logo-einfarbig .wm-logo-right, .wm-logo-einfarbig .wm-logo-word { fill: currentColor; }

/* Wimpelkette */
.wm-kette { display: block; width: 100%; height: auto; }
.wm-kette-leine { stroke: var(--w-mark-bar); }
.wm-kette-1 { fill: var(--w-mark-left); }
.wm-kette-2 { fill: var(--w-mark-right); }
.wm-kette-3 { fill: var(--w-mark-left-soft); }
.wm-kette-4 { fill: var(--w-mark-right-soft); }

/* Icons (Strichstärke wie Lucide) */
.wm-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Schaltfläche */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--w-space-2);
  box-sizing: border-box; min-height: var(--w-touch-min); padding: 0 var(--w-space-4);
  border: 1px solid transparent; border-radius: var(--w-radius-md);
  font: inherit; font-size: var(--w-text-base); font-weight: 700; line-height: var(--w-leading-snug);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms cubic-bezier(.2, .7, .2, 1), border-color 120ms cubic-bezier(.2, .7, .2, 1);
}
.wm-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--w-focus-ring); }
.wm-btn:disabled, .wm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wm-btn-primary { background: var(--w-primary); color: var(--w-on-primary); }
.wm-btn-primary:hover:not(:disabled) { background: var(--w-primary-hover); }
.wm-btn-secondary { background: var(--w-surface); color: var(--w-primary-text); border-color: var(--w-border-input); }
.wm-btn-secondary:hover:not(:disabled) { background: var(--w-primary-soft); }
.wm-btn-quiet { background: transparent; color: var(--w-primary-text); }
.wm-btn-quiet:hover:not(:disabled) { background: var(--w-primary-soft); }
.wm-btn-critical { background: var(--w-critical); color: var(--w-on-primary); }
.wm-btn-critical:hover:not(:disabled) { filter: brightness(.92); }
.wm-btn-sm { position: relative; min-height: 36px; padding: 0 var(--w-space-3); font-size: var(--w-text-sm); }
.wm-btn-sm::before { content: ""; position: absolute; inset: -4px 0; } /* Trefferfläche bleibt 44 px hoch */

/* Formularfeld */
.wm-field { display: flex; flex-direction: column; gap: var(--w-space-2); }
.wm-label { font-size: var(--w-text-sm); font-weight: 700; line-height: var(--w-leading-snug); color: var(--w-text); }
.wm-optional { font-weight: 400; color: var(--w-text-muted); }
.wm-hint { margin: 0; font-size: var(--w-text-sm); line-height: var(--w-leading-snug); color: var(--w-text-muted); }
.wm-error { display: flex; gap: var(--w-space-2); align-items: flex-start; margin: 0; font-size: var(--w-text-sm); font-weight: 700; line-height: var(--w-leading-snug); color: var(--w-critical); }
.wm-error .wm-icon { width: 18px; height: 18px; }
.wm-input {
  box-sizing: border-box; width: 100%; min-height: var(--w-touch-min); padding: var(--w-space-2) var(--w-space-3);
  border: 1px solid var(--w-border-input); border-radius: var(--w-radius-md);
  background: var(--w-surface); color: var(--w-text);
  font: inherit; font-size: var(--w-text-base); line-height: var(--w-leading-snug);
}
textarea.wm-input { min-height: 6rem; resize: vertical; line-height: var(--w-leading-body); }
.wm-input::placeholder { color: var(--w-text-muted); }
.wm-input:focus-visible { outline: 2px solid transparent; border-color: var(--w-focus); box-shadow: var(--w-focus-ring); }
.wm-input-mono { font-family: var(--w-font-mono); letter-spacing: .02em; }
.wm-input-error { border-color: var(--w-critical); box-shadow: inset 0 0 0 1px var(--w-critical); }

/* Badge */
.wm-badge { display: inline-flex; align-items: center; padding: var(--w-space-1) var(--w-space-2); border-radius: var(--w-radius-sm); font-size: var(--w-text-sm); font-weight: 700; line-height: var(--w-leading-snug); white-space: nowrap; }
.wm-badge-neutral { background: var(--w-border); color: var(--w-text-muted); }
.wm-badge-primary { background: var(--w-primary-soft); color: var(--w-primary-text); }
.wm-badge-success { background: var(--w-success-soft); color: var(--w-success); }
.wm-badge-warning { background: var(--w-warning-soft); color: var(--w-warning); }
.wm-badge-critical { background: var(--w-critical-soft); color: var(--w-critical); }

/* Hinweis */
.wm-notice { display: flex; gap: var(--w-space-3); padding: var(--w-space-4); border-radius: var(--w-radius-md); color: var(--w-text); font-size: var(--w-text-base); line-height: var(--w-leading-body); }
.wm-notice > .wm-icon { margin-top: 3px; }
.wm-notice-body { min-width: 0; }
.wm-notice-title { margin: 0; font-weight: 700; }
.wm-notice-text > :first-child { margin-top: 0; }
.wm-notice-text > :last-child { margin-bottom: 0; }
.wm-notice-action { margin-top: var(--w-space-3); display: flex; flex-wrap: wrap; gap: var(--w-space-3); }
.wm-notice-info { background: var(--w-primary-soft); }
.wm-notice-info > .wm-icon { color: var(--w-primary-text); }
.wm-notice-success { background: var(--w-success-soft); }
.wm-notice-success > .wm-icon { color: var(--w-success); }
.wm-notice-warning { background: var(--w-warning-soft); }
.wm-notice-warning > .wm-icon { color: var(--w-warning); }
.wm-notice-critical { background: var(--w-critical-soft); }
.wm-notice-critical > .wm-icon { color: var(--w-critical); }

/* Beträge und Kennungen */
.wm-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-amount-strong { font-weight: 700; }
.wm-amount-negative { color: var(--w-critical); }
.wm-iban { font-family: var(--w-font-mono); letter-spacing: .02em; white-space: nowrap; }