/* merk.css: de donkere huisstijl van de voordeur, voor de pagina's die hem
   delen.

   Begonnen in login.html (v1.203.0). Sinds de deurpagina's (wachtwoord-reset,
   uitnodiging, MCP-toestemming) en het brein hem ook dragen, staat hij hier,
   zodat een kleur of een contrastgrens op één plek verandert.

   Wat hier staat:
   - De tokens met voorvoegsel --merk-, zodat ze niet botsen met de
     tekstschaal (--tekst-*) of met de tokens van de werkschermen.
   - Het componentcontract onder html.merk-donker: --panel, --ink, --line,
     --muted, --accent, --accent-soft. Het sitemenu, de sitezoek, het taalmenu
     en de weergave-knoppen lezen die met een lichte terugval; zonder dit
     blok klapten ze wit open op een donkere pagina.
   - Invoervelden met een rand van minstens 3:1 (WCAG 1.4.11) en een
     plaatshouder van 6,4:1.
   - De knop "Beweging uit" (WCAG 2.2.2): html.beweging-uit zet elke animatie
     stil. De knop zelf komt uit merk.js.

   Niet hier: lay-out van een pagina, en geen tekstgroottes in pixels (die
   komen uit tekstschaal.css). Laad deze na de fonts en voor de eigen stijl
   van de pagina. */

:root {
  --merk-nacht: #04070d;
  --merk-nacht-2: #08101b;
  --merk-nacht-3: #0d1826;
  --merk-lijn: rgba(117, 217, 255, 0.14);
  --merk-lijn-2: rgba(117, 217, 255, 0.28);
  /* Grenzen van invoervelden: 0,55 geeft 4,1:1 tegen de veldachtergrond. */
  --merk-lijn-veld: rgba(117, 217, 255, 0.55);
  --merk-tekst: #dfe9f2;
  --merk-tekst-zacht: #9fb3c3;
  --merk-tekst-stil: #7f94a6;
  --merk-blauw: #18A4FF;
  --merk-cyaan: #75D9FF;
  --merk-groen: #98D53C;
  --merk-oranje: #F58A1F;
  --merk-geel: #F3C63A;
  --merk-roze: #FF5C7A;
  --merk-paars: #A78BFA;
  --merk-kop: "Big Shoulders Display", "Atkinson Hyperlegible", system-ui, sans-serif;
  --merk-font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --merk-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --merk-reuzenkop: calc(var(--tekst-4xl) * 2.35);
  --merk-grote-kop: calc(var(--tekst-4xl) * 1.45);
}

html.merk-donker {
  color-scheme: dark;
  background: var(--merk-nacht);
  /* Het contract van de gedeelde kopcomponenten. */
  --panel: var(--merk-nacht-3);
  --ink: var(--merk-tekst);
  --line: var(--merk-lijn-2);
  --muted: var(--merk-tekst-zacht);
  --accent: var(--merk-blauw);
  --accent-btn: #0b6db0;           /* wit erop: 5,5:1 */
  --accent-soft: rgba(117, 217, 255, 0.12);
  --accent-text: var(--merk-cyaan);
}
html.merk-donker body { background: var(--merk-nacht); color: var(--merk-tekst); font-family: var(--merk-font); }
html.merk-donker .sxl-menu-uit, html.merk-donker .sxl-zoek-paneel, html.merk-donker .sxl-langmenu {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
html.merk-donker .sxl-zoek input { background: rgba(255, 255, 255, 0.05); color: #fff; border-color: var(--merk-lijn-2); }
html.merk-donker .sxl-zoek input::placeholder { color: var(--merk-tekst-stil); }
html.merk-donker .sxl-langbtn { background: rgba(255, 255, 255, 0.04); border-color: var(--merk-lijn-2); }
html.merk-donker .sxl-menu a.hier { background: rgba(117, 217, 255, 0.12); }

/* ---- Formulieren ----
   Alleen in een merkkaart of met .merk-veld: het brein en de bibliotheek
   dragen dit bestand ook, en hun zoekvelden hebben een eigen maat. */
html.merk-donker .merk-veld,
.merk-kaart input[type="text"], .merk-kaart input[type="email"],
.merk-kaart input[type="password"] {
  width: 100%; padding: 12px 13px; font: inherit; font-size: var(--tekst-l); color: #fff;
  background: rgba(4, 7, 13, 0.7); border: 1px solid var(--merk-lijn-veld); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.merk-kaart input::placeholder, .merk-veld::placeholder { color: var(--merk-tekst-stil); }
.merk-kaart input:focus, .merk-veld:focus { outline: none; border-color: var(--merk-cyaan); box-shadow: 0 0 0 3px rgba(117, 217, 255, 0.22); }

/* ---- Kaart (inloggen, reset, uitnodiging, toestemming) ---- */
.merk-kaart {
  position: relative; background: rgba(8, 16, 27, 0.9); border: 1px solid var(--merk-lijn-2); border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 60px rgba(24, 164, 255, 0.08); padding: 30px 28px 24px;
}
.merk-kaart[data-badge]::before {
  content: attr(data-badge); position: absolute; top: -11px; left: 22px; background: var(--merk-nacht);
  padding: 2px 10px; font-family: var(--merk-mono); font-size: var(--tekst-xs); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--merk-cyaan); border: 1px solid var(--merk-lijn-2); border-radius: 6px;
}
.merk-kaart h1, .merk-kaart h2 {
  font-family: var(--merk-kop); font-weight: var(--gewicht-nadruk); font-size: var(--tekst-4xl);
  text-transform: uppercase; line-height: 1; margin: 4px 0 10px; color: #fff;
}
.merk-kaart p { color: var(--merk-tekst-zacht); }
.merk-kaart label {
  display: block; font-family: var(--merk-mono); font-size: var(--tekst-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--merk-tekst-stil); margin: 14px 0 6px;
}
.merk-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px;
  padding: 13px 16px; border: 0; border-radius: 999px; font: inherit; font-size: var(--tekst-l);
  font-weight: var(--gewicht-nadruk); cursor: pointer; background: var(--merk-blauw); color: #021019;
  box-shadow: 0 12px 36px rgba(24, 164, 255, 0.35); text-decoration: none;
}
.merk-knop:hover { filter: brightness(1.08); }
.merk-knop:disabled { opacity: 0.6; cursor: wait; }
.merk-knop.stil { background: rgba(255, 255, 255, 0.04); color: #fff; border: 1px solid var(--merk-lijn-2); box-shadow: none; }
.merk-melding { font-size: var(--tekst-s); min-height: 18px; margin-top: 10px; }
.merk-melding.fout { color: #ff8f8b; }
.merk-melding.goed { color: var(--merk-groen); }

/* Een deurpagina: de kaart in het midden van een donker veld. */
.merk-deur {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(60% 50% at 50% 0%, rgba(24, 164, 255, 0.16), transparent 70%), var(--merk-nacht);
}
.merk-deur .merk-kaart { width: min(460px, 100%); }
.merk-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #fff; text-decoration: none;
  font-family: var(--merk-kop); font-weight: var(--gewicht-nadruk); font-size: var(--tekst-2xl);
  letter-spacing: 0.04em; text-transform: uppercase; }
.merk-logo svg { width: 30px; height: 30px; }
.merk-logo b { color: var(--merk-blauw); font-weight: var(--gewicht-nadruk); }

html.merk-donker a:focus-visible, html.merk-donker button:focus-visible,
html.merk-donker input:focus-visible { outline: 2px solid var(--merk-cyaan); outline-offset: 3px; }

/* ---- Beweging uit (WCAG 2.2.2) ---- */
.merk-beweging {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--tekst-s); color: var(--merk-tekst-zacht); background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--merk-lijn-2);
}
.merk-beweging:hover { color: #fff; border-color: var(--merk-cyaan); }
.merk-beweging svg { width: 12px; height: 12px; }
html.beweging-uit *, html.beweging-uit *::before, html.beweging-uit *::after {
  animation-play-state: paused !important; animation: none !important; transition: none !important;
}
html.beweging-uit { scroll-behavior: auto; }
/* Wat alleen door een animatie zichtbaar wordt, moet zonder animatie gewoon
   staan: anders blijft een kop met een binnenkomst-animatie onzichtbaar. */
html.beweging-uit .in, html.beweging-uit .onthul { opacity: 1 !important; transform: none !important; }

/* ---- De kopbalk van de publieke pagina's ----
   Eén balk voor de voordeur, de handleiding, de whitepaper, het manifest en
   de Bouwplaats. Links het merk, dan het menu (sitemenu.js, vier ingangen),
   rechts een zoekknop (sitezoek.js), de taal en één knop "Aan de slag".
   Geen versienummer en geen knop "Beweging uit": die staat in de voet.

     <header class="merk-kop-balk" id="kop">
       <div class="merk-kop-binnen">
         <a class="brand" href="/"><svg>…</svg><span>Semantic<span class="xl">XL</span></span></a>
         <span data-sxl-sitemenu></span>
         <div class="merk-kop-rechts">
           <span data-sxl-sitezoek></span>
           <span data-i18n-switcher></span>
           <a class="merk-kop-cta" href="/login" data-i18n="site.aanDeSlag">Aan de slag</a>
         </div>
       </div>
     </header>

   Onder 900 pixels wordt het menu een hamburger rechts in de balk; onder
   560 pixels verhuist "Aan de slag" naar dat uitgeklapte menu. De voordeur
   zet .zwevend op de balk: dan ligt hij doorzichtig over het brein en wordt
   hij pas glas als je scrolt (.vast). */
html.merk-donker .merk-kop-balk {
  position: sticky; top: 0; z-index: 50; color: var(--merk-tekst);
  background: rgba(4, 7, 13, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--merk-lijn);
}
html.merk-donker .merk-kop-balk.zwevend {
  position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .35s, border-color .35s;
}
html.merk-donker .merk-kop-balk.zwevend.vast, html.sxl-menu-is-open .merk-kop-balk.zwevend {
  background: rgba(4, 7, 13, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--merk-lijn);
}
/* Met het menu open geen glas: een backdrop-filter maakt van de balk het
   kader voor position:fixed, en dan past het uitgeklapte menu in 62 pixels. */
html.sxl-menu-is-open .merk-kop-balk, html.sxl-menu-is-open .merk-kop-balk.zwevend {
  background: var(--merk-nacht); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: var(--merk-lijn);
}
html.merk-donker .merk-kop-binnen {
  max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 68px;
  display: flex; align-items: center; gap: 10px; font-size: var(--tekst-m);
}
html.merk-donker .merk-kop-balk a { text-decoration: none; }
html.merk-donker .merk-kop-balk a.brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: #fff;
  font-family: var(--merk-kop); font-weight: var(--gewicht-nadruk); font-size: var(--tekst-2xl);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
html.merk-donker .merk-kop-balk a.brand svg { width: 30px; height: 30px; flex-shrink: 0; }
html.merk-donker .merk-kop-balk a.brand .xl, html.merk-donker .merk-kop-balk a.brand b { color: var(--merk-blauw); font-weight: inherit; }
html.merk-donker .merk-kop-balk [data-sxl-sitemenu] { margin-left: 22px; min-width: 0; }
html.merk-donker .merk-kop-balk .sxl-menu a, html.merk-donker .merk-kop-balk .sxl-menu button { color: var(--merk-tekst); }
html.merk-donker .merk-kop-balk .sxl-menu a:hover, html.merk-donker .merk-kop-balk .sxl-menu button:hover { color: #fff; }
html.merk-donker .merk-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
html.merk-donker .merk-kop-balk a.merk-kop-cta {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  font-weight: var(--gewicht-nadruk); color: #021019; background: var(--merk-blauw);
  box-shadow: 0 8px 26px rgba(24, 164, 255, 0.3);
}
html.merk-donker .merk-kop-balk a.merk-kop-cta:hover { filter: brightness(1.08); color: #021019; }
/* Op de losse inlogpagina brengt de knop je nergens heen. */
html[data-page="login"] .merk-kop-balk .merk-kop-cta { display: none; }
@media (max-width: 900px) {
  html.merk-donker .merk-kop-binnen { padding: 0 16px; height: 62px; gap: 6px; }
  html.merk-donker .merk-kop-balk [data-sxl-sitemenu] { order: 3; margin-left: 4px; }
}
@media (max-width: 560px) {
  html.merk-donker .merk-kop-balk a.merk-kop-cta { display: none; }
}
@media print {
  html.merk-donker .merk-kop-balk { display: none !important; }
}

/* ---- De voet: hier staat "Beweging uit" ---- */
.merk-voet-beweging { display: inline-flex; align-items: center; gap: 10px; }