/* ===========================================================================
   Blended Family intranet

   Uitgangspunt: dit is geen zorgloket maar een praktijk die mensen letterlijk
   in beweging zet. Dus geen zoekbalkje in een dashboard, maar één grote vraag
   waar je zelf in typt. Alles daaromheen blijft rustig, zodat die ene plek
   het werk doet.

   Kleuren en letters zijn gelijk aan de website: aubergine, oudroze,
   saliegroen, Bricolage Grotesque voor koppen en Hanken Grotesk voor tekst.
   De letters staan lokaal in fonts/, er gaat niets naar Google.
   =========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/hanken-grotesk-latin.woff2) format('woff2');
}

:root {
  --aubergine: #3C2C54;
  --aubergine-diep: #2A1E3D;
  --aubergine-licht: #574171;
  --oudroze: #F14B7C;
  --oudroze-zacht: #FDE7EF;
  --saliegroen: #C1D3AA;
  --saliegroen-zacht: #EDF4E4;
  --tekst: #2C2A32;
  --grijs: #6B6775;
  --lijn: #E7E3EC;
  --vlak: #FFFFFF;
  --achtergrond: #F7F5F9;

  --display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 16px;
  --schaduw: 0 1px 2px rgba(60,44,84,.05), 0 10px 30px rgba(60,44,84,.06);
  --schaduw-op: 0 4px 8px rgba(60,44,84,.07), 0 18px 40px rgba(60,44,84,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px; line-height: 1.55;
  color: var(--tekst); background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--aubergine); line-height: 1.15; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -.025em; }
h2 { font-size: 1.2rem; letter-spacing: -.015em; margin-top: 0; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .9rem; }
a  { color: var(--aubergine); text-underline-offset: 2px; }
a:hover { color: var(--oudroze); }

:focus-visible { outline: 3px solid var(--saliegroen); outline-offset: 2px; border-radius: 4px; }

/* Kleine bovenkopjes die iets betekenen, geen versiering */
.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs); margin-bottom: .35rem;
}

/* ---------- Kopbalk ---------- */
.balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.25rem;
  background: var(--aubergine-diep);
}
.merk { display: flex; align-items: baseline; gap: .45rem; text-decoration: none; }
.merk-naam { font-family: var(--display); color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.merk-sub  { font-family: var(--display); color: var(--oudroze); font-size: 1.1rem; font-weight: 600; }
/* De zoekvraag in de balk.
   Dit was eerst een klein rond veldje, en op de voorpagina stond dezelfde vraag
   nog een keer groot. Nu staat de grote versie in de balk, op elke pagina, en is
   die op de voorpagina weg. Eén zoekveld, één ontwerp, altijd op dezelfde plek. */
.balk-zoek { flex: 1 1 260px; max-width: 620px; margin: 0 1rem; }
.balk-zoek .vraag-regel { gap: .5rem; }
.balk-zoek input {
  font-size: clamp(1rem, 1.9vw, 1.35rem); color: #fff;
  border-bottom-color: var(--oudroze); caret-color: var(--oudroze);
  padding: .2rem .1rem .3rem;
}
.balk-zoek input::placeholder { color: rgba(255,255,255,.6); }
.balk-zoek input:focus { border-bottom-color: #fff; }
.balk-zoek .vraag-knop { width: 40px; height: 40px; font-size: 1.05rem; }

/* Alleen voor schermlezers. Een label mag niet ontbreken, maar hoeft hier niet
   zichtbaar te zijn omdat de vraag al in het veld staat. */
.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.balk-rechts { display: flex; align-items: center; gap: .75rem; }
.wie { color: #D9D2E4; text-decoration: none; font-size: .9rem; }
.wie:hover { color: #fff; text-decoration: underline; }
.wie.aan  { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Menu ---------- */
.menu {
  display: flex; gap: .3rem; padding: .55rem 1.25rem;
  background: var(--aubergine); border-bottom: 3px solid var(--oudroze);
  overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  white-space: nowrap; text-decoration: none; color: #CFC6DC;
  padding: .4rem .8rem; border-radius: 999px; font-size: .92rem; font-weight: 500;
}
.menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu a.aan { background: #fff; color: var(--aubergine); font-weight: 600; }

/* Aanvragen en de rondleiding schuiven naar rechts, zodat de linkerkant van de
   balk voor iedereen hetzelfde is. Dat maakt het uitleggen aan elkaar makkelijker.
   Ze staan in één groep, zodat ze bij omvouwen samen blijven. */
.menu-rechts { display: flex; gap: .3rem; margin-left: auto; padding-left: .5rem; }

/* De Werkplek en de rondleiding krijgen een dunne rand. Dat zijn geen
   onderwerpen zoals de rest van de balk maar een gereedschapskist en een
   uitleg; de rand zet ze een beetje apart zonder er een tweede kleur bij te
   halen. Een marge links scheidt de Werkplek van de ingangen ervoor. */
.menu a.menu-plek, .menu a.menu-kort { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.menu a.menu-plek { margin-left: .35rem; }
.menu a.menu-plek.aan, .menu a.menu-kort.aan { box-shadow: none; }

/* De tabjes op Wie is er, Het team en Wie is waarvoor (wie_tabs() in
   inc/layout.php). Ze leunen op .banen; alleen de afstand tot de titel is
   kleiner, want ze staan erboven en horen erbij. */
.banen.wie-tabs { margin: 0 0 .9rem; }

/* Een smalle laptop: dan past de hele balk niet op één regel. Eerst wordt de
   rondleiding een icoontje en komen de knoppen iets dichter bij elkaar; dat
   houdt de balk voor het MT op één regel tot ongeveer 1100 pixels.
   Daaronder omvouwen, net als op een telefoon, want schuiven verstopt de knoppen
   aan de rechterkant. De naam van de rondleiding blijft er voor een
   schermlezer, en staat als titel op de knop. */
@media (max-width: 1180px) {
  .menu { flex-wrap: wrap; overflow-x: visible; row-gap: .35rem; }
  .menu a { padding: .4rem .62rem; }
  .menu a.menu-kort .menu-naam {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ---------- Inhoud ----------
   Breed, want op een groot scherm was er meer wit dan inhoud en moest je scrollen
   voor dingen die er gewoon naast hadden gekund. Alinea's houden hun eigen breedte,
   anders worden de regels te lang om te lezen. */
.inhoud { max-width: 1340px; margin: 0 auto; padding: 1.4rem 1.25rem 2.5rem; }
.smal   { max-width: 620px; margin: 0 auto; }
.kaart p, .kaart li, .kaart .hulp { max-width: 82ch; }

.kaart {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1.15rem 1.25rem; margin-bottom: .85rem;
  box-shadow: var(--schaduw);
}
.kaart > h2:first-child { margin-bottom: .8rem; }

/* ---------- De vraag: het hart van de startpagina ---------- */
.vraag-blok { margin: .5rem 0 2.25rem; }
.vraag-groet { color: var(--grijs); font-size: .98rem; margin-bottom: .35rem; }
.vraag-titel {
  font-family: var(--display); font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  font-weight: 700; letter-spacing: -.032em; color: var(--aubergine);
  margin: 0 0 .5rem;
}
.vraag-regel { display: flex; align-items: flex-end; gap: .75rem; }
.vraag-regel input {
  flex: 1; min-width: 0;
  font-family: var(--display); font-size: clamp(1.15rem, 3vw, 1.8rem);
  font-weight: 500; letter-spacing: -.02em; color: var(--aubergine);
  background: transparent; border: 0; border-bottom: 3px solid var(--oudroze);
  border-radius: 0; padding: .35rem .1rem .5rem; caret-color: var(--oudroze);
}
.vraag-regel input::placeholder { color: #A79DB6; font-weight: 400; }
.vraag-regel input:focus { outline: none; border-bottom-color: var(--aubergine); }
.vraag-knop {
  flex: none; border: 0; cursor: pointer; background: var(--oudroze); color: #fff;
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .12s ease, background .12s ease;
}
/* De pijl is getekend en niet getypt, zodat hij dik genoeg is voor het gevulde
   rondje. De maat gaat in procenten van de knop, dan klopt hij ook in de balk en
   op een telefoon, waar de knop kleiner is. */
.vraag-knop svg {
  width: 50%; height: 50%;
  fill: none; stroke: currentColor; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.vraag-knop:hover { background: #d93e6c; transform: scale(1.06); }
.vraag-hint { margin-top: .7rem; font-size: .88rem; color: var(--grijs); }
.vraag-hint a { color: var(--grijs); }
.vraag-hint a:hover { color: var(--oudroze); }

/* ---------- De kop van de startpagina ----------
   De teamfoto erachter, met een aubergine waas eroverheen zodat de tekst
   leesbaar blijft. Het is een intranet van mensen, dat mag je zien. */
.hero {
  position: relative; overflow: hidden;
  border-radius: 20px; margin-bottom: 1.5rem;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  color: #fff;
  background-color: var(--aubergine-diep);
  background-image:
    linear-gradient(105deg, rgba(42,30,61,.95) 0%, rgba(42,30,61,.86) 45%, rgba(60,44,84,.62) 100%),
    url(teamfoto.jpeg);
  background-size: cover;
  background-position: center 28%;
}
.hero .vraag-groet { color: #F3C4D5; }
.hero .vraag-titel { color: #fff; margin-bottom: .75rem; }
.hero .vraag-regel input {
  color: #fff; border-bottom-color: rgba(255,255,255,.55); caret-color: var(--oudroze);
}
.hero .vraag-regel input::placeholder { color: rgba(255,255,255,.55); }
.hero .vraag-regel input:focus { border-bottom-color: #fff; }
.hero .vraag-hint { color: rgba(255,255,255,.78); }
.hero .vraag-hint a { color: #fff; text-decoration: underline; }
.hero .vraag-hint a:hover { color: #F3C4D5; }

/* Twee blokken naast elkaar, onder elkaar op een klein scherm */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: .85rem; margin-bottom: .85rem; }
.duo > .kaart { margin-bottom: 0; display: flex; flex-direction: column; }
.duo > .kaart > :last-child { margin-top: auto; }

/* De gezichten van het team, licht over elkaar heen */
.gezichten { display: flex; align-items: center; }
.gezichten img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--vlak); margin-left: -14px; background: var(--achtergrond);
}
.gezichten img:first-child { margin-left: 0; }
.gezichten .meer {
  width: 46px; height: 46px; border-radius: 50%; margin-left: -14px;
  border: 3px solid var(--vlak); background: var(--saliegroen); color: var(--aubergine);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem;
}
.teamband { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.teamband .tekst { flex: 1; min-width: 200px; }

/* Snelle links naar de systemen waar je toch heen moet */
.snel { display: flex; flex-wrap: wrap; gap: .5rem; }
.snel a {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  background: var(--achtergrond); border: 1px solid var(--lijn); border-radius: 999px;
  padding: .45rem .9rem; font-size: .92rem; color: var(--aubergine); font-weight: 500;
}
.snel a:hover { border-color: var(--oudroze); background: #fff; color: var(--aubergine); }

/* ---------- Tegels ---------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.tegel {
  position: relative; display: block; text-decoration: none; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1.15rem 1.5rem; box-shadow: var(--schaduw); overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}
.tegel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--accent, var(--saliegroen)); transition: width .14s ease;
}
.tegel:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); }
.tegel:hover::before { width: 10px; }
.tegel .emoji { font-size: 1.45rem; display: block; margin-bottom: .45rem; }
.tegel strong { display: block; font-family: var(--display); color: var(--aubergine); font-size: 1.05rem; letter-spacing: -.015em; }
.tegel .uitleg { display: block; color: var(--grijs); font-size: .89rem; margin-top: .15rem; }

/* ---------- Zoekresultaten ---------- */
.zoekvak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--schaduw); }
.zoekregel { display: flex; gap: .5rem; }
.zoekregel input[type=search] {
  flex: 1; min-width: 0; font-size: 1.05rem; padding: .75rem 1rem;
  border: 2px solid var(--lijn); border-radius: 999px; font-family: inherit;
}
.zoekregel input[type=search]:focus { outline: none; border-color: var(--oudroze); }
.zoektips { margin-top: .6rem; font-size: .87rem; color: var(--grijs); }
.zoektips a { color: var(--grijs); }

.resultaat { border-top: 1px solid var(--lijn); padding: .85rem 0 .3rem; }
.resultaat:first-of-type { border-top: 0; }
.resultaat .bron { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oudroze); margin-bottom: .25rem; }
mark { background: var(--oudroze-zacht); color: inherit; padding: 0 .12em; border-radius: 3px; }

/* ---------- De leesversie van een document ----------
   Tekst die je gewoon leest, met de inhoudsopgave ernaast. Downloaden hoeft
   alleen nog als je het origineel echt nodig hebt. */
.lezer-kop {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.25rem;
}
.lezer-kop h1 { margin-bottom: .3rem; }
.lezer-knoppen { display: flex; gap: .4rem; flex-wrap: wrap; }

.lezer { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .lezer { grid-template-columns: 1fr; } }

.inhoudsopgave {
  position: sticky; top: 1rem;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--schaduw); max-height: calc(100vh - 2rem); overflow-y: auto;
}
.inhoudsopgave ol { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.inhoudsopgave li { margin-bottom: .35rem; }
.inhoudsopgave a { color: var(--grijs); text-decoration: none; }
.inhoudsopgave a:hover { color: var(--oudroze); text-decoration: underline; }
@media (max-width: 820px) { .inhoudsopgave { position: static; max-height: 320px; } }

.lezer-tekst {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--schaduw);
  max-width: 74ch; font-size: 1.02rem; line-height: 1.7;
}
.lezer-tekst.breed { max-width: none; }
.lezer-tekst h2 {
  margin: 2rem 0 .7rem; padding-top: .6rem; font-size: 1.2rem;
  border-top: 1px solid var(--lijn); scroll-margin-top: 1rem;
}
.lezer-tekst h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.lezer-tekst p { margin: 0 0 .85rem; }

/* ---------- Het teammail-archief ----------
   Kaarten in plaats van een lijst, met per editie het lijstje "In het kort"
   dat uit de teammail zelf komt. Zo zie je in één blik waar het over ging. */
.edities { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.editie {
  background: var(--vlak); border: 1px solid var(--lijn); border-left: 5px solid var(--oudroze);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--schaduw);
  display: flex; flex-direction: column;
}
.editie-kop { display: flex; gap: .6rem; justify-content: space-between; align-items: flex-start; }
.editie-titel {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em;
  color: var(--aubergine); text-decoration: none;
}
.editie-titel:hover { color: var(--oudroze); }
.kortlijst { margin: .7rem 0 .3rem; padding-left: 1.1rem; font-size: .92rem; }
.kortlijst li { margin-bottom: .3rem; color: var(--tekst); }
.editie-voet {
  margin-top: auto; padding-top: .9rem; display: flex; gap: .5rem;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}

/* ---------- Formulieren ---------- */
label { display: block; font-weight: 600; margin: 1rem 0 .3rem; color: var(--aubergine); font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=date], select, textarea {
  width: 100%; padding: .65rem .8rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--lijn); border-radius: 10px; background: #fff; color: var(--tekst);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--saliegroen); box-shadow: 0 0 0 3px var(--saliegroen-zacht); }
.hulp { font-size: .86rem; color: var(--grijs); margin-top: .25rem; }

.knop {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--oudroze); color: #fff; font-family: var(--body); font-weight: 600;
  font-size: .95rem; padding: .65rem 1.2rem; border-radius: 999px;
  transition: background .12s ease;
}
.knop:hover { background: #d93e6c; color: #fff; }
.knop.klein  { font-size: .84rem; padding: .38rem .85rem; }
.knop.leeg   { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.knop.leeg:hover { background: rgba(255,255,255,.14); }
.knop.rustig { background: var(--aubergine); }
.knop.rustig:hover { background: var(--aubergine-licht); }
.knop.gevaar { background: #B3261E; }
.knop.gevaar:hover { background: #8E1E18; }

/* Een knop die er wel is, maar niet om aandacht vraagt.
   Dit is voor een handeling die hoort bij iets anders waar je mee bezig bent, en
   die je een paar keer per jaar doet. In een lijst van vijftien regels met drie
   gevulde knoppen per regel leest het scherm als een bedieningspaneel; met één
   gevulde knop en de rest omlijnd zie je meteen welke de gewone weg is.
   Omlijnd en niet als tekstlink: het blijft een knop, met dezelfde hoogte en
   dezelfde plek, zodat een kolom knoppen recht onder elkaar blijft staan. */
.knop.omlijnd { background: #fff; color: var(--aubergine); border: 1px solid var(--lijn); }
.knop.omlijnd:hover { background: var(--achtergrond); color: var(--aubergine); border-color: var(--aubergine); }
/* Drie klassen, dus dit wint van .knop.gevaar hierboven, waar de volgorde ook
   staat. Rood in de letter en in de rand is genoeg waarschuwing; een rood vlak
   op veertien van de vijftien regels is dat niet meer. */
.knop.omlijnd.gevaar { background: #fff; color: #B3261E; border-color: #E9B9B6; }
.knop.omlijnd.gevaar:hover { background: #FDECEF; color: #8E1B38; border-color: #B3261E; }

/* ---------- Meldingen ---------- */
.melding { padding: .85rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .95rem; }
.melding.goed { background: var(--saliegroen-zacht); border: 1px solid var(--saliegroen); color: #3D5227; }
.melding.fout { background: #FDECEF; border: 1px solid #F5B8C8; color: #8E1B38; }
.melding.let  { background: #FFF6E5; border: 1px solid #F0D9A8; color: #6B4E14; }

/* ---------- Tabellen en labels ---------- */
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }

/* Een groot getal met een klein label eronder, voor de stand van zaken in Beheer. */
.kerngetal { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--aubergine); }
.kerngetal.let-op { color: var(--oudroze); }

/* Tabel waarin de linkerkolom een label is in plaats van een kolomkop,
   bijvoorbeeld het rijtje vergoedingen op de pagina Regelen. */
.gegevens th {
  text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700;
  color: var(--aubergine); width: 34%;
}
@media (max-width: 560px) {
  .gegevens th, .gegevens td { display: block; width: auto; border-bottom: 0; padding-bottom: 0; }
  .gegevens td { padding-top: .1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--lijn); }
}

.label {
  display: inline-block; font-size: .73rem; font-weight: 700; padding: .12rem .55rem;
  border-radius: 999px; background: var(--achtergrond); color: var(--grijs);
  border: 1px solid var(--lijn); letter-spacing: .02em; vertical-align: middle;
}
.label.nieuw { background: var(--oudroze-zacht); color: #A32050; border-color: #F5B8C8; }
.label.groen { background: var(--saliegroen-zacht); color: #3D5227; border-color: var(--saliegroen); }

/* ---------- Mededelingen ---------- */
.mededeling { border-left: 3px solid var(--lijn); padding: .1rem 0 .1rem .95rem; margin-bottom: 1.35rem; }
.mededeling:last-child { margin-bottom: 0; }
.mededeling.vast { border-left-color: var(--oudroze); }
.mededeling .titel { font-family: var(--display); font-weight: 700; color: var(--aubergine); font-size: 1.05rem; }
.mededeling .meta { font-size: .83rem; color: var(--grijs); margin-bottom: .35rem; }

/* ---------- Inwerkroute ---------- */
.fase { margin-bottom: 1.6rem; }
.fase-kop { display: flex; align-items: baseline; gap: .6rem; }
.stap { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px dashed var(--lijn); }
.stap:last-child { border-bottom: 0; }
.stap input[type=checkbox] { width: 20px; height: 20px; margin-top: .18rem; accent-color: var(--oudroze); flex: none; cursor: pointer; }
.stap label { margin: 0; font-weight: 400; color: var(--tekst); cursor: pointer; }
.stap.gedaan label { color: var(--grijs); text-decoration: line-through; }
.stap .stap-hulp { display: block; font-size: .85rem; color: var(--grijs); text-decoration: none; }
.balkje { height: 10px; background: var(--lijn); border-radius: 999px; overflow: hidden; margin: .6rem 0 1.4rem; }
.balkje > div { height: 100%; background: var(--saliegroen); transition: width .3s ease; }

/* ---------- Scenario's ---------- */
.keuze {
  display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--lijn);
  border-radius: 12px; padding: .8rem .95rem; margin-bottom: .55rem; cursor: pointer;
  font: inherit; color: var(--tekst); transition: border-color .12s ease, background .12s ease;
}
.keuze:hover { border-color: var(--oudroze); }
.keuze.gekozen { border-color: var(--aubergine); background: var(--achtergrond); font-weight: 600; }
.keuze[disabled] { cursor: default; opacity: .75; }
.uitkomst { margin-top: 1rem; padding: 1.1rem; border-radius: 12px; background: var(--achtergrond); border: 1px solid var(--lijn); }
.uitkomst.goed { background: var(--saliegroen-zacht); border-color: var(--saliegroen); }
.uitkomst .bronregel { font-size: .85rem; color: var(--grijs); margin-top: .7rem; }
.teller { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }

/* ---------- Voet ---------- */
.voet { text-align: center; color: var(--grijs); font-size: .84rem; padding: 1.5rem 1.25rem 2.5rem; }
.scheiding { margin: 0 .4rem; opacity: .6; }

/* ---------- De voorpagina ----------
   De opdracht was: in één blik overzicht, zonder scrollen. Dus twee kolommen, een
   smalle links met wie er is en de snelkoppelingen, en een brede rechts met wat er
   speelt. Onder de 950 pixels wordt het één kolom, met het bord bovenaan, want dat
   is het enige dat iedereen elke dag doet. */
.vp-groet { color: var(--grijs); font-size: .95rem; margin: -.3rem 0 .7rem; }
.voorpagina { display: grid; grid-template-columns: 290px 1fr; gap: .85rem; align-items: start; }
.voorpagina > * { min-width: 0; }
.vp-kolom { display: flex; flex-direction: column; gap: .85rem; }
.vp-breed { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .85rem; align-items: start; }
.vp-breed > .kaart { margin-bottom: 0; }
.vp-kolom > .kaart { margin-bottom: 0; }

@media (max-width: 950px) {
  .voorpagina { grid-template-columns: 1fr; }
}

/* Drie wijzers onder je eigen knoppen, naar wat er onder de weektabel staat.
   ---------------------------------------------------------------------------
   Je vaste week, een uitzondering doorgeven en het ziekmelden stonden hier als
   uitklappers onder elkaar. Vijf blokken in een smalle kolom maakten de pagina
   vol voordat je het bord had gelezen. Ze staan nu op volle breedte onderaan;
   deze drie regels wijzen erheen vanaf de plek waar je aan het klikken bent.

   Gewone links en geen knoppen: ze doen niets, ze brengen je ergens. Drie
   knoppen onder zes andere knoppen zou weer dezelfde drukte zijn. */
.wijzers {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--lijn);
  font-size: .88rem;
}
.wijzers a { color: var(--aubergine); text-underline-offset: 2px; }
.wijzers a.let { color: var(--oudroze); font-weight: 600; }
/* Bij weinig ruimte valt het tweede woord weg: "Mijn vaste week" zegt het al,
   "instellen" is de sier eromheen. */
@media (max-width: 1100px) { .wijzers span { display: none; } }

/* Het bord van vandaag: per plek een regel met de voornamen erachter. In een
   smalle kolom leest dat sneller dan blokken naast elkaar. */
.bord-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.bord-rij { display: flex; flex-direction: column; gap: .3rem; }
.bord-groep {
  border-radius: 10px; padding: .35rem .6rem;
  background: var(--kleur); color: var(--inkt);
}
.bord-plek { font-family: var(--display); font-weight: 700; font-size: .88rem; letter-spacing: -.01em; }
.bord-plek span { opacity: .7; }
.bord-namen { font-size: .8rem; margin-top: .05rem; opacity: .9; }
.bord-zelf { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--lijn); }
.bord-zelf .hulp { margin: 0 0 .4rem; }

/* Snel naar, als kleine vierkantjes in plaats van een rij pillen */
.tegeltjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: .4rem; }
.tegeltje {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; aspect-ratio: 1; text-decoration: none; text-align: center;
  background: var(--achtergrond); border: 1px solid var(--lijn); border-radius: 12px;
  color: var(--aubergine); font-size: .74rem; font-weight: 600; line-height: 1.15;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tegeltje span { font-size: 1.2rem; }
.tegeltje:hover { transform: translateY(-2px); box-shadow: var(--schaduw); border-color: var(--saliegroen); }

/* De tegel voor een idee of iets dat je niet kon vinden */
.idee-tegel { display: block; text-decoration: none; }
.idee-tegel .kaart { margin-bottom: 0; transition: transform .12s ease, box-shadow .12s ease; }
.idee-tegel:hover .kaart { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.idee-tegel .groot { font-family: var(--display); font-weight: 700; color: var(--aubergine); font-size: 1rem; }

/* De korte inhoud van de teammail als losse punten */
.teammail-titel { font-family: var(--display); font-weight: 700; color: var(--aubergine); font-size: 1.02rem; }
.punten { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .9rem; }
.punten li { margin-bottom: .25rem; }

/* Eén regel in een lijstje op de voorpagina */
.komt-regel { display: flex; gap: .55rem; padding: .4rem 0; border-bottom: 1px solid var(--lijn); }
.komt-regel:last-of-type { border-bottom: 0; }
.komt-streep { width: 4px; flex: none; border-radius: 3px; }

/* ---------- Waar ben je vandaag: de knoppen van het aanwezigheidsbord ----------
   Vier of zes knoppen op één regel, groot genoeg om met een duim te raken. Ze
   staan zowel op het bord als op de voorpagina, want daar wordt het echt gedaan. */
.dagknoppen { display: flex; flex-wrap: wrap; gap: .4rem; }
.dagknop {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .45rem .95rem; border-radius: 999px;
  background: var(--kleur, var(--achtergrond)); color: var(--inkt, var(--tekst));
  border: 1px solid rgba(60,44,84,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dagknop:hover { transform: translateY(-1px); box-shadow: var(--schaduw); }
.dagknop.aan  { box-shadow: 0 0 0 3px var(--aubergine); }

/* ---------- Waar kom je voor: de vragen op de startpagina ----------
   Dit is de belangrijkste laag van de navigatie. Niet de namen van onderdelen,
   maar de vraag die iemand in zijn hoofd heeft. Wie niet weet wat hij nodig
   heeft, leest hier zijn eigen vraag en klikt die aan. Zes stuks, niet meer:
   het is een startpunt en geen inhoudsopgave. */
.vragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .45rem; }
.vraaglink {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px;
  padding: .55rem .8rem .55rem 1rem;
  transition: transform .14s ease, box-shadow .14s ease;
}
.vraaglink::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--accent, var(--saliegroen)); transition: width .14s ease;
}
.vraaglink:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.vraaglink:hover::before { width: 11px; }
.vraaglink .vraag {
  display: block; font-family: var(--display); font-size: .96rem; font-weight: 700;
  color: var(--aubergine); letter-spacing: -.015em;
}
.vraaglink .waar { display: block; color: var(--grijs); font-size: .85rem; margin-top: .1rem; }

/* ---------- De wegwijzer in de voet ----------
   Hier staat wat je één keer nodig hebt: hoe dit intranet in elkaar zit, de route
   voor nieuwe collega's, en je eigen account. Niet in de balk, wel altijd bij de
   hand. */
.voet-wegwijzer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.1rem;
  max-width: 1020px; margin: 0 auto .8rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--lijn);
}
.voet-wegwijzer a { color: var(--aubergine); font-size: .92rem; }

/* ---------- Uitklappers, voor wat niet iedereen elke dag nodig heeft ---------- */
details {
  border: 1px solid var(--lijn); border-radius: 12px;
  padding: .85rem 1.1rem; background: var(--achtergrond);
}
details[open] { background: var(--vlak); }
summary {
  cursor: pointer; font-family: var(--display); color: var(--aubergine);
  letter-spacing: -.01em;
}
summary::marker { color: var(--oudroze); }
summary .hulp { display: inline; margin-left: .4rem; }
details > *:last-child { margin-bottom: 0; }

input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--aubergine); cursor: pointer; }

code {
  font-size: .88rem; background: var(--achtergrond); border: 1px solid var(--lijn);
  border-radius: 6px; padding: .12rem .4rem;
}

/* ---------- Klein scherm ---------- */
@media (max-width: 640px) {
  .inhoud { padding: 1.4rem .9rem 2.5rem; }
  /* Op een telefoon vouwt de balk om en gaat het zoekveld over de hele breedte
     op een eigen regel. Wegstoppen achter een icoontje doen we niet: zoeken is
     hier de snelste route en die moet zichtbaar blijven. */
  .balk { padding: .7rem .9rem; flex-wrap: wrap; row-gap: .55rem; }
  .balk-zoek { order: 3; flex: 1 0 100%; max-width: none; margin: 0; }
  .balk-zoek input { font-size: 1.05rem; }
  .balk-zoek .vraag-knop { width: 36px; height: 36px; font-size: 1rem; }
  /* Op een telefoon niet schuiven maar omvouwen. Wat buiten beeld schuift, wordt
     niet gevonden, en juist daar ging het mis met de oude balk van dertien items.
     Dan staat alles er gewoon, op drie korte regels. */
  .menu { padding: .5rem .9rem; flex-wrap: wrap; overflow-x: visible; gap: .35rem .2rem; }
  .menu a { padding: .38rem .6rem; }
  .menu a.menu-plek { margin-left: 0; }
  .menu-rechts { gap: .2rem; margin-left: 0; padding-left: 0; }
  .vraag-blok { margin-bottom: 1.75rem; }
  .vraag-knop { width: 46px; height: 46px; font-size: 1.15rem; }
  .zoekregel { flex-direction: column; }
  .zoekregel .knop { width: 100%; }
}

/* ---------- Wie liever geen beweging ziet ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Wat speelt er
   De stroom die de teammail vervangt. Een afspraak ziet er anders uit dan een
   mededeling, want dat is het verschil dat ertoe doet: het eerste is hoe het is,
   het tweede is wat er die weken speelde.
   =========================================================================== */

/* Het bolletje in het menu. Doet het werk dat een mail vroeger deed: naar je toe
   komen. Klein, want het is een seintje en geen alarm. */
.teller {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .32rem;
  margin-left: .18rem;
  border-radius: 999px;
  background: var(--oudroze);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: text-top;
}

/* De rij met Alles, Afspraken, Mededelingen, Van het team. Geen uitklapmenu maar
   gewoon links die er staan, om dezelfde reden als de tweede menuregel. */
.banen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.4rem;
}
.banen a {
  padding: .38rem .9rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--vlak);
  color: var(--grijs);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.banen a:hover { border-color: var(--aubergine-licht); color: var(--aubergine); }
.banen a.aan {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: #fff;
}

.stroom { display: flex; flex-direction: column; gap: 1rem; }

.bericht {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem 1.2rem;
  box-shadow: var(--schaduw);
}
/* Een afspraak krijgt de groene rand, een mededeling de neutrale. Kleur zegt hier
   iets, dus staat er ook altijd een label bij: kleur alleen is geen informatie
   voor wie hem niet ziet. */
.bericht.afspraak { border-left-color: var(--saliegroen); }
.bericht.vast     { border-left-color: var(--oudroze); }
.bericht.ongelezen { box-shadow: var(--schaduw-op); }

.bericht-kop { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; }
.bericht-merk { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.bericht h2 { font-size: 1.2rem; margin: 0 0 .2rem; }
.bericht h2 a { color: var(--aubergine); text-decoration: none; }
.bericht h2 a:hover { color: var(--oudroze); }
.bericht-kort { margin: .85rem 0 1rem; color: var(--tekst); }

.bericht-groot { border-left: 5px solid var(--lijn); }
.bericht-groot.afspraak { border-left-color: var(--saliegroen); }
.bericht-tekst { max-width: 72ch; line-height: 1.65; }
.bericht-tekst a { color: var(--oudroze); }

.kruimel { font-size: .88rem; margin-bottom: .8rem; }
.kruimel a { color: var(--grijs); text-decoration: none; }
.kruimel a:hover { color: var(--aubergine); }

/* De kaart die je meteen na het plaatsen ziet, met de regel voor de app erin.
   Springt er even uit, want dat is precies het moment waarop je hem nodig hebt. */
.net-geplaatst { border-color: var(--saliegroen); background: var(--saliegroen-zacht); }

/* Radioknoppen en vinkjes met uitleg erachter. Zonder die uitleg moet iemand
   raden wat het verschil is tussen een afspraak en een mededeling, en dan kiest
   iedereen de bovenste. */
.keuzeblok { border: 0; padding: 0; margin: 1.2rem 0 .4rem; }
.keuzeblok legend {
  padding: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grijs);
}
.keuzerij {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .55rem 0;
  cursor: pointer;
}
.keuzerij input { margin-top: .28rem; flex: none; }
.keuzerij span { display: block; }
.keuzerij .hulp { margin-top: .05rem; }

.knoppenrij { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---------- De teamapp of het intranet ---------- */
.kanaalkaart { border-left: 4px solid var(--oudroze); }
.kanaalrijen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0 .4rem;
}
.kanaalrij {
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: .9rem 1.1rem 1rem;
  background: var(--achtergrond);
}
.kanaalkop {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.kanaalkop.app   { color: #1E7E4E; }
.kanaalkop.intra { color: var(--aubergine); }
.kanaalrij ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.kanaalrij li { margin-bottom: .35rem; }

@media (max-width: 720px) {
  .bericht { padding: .95rem 1rem 1.05rem; }
  .bericht h2 { font-size: 1.08rem; }
  .banen { gap: .3rem; }
  .banen a { padding: .34rem .7rem; font-size: .84rem; }
}

/* ---------- Uitnodigen: de lijst met collega's ---------- */
.wielijst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .1rem .8rem;
  border-top: 1px solid var(--lijn);
  padding-top: .5rem;
}
.wierij {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .42rem .2rem;
  cursor: pointer;
  border-radius: 8px;
}
.wierij:hover { background: var(--achtergrond); }
.wierij input { margin-top: .25rem; flex: none; }
.wierij span { display: block; min-width: 0; }
.wierij .hulp { margin-top: 0; word-break: break-word; }

/* De abonneerlink en de deelregel staan in een tekstvak dat je niet bewerkt.
   Wel selecteerbaar, want kopiëren met de knop lukt niet op elke telefoon. */
textarea[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  background: var(--achtergrond);
  color: var(--tekst);
}

/* ---------- Beheer: de accountlijst ----------

   Een tabel met vaste kolommen, en dat vaste is de hele bedoeling. Dit is een
   rij uitklappers geweest, om het compacter te maken, maar vijftien blokken die
   open en dicht springen zetten de inhoud elke keer op een andere hoogte: de rol
   stond bij de een net ergens anders dan bij de ander, en de knoppen ook. Nu
   staat elke kolom stil en lees je hem van boven naar beneden.

   table-layout: fixed met de breedtes in een colgroup, en niet de gewone
   tabelverdeling. Anders bepaalt de langste naam of het langste aandachtsgebied
   hoe breed een kolom wordt, en dan verspringt de hele tabel zodra er een
   collega bij komt.

   De breedtes staan in rem en niet in procenten, behalve die van de eerste
   kolom. Een keuzelijst, een vinkje en een knop hebben een breedte nodig die
   niet meegeeft: in procenten wordt de knop bij een smaller venster smaller dan
   zijn eigen tekst, en dan vouwt hij op een plek waar de knop ernaast dat niet
   doet. De namenkolom krijgt wat overblijft, want daar is meegeven juist geen
   probleem: dan valt een lange naam op een tweede regel en is er niets stuk.

   Een regel mag best hoger zijn dan zijn buren, bijvoorbeeld als er onder de
   naam nog een opmerking staat. Dat schuift de kolommen van de andere regels
   niet op: in een tabel hoort hoogte bij de rij en breedte bij de kolom. */
.accounts { table-layout: fixed; margin-top: .4rem; }
.accounts .k-rol      { width: 9rem; }
.accounts .k-vink     { width: 6.5rem; }
.accounts .k-gaatover { width: 9rem; }
/* Was 24.5rem, voor vier knoppen naast elkaar die er toch niet in pasten en dus
   onder elkaar vielen. Nu staat er één knop met een regel kleine tekst eronder,
   en gaan de negen rem die vrijkomen naar de namenkolom. Daar zijn ze meer
   waard: die moest een naam, een mailadres en soms een opmerking kwijt in wat
   er overbleef.

   15,5rem en geen 13: de drie kleine woorden eronder moeten op één regel
   passen. Bij dertien vielen ze op twee regels, en dan is de regel van iemand
   die je niet kunt verwijderen, je eigen regel, lager dan de rest. Precies het
   verspringen waarvoor deze tabel een tabel is. */
.accounts .k-doen     { width: 15.5rem; }

/* De kolomkoppen als gewone woorden en niet als hoofdletters met spatiëring.
   "WACHTKAMERSCHERM" in een smalle kolom valt uit elkaar en leest niet meer als
   een woord. Dezelfde keuze als bij .gegevens hierboven. */
.accounts th {
  text-transform: none; letter-spacing: 0; font-size: .82rem;
  color: var(--grijs); padding-bottom: .3rem; white-space: normal;
}
.accounts td { vertical-align: top; padding: .6rem .5rem; }

.accounts .wie { overflow-wrap: anywhere; }
.accounts .naam { font-weight: 700; color: var(--aubergine); }
.accounts tr.uit .naam { color: var(--grijs); }
.accounts .wie .label { margin-left: .25rem; }
.accounts .wie .hulp { margin-top: .15rem; }

.accounts select { width: 100%; padding: .38rem .45rem; font-size: .88rem; }

/* De vinkjes staan midden onder hun kop, zodat de kolom één streep vormt. De kop
   staat om dezelfde reden gecentreerd: anders staat het woord links en het vakje
   in het midden, en dan lijkt de kolom scheef terwijl hij dat niet is. */
.accounts .vink { text-align: center; }
.accounts .vinkje { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: 0; cursor: pointer; }
.accounts .vinkje input { width: 18px; height: 18px; margin: 0; accent-color: var(--oudroze); flex: none; }
/* De volle naam van het recht staat er alleen bij als de tabel omvouwt. Op een
   breed scherm zegt de kolomkop het al, en vijftien keer dezelfde zin naast een
   vakje is precies de drukte die hier weg moest. */
.accounts .smal-uit { display: none; }

.accounts .gaatover { font-size: .9rem; }

/* Wat je met een account kunt doen: één knop, en daaronder de rest als tekst.
   ---------------------------------------------------------------------------
   Dit waren vier gelijkwaardige knoppen met elk een eigen kleur. Bij veertien
   collega's werden dat zesenvijftig gekleurde vlakjes op één scherm, en dan
   wijst geen enkele kleur meer iets aan.

   De vorm volgt nu hoe vaak je iets doet. Een link mailen is de gewone weg en
   blijft een knop. Wachtwoord, uitzetten en verwijderen doe je hooguit een paar
   keer per jaar; die staan er als kleine onderstreepte tekst onder. Ze zijn even
   goed te bereiken, ze vragen alleen geen aandacht meer.

   De knop houdt een vaste breedte, zodat de kolom één streep blijft ook als bij
   de een "Uitnodigen" staat en bij de ander "Link mailen". */
.accounts .doen form { margin: 0; }
.accounts .doen > form .knop { width: 11rem; text-align: center; padding-left: .5rem; padding-right: .5rem; }

.accounts .doen-meer {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .15rem .7rem; margin-top: .4rem;
}
/* Een knop die eruitziet als een tekstlink. Het blijft een echte knop in een
   echt formulier, want het verstuurt iets; alleen de kleren zijn anders. */
.accounts .doen-meer button,
.accounts .doen-meer .weg {
  background: none; border: 0; padding: 0; margin: 0;
  font-family: var(--body); font-size: .82rem; line-height: 1.4;
  color: var(--grijs); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.accounts .doen-meer button:hover { color: var(--aubergine); }
/* Verwijderen is de enige die je niet kunt terugdraaien, en dus de enige die
   rood blijft. Uitzetten was ook rood en hoefde dat niet te zijn: dat draai je
   morgen weer om. */
.accounts .doen-meer .weg { color: #B3261E; }
.accounts .doen-meer .weg:hover { color: #8E1E18; }

/* Niet schuiven maar omvouwen, net als het menu en de tabellen met .gegevens.
   Wat buiten beeld schuift wordt vergeten, en juist op een klein scherm zoek je
   iemand op om er één ding bij te zetten. Elke regel wordt dan een blokje met de
   naam bovenaan en de kolomkop vóór wat erin staat.

   De grens ligt op 1000 en niet op de gebruikelijke 720 of 900, en dat komt
   gewoon uit het rekensommetje: de keuzelijst, twee vinkjes, het gebied en de
   knoppenkolom hebben samen 44 rem nodig, en dan moet er voor de namen nog een
   kolom van betekenis overblijven. Hij stond op 1200 toen de knoppen nog 24,5
   rem vroegen; sinds er één knop staat in plaats van vier past de tabel eerder.
   Daaronder wordt hij krap in plaats van rustig, en dan is dit de betere vorm.
   Een laptop houdt de tabel; een tablet dwars krijgt de blokjes. */
@media (max-width: 1000px) {
  .accounts, .accounts tbody, .accounts tr, .accounts td { display: block; width: auto; }
  .accounts thead, .accounts colgroup { display: none; }
  .accounts tr {
    border: 1px solid var(--lijn); border-radius: 12px; background: #fff;
    padding: .75rem .9rem; margin-bottom: .55rem;
  }
  .accounts td { border-bottom: 0; padding: .3rem 0; }
  /* Een kolom die voor deze collega leeg is, laat je weg. Een kopje met niets
     eronder leest als een fout. */
  .accounts td:empty { display: none; }
  .accounts td[data-kop]::before {
    content: attr(data-kop); display: block;
    font-size: .78rem; font-weight: 700; color: var(--aubergine);
  }
  .accounts .vink { text-align: left; }
  .accounts .smal-uit { display: inline; }
  .accounts select { max-width: 16rem; }
  .accounts .doen { margin-top: .5rem; }
  .accounts .doen > form .knop { width: auto; }
}

/* ===========================================================================
   Agenda: één regel per afspraak

   Dit was eerst een blok van vier lagen onder elkaar: datum, titel, meta,
   toelichting en dan nog een rij knoppen. Bij tien afspraken scrol je een
   halve meter voor informatie die op één regel past.

   Nu is het opgezet als op de website: een datumblokje, de titel met zijn
   labels ernaast, en verder niets. Wat je zelden nodig hebt (de toelichting en
   de beheerknoppen) zit achter de regel, en klapt open als je erop klikt. Een
   afspraak zonder toelichting waar jij niets aan mag veranderen, is gewoon een
   regel zonder pijltje: dan valt er niets te openen en doet het pijltje geen
   loze belofte.
   =========================================================================== */

.maandkop { display: flex; align-items: baseline; gap: .8rem; margin: 1.7rem 0 .5rem; }
.maandkop h2 { margin: 0; font-size: 1.1rem; }
.maandlijn { flex: 1; height: 1px; background: var(--lijn); }
.maandtel { font-size: .82rem; color: var(--grijs); white-space: nowrap; }

.afspraken { display: flex; flex-direction: column; gap: .5rem; }

.afspraak {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--soortkleur, var(--lijn));
  border-radius: 12px;
  box-shadow: var(--schaduw);
}
.afspraak.geweest { opacity: .68; }
.afspraak[open] { box-shadow: var(--schaduw-op); }

/* De regel zelf. Ook als summary, want dan werkt open en dicht zonder script. */
.afspraak-rij {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .6rem .9rem;
  cursor: default;
  list-style: none;
}
summary.afspraak-rij { cursor: pointer; }
summary.afspraak-rij::-webkit-details-marker { display: none; }
summary.afspraak-rij::marker { content: ''; }
summary.afspraak-rij:hover { background: var(--achtergrond); border-radius: 8px; }

.dagblok {
  display: grid; place-content: center; text-align: center;
  background: var(--saliegroen-zacht);
  border-radius: 10px;
  padding: .35rem .2rem;
  line-height: 1.05;
}
.dagblok .d {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 1.35rem;
  color: var(--aubergine);
}
.dagblok.woord .d { font-size: .82rem; text-transform: lowercase; }
.dagblok .m {
  display: block; margin-top: .1rem;
  font-family: var(--display); font-weight: 700; font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--oudroze);
}

.afspraak-mid { min-width: 0; display: block; }
.afspraak-titel {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--aubergine); line-height: 1.3;
}
.afspraak-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  margin-top: .15rem; font-size: .84rem; color: var(--grijs);
}
.afspraak-meta .tijdje { font-variant-numeric: tabular-nums; }
.afspraak-meta .loc::before { content: '· '; }
.pil {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .05rem .5rem; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--achtergrond);
  font-size: .76rem; color: var(--tekst); white-space: nowrap;
}
.pil.groep { background: var(--oudroze-zacht); border-color: #F5B8C8; color: #A32050; }
.pil.ja    { background: var(--saliegroen-zacht); border-color: var(--saliegroen); color: #3D5227; }

/* Het pijltje draait als de regel opengaat. Meer heeft het niet nodig. */
.afspraak-pijl {
  width: 1.1rem; height: 1.1rem; flex: none;
  background: no-repeat center/1rem 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6775' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  transition: transform .16s ease;
}
.afspraak[open] .afspraak-pijl { transform: rotate(180deg); }

.afspraak-uit {
  padding: .1rem .95rem .85rem calc(3.4rem + 1.8rem);
  border-top: 1px solid var(--lijn);
  margin-top: .1rem;
  padding-top: .75rem;
}
.afspraak-uit p { margin: 0 0 .7rem; max-width: 78ch; }
.afspraak-uit .knoppenrij { margin-top: .2rem; }

.agendafilter .tel { color: var(--grijs); font-weight: 400; }
.agendafilter a { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- De strip: een blok uitleg dat niet altijd open hoeft ----------
   Voor dingen die je één keer instelt en daarna nooit meer. Dicht is het één
   regel, open is het het hele verhaal. */
.strip {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--saliegroen);
  border-radius: 12px;
  margin: 1.4rem 0 .85rem;
  box-shadow: var(--schaduw);
}
.strip > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  padding: .75rem 1rem; cursor: pointer; list-style: none;
}
.strip > summary::-webkit-details-marker { display: none; }
.strip > summary::marker { content: ''; }
.strip > summary:hover .strip-titel { color: var(--oudroze); }
.strip-titel { font-family: var(--display); font-weight: 700; color: var(--aubergine); }
.strip-hulp { font-size: .84rem; color: var(--grijs); }
.strip-uit { padding: .2rem 1rem 1.1rem; border-top: 1px solid var(--lijn); }
.strip-uit > *:first-child { margin-top: .8rem; }
.stappen { margin: 0 0 .8rem; padding-left: 1.2rem; }
.stappen li { margin-bottom: .25rem; }

@media (max-width: 720px) {
  .afspraak-rij { grid-template-columns: 2.9rem 1fr auto; gap: .7rem; padding: .55rem .7rem; }
  .dagblok .d { font-size: 1.15rem; }
  .afspraak-uit { padding-left: .9rem; }
}

/* Vandaag en morgen springen eruit: een roze datumblokje en een labeltje naast
   de titel. Twee keer hetzelfde signaal, want de een leest de kolom en de ander
   de regel. */
.dagblok.nu { background: var(--oudroze-zacht); }
.dagblok.nu .d { color: #A32050; }
.pil.nu { background: var(--oudroze); border-color: var(--oudroze); color: #fff; font-weight: 600; }
.dagblok.woord .d { font-size: .82rem; text-transform: lowercase; }

/* ---------- Twee kolommen waar het kan ----------
   Het intranet mag 1340 pixels breed zijn, maar de meeste pagina's gebruikten
   daar de helft van en de rest stond wit terwijl je scrolde. Dingen die bij
   elkaar horen staan nu naast elkaar. Onder de 900 pixels klapt het vanzelf
   terug naar één kolom, want dan is naast elkaar juist onleesbaar. */
.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-items: start; }
.kolommen.breed-links  { grid-template-columns: 1.35fr 1fr; }
.kolommen.breed-rechts { grid-template-columns: 1fr 1.35fr; }
.kolommen > * { min-width: 0; }
@media (max-width: 900px) { .kolommen, .kolommen.breed-links, .kolommen.breed-rechts { grid-template-columns: 1fr; } }

/* ---------- Wie is er: één regel per status ----------
   Bij veertien mensen gaf een blokje per persoon veertien blokjes van drie
   regels. De namen staan nu achter elkaar; alleen wie iets heeft toegevoegd
   krijgt een eigen regel, want daar staat ook echt iets in. */
.statusrij {
  border-left: 3px solid var(--statuskleur, var(--lijn));
  padding: .1rem 0 .1rem .75rem;
  margin-top: .55rem;
}
.statuskop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; }
.statusnamen { font-size: .93rem; color: var(--tekst); }
.statusregel {
  margin-top: .3rem; font-size: .92rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem;
}
.statusregel strong { font-family: var(--display); color: var(--aubergine); }
.statusregel .hulp { margin-top: 0; }

/* ---------- Een raster van kaarten ----------
   Voor pagina's die uit losse onderwerpen bestaan, zoals Regelen. Elke kaart
   houdt zijn eigen hoogte (align-items:start), zodat een kort onderwerp niet
   wordt uitgerekt tot de hoogte van het langste. Onder de 700 pixels wordt het
   vanzelf één kolom. */
.kaartraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: .85rem;
  align-items: start;
}
.kaartraster > .kaart { margin-bottom: 0; }

/* ---------- De balk boven de agenda: zoeken, weergave, filters ---------- */
.agendabalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
}
.agendabalk input[type=search] {
  flex: 1 1 220px; min-width: 0; max-width: 380px;
  padding: .45rem .8rem; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); font-family: var(--body); font-size: .95rem; color: var(--tekst);
}
.agendabalk input[type=search]:focus { outline: none; border-color: var(--oudroze); }
.agendabalk-duw { flex: 1 0 auto; }

/* Lijst of kalender. Twee knoppen in één omhulsel, zodat je ziet dat het een
   keuze tussen twee is en geen twee losse acties. */
.weergaveknop { display: inline-flex; border: 1px solid var(--lijn); border-radius: 999px; overflow: hidden; background: var(--vlak); }
.weergaveknop a {
  padding: .4rem .95rem; font-size: .88rem; font-weight: 600;
  color: var(--grijs); text-decoration: none;
}
.weergaveknop a:hover { background: var(--achtergrond); color: var(--aubergine); }
.weergaveknop a.aan { background: var(--aubergine); color: #fff; }

/* ---------- De maandkalender ---------- */
.kalenderkop { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 .6rem; flex-wrap: wrap; }
.kalenderkop h2 { margin: 0; font-size: 1.15rem; min-width: 8rem; }
.kalenderlijn { flex: 1; height: 1px; background: var(--lijn); }

.kalender {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.kal-dagnaam {
  background: var(--achtergrond); padding: .4rem .5rem; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grijs);
}
.kal-vak {
  background: var(--vlak);
  min-height: 6.2rem;
  padding: .35rem .4rem .45rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.kal-vak.leeg    { background: var(--achtergrond); }
.kal-vak.weekend { background: #FBFAFC; }
.kal-vak.voorbij .kal-dag { opacity: .45; }
.kal-vak.vandaag { background: var(--oudroze-zacht); }
.kal-dag {
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: var(--aubergine); line-height: 1; margin-bottom: .15rem;
}
.kal-vak.vandaag .kal-dag { color: #A32050; }

/* Een afspraak in een dagvakje. Klein, maar met de tijd erbij, want dat is waar
   je in een maandoverzicht naar zoekt. */
.kal-chip {
  display: block; text-decoration: none;
  border-left: 3px solid var(--soortkleur, var(--lijn));
  background: var(--achtergrond);
  border-radius: 4px;
  padding: .1rem .3rem;
  font-size: .72rem; line-height: 1.25;
  color: var(--tekst);
  overflow: hidden;
}
.kal-chip:hover { background: var(--saliegroen-zacht); color: var(--aubergine); }
.kal-tijd { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .2rem; }
.kal-titel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-meer { font-size: .7rem; color: var(--grijs); padding-left: .3rem; }

/* Op een telefoon is een maandraster van zeven kolommen onleesbaar. Dan wordt
   het een lijst van dagen die iets hebben; de rest laten we weg, want een leeg
   vakje zegt daar niets. */
@media (max-width: 760px) {
  .kalender { grid-template-columns: repeat(7, 1fr); }
  .kal-vak { min-height: 4.2rem; padding: .25rem .2rem .3rem; }
  .kal-chip { font-size: 0; padding: .18rem .2rem; border-left-width: 4px; }
  .kal-chip .kal-tijd, .kal-chip .kal-titel { display: none; }
  .kal-meer { font-size: .62rem; }
}

/* ---------- Jouw week in één keer invullen ----------
   Per dag een regel: welke dag, wat er nu staat, en wat je ervan wilt maken.
   Eén keer bewaren voor de hele week. Dit is het antwoord op de vraag "hoe voer
   ik de komende week in" zonder dat het zeven formulieren wordt. */
.weeklijst { display: flex; flex-direction: column; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.weekrij {
  display: grid;
  grid-template-columns: 6.5rem 1fr minmax(9rem, 12rem);
  gap: .6rem; align-items: center;
  background: var(--vlak); padding: .4rem .7rem;
}
.weekrij.vandaag { background: var(--oudroze-zacht); }
.weekdag { display: flex; flex-direction: column; line-height: 1.2; }
.weekdag strong { font-family: var(--display); color: var(--aubergine); font-size: .92rem; }
.weekdag .hulp { margin-top: 0; font-size: .78rem; }
.weeknu { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
.weeknu .hulp { margin-top: 0; }
.weekkeuze select { width: 100%; margin: 0; padding: .3rem .5rem; font-size: .88rem; }
.weekkeuze .hulp { margin-top: 0; font-size: .78rem; }

@media (max-width: 620px) {
  .weekrij { grid-template-columns: 5rem 1fr; row-gap: .3rem; }
  .weekkeuze { grid-column: 1 / -1; }
}

/* ---------- Regelen: negen knoppen in plaats van negen lappen tekst ----------
   Dicht is het een knop met een icoon, een titel en waar het heen gaat. Open
   staat de tekst en het formulier eronder. Een open knop wordt even breed als
   het raster, zodat een formulier niet in een smal kolommetje geperst wordt. */
.doeraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .6rem;
  align-items: start;
}
.doe {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  box-shadow: var(--schaduw);
  overflow: hidden;
}
.doe > summary {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .7rem;
  align-items: center;
  padding: .8rem .9rem;
  cursor: pointer;
  list-style: none;
}
.doe > summary::-webkit-details-marker { display: none; }
.doe > summary::marker { content: ''; }
.doe > summary:hover { background: var(--achtergrond); }
.doe[open] { grid-column: 1 / -1; box-shadow: var(--schaduw-op); }
.doe[open] > summary { border-bottom: 1px solid var(--lijn); background: var(--achtergrond); }
.doe-icoon {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: var(--saliegroen-zacht); font-size: 1.2rem;
}
.doe.spoed .doe-icoon { background: var(--oudroze-zacht); }
.doe-tekst { min-width: 0; }
.doe-titel {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: .98rem;
  color: var(--aubergine); line-height: 1.25;
}
.doe-waar { display: block; font-size: .8rem; color: var(--grijs); }
.doe-uit { padding: 1rem .95rem 1.1rem; }
.doe-uit > *:first-child { margin-top: 0; }
.doe-uit p:last-child, .doe-uit form:last-child { margin-bottom: 0; }

/* ---------- Regelen, tweede ronde: knoppen even groot en netjes uitgelijnd ----
   Ze waren "assorti": de een een regel titel, de ander twee, dus alle knoppen
   een andere hoogte en een rommelig raster. Nu heeft elke knop dezelfde hoogte
   (de rij rekt mee met de langste) en staat de tekst altijd op dezelfde plek.
   Vaste kolombreedte in plaats van auto-fill met een minimum, zodat de laatste
   rij niet met twee brede knoppen eindigt. */
.doeraster {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: .7rem;
}
@media (max-width: 1000px) { .doeraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .doeraster { grid-template-columns: 1fr; } }

.doe > summary {
  min-height: 4.6rem;
  align-items: center;
  align-content: center;
}
.doe-titel {
  /* Twee regels is het maximum. Wat langer is wordt afgekapt, want een knop die
     drie regels hoog wordt trekt het hele raster scheef. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.doe-waar {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Wat ik heb aangevraagd ----------
   Geen tiende knop maar het antwoord op "en wat is ermee gebeurd". Dus rustiger:
   in de huiskleur, zonder schaduw, met een lijn erboven die zegt dat hier iets
   anders begint. */
.aanvragenblok {
  margin-top: 1.6rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--saliegroen-zacht);
  border: 1px solid var(--saliegroen);
  border-radius: var(--radius);
}
.aanvragen-kop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  margin-bottom: .7rem;
}
.aanvragen-kop h2 { margin: 0; font-size: 1.05rem; }
.aanvragen-kop .hulp { margin-top: 0; }
.aanvragenblok table { background: var(--vlak); border-radius: 10px; overflow: hidden; }
.aanvragenblok table th { background: var(--vlak); }

/* ===========================================================================
   Wat speelt er: de voorpagina

   Het probleem was niet de kleur maar de gelijkheid. Elk bericht was even groot,
   even zwaar en even belangrijk, en dan heeft je oog geen plek om te landen.
   Een tijdschrift maakt met opzet ongelijk: één opening die groot is, twee
   stukken ernaast, en de rest als inhoudsopgave. Die ongelijkheid is de
   uitnodiging.

   Welke het grootste is bepaalt het intranet zelf (vastgezet, dan een afspraak,
   dan de nieuwste), dus er is geen redactie nodig om dit bij te houden.
   =========================================================================== */

/* ---------- De opening ---------- */
.opening {
  background: var(--aubergine-diep);
  border-radius: var(--radius);
  margin: 0 0 .85rem;
  overflow: hidden;
  box-shadow: var(--schaduw-op);
  position: relative;
}
/* Een streep in de kleur van het soort, over de hele bovenkant. Zo zie je aan de
   rand al of dit een afspraak is of iets van deze week. */
.opening::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--saliegroen);
}
.opening.soort-mededeling::before { background: var(--oudroze); }
.opening.soort-tip::before        { background: #E7B85C; }

.opening-link {
  display: block; text-decoration: none; color: #fff;
  padding: 2.1rem 2.2rem 1.7rem;
}
.opening-link:hover .opening-kop { color: #F3C4D5; }

.opening-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  margin-bottom: 1rem;
  font-family: var(--display); font-size: .74rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.kicker-soort { color: var(--saliegroen); }
.opening.soort-mededeling .kicker-soort { color: #F9A8C0; }
.opening.soort-tip .kicker-soort        { color: #F0CF8E; }
.kicker-cat   { color: rgba(255,255,255,.55); }
.kicker-datum { color: rgba(255,255,255,.45); margin-left: auto; letter-spacing: .08em; }
.kicker-let {
  color: var(--aubergine-diep); background: var(--oudroze);
  padding: .12rem .5rem; border-radius: 999px; letter-spacing: .06em;
}

.opening-kop {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.4vw, 3.05rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.03;
  color: #fff; margin: 0 0 .8rem; max-width: 20ch;
  transition: color .15s ease;
}
.opening-lede {
  font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.5;
  color: rgba(255,255,255,.82); max-width: 58ch; margin: 0 0 1.4rem;
}
.opening-voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .86rem; color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.14); padding-top: .9rem;
}
.opening-voet .scheiding { color: rgba(255,255,255,.3); }
.opening-verder {
  margin-left: auto; font-family: var(--display); font-weight: 700;
  color: var(--saliegroen); white-space: nowrap;
}

/* ---------- De twee ernaast ---------- */
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.6rem; }
@media (max-width: 760px) { .tweeluik { grid-template-columns: 1fr; } }

.stuk {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--saliegroen);
  border-radius: 12px;
  box-shadow: var(--schaduw);
}
.stuk.soort-mededeling { border-top-color: var(--oudroze); }
.stuk.soort-tip        { border-top-color: #E7B85C; }
.stuk > a { display: block; padding: 1.1rem 1.2rem 1.2rem; text-decoration: none; color: inherit; }
.stuk > a:hover .stuk-kop { color: var(--oudroze); }
.stuk-kicker {
  font-family: var(--display); font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grijs);
  margin-bottom: .45rem; display: flex; gap: .5rem; align-items: center;
}
.stuk .kicker-let { background: var(--oudroze); color: #fff; }
.stuk-kop {
  font-family: var(--display); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.18; color: var(--aubergine);
  margin: 0 0 .5rem; transition: color .15s ease;
}
.stuk-lede { font-size: .93rem; color: var(--tekst); margin: 0 0 .8rem; }
.stuk-voet { font-size: .8rem; color: var(--grijs); }

/* ---------- Verder in dit nummer ---------- */
.verder-kop { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .2rem; }
.verder-kop h2 {
  margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grijs);
}
.verder-lijn { flex: 1; height: 2px; background: var(--aubergine); opacity: .12; }
.verder-tel { font-family: var(--display); font-weight: 700; color: var(--grijs); font-size: .86rem; }

/* Geen dozen maar regels. Een inhoudsopgave leest als een inhoudsopgave: het
   nummer, waar het over gaat, en waar je heen gaat als je klikt. */
.inhoudsopgave { list-style: none; margin: 0; padding: 0; counter-reset: io; }
.io-regel { counter-increment: io; border-bottom: 1px solid var(--lijn); }
.io-regel:first-child { border-top: 1px solid var(--lijn); }
.io-regel > a {
  display: grid;
  grid-template-columns: 2.2rem 7rem 1fr auto;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: .75rem .4rem;
  text-decoration: none; color: inherit;
  transition: background .12s ease, padding-left .12s ease;
}
.io-regel > a::before {
  content: counter(io, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: .82rem;
  color: var(--lijn); letter-spacing: .02em;
}
.io-regel > a:hover { background: var(--vlak); padding-left: .8rem; }
.io-regel > a:hover .io-titel { color: var(--oudroze); }
.io-regel > a:hover::before { color: var(--oudroze); }
.io-soort {
  font-family: var(--display); font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grijs);
  white-space: nowrap;
}
.io-regel.soort-afspraak   .io-soort { color: #5E7A42; }
.io-regel.soort-mededeling .io-soort { color: #A32050; }
.io-regel.soort-tip        .io-soort { color: #9A7420; }
.io-titel {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.012em; color: var(--aubergine); line-height: 1.25;
  transition: color .15s ease;
}
.io-regel.ongelezen .io-titel::after {
  content: ''; display: inline-block; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--oudroze); margin-left: .45rem;
  vertical-align: middle;
}
.io-meta { font-size: .8rem; color: var(--grijs); white-space: nowrap; text-align: right; }

@media (max-width: 760px) {
  .opening-link { padding: 1.5rem 1.3rem 1.2rem; }
  .kicker-datum { margin-left: 0; width: 100%; }
  .io-regel > a { grid-template-columns: 1.8rem 1fr; row-gap: .15rem; }
  .io-soort { grid-column: 2; order: -1; }
  .io-meta  { grid-column: 2; text-align: left; white-space: normal; }
}

/* De kleine opening, op Start. Zelfde vorm, maar in een kolom die half zo breed
   is. Dus kleinere kop en minder lucht, anders past er één woord per regel. */
.opening.klein .opening-link { padding: 1.4rem 1.5rem 1.15rem; }
.opening.klein .opening-kop { font-size: clamp(1.35rem, 2.4vw, 1.85rem); max-width: none; margin-bottom: .55rem; }
.opening.klein .opening-lede { font-size: .95rem; margin-bottom: 1rem; }
.opening.klein .opening-kicker { margin-bottom: .7rem; font-size: .68rem; }
.opening.klein .opening-voet { padding-top: .7rem; font-size: .82rem; }

/* ---------- Kort nieuws op Start ----------
   Geen kader in een kader en geen schuifbalk. Drie regels: de titel, en eronder
   klein waar het over gaat. Een stip als je hem nog niet hebt geopend. */
.kortnieuws { list-style: none; margin: 0; padding: 0; }
.kortnieuws li { border-top: 1px solid var(--lijn); }
.kortnieuws li:first-child { border-top: 0; }
.kortnieuws a {
  display: block; padding: .6rem 0 .65rem; text-decoration: none; color: inherit;
  border-left: 3px solid transparent; padding-left: .7rem; margin-left: -.7rem;
  transition: border-color .12s ease, padding-left .12s ease;
}
.kortnieuws a:hover { border-left-color: var(--oudroze); padding-left: .95rem; }
.kortnieuws a:hover .kn-titel { color: var(--oudroze); }
.kn-titel {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  line-height: 1.25; color: var(--aubergine); letter-spacing: -.012em;
  transition: color .15s ease;
}
.kortnieuws li.ongelezen .kn-titel::after {
  content: ''; display: inline-block; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--oudroze); margin-left: .4rem;
  vertical-align: middle;
}
.kn-meta { display: block; font-size: .8rem; color: var(--grijs); margin-top: .1rem; }
.kortnieuws li.soort-afspraak   .kn-meta { color: #5E7A42; }
.kortnieuws li.soort-mededeling .kn-meta { color: var(--grijs); }

/* De inhoudsopgave mocht niet breder worden dan zijn kolom. Met een vaste kolom
   van 7rem plus tekst die niet mag afbreken, duwde hij zichzelf buiten beeld en
   kwam er een schuifbalk onder. Nu mag de titel krimpen en de meta afbreken. */
.io-regel > a { min-width: 0; }
.io-titel { min-width: 0; overflow-wrap: anywhere; }
.io-meta  { min-width: 0; }
@media (max-width: 1100px) {
  .io-regel > a { grid-template-columns: 2.2rem 6rem 1fr; }
  .io-meta { grid-column: 3; text-align: left; white-space: normal; }
}

/* ---------- De knoppenrij met het zoekvakje erin ----------
   Knoppen links, zoeken rechts, samen op één regel. Het vakje is met opzet klein
   en niet over de volle breedte: dan lijkt het niet op het zoekveld in de balk,
   en dat scheelt verwarring, want ze zoeken iets anders. Dit alleen door de
   berichten, de balk door alles. */
.banenrij {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.4rem;
}
.banenrij .banen { margin: 0; flex: 1 1 auto; }

.minizoek {
  display: flex; align-items: center; gap: .25rem;
  flex: 0 0 auto; margin-left: auto;
  border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); padding: .12rem .12rem .12rem .8rem;
  transition: border-color .12s ease;
}
.minizoek:focus-within { border-color: var(--oudroze); }
.minizoek input {
  border: 0; background: transparent; outline: none;
  font-family: var(--body); font-size: .88rem; color: var(--tekst);
  width: 9.5rem; padding: .3rem 0; margin: 0;
}
.minizoek input::placeholder { color: var(--grijs); }
.minizoek button {
  flex: none; border: 0; cursor: pointer; padding: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--aubergine); color: #fff;
  display: grid; place-items: center;
  transition: background .12s ease;
}
.minizoek button:hover { background: var(--oudroze); }
.minizoek svg {
  width: 55%; height: 55%;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 620px) {
  .minizoek { margin-left: 0; width: 100%; }
  .minizoek input { width: 100%; }
}

/* ---------- Snel naar, in de voet van elke pagina ---------- */
.voet-snel {
  max-width: 1020px; margin: 0 auto 1.2rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--lijn);
}
.voet-snel-kop {
  display: block; margin-bottom: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grijs);
}
/* In de voet mogen ze breder en lager zijn dan in de smalle kolom op Start:
   daar waren het vierkantjes, hier een rij die de breedte gebruikt. */
.voet-snel .tegeltjes { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.voet-snel .tegeltje { aspect-ratio: auto; padding: .6rem .3rem .55rem; background: var(--vlak); }
.voet-snel .tegeltje span { font-size: 1.35rem; }

/* ---------- De hulp ----------
   Een vraagteken naast de titel van de pagina, dat een paneel opent met alleen
   de handelingen van díe pagina. Het paneel staat al in de pagina, dus er wordt
   niets opgehaald als je klikt: dat scheelt een adres dat stuk kan gaan en het
   werkt zonder verbinding.

   De knop zweeft naar rechts en staat dus naast de h1 zonder dat elke pagina
   daarvoor aangepast hoefde te worden. */
.hulpknop {
  /* Zwevend, zodat de knop naast de <h1> komt te staan zonder dat elke pagina
     daarvoor aangepast hoefde te worden. De marges zijn met opzet klein: de
     zwever moet lager blijven dan de titelregel eronder, anders loopt de eerste
     kaart er een paar pixels onderdoor en raakt hij de knop.

     Absoluut positioneren kan niet: dan staat hij over de melding heen die na
     elke handeling bovenaan verschijnt. */
  float: right;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; margin: .15rem 0 0 .8rem;
  border: 1px solid var(--lijn); border-radius: 50%;
  background: var(--vlak); color: var(--aubergine);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; box-shadow: var(--schaduw);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.hulpknop:hover, .hulpknop:focus-visible {
  background: var(--aubergine); border-color: var(--aubergine); color: #fff;
}

.hulppaneel {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(80vh, 720px);
  padding: 0; border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--vlak); color: var(--tekst);
  box-shadow: var(--schaduw-op);
  overflow: hidden;
}
.hulppaneel::backdrop { background: rgba(42, 30, 61, .45); }
.hulppaneel-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--lijn);
  background: var(--aubergine); color: #fff;
}
.hulppaneel-kop strong { font-family: var(--display); font-size: 1.05rem; }
.hulppaneel-dicht {
  border: 0; background: transparent; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.hulppaneel-dicht:hover { color: var(--oudroze-zacht); }
.hulppaneel-in { padding: .9rem 1.1rem .4rem; overflow-y: auto; max-height: 52vh; }
.hulppaneel-vraag { padding: .85rem 1.1rem 1rem; border-top: 1px solid var(--lijn); background: var(--achtergrond); }
.hulppaneel-vraag label { margin-top: 0; }
.hulpvraag-regel { display: flex; gap: .45rem; }
.hulpvraag-regel input[type=search] { flex: 1; min-width: 0; }

/* Eén onderwerp: dicht is het een regel, open zijn het de stappen. Dezelfde
   vorm in het paneel, in de handleiding en in de zoekresultaten, zodat je het
   overal herkent zodra je het één keer hebt opengeklapt. */
.hulponderwerp { border-bottom: 1px solid var(--lijn); }
.hulponderwerp:last-of-type { border-bottom: 0; }
.hulponderwerp > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem;
  padding: .6rem .2rem; cursor: pointer; list-style: none;
}
.hulponderwerp > summary::-webkit-details-marker { display: none; }
.hulponderwerp > summary::marker { content: ''; }
.hulponderwerp > summary::before {
  content: '›'; font-size: 1.1rem; line-height: 1; color: var(--saliegroen);
  transition: transform .14s ease; display: inline-block;
}
.hulponderwerp[open] > summary::before { transform: rotate(90deg); }
.hulponderwerp > summary:hover .hulp-titel { color: var(--oudroze); }
.hulp-titel { font-weight: 600; color: var(--aubergine); }
.hulp-kort { font-size: .84rem; color: var(--grijs); }
.hulp-rol { margin-left: auto; }
.hulp-uit { padding: .1rem 0 .9rem 1.1rem; }
.hulp-uit .stappen { margin-top: .4rem; }
.hulp-letop {
  margin: .5rem 0 0; padding: .55rem .75rem;
  border-left: 3px solid var(--goud, #E7B85C); border-radius: 0 8px 8px 0;
  background: var(--achtergrond); font-size: .89rem; color: var(--grijs);
}

@media (max-width: 720px) {
  .hulppaneel { width: calc(100vw - 1.2rem); max-height: 86vh; }
  .hulppaneel-in { max-height: 46vh; }
  .hulp-rol { margin-left: 0; }
}

/* ===========================================================================
   De sleepzone bij Documenten

   Het vak moet er uitzien als iets waar je iets in kunt leggen, en niet als nog
   een invulveld. Vandaar de onderbroken rand: die betekent op elke site "hier
   mag iets in". De bestandskiezer staat er gewoon in en blijft zichtbaar, want
   niet iedereen sleept en op een tablet gaat het anders.

   Alles hieronder is opsmuk. Zet je deze regels weg, dan staat er een randloos
   vak met een bestandskiezer erin, en dat werkt nog steeds.
   =========================================================================== */
.sleepzone {
  border: 2px dashed var(--lijn);
  border-radius: 14px;
  background: var(--achtergrond);
  padding: 1.1rem 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.sleepzone:hover { border-color: var(--saliegroen); }

/* Zolang er iets boven het vak zweeft. Groen en niet roze: roze is op dit
   intranet de kleur van een knop waar je op drukt, en hier gebeurt nog niets. */
.sleepzone.erin {
  border-color: var(--saliegroen);
  background: var(--saliegroen-zacht);
  border-style: solid;
}
.sleepzone-kop { margin-bottom: .65rem; }
.sleepzone-titel {
  display: block; font-family: var(--display); font-weight: 700;
  color: var(--aubergine); font-size: 1.02rem;
}
.sleepzone-hulp { display: block; font-size: .86rem; color: var(--grijs); }
.sleepzone input[type=file] {
  font-family: inherit; font-size: .92rem; color: var(--tekst);
  max-width: 100%; cursor: pointer;
}
.sleepzone input[type=file]:disabled { cursor: default; opacity: .6; }

/* De lijst met wat er klaarstaat. Links uitgelijnd, want dit zijn regels om te
   lezen en niet een kopje in het midden. */
.sleeplijst { text-align: left; margin-top: .9rem; }
.sleeprij {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  grid-template-areas: "naam maat link weg" "tekst tekst tekst tekst" "balk balk balk balk";
  align-items: baseline;
  gap: .1rem .6rem;
  padding: .5rem .7rem;
  border-radius: 10px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  margin-bottom: .4rem;
  font-size: .9rem;
}
.sleeprij-naam { grid-area: naam; font-weight: 600; color: var(--aubergine); overflow-wrap: anywhere; }
.sleeprij-maat { grid-area: maat; color: var(--grijs); font-size: .82rem; white-space: nowrap; }
.sleeprij-link { grid-area: link; font-size: .82rem; }
.sleeprij-tekst { grid-area: tekst; color: var(--grijs); font-size: .84rem; }
.sleeprij-balk {
  grid-area: balk; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--lijn); margin-top: .35rem;
}
.sleeprij-balk > div { height: 100%; width: 0; background: var(--saliegroen); transition: width .15s linear; }

/* Het kruisje om een bestand er weer uit te halen. Nodig omdat een gesleepte map
   vanzelf bestanden meeneemt die er niet in hoeven. */
.sleeprij-weg {
  grid-area: weg; border: 0; background: transparent; cursor: pointer;
  color: var(--grijs); font-size: 1.15rem; line-height: 1; padding: 0 .15rem;
}
.sleeprij-weg:hover { color: #B3261E; }

/* De vier uitkomsten krijgen dezelfde kleuren als de meldingen elders op het
   intranet, zodat een gele rand overal hetzelfde betekent: geen fout, maar kijk
   er wel even naar. */
.sleeprij.bezig     { border-color: var(--saliegroen); }
.sleeprij.gelukt    { border-color: var(--saliegroen); background: var(--saliegroen-zacht); }
.sleeprij.gelukt .sleeprij-tekst { color: #3D5227; }
.sleeprij.dubbel,
.sleeprij.geweigerd { border-color: #F0D9A8; background: #FFF6E5; }
.sleeprij.dubbel .sleeprij-tekst,
.sleeprij.geweigerd .sleeprij-tekst { color: #6B4E14; }
.sleeprij.mislukt   { border-color: #F5B8C8; background: #FDECEF; }
.sleeprij.mislukt .sleeprij-tekst { color: #8E1B38; }

/* De regel naast de knop: hoeveel er klaarstaat, en na afloop wat eruit kwam. */
.sleepstand { display: inline-block; margin-left: .6rem; max-width: 48ch; }

@media (max-width: 720px) {
  .sleepzone { padding: .9rem .7rem; }
  .sleepstand { display: block; margin: .5rem 0 0; }
}

/* ---------- Plusmenu in de balk: iets inbrengen bij het MT ---------- */
.plusmenu, .plusmenu[open] { position: relative; border: 0; padding: 0; background: none; border-radius: 0; }
.plusknop::marker { content: ''; }
.plusknop {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.plusknop::-webkit-details-marker { display: none; }
.plusknop:hover, .plusmenu[open] .plusknop { background: rgba(255,255,255,.14); border-color: #fff; }
.plusknop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.plusmenu-lijst {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50; min-width: 17rem;
  background: var(--vlak); border-radius: 12px; box-shadow: var(--schaduw-op); padding: .45rem;
  display: flex; flex-direction: column;
}
.plusmenu-kop { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); padding: .35rem .6rem .25rem; }
.plusmenu-lijst a { color: var(--tekst); text-decoration: none; padding: .55rem .6rem; border-radius: 8px; }
.plusmenu-lijst a:hover, .plusmenu-lijst a:focus-visible { background: var(--achtergrond); color: var(--aubergine); }

/* Het linkje achter het teamoverleg op Start */
.plus-link { color: var(--oudroze); font-weight: 600; text-decoration: none; white-space: nowrap; }
.plus-link:hover { text-decoration: underline; }

/* De Google-knop op het inlogscherm */
.google-knop { display: inline-flex; align-items: center; gap: .6rem; }
.google-knop svg { background: #fff; border-radius: 50%; padding: 2px; width: 24px; height: 24px; }

/* Het dashboard voor het MT */
.dash-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
.dash-raster .kaart { margin: 0; }
.dash-teller { font-family: var(--display); font-size: 1.6rem; color: var(--aubergine); line-height: 1; margin-right: .35rem; }
.signaal { display: flex; gap: .6rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid var(--lijn); }
.signaal:first-of-type { border-top: 0; }
.agendapunten { margin: .4rem 0 0; padding-left: 1.3rem; }
.agendapunten li { margin-bottom: .55rem; }