:root{
  --brand:#0c7abf; /* Blauton ähnlich */
  --bg:#f6fbff;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,Segoe UI,Roboto,Arial; background:var(--bg);}
.container{max-width:420px;margin:6vh auto;padding:16px}
.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,.07)}
h1{font-size:1.35rem;margin:.2rem 0 1rem;color:#113}
label{display:block;margin:.75rem 0 .25rem}
input{width:100%;padding:12px;border:1px solid #d6e6f5;border-radius:12px}
button{width:100%;padding:12px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:600;margin-top:14px}
a{color:var(--brand);text-decoration:none}
.help{font-size:.9rem;color:#445;margin-top:10px}
.error{background:#ffe9e9;color:#8a1a1a;padding:10px;border-radius:10px;margin-bottom:10px}
footer{margin-top:18px;font-size:.8rem;color:#667;text-align:center}

/* ===== Auth-Seiten Feinschliff ===== */

/* Titel etwas größer und mittig */
.page-title, .card h1 {
  font-size: 1.6rem;
  text-align: center;
  color: #0c3c60; /* CI-Blau */
  margin-bottom: 1.2rem;
}

/* Labels einheitlich mit globalem Form-Design */
label .label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #445;
}

/* Inputs: Fokus-Style wie im Tool */
input:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(12,122,191,.15);
}

/* Button-Varianten (optional) */
.btn { 
  display:inline-block; width:100%; padding:12px;
  border-radius:12px; border:0; cursor:pointer;
  font-weight:600; text-align:center;
}
.btn-primary   { background:var(--brand); color:#fff; }
.btn-outline   { background:#fff; border:1px solid #d6e6f5; color:var(--brand); }
.btn-primary:hover,
button:hover   { filter:brightness(1.05); }

/* Fehlerbox stärker betonen */
.error, .hint.error {
  background:#ffe0e0;
  color:#7a1a1a;
  border:1px solid #f1b8b8;
  border-radius:10px;
  padding:12px;
  margin-bottom:14px;
  font-size: .95rem;
}

/* Hilfetexte */
.help {
  font-size: .85rem;
  color: #556;
  margin-top: 8px;
  text-align:center;
}