:root {
  color-scheme: light;
  --navy:#101828; --navy-weich:#4A5567;
  --amber:#EBA819; --amber-d:#D08F0F; --amber-text:#8A5A00;
  --seite:#E3EAF4; --feld:#F2F6FC; --rand:#D0D5DE; --platzhalter:#6B7280;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; padding:24px;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--navy); background:var(--seite);
  display:flex; align-items:center; justify-content:center;
}
.seite { width:100%; max-width:396px; }

.marke { display:flex; align-items:center; justify-content:center; margin-bottom:34px; }
.marke-logo { width:100%; max-width:250px; height:auto; display:block; }

.karte { background:#fff; border:1px solid var(--rand); border-radius:16px;
         padding:30px 28px 26px;
         box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); }

label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }

.feld { position:relative; }
.feld svg { position:absolute; left:14px; top:50%; transform:translateY(-50%);
            width:18px; height:18px; color:var(--platzhalter); pointer-events:none; }
input {
  width:100%; padding:13px 14px 13px 42px;
  background:var(--feld); border:1px solid var(--rand); border-radius:10px;
  font:inherit; color:var(--navy);
}
input::placeholder { color:var(--platzhalter); }
input:focus { outline:none; background:#fff; border-color:var(--amber);
              box-shadow:0 0 0 3px rgba(235,168,25,.20); }

button {
  width:100%; margin-top:22px; padding:13px 16px;
  font:inherit; font-weight:600; color:var(--amber-text);
  background:#fff; border:1px solid var(--amber); border-radius:10px;
  cursor:pointer; transition:background .12s, border-color .12s;
}
button:hover { background:#FFFCF4; border-color:var(--amber-d); }
button:disabled { opacity:.55; cursor:default; }

.fuss { margin-top:20px; padding-top:16px; border-top:1px solid var(--rand);
        text-align:center; font-size:13px; color:var(--navy-weich); text-wrap:balance; }
.fuss a { color:var(--amber); font-weight:600; text-decoration:none; }
.fuss a:hover { text-decoration:underline; }

.hinweis { padding:11px 13px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.fehler { background:#FDECEA; color:#A93226; }

.wartung-titel { font-size:19px; margin:0 0 10px; }
.wartung-text { font-size:14px; color:var(--navy-weich); margin:0 0 4px; line-height:1.55; }