/* Layout für E1 (Anmeldung, Start). Farben und Maße nur über die Tokens in tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-4); }
.brand { font-weight: 650; font-size: var(--text-lg); color: var(--color-primary); margin-bottom: var(--space-6); }
h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
        box-shadow: var(--shadow-card); padding: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
label { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }
input[type="email"], input[type="password"] {
  font: inherit; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
button { font: inherit; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
         border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
button.primary { margin-top: var(--space-4); background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.actions form { margin: 0; }
.muted { color: var(--color-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.alert { color: var(--color-danger); background: var(--color-highlight-bg); border-radius: var(--radius-sm); padding: var(--space-3); }
a { color: var(--color-primary); }