/* Huisstijl House of Sports
   =========================
   Zwart met oranje, licht als standaard. Dezelfde waarden als de andere tools
   van House of Sports — het weddenschapspel rond het WK Roeien draagt dit palet
   ook — zodat de twee naast elkaar niet uit de toon vallen.

   Het merk zit op vier plekken en verder nergens: dit tokenblok, MERKNAAM en
   MERKTEKEN bovenin app/index.html, het pictogram in de kop van datzelfde
   bestand, en MERKNAAM in .env. Gaat het platform ooit een andere naam dragen,
   dan verander je die vier en verder niets; zie docs/merk.md.

   De kleurregel die hier telt: wit leest niet op oranje. Het merkoranje haalt
   tegen wit maar 3,1:1, en dat is te weinig voor tekst van 14 px. Vandaar twee
   tokens en geen één:

     --accent        het merkoranje als vlak, met --accent-op erop. Bijna-zwart
                     op oranje haalt 6,3:1, in beide weergaven.
     --accent-tekst  oranje als tekst of als icoon. In de lichte weergave een
                     donkerder oranje — #B34300 haalt 5,6:1 op wit en 5,1:1 op
                     de achtergrond; in de donkere weergave het merkoranje zelf,
                     dat daar 6,0:1 haalt op een kaart.

   Zet nooit --accent als tekst op een licht vlak.

   Kleuren staan uitsluitend hier, als variabele. Een losse hex in een component
   blijft bij de volgende huisstijlwijziging staan. */

/* Hanken Grotesk, de letter van House of Sports, staat in app/lettertype/ en
   wordt hier vandaan geladen en niet van een CDN: eis S-22 uit
   docs/NIEUWE-TOOL.md staat dat niet toe en de Content-Security-Policy zet
   font-src op 'self'.

   Er bestaan drie gewichten: 400, 600 en 700. Gebruik niets zwaarder — dan
   verzint de browser er zelf een en dat oogt vies. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("./lettertype/HankenGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("./lettertype/HankenGrotesk-Semi-Bold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("./lettertype/HankenGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --achtergrond: #F4F4F4;
  --vlak:        #FFFFFF;
  --vlak-2:      #FAF9F8;
  --tekst:       #0F0D0B;
  --gedempt:     #6B6763;
  --nav-tekst:   #2E2A26;
  --lijn:        #E6E6E6;
  --lijn-zacht:  #EFEEED;
  --lijn-sterk:  #C9C4BF;

  /* Het merkoranje. Vlak en tekst zijn twee tokens en geen één; zie de kop. */
  --accent:       #FF5C01;
  --accent-op:    #0F0D0B;
  --accent-tekst: #B34300;
  --accent-zacht: #FFEDE0;

  /* Het amber-naar-oranje verloop uit het logo. Draagt altijd donkere tekst. */
  --verloop:     linear-gradient(90deg, #F8A815, #EB5E1E);

  /* De merkbalk is in beide weergaven zwart, net als het logo zelf. Dat is het
     merk en dat hoort niet mee te bewegen met de voorkeur van de kijker. */
  --merkbalk:    #0F0D0B;

  --goed:        #1E7A4B;
  --slecht:      #C8322A;
  --let-op:      #A66300;
  --goed-vlak:   #E7F4ED;
  --goed-tekst:  #14603A;
  --slecht-vlak: #FBEBEA;
  --slecht-tekst:#A02219;
  --let-op-vlak: #FDF0DA;
  --let-op-tekst:#7A4A00;

  --schaduw:     rgba(15, 13, 11, .18);
  --nav-breedte: 250px;
  --rond:        10px;

  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  /* De vaste grafiekvolgorde. Reeks 1 is het merkoranje. Betekenis zit nooit
     alleen in de kleur; overal waar deze gebruikt worden staat tekst bij. */
  --reeks-1: #FF5C01;
  --reeks-2: #1D4ED8;
  --reeks-3: #0D9488;
  --reeks-4: #7C3AED;
}

/* Licht is hier de standaard, anders dan bij het platform waar dit vandaan
   komt: de huisstijl van House of Sports is licht met een zwarte balk. Wie
   liever donker werkt zet het om met de knop rechtsboven, en die keuze blijft
   bewaard. */
:root[data-thema="donker"] {
  --achtergrond: #0F0D0B;
  --vlak:        #16130F;
  --vlak-2:      #1E1A15;
  --tekst:       #FFFFFF;
  --gedempt:     #9A948E;
  --nav-tekst:   #D9D5D1;
  --lijn:        #2C2823;
  --lijn-zacht:  #221E1A;
  --lijn-sterk:  #4E4841;

  /* Het vlak blijft oranje met bijna-zwarte tekst — dat is het merk. Alleen
     accenttekst gaat terug naar het volle merkoranje, dat op donker wél leest. */
  --accent-tekst: #FF5C01;
  --accent-zacht: rgba(255, 92, 1, .13);

  --goed:        #3FB950;
  --slecht:      #F0503A;
  --let-op:      #E3A008;
  --goed-vlak:   rgba(63, 185, 80, .16);
  --goed-tekst:  #7EE787;
  --slecht-vlak: rgba(240, 80, 58, .16);
  --slecht-tekst:#FFB4A8;
  --let-op-vlak: rgba(227, 160, 8, .16);
  --let-op-tekst:#F5C451;

  --schaduw:     rgba(0, 0, 0, .6);

  --reeks-2: #3B82F6;
  --reeks-3: #2DD4BF;
  --reeks-4: #C084FC;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; margin: 30px 0 12px; }
h3 { font-size: 15px; }
a { color: inherit; }
p { margin: 8px 0; }

.gedempt { color: var(--gedempt); }
.klein { font-size: 13px; }
.inleiding { color: var(--gedempt); font-size: 13px; margin-top: 6px; max-width: 68ch; }
.rechts { text-align: right; }
.rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rij.uiteen { justify-content: space-between; }

/* --- knoppen en velden ---------------------------------------------------- */

button {
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: var(--rond); padding: 11px 17px;
  background: var(--accent); color: var(--accent-op);
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.stil {
  background: transparent; color: var(--nav-tekst); border: 1px solid var(--lijn);
  font-weight: 400; font-size: 13px; padding: 8px 13px;
}
button.stil:hover { border-color: var(--accent); color: var(--tekst); filter: none; }
button.mini { padding: 5px 10px; font-size: 12px; }
button.gevaar { color: var(--slecht); }
button.gevaar:hover { border-color: var(--slecht); }
button.breed { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--rond);
  border: 1px solid var(--lijn); background: var(--vlak-2); color: var(--tekst);
  font-family: var(--font); font-size: 15px;
}
textarea { resize: vertical; min-height: 74px; }
input[readonly], input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
label { display: block; font-size: 13px; color: var(--gedempt); margin-bottom: 5px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.velden.smal { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --- het merk ------------------------------------------------------------- */

.merk { display: flex; align-items: center; gap: 10px; }
.merk b { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
/* Het amber-naar-oranje verloop uit het logo, als streepje links van de naam. */
.streep { width: 32px; height: 3px; background: var(--verloop); border-radius: 2px; flex: 0 0 auto; }
/* Het beeldmerk is eenkleurig op één vlak na; vandaar --tekst en niet --accent.
   De punt in de cirkel draagt de kleur van de kaart eronder, en valt daardoor in
   beide weergaven weg tegen de achtergrond. */
.merkteken { width: 34px; flex: 0 0 auto; color: var(--tekst); line-height: 0; }
.merkteken svg { width: 100%; height: auto; display: block; }

/* --- inlogscherm ---------------------------------------------------------- */

.midden { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kaart {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 30px; width: 100%; max-width: 440px;
}

.melding {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--rond); font-size: 14px;
  border: 1px solid var(--lijn); background: var(--vlak-2);
}
.melding.fout { border-color: var(--slecht); background: var(--slecht-vlak); color: var(--slecht-tekst); }
.melding.goed { border-color: var(--goed); background: var(--goed-vlak); color: var(--goed-tekst); }
/* Voor een toestand die niet fout is maar wel opvalt: je bent op andermans naam
   aan het werk. Rood zou "er is iets misgegaan" zeggen, en dat is het niet. */
.melding.let-op { border-color: var(--let-op); background: var(--let-op-vlak); color: var(--let-op-tekst); }

/* --- indeling ------------------------------------------------------------- */

.raam { display: grid; grid-template-columns: var(--nav-breedte) 1fr; min-height: 100vh; }
nav.zij {
  background: var(--vlak); border-right: 1px solid var(--lijn); padding: 20px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* De zwarte merkbalk van House of Sports. In beide weergaven zwart, net als het
   logo zelf, en tot de randen doorlopend: vandaar de negatieve marge, die de
   padding van nav.zij hierboven opheft. */
nav.zij .kop { background: var(--merkbalk); color: #FFFFFF; margin: -20px 0 12px; padding: 18px 20px; }
/* Op zwart haalt --gedempt maar 3,5:1. Wit op 66% haalt ruim 7:1. */
nav.zij .kop .gedempt { color: rgba(255, 255, 255, .66); }
nav.zij .groep {
  padding: 15px 20px 5px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gedempt);
}
nav.zij a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 20px; color: var(--nav-tekst); text-decoration: none; font-size: 14px;
  border-left: 3px solid transparent;
}
nav.zij a:hover { background: var(--vlak-2); color: var(--tekst); }
nav.zij a.aan {
  border-left-color: var(--accent); background: var(--vlak-2);
  color: var(--tekst); font-weight: 700;
}
nav.zij a .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
nav.zij a .aantal {
  font-size: 11px; font-weight: 700; background: var(--vlak-2); color: var(--gedempt);
  border-radius: 99px; padding: 1px 7px;
}

/* Linksonder: een suggestie over het platform zelf. Onderaan met margin-top
   auto en niet tussen de schermen, want het is geen scherm — en boven de vouw
   zou het concurreren met het werk waarvoor iemand kwam. Omkaderd en niet als
   menu-item, zodat het ook geen scherm lijkt. */
.zijvoet { margin-top: auto; padding: 16px 14px 2px; }
.zijvoet button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: transparent; border: 1px solid var(--lijn);
  color: var(--nav-tekst); font-size: 13.5px; font-weight: 400; padding: 9px 12px;
}
.zijvoet button:hover { border-color: var(--accent); color: var(--tekst); filter: none; }
.zijvoet .aantal {
  font-size: 11px; font-weight: 700; background: var(--vlak-2); color: var(--gedempt);
  border-radius: 99px; padding: 1px 7px;
}

main { padding: 26px 32px 70px; max-width: 1180px; }
header.balk {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 32px; border-bottom: 1px solid var(--lijn); position: sticky; top: 0;
  background: var(--achtergrond); z-index: 5; flex-wrap: wrap;
}

/* --- tegels --------------------------------------------------------------- */

.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.tegel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; }
.tegel .kop { font-size: 12px; color: var(--gedempt); }
.tegel .getal { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tegel .bij { font-size: 12px; color: var(--gedempt); margin-top: 4px; }
.tegel.let-op { border-left: 3px solid var(--accent); }

/* --- eventblokken --------------------------------------------------------- */

.blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-top: 18px; }
.blok {
  display: flex; flex-direction: column; background: var(--vlak);
  border: 1px solid var(--lijn); border-left: 3px solid var(--lijn-sterk);
  border-radius: 12px; padding: 17px 19px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.blok:hover { border-color: var(--accent); transform: translateY(-2px); }
.blok.open { border-left-color: var(--accent); }
.blok.klaar { border-left-color: var(--goed); }
.blok .plaats { font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
.blok .wanneer { font-size: 13px; color: var(--gedempt); margin-top: 2px; }
.blok .onder { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- merktekens ----------------------------------------------------------- */

.vlag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--vlak-2); color: var(--gedempt);
}
.vlag.goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.vlag.let-op { background: var(--let-op-vlak); color: var(--let-op-tekst); }
.vlag.slecht { background: var(--slecht-vlak); color: var(--slecht-tekst); }
.vlag.merk { background: var(--accent-zacht); color: var(--accent-tekst); }

/* --- tabellen ------------------------------------------------------------- */

.tabelrand { border: 1px solid var(--lijn); border-radius: 12px; overflow-x: auto; background: var(--vlak); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gedempt); font-weight: 700; white-space: nowrap;
  border-bottom-color: var(--lijn);
}
tr:last-child td { border-bottom: 0; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.getal { width: 1%; }
th.sorteer { cursor: pointer; user-select: none; }
th.sorteer:hover, th.sorteer.aan { color: var(--tekst); }
th .pijl { display: inline-block; width: 11px; color: var(--accent-tekst); }
tr.uit td { opacity: .5; }
td.nadruk { font-weight: 700; }

.balkje { height: 5px; border-radius: 99px; background: var(--vlak-2); overflow: hidden; min-width: 70px; }
.balkje i { display: block; height: 100%; background: var(--reeks-1); }

/* --- formulier voor de beschikbaarheid ------------------------------------- */
/* Dit is het scherm waar alles om draait, en het moet op een telefoon te doen
   zijn: iemand vult het in de trein in en niet achter een bureau. Vandaar
   blokken onder elkaar in plaats van een tabel. */

.blokrij { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dagblok { border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); overflow: hidden; }
.dagblok > .dagkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--vlak-2); border-bottom: 1px solid var(--lijn);
  flex-wrap: wrap;
}
.dagblok > .dagkop b { font-size: 15px; }
.dagblok .inhoud { padding: 14px 16px; display: grid; gap: 12px; }

.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border: 1px solid var(--lijn); border-radius: var(--rond); cursor: pointer;
  background: var(--achtergrond);
}
.keuze:hover { border-color: var(--lijn-sterk); }
.keuze.aan { border-color: var(--accent); background: var(--accent-zacht); }
.keuze input { margin-top: 2px; flex: 0 0 auto; }
.keuze .tekst { flex: 1; }
.keuze .tekst b { display: block; font-size: 14px; }
.keuze .tekst span { display: block; font-size: 12.5px; color: var(--gedempt); }
.keuze.vol { opacity: .75; }

/* Het rooster van een dag, als losse merktekens boven het invulveld. Bewust
   geen aanvinkbare lijst: de crew kiest geen shift meer, die geeft een venster
   op. Zie de toelichting bij `beschikbaarheid` in db/001-schema.sql. */
.shiftlijst { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }

/* Het rooster van een dag op het planningsscherm: altijd zichtbaar, ook als er
   nog niemand beschikbaar is. Juist dan zet je het klaar. */
.shiftrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.shiftkaart {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border: 1px solid var(--lijn); border-left: 3px solid var(--accent);
  border-radius: var(--rond); padding: 11px 13px; background: var(--achtergrond);
}
.shiftkaart.vol { border-left-color: var(--goed); }
.shiftkaart b { font-size: 14px; }

/* De vraag om een parkeerplaats. Bewust een blok met een rand eromheen en niet
   een regel in een lijstje: dit is een aanvraag, en dat hoort zo te voelen.
   Zie de toelichting bij `vervoer` in db/001-schema.sql. */
.aanvraag {
  border: 1px solid var(--let-op); background: var(--let-op-vlak);
  border-radius: var(--rond); padding: 13px 15px;
}
.aanvraag .kop { font-weight: 700; font-size: 14px; }
.aanvraag p { font-size: 13px; margin: 5px 0 10px; }

/* --- lege staten ----------------------------------------------------------
   Een scherm waar nog niets is, staat leeg met één eerlijke zin. Geen
   voorbeeldrijen, geen demoteams, geen verzonnen cijfers. Nepdata maakt
   onzichtbaar of een koppeling werkelijk werkt. */

.leeg {
  border: 1px dashed var(--lijn-sterk); border-radius: 12px; padding: 26px;
  background: var(--vlak); margin-top: 16px;
}
.leeg h3 { margin-bottom: 6px; }
.leeg p { color: var(--gedempt); font-size: 14px; margin: 0; max-width: 62ch; }
.leegregel { padding: 14px 16px; border: 1px dashed var(--lijn); border-radius: 12px; color: var(--gedempt); font-size: 14px; }

/* --- venster over het scherm ----------------------------------------------- */

.overlaag {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .74); animation: opdoemen .16s ease-out;
}
.venster {
  width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
  box-shadow: 0 24px 64px var(--schaduw);
  animation: omhoog .22s cubic-bezier(.2, .8, .3, 1);
}
.vensterkop {
  position: sticky; top: 0; z-index: 2; background: var(--vlak);
  border-radius: 13px 13px 0 0; border-bottom: 3px solid var(--accent);
  padding: 18px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.vensterinhoud { padding: 18px 22px 22px; }
.sluit { background: transparent; border: 0; color: var(--gedempt); font-size: 24px; line-height: 1; padding: 0 4px; }
.sluit:hover { color: var(--tekst); filter: none; }
body.vast { overflow: hidden; }
@keyframes opdoemen { from { opacity: 0; } to { opacity: 1; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .overlaag, .venster { animation: none; } }

/* --- suggesties over het platform ------------------------------------------
   Eén blokje per suggestie, met de tekst zoals hij is ingetypt: pre-wrap, want
   wie drie punten onder elkaar zet bedoelt drie punten onder elkaar. */

.suggesties { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.suggestie {
  border: 1px solid var(--lijn); border-radius: var(--rond); padding: 11px 13px;
  background: var(--vlak-2);
}
.suggestie .tekst { margin: 7px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Het antwoord van de beheerder, ingesprongen achter een streepje: het hoort
   bij de suggestie erboven en is niet een tweede suggestie. */
.suggestie .antwoord {
  margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--gedempt); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- beheer of gebruiker ---------------------------------------------------
   Twee knoppen in één omhulsel, met een gele vulling op de kant waar je staat.
   Geen keuzelijst: bij twee mogelijkheden kost een keuzelijst een klik extra en
   verbergt hij welke van de twee actief is. */
.schakelaar { display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; }
.schakelaar button {
  background: transparent; color: var(--nav-tekst); border: 0; border-radius: 0;
  font-size: 13px; font-weight: 400; padding: 7px 13px;
}
.schakelaar button:hover { background: var(--vlak-2); color: var(--tekst); filter: none; }
.schakelaar button.aan { background: var(--accent); color: var(--accent-op); font-weight: 700; }
.schakelaar button.aan:hover { background: var(--accent); filter: brightness(1.08); }
.schakelaar button + button { border-left: 1px solid var(--lijn); }

/* --- weergave wisselen ----------------------------------------------------- */

button.thema {
  background: transparent; border: 1px solid var(--lijn); color: var(--nav-tekst);
  padding: 7px 10px; font-size: 14px; line-height: 1; border-radius: var(--rond);
}
button.thema:hover { border-color: var(--accent); color: var(--tekst); filter: none; }

/* --- ontwikkelpaneel, bestaat niet in productie ----------------------------- */

.lokaal {
  position: fixed; right: 16px; bottom: 16px; z-index: 20; background: var(--vlak);
  border: 1px solid var(--accent); border-radius: 12px; padding: 14px; width: 280px;
  box-shadow: 0 10px 30px var(--schaduw);
}
.lokaal h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-tekst); margin-bottom: 9px; }
.lokaal .weg { position: absolute; top: 8px; right: 10px; color: var(--gedempt); background: none; border: 0; padding: 0; font-size: 17px; }
.lokaal-open { position: fixed; right: 16px; bottom: 16px; z-index: 20; }

@media (max-width: 900px) {
  .raam { grid-template-columns: 1fr; }
  nav.zij { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--lijn); }
  main { padding: 20px 16px 60px; }
  header.balk { padding: 12px 16px; }
}

@media print {
  nav.zij, header.balk, button, .lokaal, .lokaal-open { display: none !important; }
  .raam { display: block; }
  main { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
}