/* De kop en de linkerbalk (8 nov 2026; mockups kopbalk a2 en zijbalk a2; templates/base.html, core/_zoeken.html,
   core/_zoeken_vak.html, core/_zoekvraag.html, core/_zijbalk.html, static/js/zoeken.js, gebruikersmenu.js).
   Na corpus.css, fabriek.css, appgevoel.css en telefoon.css. De pc-weergave en de rest: alles met `html:not(.tel)` en vanaf
   901 px; de telefoon (html.tel) en de rij knoppen onder 900 px houden hun opmaak uit corpus.css en telefoon.css - alleen
   het menu achter je naam staat daar open in de balk (hieronder, `Op de telefoon`). Het vak van de pil (.zk-vak) en het
   grote veld (.zk-groot) gelden overal waar het vak opent. */

/* --- Het vak achter de pil (een <dialog>; zie appgevoel.css voor de basis) ------------------------------------------- */
html:not(.tel) .zk-vak {
  width: min(680px, calc(100vw - 32px)); margin: 18px auto 0; padding: 8px; border: 1px solid var(--rand); border-radius: 26px;
  box-shadow: 0 18px 44px -20px rgba(29, 31, 33, .4); max-height: min(78vh, 720px);
}
html:not(.tel) .zk-vak::backdrop { background: rgba(29, 31, 33, .14); }
html:not(.tel) .zk-vak .zk-form {
  position: relative; height: 52px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--vlak);
}
html:not(.tel) .zk-vak .zk-invoer { padding: 0; height: 50px; font-size: 17px; }
html:not(.tel) .zk-vak .zk-invoer::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
html:not(.tel) .zk-vak .zk-kbd, html:not(.tel) .zk-knop .zk-kbd, .zk-groot .zk-kbd {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--pagina); font-size: 12px; line-height: 1; color: var(--zacht); white-space: nowrap;
}
/* Het vergrootglas wordt een praatwolkje, donker, zodra de tekst een vraag is. */
html:not(.tel) .zk-modus {
  position: relative; display: block; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--zacht);
  transition: background .2s, color .2s;
}
html:not(.tel) .zk-modus > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .18s, transform .22s; }
html:not(.tel) .zk-modus .icoon { width: 18px; height: 18px; }
html:not(.tel) .zk-m-v { opacity: 0; transform: scale(.5) rotate(-25deg); }
html:not(.tel) .zk-vraagt .zk-modus { background: var(--donker); color: #fff; }
html:not(.tel) .zk-vraagt .zk-m-z { opacity: 0; transform: scale(.5) rotate(25deg); }
html:not(.tel) .zk-vraagt .zk-m-v { opacity: 1; transform: none; }
html:not(.tel) .zk-vak .zk-lijst { max-height: 520px; padding: 2px 0; }
html:not(.tel) .zk-vak .zk-groep { padding: 14px 14px 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zacht); }
html:not(.tel) .zk-vak .zk-regel { padding: 9px 14px; border-radius: 14px; align-items: center; }
html:not(.tel) .zk-vak .zk-titel { font-weight: 400; font-size: 15.5px; }
html:not(.tel) .zk-vak .zk-sub { font-size: 14px; }
html:not(.tel) .zk-vak .zk-regel:hover, html:not(.tel) .zk-vak .zk-regel.zk-gekozen { background: var(--vlak); }
html:not(.tel) .zk-vak .zk-leeg { padding: 22px 14px; font-size: 15px; }
html:not(.tel) .zk-vraagregel { padding: 14px; }
html:not(.tel) .zk-vraagregel .zk-vraag-ic, html:not(.tel) .zk-vak [data-zk-start] .zk-vraag-ic {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; margin-right: -2px; border-radius: 50%;
  background: var(--donker); color: #fff;
}
html:not(.tel) .zk-vraagregel .zk-vraag-ic .icoon { width: 16px; height: 16px; }
/* Het startpaneel van het grote veld (snelle vragen en recent): kleinere ronde icoontjes, de snelle vragen donker, recent licht. */
html:not(.tel) .zk-vak [data-zk-start] .zk-vraag-ic { width: 30px; height: 30px; margin-right: 6px; background: var(--vlak); color: var(--zacht); }
html:not(.tel) .zk-vak [data-zk-start="snel"] .zk-vraag-ic { background: var(--donker); color: #fff; }
html:not(.tel) .zk-vak [data-zk-start] .zk-vraag-ic .icoon { width: 15px; height: 15px; }
html:not(.tel) .zk-vak [data-zk-start] .zk-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(.tel) .zk-vraagregel .zk-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; font-weight: 500; }
html:not(.tel) .zk-vraagregel .zk-vraag-voor { font-weight: 400; color: var(--zacht); }
html:not(.tel) .zk-vraagregel .zk-sub { font-size: 13px; flex: none; }
html:not(.tel) .zk-vak .zk-klein { padding: 6px 14px; }
html:not(.tel) .zk-vak .zk-klein .zk-titel { font-size: 14px; color: var(--zacht); }
html:not(.tel) .zk-vak .zk-klein .zk-sub { font-size: 13px; }
html:not(.tel) .zk-vak .zk-hulp { margin-top: 6px; padding: 12px 14px 4px; font-size: 13px; }
html:not(.tel) .zk-vak .zk-hulp .zk-hulp-tab { margin-left: auto; }
/* Het antwoord in het vak: hulp.js zet de vraag en het antwoord in .zk-uit. */
html:not(.tel) .zk-antwoord { padding: 14px 14px 6px; }
html:not(.tel) .zk-antwoordt .zk-hulp { display: none; }
html:not(.tel) .zk-uit { display: flex; flex-direction: column; gap: 10px; max-height: min(46vh, 420px); overflow: auto; font-size: 16px; line-height: 1.55; }
html:not(.tel) .zk-uit .hlp-a { max-width: 62ch; }
html:not(.tel) .zk-uit:empty { display: none; }
html:not(.tel) .zk-vak .zk-verder {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 0 7px 0 18px; border: 1px solid var(--lijn);
  border-radius: 999px;
}
html:not(.tel) .zk-vak .zk-verder input[type=text][name=vraag] {
  flex: 1 1 auto; width: auto; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px;
}
html:not(.tel) .zk-vak .zk-verder button[type=submit].hlp-stuur {
  flex: none; width: auto; min-height: 0; height: 34px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--donker); color: #fff; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; cursor: pointer;
}
html:not(.tel) .zk-vak .zk-verder button[type=submit].hlp-stuur[disabled] { opacity: .5; cursor: default; }
html:not(.tel) .zk-terug { display: inline-block; margin: 14px 0 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--zacht); cursor: pointer; }
html:not(.tel) .zk-terug:hover { color: var(--tekst); }

/* Het vak onder het grote veld van Overzicht (opties `paneel`, zoeken.js `plaats`): op de plek van het veld, even breed; de invoerrij
   is het veld en de lijst, het antwoord en de toetsen staan eronder in een kaart (mockup overzicht-nieuw a3, vragen-1920). */
.zk-kaart { display: contents; }
html:not(.tel) .zk-vak.zk-onder-veld { max-height: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
html:not(.tel) .zk-vak.zk-onder-veld[open] { display: block; }
html:not(.tel) .zk-vak.zk-onder-veld::backdrop { background: rgba(29, 31, 33, .08); }
html:not(.tel) .zk-vak.zk-onder-veld .zk-form {
  height: var(--zk-veld-h, 64px); padding: 0 22px 0 26px; border: 1px solid var(--donker); background: var(--pagina);
}
html:not(.tel) .zk-vak.zk-onder-veld .zk-invoer { height: calc(var(--zk-veld-h, 64px) - 2px); font-size: 18px; }
html:not(.tel) .zk-vak.zk-onder-veld .zk-kaart {
  display: block; margin-top: 12px; padding: 8px 8px 4px; border: 1px solid var(--rand); border-radius: 24px; background: var(--pagina);
  box-shadow: 0 18px 44px -20px rgba(29, 31, 33, .4); max-height: min(70vh, 640px, var(--zk-kaart-max, 640px)); overflow-y: auto;
}

/* --- Het grote veld (core/_zoekvraag.html) ---------------------------------------------------------------------------- */
.zk-groot {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 64px; margin: 0; padding: 0 22px 0 26px;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina); color: var(--zacht);
}
/* Een zichtbare focusring (L5, 8 nov 2026): de rand wordt donker en er komt een ring omheen; het veld zelf heeft geen eigen ring. */
.zk-groot:focus-within { border-color: var(--donker); outline: 2px solid var(--donker); outline-offset: 2px; }
.zk-groot-invoer { position: relative; flex: 1; min-width: 0; display: flex; }
/* De placeholder met een wisselend deel (`voorstel`): vast deel + een vraag die om de 3 s met een fade wisselt. */
.zk-ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 18px; color: var(--zacht); pointer-events: none; }
.zk-ph-wis { display: inline-block; color: #8b8f94; transition: opacity .6s ease; }
.zk-ph-wis.weg { opacity: 0; }
.zk-groot-icoon { display: grid; flex: none; }
.zk-groot-icoon .icoon { width: 20px; height: 20px; }
.zk-groot input[type=search] {
  flex: 1; min-width: 0; width: auto; height: 62px; padding: 0; border: 0; outline: 0; background: none; font: inherit;
  font-size: 18px; color: var(--tekst); -webkit-appearance: none; appearance: none;
}
.zk-groot input[type=search]::placeholder { color: var(--zacht); opacity: 1; }
html.tel .zk-groot { height: 48px; padding: 0 16px; }
html.tel .zk-groot input[type=search] { height: 46px; font-size: 16px; }
html.tel .zk-groot .zk-kbd { display: none; }

@media (prefers-reduced-motion: reduce) { .zk-modus, .zk-modus > span, .zk-ph-wis { transition: none; } }

/* --- De pc: de kop en de linkerbalk ----------------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html:not(.tel) { --kophoogte: 76px; }
  html:not(.tel) body.app { grid-template-rows: var(--kophoogte) 1fr; }
  html:not(.tel) body.app.kijkmodus { grid-template-rows: auto var(--kophoogte) 1fr; }

  /* De kop: links het woordmerk, in het midden de pil, rechts de meldingen en het ?. */
  html:not(.tel) .topbar {
    display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 600px) minmax(max-content, 1fr); align-items: center;
    gap: 32px; padding: 0 48px 0 40px;
  }
  html:not(.tel) .topbar-merk { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; font-size: 14px; letter-spacing: .32em; line-height: 1.25; color: var(--tekst); }
  html:not(.tel) .topbar-merk span { margin-top: 1px; font-size: 13px; letter-spacing: 0; color: var(--zacht); }
  html:not(.tel) .zk-knop {
    grid-column: 2; grid-row: 1; width: 100%; min-width: 0; height: 46px; margin: 0; padding: 0 10px 0 20px; gap: 12px;
    border: 1px solid var(--rand); border-radius: 999px; background: var(--vlak); font-size: 15px; color: var(--zacht);
  }
  html:not(.tel) .zk-knop:hover { border-color: var(--lijn); background: var(--pagina); color: var(--zacht); }
  html:not(.tel) .zk-knop .icoon { width: 18px; height: 18px; }
  html:not(.tel) .zk-knop .zk-kbd { margin-left: auto; }
  html:not(.tel) .topbar-rechts { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 10px; }
  html:not(.tel) .topbar-rechts .melding { margin: 0; }
  html:not(.tel) .melding-pil { height: 40px; padding: 0 16px; gap: 9px; border: 1px solid var(--rand); font-size: 14px; }
  html:not(.tel) .melding-pil:hover, html:not(.tel) .melding-pil[aria-expanded="true"] { border-color: var(--lijn); background: var(--vlak); }
  html:not(.tel) .melding-stip { background: var(--let); }
  html:not(.tel) .hlp-knop { width: 40px; height: 40px; margin: 0; font-size: 14px; }
  html:not(.tel) .hlp-knop:hover, html:not(.tel) .hlp-knop[aria-expanded="true"] { background: var(--vlak); color: var(--tekst); border-color: var(--lijn); }
  /* Het lijstje van de meldingen hangt rechts onder de pil, niet meer gecentreerd. */
  html:not(.tel) .melding-paneel { left: auto; right: 48px; transform: none; width: min(400px, calc(100vw - 32px)); border-radius: 24px; padding: 8px 12px; }

  /* De linkerbalk: een donkerder verloop, het actieve item wit, drie groepjes zonder koppen. */
  html:not(.tel) .zijbalk { background: linear-gradient(180deg, #e3e3e0, #ececea); padding: 26px 14px 14px; }
  html:not(.tel) .zijbalk .woordmerk { padding: 0 10px; margin: 0 0 34px; }
  html:not(.tel) .zijbalk .hoofdnav { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  html:not(.tel) .hoofdnav .groep { display: flex; flex-direction: column; gap: 1px; }
  html:not(.tel) .hoofdnav .groep + .groep { margin-top: 22px; }
  /* Een dun lijntje tussen de groepjes (mockup zijbalk/a3, 9 nov 2026); niet boven het eerste zichtbare en niet bij onderaan. */
  html:not(.tel) .hoofdnav .groep:has(a) ~ .groep:has(a):not(.onderaan) { margin-top: 11px; padding-top: 11px; position: relative; }
  html:not(.tel) .hoofdnav .groep:has(a) ~ .groep:has(a):not(.onderaan)::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: rgba(0, 0, 0, .085);
  }
  html:not(.tel) .hoofdnav .groep:not(:has(a)) { display: none; }
  html:not(.tel) .hoofdnav .groep.onderaan { margin-top: auto; padding-top: 14px; }
  html:not(.tel) .zijbalk .hoofdnav a, html:not(.tel) .zijbalk .zijbalk-beheer a {
    gap: 12px; margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: #4b4f54;
  }
  html:not(.tel) .zijbalk .hoofdnav a .icoon, html:not(.tel) .zijbalk .zijbalk-beheer a .icoon { width: 20px; height: 20px; color: var(--zacht); }
  html:not(.tel) .zijbalk .hoofdnav a:hover, html:not(.tel) .zijbalk .zijbalk-beheer a:hover { background: rgba(255, 255, 255, .45); color: var(--tekst); }
  html:not(.tel) .zijbalk .hoofdnav a[aria-current="page"], html:not(.tel) .zijbalk .zijbalk-beheer a[aria-current="page"] {
    background: #fff; color: var(--tekst); font-weight: 500; box-shadow: 0 0 0 1px var(--rand);
  }
  html:not(.tel) .zijbalk a[aria-current="page"] .icoon { color: var(--tekst); }
  /* De teller is een rustig getal, geen pilletje. */
  html:not(.tel) .zijbalk .teller {
    margin-left: auto; padding: 0; border-radius: 0; background: none !important; font-size: 12px; font-weight: 400;
    color: var(--zacht); font-variant-numeric: tabular-nums;
  }
  html:not(.tel) .zijbalk .teller.rood { color: var(--laat); font-weight: 500; }
  html:not(.tel) .zijbalk .zijbalk-beheer { margin-top: 1px; padding-top: 0; border-top: 0; }

  /* Onderaan: één regel met je naam en rol; een klik opent het menu. */
  html:not(.tel) .zijbalk-onder { position: relative; margin: 14px 0 0; padding: 0; }
  html:not(.tel) .zijbalk-onder .wie {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 12px 8px 4px; border: 0;
    border-top: 1px solid var(--rand); border-radius: 0; background: none; font: inherit; text-align: left; color: var(--tekst);
    cursor: pointer;
  }
  html:not(.tel) .zijbalk-onder .wie:disabled { cursor: default; }
  html:not(.tel) .zijbalk-onder .wie:hover .tk strong { text-decoration: underline; text-underline-offset: 3px; }
  html:not(.tel) .zijbalk-onder .wie:disabled:hover .tk strong { text-decoration: none; }
  html:not(.tel) .zijbalk-onder .wie > .icoon { width: 16px; height: 16px; margin-left: auto; color: var(--lijn); }
  html:not(.tel) .zijbalk-onder .wie:disabled > .icoon { display: none; }
  html:not(.tel) .zijbalk-onder .av {
    display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--donker);
    color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .02em;
  }
  html:not(.tel) .wie .tk { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  html:not(.tel) .zijbalk-onder .wie .tk strong { display: block; font-size: 13px; font-weight: 500; color: var(--tekst); }
  html:not(.tel) .zijbalk-onder .wie .tk span { display: block; font-size: 12px; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Het menu zelf staat buiten het pc-blok, zodat een breedte tussen 900 en 901 px (zoom, een schermdichtheid met halve pixels) het
   menu nooit open in de balk laat staan (review L1): standaard dicht en zwevend; onder 900 px zet het blok onderaan het open in de balk. */
html:not(.tel) .gebruikersmenu {
  display: none; position: fixed; z-index: 70; left: 14px; bottom: var(--gm-onder, 70px); width: 296px;
  max-height: calc(100vh - 40px); overflow-y: auto; padding: 8px; background: var(--pagina); border: 1px solid var(--rand);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(29, 31, 33, .12), 0 1px 2px rgba(29, 31, 33, .06); color: var(--tekst);
}
html:not(.tel) .zijbalk-onder.open .gebruikersmenu { display: block; }

/* --- Het menu zelf (de pc, en onder 900 px op een pc: dan staat het open in de balk); de telefoon heeft de oude regels, hieronder --- */
html:not(.tel) .gebruikersmenu { font-size: 13px; }
html:not(.tel) .gebruikersmenu .gm-label { margin: 0; padding: 8px 10px 4px; font-size: 11.5px; color: var(--zacht); }
html:not(.tel) .gebruikersmenu .gm-rollen { margin: 0; padding: 0; list-style: none; }
html:not(.tel) .gebruikersmenu .gm-rollen li { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 13px; }
html:not(.tel) .gebruikersmenu .icoon { width: 18px; height: 18px; flex: none; color: var(--zacht); }
html:not(.tel) .gebruikersmenu .gm-scheid { height: 1px; margin: 6px 4px; background: var(--rand); }
html:not(.tel) .gebruikersmenu .gm-optie, html:not(.tel) .gebruikersmenu .zijbalk-feedback, html:not(.tel) .gebruikersmenu .gm-push .push-knop > button, html:not(.tel) .gebruikersmenu .zijbalk-telefoon {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; font: inherit; font-size: 13px; font-weight: 400; text-align: left; text-decoration: none; color: var(--tekst);
  cursor: pointer;
}
html:not(.tel) .gebruikersmenu a.gm-optie:hover, html:not(.tel) .gebruikersmenu button.gm-optie:hover, html:not(.tel) .gebruikersmenu .zijbalk-feedback:hover,
html:not(.tel) .gebruikersmenu .gm-push .push-knop > button:hover, html:not(.tel) .gebruikersmenu .zijbalk-telefoon:hover { background: var(--vlak); text-decoration: none; }
html:not(.tel) .gebruikersmenu .gm-stil, html:not(.tel) .gebruikersmenu .gm-stil .icoon { color: var(--zacht); }
html:not(.tel) .gebruikersmenu .gm-uit { margin: 0; }
html:not(.tel) .gebruikersmenu .gm-naam { flex: none; white-space: nowrap; }
html:not(.tel) .gebruikersmenu .fdb-stip { margin-left: auto; }
/* Taal: de drie talen in een kleine schakelaar rechts. */
html:not(.tel) .gebruikersmenu .taalkeuze { display: flex; flex-wrap: nowrap; margin: 0; padding: 4px 10px; cursor: default; }
html:not(.tel) .gebruikersmenu .taalkeuze:hover { background: none; }
html:not(.tel) .gebruikersmenu .talen { display: flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 7px; background: var(--vlak); }
html:not(.tel) .gebruikersmenu .talen button {
  padding: 3px 7px; border: 0; border-radius: 5px; background: none; font: inherit; font-size: 11.5px; white-space: nowrap;
  color: var(--zacht); cursor: pointer; text-decoration: none;
}
html:not(.tel) .gebruikersmenu .talen button[aria-current] { background: var(--pagina); color: var(--tekst); font-weight: 400; box-shadow: 0 0 0 1px var(--rand); }
/* Pushmeldingen en de links daaronder: het icoon links, de tekst ernaast. */
html:not(.tel) .gebruikersmenu .gm-push { position: relative; }
html:not(.tel) .gebruikersmenu .gm-push > .icoon { position: absolute; left: 10px; top: 9px; pointer-events: none; }
html:not(.tel) .gebruikersmenu .gm-push:has([data-push-knop][hidden]) > .icoon { display: none; }
html:not(.tel) .gebruikersmenu .gm-push .push-knop > button { padding-left: 38px; }
html:not(.tel) .gebruikersmenu .push-zin { margin: 0; padding: 4px 10px 4px 38px; font-size: 12px; color: var(--zacht); }
html:not(.tel) .gebruikersmenu .zijbalk-telefoon { padding-left: 38px; }
html:not(.tel) .gebruikersmenu .zijbalk-telefoon + .zijbalk-telefoon { margin-top: 0; }

html:not(.tel) .gebruikersmenu .zijbalk-hulp { display: none; }   /* op de pc is het ? in de kop de ingang (hulp.css) */

/* --- De telefoon: precies zoals vóór de nieuwe balk (review M3, 8 nov 2026) -------------------------------------------------
   `html.tel` houdt de opmaak van corpus.css en telefoon.css; hier alleen wat nodig is om de nieuwe opbouw van de balk (groepjes,
   twee iconen, het menu achter je naam) weer in de oude volgorde en de oude vorm te zetten. core/test_navkop.py bewaakt dat
   hier niets van de pc-opmaak op de telefoon terechtkomt. */
html.tel .topbar-rechts { display: contents; }     /* de kop op de telefoon heeft dit vak niet: zijn kinderen staan weer los in de balk */
.ic-pc, .ic-tel { display: contents; }
.ic-tel { display: none; }
html.tel .ic-pc { display: none; }
html.tel .ic-tel { display: contents; }
html:not(.tel) .hoofdnav a.nav-tel { display: none; }          /* Zoeken: alleen in het paneel van de telefoon */
@media (min-width: 901px) { html:not(.tel) .zk-knop.zk-alleen-tel { display: none; } }   /* de pil weg op de pc, op een pagina met een eigen zoekveld */
.wie-tel { display: none; }
html:not(.tel) .zijbalk-onder .wie.wie-tel { display: none; }
html.tel .zijbalk .zijbalk-onder .wie.wie-pc { display: none; }
html.tel .zijbalk .zijbalk-onder .wie.wie-tel { display: block; }

/* De ingangen: één lijst in de oude volgorde (`data-nav`), zonder de groepjes van de pc. */
html.tel .zijbalk .hoofdnav { display: flex; flex-direction: column; gap: 0; }
html.tel .hoofdnav .groep { display: contents; }
html.tel .hoofdnav [data-nav="overzicht"] { order: 1; }
html.tel .hoofdnav [data-nav="analyse"] { order: 2; }
html.tel .hoofdnav [data-nav="taken"] { order: 3; }
html.tel .hoofdnav [data-nav="projecten"] { order: 4; }
html.tel .hoofdnav [data-nav="productie"] { order: 5; }
html.tel .hoofdnav [data-nav="printers"] { order: 6; }
html.tel .hoofdnav [data-nav="marketing"] { order: 7; }
html.tel .hoofdnav [data-nav="hardware"] { order: 8; }
html.tel .hoofdnav [data-nav="ontwikkeling"] { order: 9; }
html.tel .hoofdnav [data-nav="fabrieken"] { order: 10; }
html.tel .hoofdnav [data-nav="klanten"] { order: 11; }
html.tel .hoofdnav [data-nav="collectie"] { order: 12; }
html.tel .hoofdnav [data-nav="zoeken"] { order: 13; }
html.tel .hoofdnav .groep.onderaan > * { order: 14; }

/* Onderaan: het menu is weer de losse regels van vroeger - Feedback, Vraag Corpus, taal, Telefoon en meldingen, uitloggen. */
html.tel .zijbalk-onder .gebruikersmenu { display: flex; flex-direction: column; position: static; width: auto; padding: 0; border: 0; box-shadow: none; max-height: none; }
html.tel .gebruikersmenu .gm-label, html.tel .gebruikersmenu .gm-rollen, html.tel .gebruikersmenu .gm-scheid { display: none; }
html.tel .gebruikersmenu :is(.taalkeuze, .gm-push, .zijbalk-telefoon, .gm-uit) .icoon { display: none; }
html.tel .gebruikersmenu .gm-push { display: block; }   /* de pushknop en Telefoon en meldingen staan er in de gewone blokstroom van vroeger in (review M-2) */
html.tel .gebruikersmenu .taalkeuze .gm-naam { display: none; }
html.tel .gebruikersmenu .talen { display: contents; }
html.tel .gebruikersmenu .gm-punt { display: inline; }
html.tel .gebruikersmenu .zijbalk-feedback:not(.zijbalk-hulp) { order: 1; }
html.tel .gebruikersmenu .zijbalk-hulp { order: 2; }
html.tel .gebruikersmenu .taalkeuze { order: 3; }
html.tel .gebruikersmenu .gm-push, html.tel .gebruikersmenu .zijbalk-telefoon { order: 4; }
html.tel .gebruikersmenu .gm-uit { order: 5; }
/* Een flexkolom laat de marges niet samenvallen zoals de oude blokken: alles krijgt de ene ruimte van vroeger, 6 px eronder. */
html.tel .zijbalk .zijbalk-onder .gebruikersmenu > :is(.taalkeuze, .zijbalk-feedback, .zijbalk-telefoon, .gm-uit) { margin: 0 0 6px; }
/* Het blok met de pushknop: binnenin de blokstroom van vroeger (pushknop, het iPhone-zinnetje, dan Telefoon en meldingen met 6 px, de marges vallen
   samen), de ruimte eronder net als de andere regels. Leeg (de knop is er nog niet en geen zinnetje) telt de knop niet mee. */
html.tel .zijbalk .zijbalk-onder .gebruikersmenu .gm-push { margin: 0 0 6px; }
html.tel .gm-push > .zijbalk-telefoon { margin: 6px 0 0; }
html.tel .gm-push > .push-knop:has(:is(button, .push-zin):not([hidden])) { margin-bottom: 6px; }
html.tel .gm-push > .push-knop:not(:has(:is(button, .push-zin):not([hidden]))) + .zijbalk-telefoon { margin-top: 0; }
/* Alleen het zinnetje zichtbaar (iPhone in Safari): zijn bovenmarge viel vroeger samen met die van het taalformulier. */
html.tel .gm-push:has(> .push-knop > [data-push-knop][hidden]):has(.push-zin:not([hidden])) { margin-top: -6px; }
.gm-punt { display: none; }

@media (max-width: 900px) {
  .hoofdnav .groep { display: contents; }
  html:not(.tel) .gebruikersmenu .taalkeuze .gm-naam { display: none; }
  html:not(.tel) .zijbalk-onder .gebruikersmenu { display: flex; align-items: center; gap: 4px; position: static; width: auto; padding: 0; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  html:not(.tel) .zijbalk-onder .wie { display: none; }
  html:not(.tel) .gebruikersmenu .gm-label, html:not(.tel) .gebruikersmenu .gm-rollen, html:not(.tel) .gebruikersmenu .gm-scheid,
  html:not(.tel) .gebruikersmenu .icoon { display: none; }
  html:not(.tel) .gebruikersmenu .gm-optie, html:not(.tel) .gebruikersmenu .zijbalk-feedback, html:not(.tel) .gebruikersmenu .gm-push .push-knop > button, html:not(.tel) .gebruikersmenu .zijbalk-telefoon { width: auto; padding: 4px 6px; font-size: 12px; color: var(--zacht); white-space: nowrap; }
  html:not(.tel) .gebruikersmenu .taalkeuze { padding: 0 4px; }
  html:not(.tel) .gebruikersmenu .gm-push { display: inline; }
}