:root{
  --bg: #f7f9fc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --primary: #1e88e5;
  --primary-600: #1877c9;
  --border: #e6e9ef;
  --ring: #b9ddff;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}

*{ box-sizing:border-box }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;               /* verhindert Scrollen */
  overscroll-behavior: contain;   /* blockiert Bounce / Pull-to-refresh */
  touch-action: none;             /* verhindert Touch-Scroll & Pinch-Zoom */
}


body{
  display:flex; flex-direction:column; min-height:100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 100% -20%, rgba(30,136,229,.10), transparent 60%),
    radial-gradient(800px 500px at 0% -10%,   rgba(30,136,229,.12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing:.2px;
}

/* Header */
header{
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.7)),
    radial-gradient(1200px 300px at 50% -80%, rgba(30,136,229,.18), transparent 70%),
    #1e88e5;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5;
  backdrop-filter: blur(8px);
  padding: 18px 20px;
  box-shadow: 0 4px 12px rgba(16,24,40,.06);
  text-align:center;
}
header h1{ margin:0; color:#0f172a; font-size:1.6rem; letter-spacing:.2px; }

/* Container */
.wrap{
  flex:1;
  display:grid; place-items:center;
  padding: 24px 16px;
}
.card{
  width:100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card .title{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:800; font-size:1.15rem; color:#0f172a; margin-bottom:.25rem;
}
.card .sub{ text-align:center; color:var(--muted); margin:0 0 12px; }

/* Alerts */
.alert{
  border-radius:12px; padding:.8rem 1rem; font-weight:700; margin: 8px 0 12px;
  border:1px solid #f2b9b9; background:#fdecec; color:#7f1d1d;
}

/* Form */
form{ display:grid; gap:12px; margin-top:8px; }
label{ font-weight:800; color:#0f172a; font-size:.95rem; }
.field{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:.65rem .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.field:focus-within{
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(30,136,229,.12);
}
.field input{
  border:0; outline:0; width:100%;
  font-size:1rem; background:transparent; color:var(--text);
}
.toggle{
  cursor:pointer; user-select:none; font-size:.92rem; color:var(--primary);
  border:1px solid var(--border); padding:.25rem .5rem; border-radius:8px;
}

.submit{
  background: var(--primary); color:#fff; font-weight:800; border:0;
  border-radius: 12px; padding:.85rem 1.1rem; cursor:pointer;
  box-shadow: 0 10px 26px rgba(30,136,229,.25);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(30,136,229,.30);
  background: var(--primary-600);
}

.links{
  margin-top: 10px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.a{
  color: var(--primary); font-weight:800; text-decoration:none;
  border-bottom: 1px dashed rgba(30,136,229,.35);
}
.a:hover{ color: var(--primary-600); }

/* Footer */
footer{
  text-align:center; color:#6b7280; font-size:.92rem;
  border-top:1px solid var(--border); background:#fff; padding:14px;
}

@media (max-width: 480px){
  .card{ padding:14px }
  header h1{ font-size:1.35rem }
}