:root{--hintergrund:#efe6d4;--karte:#fffaf0;--text:#3b2f22;--leise:#6f604d;--akzent:#4f7a3a;--akzent-dunkel:#3d6029;--fehler:#a33a2a;--rand:#d8c8a8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--hintergrund);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(180deg, #e9dcc0 0%, var(--hintergrund) 60%);min-height:100vh;margin:0}.seite{place-items:center;min-height:100vh;padding:24px 16px;display:grid}.karte{background:var(--karte);border-radius:16px;width:100%;max-width:420px;padding:28px 24px;box-shadow:0 10px 30px #503c1e26}.marke{letter-spacing:.2em;color:var(--akzent);margin:0;font-size:.8rem;font-weight:700}h1{margin:4px 0 16px;font-size:1.5rem;line-height:1.25}p{line-height:1.5}form{gap:14px;margin:8px 0 12px;display:grid}label{gap:6px;font-size:.95rem;font-weight:600;display:grid}input[type=email],input[type=password],input[type=text]{font:inherit;border:1px solid var(--rand);background:#fff;border-radius:10px;min-height:44px;padding:12px}input:focus-visible,button:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #e2b04a}.haekchen{grid-template-columns:24px 1fr;align-items:start;font-weight:400}.haekchen input{width:22px;height:22px;accent-color:var(--akzent);margin:1px 0 0}a{color:var(--akzent-dunkel)}button{font:inherit;background:var(--akzent);color:#fff;cursor:pointer;border:0;border-radius:10px;min-height:46px;padding:10px 18px;font-weight:700}button:hover:not(:disabled){background:var(--akzent-dunkel)}button:disabled{opacity:.6;cursor:wait}button.link,button.link:hover:not(:disabled){color:var(--akzent-dunkel);background:0 0;min-height:0;padding:4px 0;font-weight:600;text-decoration:underline}.meldung{color:var(--fehler);background:#f7e3dc;border-radius:8px;margin:0;padding:10px 12px;font-weight:600}.info{background:#e4eedb;border-radius:8px;padding:10px 12px}.hinweis{color:var(--leise);margin:4px 0 0;font-size:.85rem}.stadtseite{flex-direction:column;height:100dvh;display:flex}.leiste{background:var(--karte);border-bottom:1px solid var(--rand);justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;display:flex}.leiste h1{margin:0;font-size:1.1rem}.leiste .marke{font-size:.7rem}.stadt{touch-action:none;flex:1;min-height:0;position:relative;overflow:hidden}.stadt canvas{display:block}.stadt-status{text-align:center;flex:1;place-content:center;justify-items:center;gap:12px;padding:16px;display:grid}.bauleiste{background:var(--karte);border-top:1px solid var(--rand);flex-shrink:0;gap:8px;padding:8px 16px;display:flex;overflow-x:auto}.bauwahl{background:var(--karte);color:inherit;border:1px solid var(--rand);text-align:left;flex-direction:column;flex:none;align-items:flex-start;gap:2px;display:flex}.bauwahl:hover:not(:disabled){background:#f3ecdc}.bauwahl span{color:var(--leise);white-space:nowrap;font-size:.8rem;font-weight:400}.bauleiste-gewaehlt{flex-wrap:wrap;justify-content:space-between;align-items:center}.bauleiste-text{flex:200px;gap:4px;min-width:0;display:grid}.bauleiste-text .hinweis{margin:0}.bauleiste-knoepfe{gap:8px;display:flex}button.zweit,button.zweit:hover:not(:disabled){color:var(--akzent-dunkel);border:1px solid var(--rand);background:0 0}button.zweit:disabled{cursor:default}