:root{color-scheme:light dark;font-family:Inter,Arial,sans-serif;--bg:light-dark(#fff,#17212e);--fg:light-dark(#172434,#f0f5fc);--line:light-dark(#d5dfeb,#465366);--blue:light-dark(#2457a7,#8db5f0)}*{box-sizing:border-box}body{margin:0;padding:24px 12px;background:light-dark(#f3f6fa,#0e1620);color:var(--fg)}main{max-width:410px;margin:auto;padding:26px;background:var(--bg);border:1px solid var(--line);border-radius:24px}.logo{display:block;width:160px;max-width:100%;margin:0 auto 24px}h1{font-size:23px}h2{font-size:18px;margin-top:24px}label{display:block;font-size:14px;margin:16px 0 8px}input,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit;margin-top:7px}button{width:100%;min-height:44px;margin-top:12px;padding:11px;border:0;border-radius:8px;background:var(--blue);color:light-dark(white,#101c2a);font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.link{background:transparent;color:var(--blue)}.check{display:flex;align-items:flex-start;gap:10px;line-height:1.5}.check input{width:18px;margin:2px 0;flex-shrink:0}.row{display:flex;gap:10px}.row input{min-width:0}.row button{width:100px}textarea{font:12px/1.7 monospace;resize:none}#feedback{line-height:1.5;overflow-wrap:anywhere;color:var(--blue)}#mode,small{font-size:12px;line-height:1.5}pre{white-space:pre-wrap;overflow-wrap:anywhere}details{margin-top:24px;border-top:1px solid var(--line);padding-top:15px}#messages{font-size:13px;overflow-wrap:anywhere}[hidden]{display:none!important}

input.is-invalid{background:light-dark(#fff0ef,#442627);border-color:light-dark(#e9bcb7,#875354)}input.is-verified{background:light-dark(#edf8ef,#173727);border-color:light-dark(#b8dbbf,#427752)}
.uid-heading{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:14px}.uid-heading a{color:var(--blue);text-decoration:none}.uid-label{margin-top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
button.info{width:28px;min-height:28px;padding:0;margin:0 0 8px;border-radius:50%;background:#ffd65c;color:#443300;font:bold italic 19px Georgia,serif}.info-bubble{padding:12px;border-radius:8px;background:light-dark(#fff8df,#3b3320);font-size:13px;line-height:1.5}

button.info{background:#006bea;color:#fff}html,body{max-width:100%;overflow-x:hidden}main{min-width:0;max-width:min(410px,100%)}

.uid-heading{justify-content:flex-start;gap:8px}.uid-heading a{font-size:14px}


main button,main button.info,main summary,main a[href]{min-width:44px;min-height:44px;touch-action:manipulation}
main a[href],main summary{display:inline-flex;align-items:center}
main input:not([type=checkbox]),main select{min-height:44px;font-size:16px}
main .check{min-height:48px;align-items:center;padding:8px 0;cursor:pointer;touch-action:manipulation}
main .check input{width:24px;min-width:24px;height:24px}
/* Zefix unmittelbar neben der UID mit identischer Schrift und Grundlinie. */
.uid-heading{align-items:baseline;justify-content:flex-start;gap:8px;font-size:14px;line-height:1.4}
.uid-heading>span,.uid-heading>a{font:inherit;line-height:inherit;margin:0;padding:0}

/* Keep the SVG and slogan stacked; only invert for the actual dark theme. */
main>a:first-child{display:block;text-align:center;text-decoration:none}
main .logo{height:auto;margin:0 auto 6px;filter:none}
.logo-tagline{display:block;margin-bottom:24px;color:var(--fg);font:700 18px/1.4 Inter,Arial,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) main .logo{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme=dark] main .logo{filter:invert(1) hue-rotate(180deg)}

.test-environment-notice{position:sticky;top:0;z-index:50;max-width:430px;margin:0 auto 12px;padding:8px 12px;border:1px solid light-dark(#e6ca7b,#806b22);border-radius:8px;background:light-dark(#fff3cd,#413719);color:light-dark(#664d03,#ffe69c);text-align:center;font-size:12px;line-height:1.4}

.vehicle-switch{display:flex;justify-content:center;gap:6px;padding:6px;position:sticky;top:0;z-index:30;background:var(--bg)}.vehicle-switch a{padding:8px 18px;border-radius:8px;text-decoration:none;color:var(--fg);font-size:13px}.vehicle-switch a[aria-current=true]{background:var(--blue);color:var(--bg)}

.login-vehicle-switch{display:flex;gap:8px;margin:18px 0}.login-vehicle-switch a{flex:1;text-align:center;padding:10px;border:1px solid var(--blue);border-radius:10px;text-decoration:none;color:var(--blue)}.login-vehicle-switch a[aria-pressed=true]{background:var(--blue);color:white}

.login-vehicle-switch a{display:grid;place-items:center;min-height:52px}.login-vehicle-switch svg{width:34px;height:34px}

/* Account choice: labelled icons, keyboard-accessible native radio controls. */
#register .account-type-switch{display:block;border:0;padding:0;margin:0 0 20px;min-width:0}
#register .account-type-switch legend{font-size:12px;margin-bottom:8px}
#register .account-type-options{display:flex;flex-wrap:nowrap;gap:8px}
#register .account-type-switch label{position:relative;flex:1;min-width:0;margin:0;cursor:pointer;touch-action:manipulation}
#register .account-type-switch input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0;clip-path:inset(50%)}
#register .account-type-switch label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:6px;border:1px solid light-dark(#d9e1e9,#465366);border-radius:8px;font-size:11px;line-height:1.3;color:light-dark(#5b697b,#b8c4d3)}
#register .account-type-switch svg{display:block;width:22px;height:22px;flex:none}
#register .account-type-switch input:checked+span{background:var(--blue);border-color:var(--blue);color:light-dark(#fff,#172434)}
#register .account-type-switch input:focus-visible+span{outline:2px solid currentColor;outline-offset:3px}

.login-vehicle-switch a{display:flex;flex-direction:column;align-items:center;gap:4px}.login-vehicle-switch a>span{font-size:11px}

#register-form .row>label{flex:1;min-width:0;margin-top:16px}#register-form .row>label input{min-width:0}

/* Identische Grössen für Fahrzeugbereich und Kontotyp. */
.login-vehicle-switch,#register .account-type-options{display:flex;gap:8px}
.login-vehicle-switch a,#register .account-type-switch label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;padding:10px;border-radius:10px;font-size:11px;line-height:1.2;font-weight:600;margin:0}
.login-vehicle-switch svg,#register .account-type-switch svg{width:34px;height:34px;flex:none}
.login-vehicle-switch a>span{font-size:11px;line-height:1.2}
#register .account-type-switch legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(#mode,#feedback):empty{display:none}