/* Seiten rund ums Konto (Anmelden, Registrieren …) im Just-Your-Cards-Look: Kobalt, Archivo, viel Ruhe. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/konto/fonts/inter.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/konto/fonts/inter-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 200; font-display: swap; src: url("/konto/fonts/archivo-200.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Archivo"; font-weight: 200; font-display: swap; src: url("/konto/fonts/archivo-ext-200.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0237, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 300; font-display: swap; src: url("/konto/fonts/archivo-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Archivo"; font-weight: 300; font-display: swap; src: url("/konto/fonts/archivo-ext-300.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0237, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("/konto/fonts/archivo-900.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Archivo"; font-weight: 900; font-display: swap; src: url("/konto/fonts/archivo-ext-900.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0237, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f5f5f7; --panel: #ffffff; --fg: #1d1d1f; --muted: #62626a; --line: #d2d2d7;
  --accent: #2f4cf0; --accent-text: #2f4cf0; --on-accent: #ffffff; --good: #1a7f37; --bad: #c9302c;
  --mark: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000000; --panel: #111113; --fg: #f5f5f7; --muted: #a1a1a6; --line: #2c2c2e;
          --accent: #3d5afe; --accent-text: #6b83ff; --good: #30d158; --bad: #ff453a; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased;
       display: flex; flex-direction: column; align-items: center; padding: 48px 16px 32px; }
a { color: var(--accent-text); }

.logo { font-family: var(--mark); text-transform: lowercase; line-height: .9; letter-spacing: -.035em; font-size: 34px; text-decoration: none; color: var(--fg); margin-bottom: 28px; }
.logo i { display: block; font-style: normal; font-weight: 200; color: var(--accent-text); }
.logo b { display: block; font-weight: 900; }
.jd { position: relative; }
.dc { position: absolute; left: .05em; top: .11em; width: .1em; height: calc(.1em * 88 / 63); background: currentColor; border-radius: .015em; }

main { width: 100%; max-width: 400px; background: var(--panel); border-radius: 20px; padding: 28px 24px; }
h1 { font-family: var(--ui); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 8px; }
p { margin: 0 0 16px; }
.lead { color: var(--muted); }
label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; font: inherit; font-size: 17px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
input.code { letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.check input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
button, .button { display: block; width: 100%; margin-top: 22px; font: inherit; font-weight: 600; font-size: 17px; text-align: center; text-decoration: none;
  color: var(--on-accent); background: var(--accent); border: 0; border-radius: 12px; padding: 13px 16px; cursor: pointer; }
button:hover, .button:hover { filter: brightness(1.08); }
.err { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.ok { color: var(--good); }
.links { margin-top: 20px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.qr { display: flex; justify-content: center; margin: 18px 0 10px; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 12px; }
.secret { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; background: var(--bg); border-radius: 10px; padding: 10px 12px; text-align: center; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 16px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border-radius: 12px; padding: 14px; text-align: center; }
footer { margin-top: 24px; font-size: 13px; color: var(--muted); }

/* Die kleine Karte auf dem j lebt (wie auf der Website): Herunterfallen nur beim ersten Öffnen in der Sitzung (Klasse jyc-logo-drop von design.js),
   danach dreht sie sich alle 12 Sekunden einmal um, bei der Maus über dem Logo sofort. Wer weniger Bewegung möchte, sieht sie still. */
.jd { perspective: 1.2em; }
.dc { transform-origin: 50% 60%; animation: dc-flip 12s ease-in-out 4s infinite; }
.jyc-logo-drop .dc { animation: dc-drop 1.15s cubic-bezier(.2, .8, .25, 1) .3s both, dc-flip 12s ease-in-out 4s infinite; }
.nb-side-logo:hover .dc, .logo:hover .dc { animation: dc-turn .7s ease-in-out; }
@keyframes dc-drop {
  0% { transform: translateY(-1.3em) rotate(-40deg); opacity: 0; }
  20% { opacity: 1; }
  58% { transform: translateY(.07em) rotate(10deg); }
  76% { transform: translateY(-.035em) rotate(-4deg); }
  90% { transform: translateY(.01em) rotate(1deg); }
  100% { transform: none; }
}
@keyframes dc-flip {
  0%, 92% { transform: none; }
  96% { transform: rotateY(90deg) translateY(-.02em); }
  100% { transform: rotateY(180deg); }
}
@keyframes dc-turn { from { transform: none; } to { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .dc, .jyc-logo-drop .dc, .nb-side-logo:hover .dc, .logo:hover .dc { animation: none; } }
/* Anmeldeseiten haben kein design.js: dort fällt die Karte jedes Mal herunter, die Seiten sieht man selten */
body > .logo .dc { animation: dc-drop 1.15s cubic-bezier(.2, .8, .25, 1) .3s both, dc-flip 12s ease-in-out 4s infinite; }
@media (prefers-reduced-motion: reduce) { body > .logo .dc { animation: none; } }