/* Load.Live 1.7.0-s28 — de aanmeldpagina /start (mockup M33). Zelfstandig: op de apex (loadlive.app) hoort /assets/ bij de
 * Binnenkort-site, daarom komt deze stijl van /api/start/start-170.css en valt het lettertype terug op het systeem als
 * /assets/fonts/ er niet is. Licht en donker volgen het toestel. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url('/assets/fonts/bebas-neue-400-latin.woff2') format('woff2'); }
:root {
  --ground: #0F1C1A; --vlak: #1A2B28; --vlak-2: #223532; --lijn: rgba(245,243,239,.14); --lijn-sterk: rgba(245,243,239,.28);
  --tekst: #F5F3EF; --zacht: #9DB3AE; --accent: #00FFF0; --accent-tekst: #0C1816; --accent-zacht: rgba(0,255,240,.12);
  --rood: #FF7266; --ok: #5BE3A0; color-scheme: dark;
  --production: #00FFF0; --event: #A98BFF; --office: #5B9CFF; --setup: #C8D6D2;
}
@media (prefers-color-scheme: light) {
  :root { --ground: #FFFFFF; --vlak: #F1F4F3; --vlak-2: #E3E9E7; --lijn: rgba(12,24,22,.16); --lijn-sterk: rgba(12,24,22,.34);
    --tekst: #0C1816; --zacht: #4F6964; --accent: #004B47; --accent-tekst: #FFFFFF; --accent-zacht: rgba(0,75,71,.10); --rood: #B8261B; --ok: #1F7A4D;
    --production: #007F79; --event: #5B4FB5; --office: #1F6FB5; --setup: #4F6D7A; color-scheme: light; }
}
* { box-sizing: border-box; }
body.st170 { margin: 0; background: var(--ground); color: var(--tekst); font: 400 16px/1.5 'Barlow', 'Helvetica Neue', Arial, sans-serif; }
.st170-main { min-height: 100vh; display: grid; place-items: start center; padding: 32px 16px 48px; }
.st170-vak { width: 100%; max-width: 760px; }
.st170-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.st170-merk { font-family: 'Bebas Neue', 'Barlow', sans-serif; font-size: 30px; letter-spacing: .02em; line-height: 1; }
.st170-merk b { color: var(--tekst); font-weight: 400; } .st170-merk i { color: var(--rood); font-style: normal; }
.st170-talen { display: flex; gap: 4px; }
.st170-talen button { font: inherit; font-size: 13px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--lijn); background: transparent; color: var(--zacht); cursor: pointer; }
.st170-talen button[aria-pressed="true"] { color: var(--tekst); border-color: var(--lijn-sterk); background: var(--vlak); }
.st170-stap { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); margin: 0 0 4px; }
h1.st170-kop { font-family: 'Bebas Neue', 'Barlow', sans-serif; font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0 0 6px; }
.st170-sub { color: var(--zacht); margin: 0 0 20px; }
.st170-balk { display: flex; gap: 6px; margin: 0 0 22px; } .st170-balk span { flex: 1; height: 4px; border-radius: 2px; background: var(--lijn); }
.st170-balk span.af { background: var(--accent); }
.st170-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.st170-zone { border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.st170-zone[data-gekozen="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.st170-zone h2 { font-family: 'Bebas Neue', 'Barlow', sans-serif; font-weight: 400; font-size: 28px; margin: 0; line-height: 1; }
.st170-zone .st170-voor { font-size: 13px; color: var(--zacht); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.st170-zone p { margin: 0; }
.st170-plannen { display: flex; gap: 8px; flex-wrap: wrap; }
.st170-plan { flex: 1 1 120px; border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 10px 12px; background: transparent; color: var(--tekst); font: inherit; text-align: left; cursor: pointer; }
.st170-plan[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-zacht); }
.st170-plan b { display: block; font-size: 17px; } .st170-plan small { color: var(--zacht); }
.st170-blokken { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st170-blokken li { font-size: 12.5px; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--lijn); color: var(--tekst); }
.st170-blokken li[data-groep="production"] { border-color: color-mix(in srgb, var(--production) 50%, transparent); }
.st170-blokken li[data-groep="event"] { border-color: color-mix(in srgb, var(--event) 50%, transparent); }
.st170-blokken li[data-groep="office"] { border-color: color-mix(in srgb, var(--office) 50%, transparent); }
.st170-blokken li[data-groep="setup"] { border-color: color-mix(in srgb, var(--setup) 50%, transparent); }
.st170-blokken li.beperkt::after { content: ' ·'; color: var(--zacht); }
.st170-klein { font-size: 13px; color: var(--zacht); }
.st170-home, .st170-uitnodiging { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--lijn-sterk); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.st170-home .st170-tag, .st170-uitnodiging .st170-tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--accent-zacht); color: var(--accent); white-space: nowrap; }
.st170-uitnodiging[data-actief="true"] { border-style: solid; border-color: var(--accent); }
form.st170-form { display: flex; flex-direction: column; gap: 14px; }
.st170-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.st170-veld { display: flex; flex-direction: column; gap: 4px; }
.st170-veld > span { font-size: 14px; font-weight: 600; }
.st170-veld input[type="text"], .st170-veld input[type="email"], .st170-veld input[type="password"], .st170-veld input:not([type]) {
  font: inherit; color: inherit; background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.st170-veld input:focus-visible, .st170-plan:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st170-adres { display: flex; align-items: center; border: 1px solid var(--lijn-sterk); border-radius: 10px; background: var(--vlak); padding: 0 10px; }
.st170-adres input { border: 0 !important; background: transparent !important; flex: 1; padding: 10px 0 !important; }
.st170-adres span { color: var(--zacht); white-space: nowrap; }
fieldset.st170-groep { border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; margin: 0; }
fieldset.st170-groep legend { font-weight: 600; padding: 0 6px; }
.st170-vinken { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.st170-vink { display: inline-flex; align-items: center; gap: 8px; }
.st170-hulp { font-size: 13px; color: var(--zacht); margin: 0; }
.st170-fout { color: var(--rood); margin: 0; font-weight: 600; }
.st170-knoppen { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.st170-knop { font: inherit; font-weight: 600; border-radius: 10px; padding: 10px 18px; border: 1px solid var(--lijn-sterk); background: transparent; color: var(--tekst); cursor: pointer; text-decoration: none; display: inline-block; }
.st170-knop.hoofd { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
.st170-knop[disabled] { opacity: .55; cursor: wait; }
.st170-volgende { margin-top: 16px; font-size: 13px; color: var(--zacht); }
.st170-klaar { border: 1px solid var(--lijn); border-radius: 14px; background: var(--vlak); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.st170-link { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; background: var(--vlak-2); border-radius: 8px; padding: 8px 10px; }
@media (max-width: 520px) { h1.st170-kop { font-size: 32px; } .st170-main { padding-top: 20px; } }
/* >>> 1.7.0-s36 (restpunt 68): de pagina /voorwaarden (zelfde stijl als /start) */
.vw170 h1 { margin: 6px 0 10px; }
.vw170 h2 { margin: 32px 0 6px; }
.vw170 h3 { margin: 18px 0 4px; font-size: 16px; }
.vw170 p { line-height: 1.55; max-width: 72ch; }
.st170-vink a { margin-left: 6px; }
/* <<< 1.7.0-s36 */
.st170-adres[hidden] { display: none; }   /* 1.7.0-s65 (G6-S28b): het eigen adres verschijnt pas na het vinkje */