/* Anmeldeseite: öffentlich, ohne die Schriften und Stile der App (die liegen hinter der Anmeldung) */
:root {
  --paper: #2A2D33; --ink: #E8EAED; --ink-soft: #9AA0A8; --ink4: #6A7078; --line: #3B3F46; --field: #34373D;
  --input: #1F2125; --canvas: #1E2024; --accent: #0A84FF; --danger: #FF453A; color-scheme: dark;
}
:root[data-theme=light] {
  --paper: #F5F6F8; --ink: #1D1F23; --ink-soft: #646A73; --ink4: #A3A9B1; --line: #DADDE2; --field: #E9EBEF;
  --input: #FFFFFF; --canvas: #ECEEF1; color-scheme: light;
}
* { box-sizing: border-box; margin: 0 }
body { min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: var(--canvas); color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif }
button, input { font: inherit; color: inherit }
.karte { width: min(440px, 100%); overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px }
.marke { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 6px; view-transition-name: marke }
.marke .text > span { color: var(--accent) }
.marke svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round }
h1 { font-size: 16px; font-weight: 600; margin: 4px 0 8px }
.desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px }
label { display: block; font-size: 12px; color: var(--ink-soft); margin: 10px 0 4px }
.feld { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); padding: 0 12px; font-size: 15px }
.feld.schluessel { text-transform: uppercase; letter-spacing: .04em; font-family: ui-monospace, Menlo, monospace }
.feld:focus { outline: 2px solid var(--accent); outline-offset: -1px }
.knoepfe { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap }
.btn { flex: 1; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); font-weight: 500; cursor: pointer; padding: 0 12px }
.btn.pri { background: var(--accent); border-color: var(--accent); color: #fff }
.btn:disabled { opacity: .45; cursor: default }
.wechsel { margin-top: 14px; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: 13px }
.fehler { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 1em }
.kontonummer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--input); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin-bottom: 12px }
.kontonummer code { flex: 1; font: 600 18px/1.5 ui-monospace, Menlo, monospace; letter-spacing: .03em }
.kontonummer .btn { flex: 0 0 auto }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer }
.check input { width: 16px; height: 16px; accent-color: var(--accent) }
.kontonummer code span { display: inline-block }
.btn.pri { position: relative; overflow: hidden }
.mobil { display: flex; gap: 12px; align-items: flex-start; background: var(--input); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0 14px }
.mobil svg { width: 40px; height: 40px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.mobil svg .stift { stroke: var(--accent) }
.mobil b { display: block; font-size: 14px; margin-bottom: 2px }
.mobil p { font-size: 13px; color: var(--ink-soft) }

/* Bewegung: --dauer = 1 / Tempo, 0 = aus (vorab.js, aus den Einstellungen der App bzw. prefers-reduced-motion) */
:root { --dauer: 1; --weich: cubic-bezier(.2, .8, .2, 1) }
@keyframes karte-ein { from { opacity: 0; transform: translateY(18px) scale(.97) } }
@keyframes hoch { from { opacity: 0; transform: translateY(8px) } }
@keyframes zeichnen { from { stroke-dashoffset: 1 } }
@keyframes laufen { from { transform: translateX(-100%) } to { transform: translateX(260%) } }
@keyframes schreiben { from { opacity: 0; transform: translate(5px, -6px) rotate(10deg) } }
.karte { animation: karte-ein calc(var(--dauer) * 560ms) var(--weich) both }
/* jeder Wechsel (Anmelden ⇄ Konto erstellen, neuer Schlüssel) baut die Karte neu: ihre Teile kommen nacheinander */
.stufe { animation: hoch calc(var(--dauer) * 420ms) var(--weich) both; animation-delay: calc(var(--dauer) * (var(--i, 0) * 45ms + 60ms)) }
.marke svg path { stroke-dasharray: 1; animation: zeichnen calc(var(--dauer) * 900ms) var(--weich) both }
.marke svg path + path { animation-delay: calc(var(--dauer) * 280ms) }
.kontonummer code span { animation: hoch calc(var(--dauer) * 380ms) var(--weich) both; animation-delay: calc(var(--dauer) * (var(--g) * 70ms + 320ms)) }
.mobil .stift { transform-origin: 38px 32px; animation: schreiben calc(var(--dauer) * 700ms) var(--weich) calc(var(--dauer) * 500ms) both }
.btn { transition: background-color calc(var(--dauer) * 140ms), opacity calc(var(--dauer) * 200ms), transform calc(var(--dauer) * 140ms) var(--weich) }
.btn:active:not(:disabled) { transform: scale(.97) }
.btn.laeuft::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.75);
  animation: laufen 1.1s ease-in-out infinite }
.feld { transition: outline-color calc(var(--dauer) * 140ms), border-color calc(var(--dauer) * 140ms) }

/* Seitenübergang zur App und zurück: die Marke fliegt ins Ladebild (bzw. von dort hierher) */
@view-transition { navigation: auto }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none } }
::view-transition-group(*) { animation-duration: calc(var(--dauer) * 480ms); animation-timing-function: var(--weich) }

/* Bot-Prüfung (Turnstile erst nach Zustimmung), Ankündigungen, Rechtstexte */
.desc a, .recht a, .hinweis a { color: var(--accent) }
.pruefung { margin-top: 12px }
.pruefung .desc { margin-bottom: 8px }
.pruefung .btn { width: 100% }
#turnstile:not(:empty) { margin-top: 4px; min-height: 65px }
.hinweise { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); display: grid; gap: 8px; z-index: 2 }
.hinweis { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.25) }
.hinweis.warnung { border-left-color: #FFB224 }
.hinweis span { flex: 1 }
.hinweis button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px }
.recht { position: fixed; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; font-size: 12px }
.recht a { color: var(--ink-soft); text-decoration: none }
.recht a:hover { color: var(--ink) }
.check.zustimmung { align-items: flex-start; font-size: 13px; line-height: 1.4; margin: 12px 0 2px }
.check.zustimmung input { margin-top: 1px; flex: none }
.check.zustimmung a, .desc a { color: var(--accent) }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit }
a.btn.pri { color: #fff }
.desc.warn { color: #FFB224 }