.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--ui-space-1); min-height: var(--ui-touch-min); min-width: var(--ui-touch-min); padding: var(--ui-space-1) var(--ui-space-3); border: 1px solid var(--wa-blue); border-radius: var(--wa-radius); font-weight: var(--ui-font-weight-button); font-size: var(--ui-font-size-label); line-height: var(--ui-line-height-label); cursor: pointer; background: var(--ui-surface); color: var(--wa-blue-deep); --wa-dot: var(--ui-action); text-decoration: none; }
.button:hover { background: var(--wa-blue-tint); border-color: var(--wa-blue-deep); color: var(--wa-blue-deep); --wa-dot: var(--ui-action); }
.button-primary { background: var(--ui-action); color: var(--ui-on-action); border-color: var(--ui-action); --wa-dot: var(--wa-dot-on-blue); }
.button-primary:hover { background: var(--ui-action-hover); border-color: var(--ui-action-hover); color: var(--ui-on-action); --wa-dot: var(--wa-dot-on-blue); }
.button-text { background: var(--ui-surface); color: var(--ui-text); --wa-dot: var(--ui-action); border-color: transparent; text-decoration: underline; text-underline-offset: .2em; }
.button:active:not(:disabled) { background: var(--ui-surface-subtle); border-color: var(--wa-blue-deep); color: var(--wa-blue-deep); --wa-dot: var(--ui-action); box-shadow: inset 0 0 0 var(--ui-focus-width) var(--wa-blue-deep); }
.button-primary:active:not(:disabled) { background: var(--ui-action-hover); color: var(--ui-on-action); border-color: var(--ui-action-hover); --wa-dot: var(--wa-dot-on-blue); box-shadow: inset 0 0 0 var(--ui-focus-width) var(--ui-on-action); }
.button:disabled { color: var(--ui-text-muted); background: var(--ui-surface); border-color: var(--ui-border-control); --wa-dot: var(--ui-text-muted); border-style: dashed; cursor: not-allowed; }
.button[aria-busy="true"] { cursor: progress; }
.button[aria-busy="true"]::after { content: 'Bitte warten …'; }
.actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); padding: var(--ui-space-1); }
.panel { padding: var(--ui-space-3); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); background: var(--ui-surface); min-width: 0; }
.badge, .notice, .field-error { color: var(--ui-text); background: var(--ui-surface); }
.badge { display: inline-flex; align-items: center; gap: var(--ui-space-1); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: 0 var(--ui-space-1); white-space: nowrap; }
.notice { border: 1px solid var(--ui-border-control); border-radius: var(--wa-radius); padding: var(--ui-space-2); }
.notice:empty { display: none; }
.field { display: grid; align-content: start; gap: var(--ui-space-1); margin-bottom: var(--ui-space-3); }
label, legend { font-weight: var(--ui-font-weight-label); font-size: var(--ui-font-size-label); line-height: var(--ui-line-height-label); }
input, select, textarea { width: 100%; min-width: 0; min-height: var(--ui-touch-min); padding: var(--ui-space-1) var(--ui-space-2); border: 1px solid var(--ui-border-control); border-radius: var(--wa-radius); background: var(--ui-surface); color: var(--ui-text); }
[aria-invalid="true"] { border-width: 2px; }
.field-error { font-weight: var(--ui-font-weight-error); }
.form { max-width: var(--ui-form-max); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: var(--ui-space-2); padding: 0; }
.brand-link { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-width: var(--ui-touch-min); min-height: var(--ui-touch-min); color: var(--ui-text); padding: var(--ui-space-2); text-decoration: none; flex-wrap: wrap; }
/* Wortmarke: 112/373 Punktdurchmesser; Freiraum je Seite > 0,30 × Bildhöhe. */
.wordmark { display: block; height: 1.75rem; width: auto; flex-shrink: 0; margin: calc(1.75rem * 112 / 373); }
.login-page { background: var(--ui-surface); }
.login-main { width: 100%; max-width: var(--ui-form-max); margin: auto; padding: var(--ui-space-6) var(--ui-space-2); }
.login-title { font-size: var(--ui-font-size-login-display-desktop); line-height: var(--ui-line-height-login-display); }
.login-title .display-accent { font-family: var(--wa-display); font-style: italic; font-weight: var(--ui-font-weight-accent); color: var(--ui-text); }
/* Markenbühne und Schutzzone: 120/782,5 des skalierten Logos, großzügig gepolstert. */
.logo-stage { display: grid; align-items: center; aspect-ratio: 1; max-width: 14rem; margin: auto; padding: var(--ui-space-4); }
.logo-motion { display: block; width: 100%; height: auto; overflow: visible; }
.logo-motion g { stroke: var(--ui-text); }
.lm-dot { fill: var(--ui-action); transform-box: fill-box; transform-origin: 50% 100%; }