/* Anmeldung nach Design Hub „Leitstand auf Papier“: Papier-Grund, zentrierte Karte, Serifentitel. Immer hell.
   Die Seite ist ohne Anmeldung erreichbar und lädt tokens.css nicht – die benötigten Werte stehen deshalb hier. */
:root {
  --c-background: #F6F4EF; --c-surface: #FFFFFF; --c-surface-sunken: #EEEBE3; --c-foreground: #1C2127; --c-muted: #52585F; --c-subtle: #63686F;
  --c-line: #D2CCBE; --c-input-line: #8C877B; --c-action: #0E5F63; --c-action-hover: #0A4A4D; --c-on-action: #FFFFFF; --c-ring: #0E5F63;
  --c-status-error: #B42318; --c-takt-ruhig: #857F73;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 16px; background: var(--c-background); color: var(--c-foreground); font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }
.anmeldung { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 32px 24px 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; }
.marke { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.logo { width: 48px; height: 48px; flex: none; }
.logo-ring { fill: none; stroke: var(--c-foreground); stroke-width: 2.5; }
.logo-punkt { fill: var(--c-action); stroke: var(--c-surface); stroke-width: 2.5; }
.wortmarke { display: flex; flex-direction: column; line-height: 1.25; }
.wortmarke b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.label { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.72px; color: var(--c-subtle); }
h1 { margin: 0; font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif; font-optical-sizing: none; font-size: 26px; font-weight: 600; line-height: 1.2; }
.intro { margin: 0; color: var(--c-muted); }
form { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 13px; font-weight: 500; }
.token-field { position: relative; }
.token-field input { width: 100%; height: 44px; padding: 0 48px 0 12px; border: 1px solid var(--c-input-line); border-radius: 6px; background: var(--c-surface); color: var(--c-foreground); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 16px; outline: 0; }
.token-field input::placeholder { color: var(--c-subtle); font-family: "IBM Plex Sans", system-ui, sans-serif; }
.token-field input:focus { border-color: var(--c-action); box-shadow: 0 0 0 2px var(--c-ring); }
#show-token, .zeigen { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--c-muted); cursor: pointer; }
#show-token:hover, .zeigen:hover { color: var(--c-foreground); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.eye-off, [aria-pressed="true"] .eye { display: none; }
[aria-pressed="true"] .eye-off { display: block; }
#error { min-height: 20px; margin: 0; font-size: 13px; color: var(--c-status-error); }
.submit { height: 44px; border: 0; border-radius: 6px; background: var(--c-action); color: var(--c-on-action); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.submit:hover { background: var(--c-action-hover); }
.submit:disabled { background: var(--c-surface-sunken); color: var(--c-subtle); cursor: progress; }
.fuss { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); }
.takt { display: block; width: 100%; height: 12px; }
.takt rect { fill: var(--c-takt-ruhig); }
/* Konto-Seiten: mehrere Felder, Hilfetexte, Textlinks */
form label:not(:first-child) { margin-top: 6px; }
.token-field input.klar { padding-right: 12px; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
.token-field input[readonly] { background: var(--c-surface-sunken); color: var(--c-muted); }
.hilfe { margin: 0; font-size: 13px; color: var(--c-subtle); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; }
.link { padding: 0; border: 0; background: none; color: var(--c-action); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--c-action-hover); }
.intro b { color: var(--c-foreground); }