.app { display: grid; height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.appbalk { display: flex; min-height: 48px; align-items: center; gap: 18px; padding: 0 14px; color: #fff; background: var(--primair); }
.appbalk nav { display: flex; flex: 1; gap: 4px; }
.appbalk fluent-button { color: #fff; }
.appbalk fluent-button::part(control) { color: #fff; border-color: transparent; background: transparent; }
.appbalk fluent-button:hover::part(control) { background: #ffffff1f; }
.woordmerk { display: flex; align-items: center; gap: 9px; border: 0; color: inherit; background: transparent; }
.woordmerk span, .merk-teken { display: grid; width: 30px; height: 30px; place-items: center; color: var(--primair); background: #fff; border-radius: 3px; font-weight: 750; }
.account { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mobiel-beheer { display: none; }
.statusbalk { display: flex; min-height: 28px; align-items: center; gap: 18px; padding: 4px 12px; border-top: 1px solid #bdbdbd; color: #454545; background: #f3f2f1; font-size: 12px; }
.statusbalk span:nth-child(2) { flex: 1; }
.status-geldig { color: var(--succes); font-weight: 650; }
.status-ongeldig { color: var(--fout); font-weight: 650; }
.login-pagina { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(320px, .9fr); min-height: 100vh; background: #fff; }
.login-merk { display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; padding: clamp(36px, 8vw, 110px); color: #fff; background: var(--primair); }
.login-merk .merk-teken { width: 48px; height: 48px; margin-bottom: 24px; font-size: 18px; }
.login-merk h1 { font-size: 38px; }
.login-merk p { max-width: 450px; font-size: 18px; line-height: 1.5; }
.login-formulier { display: flex; width: min(420px, calc(100% - 48px)); flex-direction: column; align-self: center; justify-self: center; gap: 18px; }
.login-formulier h2 { margin-bottom: 0; font-size: 24px; }
.select-veld { display: flex; flex-direction: column; gap: 4px; }
.select-veld > span { color: #3b3a39; font-size: 12px; font-weight: 600; }