/* Login play.sego-it.de – keine externen Ressourcen, kein JS */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color: #2b3a4a;
  background:
    radial-gradient(circle at 12% 18%, #ef476f 0 14px, transparent 15px),
    radial-gradient(circle at 88% 14%, #9b5de5 0 12px, transparent 13px),
    radial-gradient(circle at 8% 86%, #06d6a0 0 12px, transparent 13px),
    radial-gradient(circle at 92% 82%, #2a9df4 0 16px, transparent 17px),
    radial-gradient(circle at 50% 30%, #fffdf5 0%, #ffeec2 100%);
  background-attachment: fixed;
}
.karte {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 32px;
  padding: 36px 32px 32px;
  box-shadow: 0 12px 0 rgba(0,0,0,.08), 0 20px 50px rgba(43,58,74,.15);
  border-top: 10px solid #ffb703;
}
.logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 24px; }
h1 { font-size: 22px; font-weight: 700; text-align: center; margin: 0 0 24px; color: #6f8399; }
label { display: block; font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.feld { margin-bottom: 20px; }
input[type=text], input[type=password] {
  display: block; width: 100%; height: 60px;
  font: inherit; font-size: 20px; color: inherit;
  padding: 0 18px; border-radius: 16px;
  border: 3px solid #c9d7e5; background: #f6f9fc;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: #2a9df4; background: #fff; box-shadow: 0 0 0 4px rgba(42,157,244,.2); }
button {
  display: block; width: 100%; height: 64px; margin-top: 8px;
  font: inherit; font-size: 22px; font-weight: 700; color: #fff;
  border: 0; border-radius: 18px; cursor: pointer;
  background: #2a9df4; box-shadow: 0 6px 0 #1b78bf;
  touch-action: manipulation;
}
button:active { transform: translateY(4px); box-shadow: 0 2px 0 #1b78bf; }
button:focus-visible { outline: 4px solid #ffd166; outline-offset: 3px; }
.fehler {
  margin: 0 0 20px; padding: 14px 16px; border-radius: 14px;
  background: #ffe3e8; color: #a3153a; font-weight: 700; font-size: 17px;
  border-left: 6px solid #ef476f;
}
.fehler:empty { display: none; }
.fuss { margin: 22px 0 0; text-align: center; font-size: 14px; color: #8a9aab; }
@media (max-width: 420px) {
  body { padding: 12px; }
  .karte { padding: 28px 20px 24px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }