/* Anmeldeportal. Bewusst nuechtern und in denselben Grautoenen wie die Karte,
   mit Orange als einzigem Signal -- wer von der Karte kommt, soll es
   wiedererkennen. */
:root {
  --orange: #E8710A; --gruen: #2E7D32; --rot: #C62828;
  --g0:#FFF; --g1:#F5F5F5; --g2:#EBEBEB; --g3:#DCDCDC; --g5:#9E9E9E; --g7:#616161; --g9:#212121;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --orange:#FF9433; --gruen:#7BC67F; --rot:#EF7A7A;
          --g0:#161616; --g1:#1E1E1E; --g2:#262626; --g3:#3A3A3A;
          --g5:#8A8A8A; --g7:#B8B8B8; --g9:#ECECEC; }
}
* { box-sizing: border-box; }
body { margin:0; padding:1.25rem 1rem 3rem; font-family:var(--schrift);
       background:var(--g1); color:var(--g9); line-height:1.55; }
.blatt { max-width:38rem; margin:0 auto; background:var(--g0);
         border:1px solid var(--g3); border-radius:12px; padding:1.5rem 1.35rem; }
.blatt-text { max-width:44rem; }
h1 { margin:0 0 .35rem; font-size:1.375rem; letter-spacing:-.01em; }
h2 { margin:1.5rem 0 .4rem; font-size:1rem; }
.lead { margin:0 0 1.5rem; color:var(--g7); font-size:.9375rem; }
a { color:var(--orange); }
ul { padding-left:1.2rem; }
.zitat { border-left:3px solid var(--g3); padding-left:.9rem; color:var(--g7); font-size:.9375rem; }
.klein { font-size:.75rem; color:var(--g5); }

form { display:flex; flex-direction:column; gap:1rem; }
.feld { display:flex; flex-direction:column; gap:.3rem; }
.paar { display:grid; grid-template-columns:1fr 8rem; gap:.75rem; }
@media (max-width:26rem) { .paar { grid-template-columns:1fr; } }
.bez { font-size:.8125rem; font-weight:600; }
.bez em { color:var(--orange); font-style:normal; }
.frei { font-weight:400; color:var(--g5); font-size:.75rem; }
input, textarea {
  font:inherit; font-size:.9375rem; padding:.55rem .7rem;
  border:1px solid var(--g3); border-radius:8px; background:var(--g1); color:var(--g9);
  width:100%;
}
input:focus, textarea:focus { outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange); }
textarea { resize:vertical; }
.hilfe { font-size:.75rem; color:var(--g5); }

.zustimmung { border:1px solid var(--g3); border-radius:10px; padding:.9rem 1rem; margin:0; }
.zustimmung legend { font-size:.75rem; font-weight:700; text-transform:uppercase;
                     letter-spacing:.06em; color:var(--g5); padding:0 .4rem; }
.haken { display:flex; gap:.65rem; align-items:flex-start; font-size:.8125rem;
         color:var(--g7); margin-top:.7rem; }
.haken:first-of-type { margin-top:.2rem; }
.haken input { width:1.15rem; height:1.15rem; margin:.1rem 0 0; flex:none; accent-color:var(--orange); }

button {
  font:inherit; font-size:.9375rem; font-weight:650;
  padding:.7rem 1rem; border:none; border-radius:8px;
  background:var(--orange); color:#fff; cursor:pointer;
}
button:disabled { opacity:.6; cursor:default; }
.ausgabe { margin:0; font-size:.875rem; min-height:1.2rem; }
.ausgabe.erfolg { color:var(--gruen); font-weight:600; }
.ausgabe.fehler { color:var(--rot); font-weight:600; }
.fuss { margin-top:1.75rem; padding-top:1rem; border-top:1px solid var(--g2);
        font-size:.8125rem; color:var(--g5); }