:root{--grund:#0f3d5c;--flaeche:#f7f8fa;--karte:#fff;--rand:#d8dde3;--text:#16202a;--leise:#5b6875;--fehler:#b3261e;--test:#b34d00}*{box-sizing:border-box}body{color:var(--text);background:var(--flaeche);margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.umgebung-test body{border-top:4px solid var(--test)}.umgebung-test .karte:before{content:"TEST — echte Datenbank";color:var(--test);margin:-4px 0 12px;font-weight:600;display:block}.mitte{place-items:center;min-height:100dvh;padding:16px;display:grid}.karte{background:var(--karte);border:1px solid var(--rand);border-radius:10px;gap:14px;width:min(100%,380px);padding:24px;display:grid}h1{margin:0;font-size:20px}.leise{color:var(--leise);margin:0}.fehler{color:var(--fehler);margin:0}.hinweis{text-align:center;max-width:420px}label{color:var(--leise);gap:6px;font-size:13px;display:grid}input{font:inherit;border:1px solid var(--rand);color:var(--text);background:#fff;border-radius:8px;padding:10px 12px}input:focus-visible{outline:2px solid var(--grund);outline-offset:1px}button{font:inherit;background:var(--grund);color:#fff;cursor:pointer;border:0;border-radius:8px;padding:10px 14px;font-weight:600}button:disabled{opacity:.6;cursor:default}button.flach{color:var(--grund);background:0 0;font-weight:500}