/* Anders Werkt: De Hal, De Woonkamer, De Administratiekamer en beheer.
   Vormgeving uit de goedgekeurde Demo Hal (tags huisstijl-akkoord-2026-10-25 en kamerbord-randen-akkoord-2026-10-25, hover gelijk 13:02).
   Alles staat onder .aw, zodat de schermen in de Kamers zelf niet veranderen.
   Merklaag per werkruimte (25 okt 2026): de kleuren komen uit --aw-*. app.js zet die bij elk scherm uit de opgeslagen huisstijl:
   De Hal krijgt de kleuren van Andere Isabel, De Woonkamer en de Kamers die van de werkruimte. De vorm, de letters en de werking blijven gelijk.
   Hieronder de goedgekeurde kleuren als beginstand (voordat app.js geladen is). */
:root {
  --aw-sterk:#2f1519; --aw-sterk-inkt:#f2ece5; --aw-sterk-accent:#cd9d33; --aw-sterk-rand:#cd9d33; --aw-sterk-streep:#ce9286; --aw-hover:#4f2731; --aw-hover-accent:#cd9d33;
  --aw-licht:#e7dfd6; --aw-licht-rand:#866621; --aw-inkt:#2f1519; --aw-tekst:#181410; --aw-gedempt:#5c4e44; --aw-grond:#f2ece5; --aw-vlak:#fffdfa; --aw-lijn:#c3b5a8;
  --aw-streep:#ce9286; --aw-binnen-rand:#a68c74; --aw-label-bg:#ce9286; --aw-label-inkt:#2f1519; --aw-oogje:#866621; --aw-focus:#2f1519;
}
.aw {
  --kop:"Playfair Display", Georgia, "Times New Roman", serif; --tekst:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--tekst); color: var(--aw-tekst);
}
.aw h2, .aw h3 { font-family: var(--kop); color: var(--aw-inkt); font-weight: 400; }

/* ---- Ingang boven een tegeloverzicht ---- */
.aw-kop { margin: 0 0 18px; }
.aw-oogje { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--aw-oogje); margin: 0 0 8px; }
.aw-kop h2 { font-size: 26px; line-height: 1.15; margin: 0 0 6px; }
.aw-kop p { font-size: 15px; line-height: 1.5; color: var(--aw-gedempt); max-width: 44em; margin: 0; }
@media (min-width: 700px) { .aw-kop h2 { font-size: 32px; } .aw-kop p { font-size: 16px; } }
.aw-baan { width: min(1000px, 100%); margin: 0 auto 28px; }

/* ---- Compacte tegels: 2 kolommen telefoon, 3 tablet, 4 laptop ---- */
.aw-tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
@media (min-width: 600px) { .aw-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .aw-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1060px) { .aw-tegels { gap: 14px; } }
.aw-tegels > li { display: block; margin: 0; padding: 0; min-width: 0; }
.aw-tegels > li[hidden] { display: none; }

.aw-tegel { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; box-sizing: border-box; width: 100%; height: 100%; min-height: 44px; margin: 0;
  padding: 16px 16px 18px; text-align: left; font: inherit; cursor: pointer; border-radius: 10px;
  background: var(--aw-licht); border: 2px solid var(--aw-licht-rand); color: var(--aw-inkt);
  transition: background-color .15s ease, border-color .15s ease; }
.aw-tegel .t-nummer { font-family: var(--tekst); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--aw-inkt); margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.aw-tegel .t-nummer::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--aw-streep); margin: 10px 0 12px; }
.aw-tegel .t-naam { font-family: var(--kop); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--aw-inkt); margin: 0 0 6px; text-wrap: balance; overflow-wrap: break-word; }
.aw-tegel .t-kort { font-family: var(--tekst); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--aw-gedempt); margin: 0; }
.aw-tegel .t-pijl { position: absolute; top: 15px; right: 16px; width: 7px; height: 7px; border-top: 1.5px solid var(--aw-licht-rand); border-right: 1.5px solid var(--aw-licht-rand);
  transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease; }
.aw-tegel .t-stand { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.aw-tegel .t-stand > span { display: inline-block; padding: 6px 9px; border-radius: 6px; }
@media (min-width: 600px) { .aw-tegel .t-naam { font-size: 18px; } .aw-tegel .t-kort { font-size: 14px; } }
@media (min-width: 1060px) { .aw-tegel { padding: 20px 20px 22px; } .aw-tegel .t-pijl { top: 19px; right: 20px; } .aw-tegel .t-naam { font-size: 20px; margin-bottom: 8px; } }
@media (max-width: 399px) { .aw-tegel { padding-left: 12px; padding-right: 12px; } .aw-tegel .t-pijl { right: 12px; } .aw-tegel .t-naam { font-size: 15.5px; }
  .aw-tegel .t-stand { letter-spacing: .08em; } .aw-tegel .t-stand > span { padding: 5px 7px; } }

/* Afgenomen (en de werkruimtetegels in De Hal): de sterke kleur van het merk */
.aw-tegel.st-afgenomen { background: var(--aw-sterk); border-color: var(--aw-sterk-rand); }
.aw-tegel.st-afgenomen .t-nummer { color: var(--aw-sterk-accent); }
.aw-tegel.st-afgenomen .t-nummer::after { background: var(--aw-sterk-streep); }
.aw-tegel.st-afgenomen .t-naam, .aw-tegel.st-afgenomen .t-kort { color: var(--aw-sterk-inkt); }
.aw-tegel.st-afgenomen .t-pijl { border-color: var(--aw-sterk-accent); }
.aw-tegel.st-afgenomen .t-stand > span { background: var(--aw-hover); color: var(--aw-sterk-inkt); }
.aw-tegel.st-afgenomen .t-stand > span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--aw-sterk-accent); margin-right: 7px; vertical-align: 1px; }
/* Ontdekken: lichte tegel, rand in de accentkleur */
.aw-tegel.st-ontdek .t-stand > span { padding: 0 0 5px; border-radius: 0; color: var(--aw-inkt); border-bottom: 1.5px solid var(--aw-streep); }
/* Binnenkort: geen knop, gestippelde rand, geen hover */
.aw-tegel.st-binnenkort { background: var(--aw-grond); border: 1.5px dashed var(--aw-binnen-rand); cursor: default; }
.aw-tegel.st-binnenkort .t-nummer, .aw-tegel.st-binnenkort .t-naam, .aw-tegel.st-binnenkort .t-kort { color: var(--aw-gedempt); }
.aw-tegel.st-binnenkort .t-nummer::after { background: var(--aw-lijn); }
.aw-tegel.st-binnenkort .t-stand > span { background: var(--aw-label-bg); color: var(--aw-label-inkt); }
/* Afgenomen, maar dit account mag er niet in: rustig, geen knop (de database beslist) */
.aw-tegel.st-dicht { background: var(--aw-grond); border: 1.5px solid var(--aw-lijn); cursor: default; }
.aw-tegel.st-dicht .t-naam, .aw-tegel.st-dicht .t-kort, .aw-tegel.st-dicht .t-nummer { color: var(--aw-gedempt); }
.aw-tegel.st-dicht .t-nummer::after { background: var(--aw-lijn); }
.aw-tegel.st-dicht .t-stand > span { padding: 0; color: var(--aw-gedempt); }
/* Beheertegel: gestreepte rand en een plus */
.aw-tegel.st-beheer { background: var(--aw-grond); border: 2px dashed var(--aw-licht-rand); }
.aw-tegel.st-beheer .t-plus { font-family: var(--kop); font-size: 26px; line-height: 1; color: var(--aw-licht-rand); margin: 0 0 10px; }

/* Hover en focus voor ALLE klikbare tegels. De rand blijft 2 px: niets verspringt. */
.aw button.aw-tegel:hover, .aw button.aw-tegel:focus-visible { background: var(--aw-hover); border-color: var(--aw-hover-accent); border-style: solid; }
.aw button.aw-tegel:hover .t-naam, .aw button.aw-tegel:focus-visible .t-naam,
.aw button.aw-tegel:hover .t-kort, .aw button.aw-tegel:focus-visible .t-kort { color: var(--aw-sterk-inkt); }
.aw button.aw-tegel:hover .t-nummer, .aw button.aw-tegel:focus-visible .t-nummer,
.aw button.aw-tegel:hover .t-plus, .aw button.aw-tegel:focus-visible .t-plus { color: var(--aw-hover-accent); }
.aw button.aw-tegel:hover .t-pijl, .aw button.aw-tegel:focus-visible .t-pijl { border-color: var(--aw-hover-accent); transform: translateX(2px) rotate(45deg); }
.aw button.st-ontdek:hover .t-stand > span, .aw button.st-ontdek:focus-visible .t-stand > span { color: var(--aw-sterk-inkt); }
.aw button.st-afgenomen:hover .t-stand > span, .aw button.st-afgenomen:focus-visible .t-stand > span { background: var(--aw-sterk); color: var(--aw-sterk-inkt); }
.aw button.aw-tegel:focus-visible { outline: 3px solid var(--aw-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .aw-tegel, .aw-tegel .t-pijl { transition: none; } .aw button.aw-tegel:hover .t-pijl { transform: rotate(45deg); } }

/* Legenda van de drie standen */
.aw-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--aw-gedempt); }
.aw-legenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 7px; box-sizing: border-box; }
.aw-legenda .l-afgenomen i { background: var(--aw-sterk); border: 1.5px solid var(--aw-sterk-rand); }
.aw-legenda .l-ontdek i { background: var(--aw-licht); border: 1.5px solid var(--aw-licht-rand); }
.aw-legenda .l-binnenkort i { background: var(--aw-grond); border: 1.5px dashed var(--aw-binnen-rand); }

/* ---- Zoeken en filteren in De Hal (zichtbaar vanaf 7 werkruimtes) ---- */
.aw-zoek { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.aw-zoek input { flex: 1 1 220px; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--aw-tekst); background: var(--aw-vlak); border: 1.5px solid var(--aw-lijn); border-radius: 10px; }
.aw-zoek input:focus-visible { outline: 3px solid var(--aw-licht-rand); outline-offset: 2px; border-color: var(--aw-inkt); }
.aw-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.aw-filter button { min-height: 44px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--aw-inkt); background: transparent; border: 1.5px solid var(--aw-inkt); border-radius: 999px; cursor: pointer; }
.aw-filter button[aria-pressed="true"] { background: var(--aw-sterk); color: var(--aw-sterk-inkt); border-color: var(--aw-sterk); }
.aw-filter button:hover { background: var(--aw-hover); color: var(--aw-sterk-inkt); border-color: var(--aw-hover); }
.aw-filter button:focus-visible { outline: 3px solid var(--aw-licht-rand); outline-offset: 2px; }
.aw-geen { color: var(--aw-gedempt); font-size: 15px; margin: 6px 0 0; }

/* ---- De Woonkamer ---- */
.aw-welkom { background: var(--aw-sterk); color: var(--aw-sterk-inkt); border-radius: 10px; padding: 26px 22px; margin: 0 0 22px; }
.aw-welkom .aw-oogje { color: var(--aw-sterk-accent); }
.aw-welkom h2 { color: var(--aw-sterk-inkt); font-size: 30px; line-height: 1.15; margin: 0 0 8px; }
.aw-welkom h2 em { color: var(--aw-sterk-accent); font-style: italic; }
.aw-welkom p { margin: 0; max-width: 40em; line-height: 1.55; }
@media (min-width: 700px) { .aw-welkom { padding: 32px 34px; } .aw-welkom h2 { font-size: 38px; } }
.aw-strook { background: var(--aw-label-bg); color: var(--aw-label-inkt); font-size: 14px; font-weight: 500; line-height: 1.45; border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; }
.aw-cijfers { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .aw-cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.aw-cijfers li { background: var(--aw-vlak); border: 1px solid var(--aw-lijn); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.aw-getal { font-family: var(--kop); font-size: 30px; line-height: 1; color: var(--aw-inkt); font-variant-numeric: lining-nums; }
.aw-getal-tekst { font-size: 13px; line-height: 1.4; color: var(--aw-gedempt); }
.aw-raster { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 22px; }
@media (min-width: 860px) { .aw-raster { grid-template-columns: 1.3fr 1fr; } }
.aw-kaart { background: var(--aw-vlak); border: 1px solid var(--aw-lijn); border-radius: 10px; padding: 18px 20px; }
.aw-kaart h3 { font-size: 22px; margin: 0 0 4px; }
.aw-kaart .aw-sub { font-size: 14px; color: var(--aw-gedempt); margin: 0 0 12px; }
.aw-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aw-lijst li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--aw-licht); }
.aw-lijst li:first-child { border-top: 0; padding-top: 0; }
.aw-lijst .aw-wat { font-weight: 600; color: var(--aw-tekst); }
.aw-lijst .aw-waar { display: block; font-size: 13px; color: var(--aw-gedempt); font-weight: 400; }
.aw-leeg { color: var(--aw-gedempt); font-size: 14px; line-height: 1.5; margin: 0; padding: 12px 14px; background: var(--aw-grond); border: 1.5px dashed var(--aw-lijn); border-radius: 8px; }
.aw-kol { display: grid; gap: 14px; align-content: start; }

/* ---- Knoppen in de Demo Hal-stijl ---- */
.aw .aw-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  border-radius: 999px; border: 1.5px solid var(--aw-sterk); background: var(--aw-sterk); color: var(--aw-sterk-inkt); cursor: pointer; text-decoration: none; }
.aw .aw-knop:hover { background: var(--aw-hover); border-color: var(--aw-hover); }
.aw .aw-knop.rustig { background: transparent; color: var(--aw-inkt); border-color: var(--aw-inkt); }
.aw .aw-knop.rustig:hover { background: var(--aw-hover); color: var(--aw-sterk-inkt); border-color: var(--aw-hover); }
.aw .aw-knop.klein { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.aw .aw-knop:focus-visible { outline: 3px solid var(--aw-licht-rand); outline-offset: 3px; }
.aw .aw-knop:disabled, .aw .aw-knop:disabled:hover { background: var(--aw-licht); color: var(--aw-gedempt); border-color: var(--aw-lijn); cursor: not-allowed; }
.aw-knoprij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
.aw-terug { margin: 6px 0 0; }

/* ---- Beheer ---- */
.aw-beheer .aw-kaart { margin: 0 0 16px; }
.aw-wsrij { border-top: 1px solid var(--aw-licht); padding: 14px 0; }
.aw-wsrij:first-of-type { border-top: 0; }
.aw-wsrij h4 { font-family: var(--kop); font-weight: 400; font-size: 19px; color: var(--aw-inkt); margin: 0 0 8px; }
.aw-kamerlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aw-kamerlijst li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; }
.aw-kamerstand { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.aw-kamerstand.aan { color: var(--aw-inkt); }
.aw-kamerstand.uit { color: var(--aw-gedempt); }
.aw-vraag { background: var(--aw-grond); border: 2px solid var(--aw-licht-rand); border-radius: 10px; padding: 14px 16px; margin: 6px 0 4px; width: 100%; }
.aw-vraag p { margin: 0 0 4px; }
.aw-slot { font-size: 13px; color: var(--aw-gedempt); }
.aw-melding { font-size: 14px; margin: 8px 0 0; min-height: 1.2em; }
.aw-melding.goed { color: #2d6a3a; }
.aw-melding.fout { color: #9b2c2c; }

/* ---- Formulieren (nieuwe klant, teksten) ---- */
.aw-stappen { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: st; }
.aw-stappen li { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--aw-licht); color: var(--aw-gedempt); }
.aw-stappen li[aria-current="step"] { background: var(--aw-sterk); color: var(--aw-sterk-inkt); }
.aw-stappen li.klaar { background: var(--aw-grond); color: var(--aw-inkt); border: 1px solid var(--aw-licht-rand); }
.aw-veld { display: grid; gap: 6px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--aw-inkt); }
.aw-veld .aw-hulp { font-weight: 400; color: var(--aw-gedempt); font-size: 13px; }
.aw-veld input, .aw-veld textarea, .aw-veld select { font: inherit; font-weight: 400; font-size: 15px; color: var(--aw-tekst); background: var(--aw-vlak); border: 1.5px solid var(--aw-lijn); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
.aw-veld textarea { min-height: 90px; resize: vertical; }
.aw-veld input:focus-visible, .aw-veld textarea:focus-visible, .aw-veld select:focus-visible { outline: 3px solid var(--aw-licht-rand); outline-offset: 2px; border-color: var(--aw-inkt); }
.aw-keuzes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.aw-keuzes label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; min-height: 44px; padding: 10px 12px; background: var(--aw-vlak); border: 1.5px solid var(--aw-lijn); border-radius: 10px; cursor: pointer; }
.aw-keuzes label.slot { cursor: not-allowed; color: var(--aw-gedempt); background: var(--aw-grond); border-style: dashed; }
.aw-keuzes input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--aw-sterk); }
.aw-voorbeeld { border: 1.5px dashed var(--aw-licht-rand); border-radius: 10px; padding: 16px; background: var(--aw-grond); }

/* Aanvullingen prototype C */
.aw .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aw-tegel .t-getal { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--aw-inkt); }
.aw-tegel.st-afgenomen .t-getal { color: var(--aw-sterk-accent); }
.aw button.aw-tegel:hover .t-getal, .aw button.aw-tegel:focus-visible .t-getal { color: var(--aw-hover-accent); }
.aw-tegel.st-voorbeeld { cursor: default; }

/* Merkafspraak 25 okt 2026: platformnaam en ondertitel naast het logo van Andere Isabel in de kop (De Hal, De Woonkamer, beheer, inloggen) */
header.kop .platform { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--kop-accent, #cd9d33); }
header.kop .platform p { margin: 0; }
header.kop .platform-naam { font-family: "Playfair Display", Georgia, serif; font-size: 24px; line-height: 1.1; color: var(--kop-ink, #f2ece5); }
header.kop .platform-sub { font-family: "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; color: var(--kop-accent, #cd9d33); }
@media (max-width: 599px) { header.kop .platform { padding-left: 12px; } header.kop .platform-naam { font-size: 20px; } header.kop .platform-sub { font-size: 10px; letter-spacing: .08em; } }
.platform-welkom { font-size: 15px; line-height: 1.55; color: var(--ink-soft, #5c4e44); max-width: 40em; margin: 0 0 16px; }
/* Het logo groter waar het naast de platformnaam staat, zodat het op laptop en telefoon goed leesbaar is. De verhouding blijft gelijk (width:auto). */
header.kop .koplinks:has(.platform) .logo { height: 58px; width: auto; max-width: none; }
@media (max-width: 599px) { header.kop .koplinks:has(.platform) .logo { height: 46px; } }

/* Snelheid (25 okt 2026): laden en fouten. Geen lege Hal meer, en een duidelijke weg terug als ophalen mislukt. */
.aw-tegel.st-laden { background: var(--aw-grond); border: 1.5px dashed var(--aw-lijn); cursor: progress; }
.aw-tegel.st-laden .t-nummer, .aw-tegel.st-laden .t-naam, .aw-tegel.st-laden .t-kort { color: var(--aw-gedempt); }
.aw-tegel.st-laden .t-nummer::after { background: var(--aw-lijn); }
.aw-tegel.st-laden .t-stand > span { padding: 0; color: var(--aw-gedempt); }
.aw-laden .aw-tegel { min-height: 150px; }
.aw-laden .aw-tegel .t-naam, .aw-laden .aw-tegel .t-kort { display: block; border-radius: 6px; background: var(--aw-lijn); opacity: .55; }
.aw-laden .aw-tegel .t-naam { width: 60%; height: 22px; margin-top: 18px; }
.aw-laden .aw-tegel .t-kort { width: 85%; height: 14px; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .aw-laden .aw-tegel { animation: aw-adem 1.6s ease-in-out infinite; } }
@keyframes aw-adem { 50% { opacity: .6; } }
.aw-fout { margin-top: 18px; padding: 18px 20px; border: 1.5px solid var(--aw-lijn); border-left: 4px solid var(--aw-sterk); border-radius: 12px; background: var(--aw-vlak, var(--aw-grond)); }
.aw-fout strong { display: block; font-size: 17px; margin-bottom: 6px; }
.aw-fout p { margin: 0 0 14px; }

/* Snelkoppelingen bovenaan De Woonkamer (26 okt): compact, in de kleuren van de werkruimte (--aw-*). */
.aw-snel { margin: -8px 0 22px; }
.aw-snel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aw-snel-knop { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--aw-lijn);
  background: var(--aw-vlak); color: var(--aw-inkt); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.aw-snel-knop:hover { border-color: var(--aw-inkt); }
.aw-snel-knop:focus-visible { outline: 3px solid var(--aw-sterk-accent); outline-offset: 2px; }
.aw-snel-knop.rustig { background: transparent; font-weight: 500; color: var(--aw-gedempt); }
.aw-snel-getal { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--aw-sterk); color: var(--aw-sterk-inkt); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 420px) { .aw-snel ul { gap: 6px; } .aw-snel-knop { padding: 8px 12px; font-size: 13.5px; } }

/* Toegang tot een Kamer aanvragen (W2, 26 okt): compact blok onder het voorbeeld, in de kleuren van de werkruimte. */
.aw-aanvraag { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--aw-lijn); border-radius: 10px; background: var(--aw-vlak); display: grid; gap: 6px; max-width: 40em; }
.aw-aanvraag p { margin: 0; line-height: 1.5; }
.aw-aanvraag-kop { font-weight: 700; color: var(--aw-inkt); }
.aw-aanvraag-noot { font-style: italic; color: var(--aw-gedempt); }
.aw-aanvraag .aw-knoprij { margin-top: 6px; }
.aw-aanvraaglijst li { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.aw-aanvraaglijst li[data-status="open"] { border-left: 3px solid var(--aw-sterk); padding-left: 10px; }
.aw-aanvraaglijst .aw-waar { display: block; }