/* Gemeinsames Erscheinungsbild: Farben vom Haus (Putz, Sockelblau, Lärche, Ziegel) */
:root {
  --putz: #f5f7fa;
  --blau: #2f57b5;
  --blau-tief: #1d3a80;
  --laerche: #c77b30;
  --ziegel: #8a3b24;
  --tinte: #1e2533;
  --glas: rgba(245, 247, 250, .72);
  --font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--tinte); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--laerche); outline-offset: 3px; }

/* Hausfront als Strichzeichnung */
.front { width: 220px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.front path, .front line, .front rect, .front circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.front .k { stroke: var(--blau); stroke-width: 2.2; }
.front .d { stroke: var(--ziegel); stroke-width: 2.6; }
.front .h { stroke: var(--laerche); stroke-width: 2.2; }
.front .s { stroke: var(--blau); stroke-width: 5; }
.front [pathLength] { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); transition: stroke-dashoffset .35s ease-out; }

/* Karte (Login, Start, Pause) */
.sheet {
  width: min(360px, calc(100vw - 32px)); padding: 34px 30px 28px; border-radius: 26px;
  background: var(--glas); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 80px -30px rgba(20, 35, 70, .55);
  text-align: center;
}
.sheet h1 { margin: 22px 0 4px; font-size: 30px; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.sheet .sub { margin: 0 0 22px; font-size: 15px; color: #59627a; }
.field {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(30, 37, 51, .12);
  background: rgba(255,255,255,.8); font: inherit; font-size: 17px; text-align: center; letter-spacing: .08em; color: var(--tinte);
  transition: border-color .2s;
}
.field:focus { outline: none; border-color: var(--blau); }
.go {
  margin-top: 12px; width: 100%; padding: 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--blau); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 24px -12px var(--blau);
  transition: background .2s, transform .15s;
}
.go:hover { background: var(--blau-tief); }
.go:active { transform: scale(.98); }
.go[hidden] { display: none; }
.note { min-height: 20px; margin: 12px 0 0; font-size: 14px; color: var(--ziegel); }

@media (prefers-reduced-motion: reduce) {
  .front [pathLength] { transition: none; }
}