/* Kapsalon-dashboard — één stijlblad.

   Rustig, warm en verfijnd: veel wit, zachte hoeken, een serif voor de koppen
   en een smalle donkere zijbalk. De twee kleuren van de salon (--hoofd en
   --accent) worden in basis.html ingevuld en kleuren alles mee.

   Mobiel eerst: de kapster gebruikt dit met haar duim, tussen twee klanten door.
   Alles wat aanklikbaar is, is minstens 44 pixels hoog.

   Over het lettertype: bewust geen Google Fonts. Dat vraagt internet en het
   stuurt het IP-adres van elke bezoeker naar Google, wat in Europa een
   privacyprobleem is zodra dit bij echte salons draait. We gebruiken dus
   lettertypes die al op het toestel staan. */

:root {
  --hoofd: #72594e;
  --accent: #e8cfc1;
  --hoofd-tekst: #ffffff;
  --hoofd-zacht: #f3efec;
  --accent-zacht: #faf3ee;

  --papier: #f6f3ef;
  --kaart: #ffffff;
  --inkt: #26201b;
  --grijs: #8b8177;
  --lijn: #ece5dd;
  --lijn-zacht: #f4efe9;

  --groen: #4a7c62;
  --groen-zacht: #eaf3ee;
  --oranje: #a8712a;
  --oranje-zacht: #fdf4e7;
  --rood: #a44a3f;
  --rood-zacht: #fbeeec;

  --rond: 16px;
  --rond-klein: 10px;
  --schaduw: 0 1px 2px rgba(38, 32, 27, .04), 0 8px 24px rgba(38, 32, 27, .05);

  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;

  --rail: 88px;
}

* { box-sizing: border-box; }

/* Wat verborgen hoort te zijn, blijft verborgen — ook als we het element
   verderop een eigen `display` geven. Zonder deze regel wint onze display van
   de standaardregel van de browser en blijft er staan wat weg moest. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 15.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════ Zijbalk (rail) */

.rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  background: var(--hoofd);
  color: var(--hoofd-tekst);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0;
  gap: 8px;
  z-index: 30;
}

.rail-merk {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--kaart);
  color: var(--hoofd);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  margin-bottom: 14px;
  letter-spacing: .5px;
}

.rail a.rail-knop {
  width: 68px;
  min-height: 54px;
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 3px;
  text-decoration: none;
  font-size: 17px;
  color: var(--hoofd-tekst);
  opacity: .55;
  position: relative;
}

.rail a.rail-knop:hover { opacity: .9; background: rgba(255,255,255,.10); }
.rail a.rail-knop.aan { opacity: 1; background: rgba(255,255,255,.16); }

.rail a.rail-knop.aan::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--hoofd-tekst);
}

.rail .duw { margin-top: auto; }

/* Op een telefoon wordt de rail een balk onderaan. */
@media (max-width: 760px) {
  .rail {
    top: auto; right: 0;
    width: auto; height: 62px;
    flex-direction: row;
    justify-content: space-around;
    padding: 6px 8px;
    gap: 2px;
  }
  .rail-merk { display: none; }
  .rail a.rail-knop.aan::before {
    left: 50%; top: auto; bottom: -6px;
    transform: translateX(-50%);
    width: 18px; height: 3px; border-radius: 3px 3px 0 0;
  }
  .rail .duw { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════ Kader */

/* Waarom niet gewoon de volle breedte: een lopende zin die over 1800 pixels
   uitloopt leest slecht — je oog vindt het begin van de volgende regel niet
   meer terug. 1440 is ruim, maar nog te overzien.

   De agenda is de uitzondering. Daar staan kolommen naast elkaar, geen tekst,
   en elke pixel extra is een bredere kolom per kapster: die krijgt alles. */
.omhulsel { max-width: 1440px; margin: 0 auto; padding: 26px 26px 90px; }
.omhulsel.breed { max-width: none; }
body.met-rail .omhulsel { margin-left: var(--rail); }

@media (max-width: 760px) {
  body.met-rail .omhulsel { margin-left: 0; padding: 18px 16px 96px; }
}

/* ═══════════════════════════════════════════════════════════════ Tekst */

h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.3px;
  margin: 6px 0 4px;
  line-height: 1.15;
}

h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  margin: 34px 0 12px;
}

@media (max-width: 560px) { h1 { font-size: 27px; } }

.onderkop { color: var(--grijs); margin: 0 0 26px; font-size: 15px; }

.label, .categorie, .blok-titel, .kolomnaam {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--grijs);
}

.categorie { margin: 30px 0 10px; }

/* --- de soortkop in de startlijst, met een knop om alles aan te duiden --- */

.categoriekop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 10px;
  flex-wrap: wrap;
}

.categoriekop .categorie { margin: 0; }

.groepteller {
  color: var(--grijs);
  font-size: 12.5px;
  margin-right: auto;
  white-space: nowrap;
}

.categoriekop.volledig .groepteller { color: var(--groen); font-weight: 600; }

/* Blijft meescrollen: met 95 behandelingen is het einde van de lijst ver weg,
   en dan wil je nog altijd kunnen zien hoeveel er aanstaat. */
.kiesbalk {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 6px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  box-shadow: var(--schaduw);
}

.kiesteller { font-weight: 600; font-size: 14px; margin-right: auto; }
.kiesbalk-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.blok-titel { margin: 22px 0 9px; }
.hint { font-weight: 400; color: var(--grijs); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════ Kaart */

.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: var(--schaduw);
}

.kaart-strak { padding: 0; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════ Statvakken */

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

/* Een tegel hoeft de volle breedte niet: dan is het vooral witruimte. */
.tegels.een { grid-template-columns: auto; justify-content: start; }

.tegel.plat {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 22px;
}
.tegel.plat .tegel-getal { font-size: 26px; }
.tegel.plat .tegel-onder { margin-top: 0; font-size: 14.5px; }

.tegel {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 18px 20px;
  box-shadow: var(--schaduw);
  text-decoration: none;
  color: inherit;
  display: block;
}

.tegel.warm { background: var(--accent-zacht); border-color: transparent; }
a.tegel:hover { border-color: var(--hoofd); }

.tegel-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: var(--grijs); margin-bottom: 8px;
}

.tegel-getal { font-family: var(--serif); font-size: 30px; line-height: 1.1; font-weight: 400; }
.tegel-onder { font-size: 13px; color: var(--grijs); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════ Formulier */

label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  font: inherit;
  background: var(--kaart);
  color: var(--inkt);
  min-height: 44px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--hoofd);
  outline-offset: -1px;
  border-color: var(--hoofd);
}

.veld { margin-bottom: 15px; }
.veld-rij { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 560px) {
  .veld-rij.twee { grid-template-columns: 1fr 1fr; }
  .veld-rij.drie { grid-template-columns: 1fr 1fr 1fr; }
}

.mini { max-width: 112px; }

/* ═══════════════════════════════════════════════════════════════ Knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--hoofd);
  color: var(--hoofd-tekst);
  border: 1px solid var(--hoofd);
  border-radius: var(--rond-klein);
  padding: 13px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;
}

.knop:hover { filter: brightness(1.12); }
.knop.rustig { background: var(--kaart); color: var(--inkt); border-color: var(--lijn); }
.knop.rustig:hover { border-color: var(--hoofd); filter: none; }
.knop.klein { padding: 9px 15px; min-height: 40px; font-size: 14px; }
.knop.breed { width: 100%; }
.knop-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════ Meldingen */

.uitleg, .foutmelding, .waarschuwing, .goedmelding {
  padding: 12px 14px;
  border-radius: var(--rond-klein);
  font-size: 13.5px;
  margin-bottom: 14px;
  border-left: 3px solid;
}

.uitleg { background: var(--groen-zacht); border-color: var(--groen); color: #2f5a46; }
.goedmelding { background: var(--groen-zacht); border-color: var(--groen); color: #2f5a46; }
.foutmelding { background: var(--rood-zacht); border-color: var(--rood); color: #7d332a; }
.waarschuwing { background: var(--oranje-zacht); border-color: var(--oranje); color: #7a5115; font-weight: 600; }

.bewaarmelding { color: var(--groen); font-weight: 600; font-size: 14px; }
.leeg { color: var(--grijs); text-align: center; padding: 42px 20px; }

/* ═══════════════════════════════════════════════════════════════ Rijen */

.dagrij, .klantrij {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
  min-height: 60px;
}

.dagrij { border-bottom: 1px solid var(--lijn-zacht); position: relative; }
.dagrij:last-child { border-bottom: 0; }
.dagrij:hover, .klantrij:hover { background: var(--hoofd-zacht); }

/* Op een smal scherm zakken de merkjes onder de naam in plaats van het
   telefoonnummer weg te drukken. */
.dagrij, .klantrij { flex-wrap: wrap; }
.dagrij > .letop-merkje, .klantrij > .letop-merkje { max-width: 100%; }

.dagrij .streep {
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hoofd);
}

.dagrij .tijd {
  font-size: 13px;
  color: var(--grijs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

.dagrij .wie { flex: 1; min-width: 0; }
.dagrij .wie strong { font-weight: 600; }
.dagrij .wat { color: var(--grijs); font-size: 13px; }

/* Een raster en geen flex. Met flex bepaalt de inhoud van elke regel waar de
   kolommen landen: een regel met een lange waarschuwing duwt haar uurtje naar
   links en dan staat er niets meer onder elkaar. Elke regel krijgt hier
   dezelfde kolommen, dus alles lijnt uit over de hele lijst. */
/* De kolommen staan één keer opgeschreven en worden door de kopjes én de
   regels gebruikt. Twee keer hetzelfde rijtje zou vroeg of laat uit elkaar
   lopen, en dan staat een kopje boven de verkeerde kolom. */
.daglijst { --lijstkolommen: 46px 164px minmax(0, 1fr) 116px 92px 114px minmax(0, 196px); }

.daglijst .daglijstkop, .daglijst .dagrij {
  display: grid;
  grid-template-columns: var(--lijstkolommen);
  gap: 14px;
  padding: 12px 20px;
}

.daglijst .daglijstkop {
  padding: 11px 20px;
  border-bottom: 1px solid var(--lijn);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--grijs);
}

.daglijst .dagrij {
  align-items: center;
  min-height: 56px;
}
.daglijst .rij-naam { font-weight: 600; }
.daglijst .rij-wat { color: var(--grijs); font-size: 13.5px; }
.daglijst .rij-duur {
  color: var(--grijs); font-size: 13px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.klokje { width: 14px; height: 14px; flex: none; }
.rij-inwerk { flex-basis: 100%; padding-left: 20px; font-size: 11.5px; opacity: .85; }

/* De laatste kolom: eerst de kapster, dan wat er nog te melden valt. */
.daglijst .rij-wie, .daglijst .rij-status, .daglijst .rij-merkjes {
  display: flex; flex-wrap: wrap; gap: 6px; min-width: 0;
}
/* flex: none staat in de algemene regel, en dan krimpt een lange
   waarschuwing niet mee en loopt ze de kaart uit. */
.daglijst .letop-merkje {
  flex: 0 1 auto;
  font-size: 11.5px; padding: 3px 9px;
  min-width: 0; white-space: normal;
}

/* Onder de 980 pixels passen zes kolommen niet meer. Dan terug naar regels
   die omslaan — vaste breedtes zijn daar alleen maar in de weg. */
@media (max-width: 980px) {
  .daglijst .dagrij {
    display: flex; flex-wrap: wrap; gap: 6px 13px;
  }
  .daglijst .rij-naam { flex: none; }
  .daglijst .rij-wat { flex-basis: 100%; }
  /* Zonder kolommen hebben kopjes boven kolommen geen zin meer. */
  .daglijst .daglijstkop { display: none; }
}

.klantrij {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  margin-bottom: 7px;
}
.klantrij:hover { border-color: var(--hoofd); }
.klantrij .klantnaam { font-weight: 600; flex: 1; }
.klantrij .klantinfo { color: var(--grijs); font-size: 13.5px; }

/* Het sterretje bij een belangrijke klant. Bewust klein: het is een merkje,
   geen versiering, en het mag de naam niet wegdrukken. */
.ster { font-size: .85em; margin-right: 4px; line-height: 1; }
h1 .ster { font-size: .6em; vertical-align: middle; }

.bolletje {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--accent-zacht);
  color: var(--hoofd);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════ Merkjes */

.merkje, .wie-merkje {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .02em;
}

.merkje.kalm { background: var(--lijn-zacht); color: var(--grijs); }
.merkje.pauze { background: var(--groen-zacht); color: var(--groen); }
.merkje.uit { background: var(--oranje-zacht); color: var(--oranje); }

/* ═══════════════════════════════════════════════════════ Volgende klant */

/* Staat als derde tegel naast "afspraken" en "vrije momenten". Een naam is
   langer dan een getal, dus kleiner gezet en met ruimte om af te breken. */
.tegel-naam {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tegel-naam.zacht { color: var(--grijs); font-size: 19px; }

.tegel-letop {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--rond-klein);
  background: var(--oranje-zacht);
  color: var(--oranje);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════ Vrije momenten */

.gat-rij {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--lijn-zacht);
  min-height: 58px;
}

.gat-rij:last-child { border-bottom: 0; }
.gat-tijd { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; min-width: 104px; }
.gat-wie { flex: 1; min-width: 0; }
.gat-duur { color: var(--grijs); font-size: 13px; white-space: nowrap; }
.gat-rij.inwerktijd { background: var(--groen-zacht); }

/* ═══════════════════════════════════════════════════════ Vrije plaatsen */

.plaats-rij {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lijn-zacht);
  text-decoration: none;
  color: inherit;
  min-height: 68px;
}

.plaats-rij:last-child { border-bottom: 0; }
.plaats-rij:hover { background: var(--hoofd-zacht); }

.plaats-tijd { font-family: var(--serif); font-size: 21px; white-space: nowrap; min-width: 62px; }
.plaats-wat { flex: 1; min-width: 0; }
.plaats-dag { font-weight: 600; text-transform: capitalize; }
.plaats-reden { color: var(--grijs); font-size: 13px; }
.plaats-pijl { color: var(--grijs); font-size: 18px; }

/* ═══════════════════════════════════════════════════════ Kapster-keuze */

.wie-keuze { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.wie-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--kaart);
  color: var(--inkt);
  text-decoration: none;
  font-size: 14px;
  min-height: 42px;
  margin-bottom: 0;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.wie-knop:hover { border-color: var(--hoofd); }
.wie-knop.aan { background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst); font-weight: 600; }
.wie-knop input { position: absolute; opacity: 0; pointer-events: none; }
.wie-knop:has(input:checked) {
  background: var(--hoofd); border-color: var(--hoofd);
  color: var(--hoofd-tekst); font-weight: 600;
}
.wie-knop:has(input:checked) .kleurstip,
.wie-knop.aan .kleurstip { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

.kleurstip { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ═══════════════════════════════════════════════════════════════ Agenda */

.dagkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.dagkop h1 { margin: 0; font-size: 26px; text-transform: capitalize; }
.dagkop .rest { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.pijl {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--lijn); background: var(--kaart);
  border-radius: var(--rond-klein); text-decoration: none; color: var(--inkt);
  font-size: 17px;
}
.pijl:hover { border-color: var(--hoofd); color: var(--hoofd); }

/* Zeven vaste blokjes naast elkaar, links uitgelijnd — niet uitgerekt over de
   volle breedte. Op een breed scherm werd elke dag anders 265 pixels breed
   voor twee regeltjes tekst, en dat is vooral wit.

   Dezelfde maat en dezelfde plek als de knoppenrij met de kapsters eronder,
   zodat de twee balken bij elkaar horen. */
.weekstrook {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.weekdag {
  flex: 0 0 62px;
  text-align: center;
  padding: 8px 2px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  text-decoration: none;
  color: inherit;
  min-height: 58px;
}

/* Op een telefoon net wél de volle breedte: daar is die precies genoeg voor
   zeven dagen, en zeven blokjes van 62 pixels zouden er afbreken. */
@media (max-width: 620px) {
  .weekstrook { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .weekdag { flex: none; }
}

.weekdag:hover { border-color: var(--hoofd); }
.weekdag.gekozen { background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst); }
.weekdag.vandaag:not(.gekozen) { border-color: var(--hoofd); }
.weekdag .dagletter { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.weekdag .dagnummer { font-family: var(--serif); font-size: 18px; }
/* Eén stipje per kapster die er die dag iemand heeft staan, in haar eigen
   kleur. Op de gekozen dag worden ze wit: daar is de achtergrond donker. */
.weekdag .stipjes { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.weekdag .stipje { width: 5px; height: 5px; border-radius: 50%; }
.weekdag.gekozen .stipje { background: var(--hoofd-tekst) !important; }

/* De namenbalk hoort bij de tijdlijn eronder: samen één kaart. Vandaar de
   ronde hoeken bovenaan en geen lijn tussen de twee. */
.kolomkop {
  display: flex;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-bottom: 0;
  border-radius: var(--rond) var(--rond) 0 0;
  padding-top: 4px;
}
.kolomkop-marge { width: 54px; flex: none; }
.kolomnaam {
  flex: 1; text-align: center; padding: 10px 4px 11px;
  border-bottom: 1px solid var(--lijn);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--grijs);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.kolomnaam .kop-binnen { display: inline-flex; align-items: center; gap: 8px; }

.tijdlijn {
  position: relative;
  display: flex;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 0 0 var(--rond) var(--rond);
  overflow: hidden;
  box-shadow: var(--schaduw);
}

.uren { width: 54px; flex: none; border-right: 1px solid var(--lijn); position: relative; }
.uurmerk {
  position: absolute; left: 0; right: 0;
  font-size: 10.5px; color: var(--grijs);
  padding-left: 9px; transform: translateY(-6px);
  font-variant-numeric: tabular-nums;
}
/* Het eerste uurtje staat op nul en werd door dat opschuiven half afgesneden
   door de bovenrand van de kaart. Dat blijft gewoon staan waar het staat. */
.uurmerk:first-child { transform: none; padding-top: 3px; }

/* Een leeg plekje is aanklikbaar: daar boek je in. Het plusje-aanwijzertje
   is de enige hint die je nodig hebt — een tekstje over elke lege plek zou de
   agenda onleesbaar maken. */
.baanvlak { position: relative; flex: 1; cursor: copy; }
.baanvlak .blok a { cursor: pointer; }
.uurlijn { position: absolute; left: 0; right: 0; border-top: 1px solid var(--lijn-zacht); }
.kolomlijn { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--lijn-zacht); z-index: 1; }

.nu-lijn { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rood); z-index: 5; }
.nu-lijn::before {
  content: ""; position: absolute; left: 0; top: -5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rood);
}

.blok { position: absolute; padding: 1px 5px 2px; z-index: 2; }
/* Een randje rondom in de kleur van de kapster maakte elk blok even luid.
   Nu een licht kadertje met links een dik balkje in haar kleur: rustiger, en
   je ziet nog altijd in één oogopslag van wie het blok is. */
.blok a {
  display: block; height: 100%;
  border-radius: var(--rond-klein);
  overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--hoofd);
}
.blok a:hover { filter: brightness(.98); }

/* De inwerktijd was een groene streepjescode met streepjeslijnen. Naast
   elkaar in vier banen werd de agenda daar een lappendeken van, terwijl het
   maar één ding hoeft te zeggen: hier is ze even vrij. Nu een witte
   onderbreking in het blok, met twee haarlijntjes. */
.blok .deel-vrij {
  background: rgba(255, 255, 255, .66);
  border-top: 1px dashed rgba(38, 32, 27, .12);
  border-bottom: 1px dashed rgba(38, 32, 27, .12);
}

/* Elk stuk knipt zijn eigen tekst af. Zonder dit loopt de naam van een korte
   afspraak over de strook eronder en wordt de agenda onleesbaar. */
.blok .deel-bezig, .blok .deel-vrij { overflow: hidden; }

.blok-tekst { padding: 4px 8px; font-size: 12px; line-height: 1.25; }
.blok-naam, .blok-wat {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blok-naam { font-weight: 700; }
.blok-uur { margin-right: 7px; font-variant-numeric: tabular-nums; }
.blok-wat { color: var(--grijs); }

/* Past er maar één regel, dan gaan naam en behandeling naast elkaar. De
   behandeling krimpt het eerst — wie er komt is belangrijker dan wat ze doet. */
.blok-tekst.op-een-regel {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 8px; font-size: 11px;
}
.op-een-regel .blok-naam { flex: 0 1 auto; min-width: 0; }
.op-een-regel .blok-wat { flex: 1 3 auto; min-width: 0; }

/* Regelhoogte staat er uitdrukkelijk bij: zonder dit erft dit vakje de 1.55
   van de pagina en past 10px tekst niet meer in een strook van 15 pixels. */
.vrij-tekst {
  font-size: 10px; line-height: 1.2; color: var(--grijs);
  padding: 1px 8px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Dezelfde waarschuwing in de lijst onder de agenda. Ook hier voluit, en
   ook hier zonder afkappen. */
.letop-merkje {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--oranje-zacht);
  color: var(--oranje);
  font-size: 12px;
  font-weight: 700;
  white-space: normal;
}

.blok.afgezegd a { opacity: .45; border-style: dashed; }
.blok.afgezegd .blok-naam { text-decoration: line-through; }

/* ═══════════════════════════════════════════ Wie komt er straks? */

/* Eén kaartje per kapster op Vandaag. Vier dingen moeten er in één blik uit
   te lezen zijn: wie er komt, om welk uur, hoeveel tijd er nog is, en of er
   iets is om op te letten. */

.ploeg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

.ploegkaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  overflow: hidden;
}

.ploegkaart.rustig { background: var(--papier); }

.ploegkop {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn-zacht);
}

.ploegnaam {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Hoeveel tijd er nog is. Groen = ruimte, bruin = nu aan het werk. */
.ploegtijd {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.ploegtijd.vrij  { background: var(--groen-zacht); color: var(--groen); }
.ploegtijd.bezig { background: var(--hoofd-zacht); color: var(--hoofd); }
.ploegtijd.nu    { background: var(--oranje-zacht); color: var(--oranje); }
.ploegtijd.leeg  { background: var(--lijn-zacht); color: var(--grijs); }

/* Waar ze nú mee bezig is. Rustig gehouden — het is achtergrond bij de
   volgende klant, niet de hoofdzaak. Zonder deze regel las het kaartje als
   tegenspraak: "nog 1 u 32 bezig" boven "geen afspraken meer", terwijl dat
   over twee verschillende afspraken gaat. */
.ploegnu {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--lijn-zacht);
  background: var(--hoofd-zacht);
  text-decoration: none; color: var(--grijs);
  font-size: 12.5px;
}
.ploegnu:hover { color: var(--inkt); }

.nu-label {
  flex: none;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px; font-weight: 700;
}
.nu-wie {
  flex: 1; min-width: 0;
  font-weight: 600; color: var(--inkt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-tot { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ploegklant {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  padding: 12px 14px;
  text-decoration: none; color: inherit;
}
.ploegklant:hover { background: var(--accent-zacht); }

.ploeguur {
  font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--hoofd);
}

.ploegwie {
  align-self: center;
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* De waarschuwing bij een klant, voluit. Niet als tooltip: aan de balie
   staat een tablet en daar bestaat "met de muis erboven hangen" niet.

   Let op de laatste regel: deze tekst wordt nóóit afgekapt. "Allergisch voor
   ammoniak" half tonen is erger dan ze niet tonen. */
.ploegletop {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--rond-klein);
  background: var(--oranje-zacht);
  color: var(--oranje);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
}

/* De behandeling loopt onder het uur door over de volle breedte. */
.ploegwat {
  grid-column: 1 / -1;
  color: var(--grijs); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ploegklant.leeg { padding: 14px; }
.ploegklant.leeg .ploegwat { white-space: normal; }


/* ═══════════════════════════════════════════════ Wie is er vrij? */

.wievrij-rij {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.wievrij-rij .hint { flex: 1; min-width: 0; }

/* De redenen staan dichtgeklapt: je wil weten WIE er kan, niet meteen waarom
   de rest niet kan. Maar het antwoord moet er wel zijn als je het vraagt. */
.wievrij-bezet {
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.wievrij-bezet summary { cursor: pointer; color: var(--grijs); }
.wievrij-reden { margin-top: 8px; color: var(--grijs); }
.wievrij-reden strong { color: var(--inkt); margin-right: 5px; }


/* Wat je keuze oplevert, meteen in woorden. "elke week, 3 weken vooruit" —
   is dat nu drie keer of vier? Dat hoort niemand te moeten uitrekenen. */
.uitkomst {
  margin: 4px 0 18px;
  padding: 11px 14px;
  border-radius: var(--rond-klein);
  background: var(--groen-zacht);
  color: var(--groen);
  font-size: 14px;
  line-height: 1.45;
}
.uitkomst strong { color: inherit; }
.uitkomst.leeg { background: var(--oranje-zacht); color: var(--oranje); }


/* Een regel die je aan of uit kan klikken. Aangevinkt = een groen vinkje,
   uitgeklikt = een rood kruisje en de regel dooft uit. Zo zie je in één blik
   welke feestdagen er straks ingezet worden en welke niet. */
.reeksrij.kiesbaar { cursor: pointer; }
.reeksrij.kiesbaar input { position: absolute; opacity: 0; pointer-events: none; }

/* De tekens staan hier zelf en niet als \-code: die wordt te makkelijk
   ergens onderweg als iets anders gelezen. */
.kruisvink::before {
  content: "✕";
  color: var(--rood);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.reeksrij.kiesbaar:has(input:checked) .kruisvink::before {
  content: "✓";
  color: var(--groen);
}

/* Uitgeklikt: doorstreept en gedempt, maar wel leesbaar. Je moet kunnen zien
   wat je NIET gaat sluiten. */
.reeksrij.kiesbaar:not(:has(input:checked)) {
  background: var(--rood-zacht);
}
.reeksrij.kiesbaar:not(:has(input:checked)) .reeksdatum,
.reeksrij.kiesbaar:not(:has(input:checked)) .reeksreden {
  text-decoration: line-through;
  color: var(--grijs);
}

.reeksrij.kiesbaar:hover { background: var(--hoofd-zacht); }
.reeksrij.kiesbaar:not(:has(input:checked)):hover { background: var(--rood-zacht); }
.reeksrij.kiesbaar input:focus-visible + .reeksvink {
  outline: 2px solid var(--hoofd);
  outline-offset: 2px;
}


/* De lijst met sluitingsdagen van de zaak. */
.sluitrij {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--lijn-zacht);
}
.sluitrij:last-child { border-bottom: 0; }
.sluitdatum {
  flex: none; width: 150px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.sluitnaam { flex: 1; min-width: 0; }
.sluitrij form { margin: 0; }


/* ═══════════════════════════════════ De datums van een herhaalde afspraak */

.reekslijst {
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  overflow: hidden;
  margin: 10px 0 4px;
}

.reeksrij {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: 13.5px;
  text-decoration: none; color: inherit;
}
.reeksrij:last-child { border-bottom: 0; }
a.reeksrij:hover { background: var(--hoofd-zacht); }

/* Een datum die overgeslagen wordt blijft staan, maar gedempt. Je moet
   kunnen zien wat er NIET geboekt wordt, en waarom. */
.reeksrij.kan-niet { background: var(--papier); color: var(--grijs); }
.reeksrij.deze { background: var(--accent-zacht); font-weight: 600; }

.reeksvink { flex: none; width: 14px; text-align: center; color: var(--groen); font-weight: 700; }
.reeksrij.kan-niet .reeksvink { color: var(--grijs); }

.reeksdatum { flex: none; width: 92px; font-weight: 600; }
.reeksuur { flex: none; width: 46px; font-variant-numeric: tabular-nums; color: var(--grijs); }

/* De reden wordt niet afgekapt: "Amber is die dag afwezig (verlof)" half
   tonen helpt niemand. */
.reeksreden { flex: 1; min-width: 0; color: var(--grijs); }
.reeksrij.kan-niet .reeksreden { color: var(--oranje); }

@media (max-width: 560px) {
  .reeksrij { flex-wrap: wrap; gap: 4px 10px; }
  .reeksreden { flex-basis: 100%; margin-left: 26px; }
}


/* ═══════════════════════════════════════════════════════ Behandelingen */

.behandeling {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  margin-bottom: 8px;
  overflow: hidden;
}

.behandeling[open] { border-color: var(--hoofd); }
.behandeling.uit .rij-naam { text-decoration: line-through; color: var(--grijs); }

a.behandeling {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 20px; min-height: 62px;
  color: inherit; text-decoration: none;
}
a.behandeling:hover { background: var(--hoofd-zacht); }
a.behandeling:focus-visible { outline: 2px solid var(--hoofd); outline-offset: -2px; }

.rij-naam { font-weight: 600; margin-right: auto; }
.rij-duur { color: var(--grijs); font-size: 13.5px; white-space: nowrap; }
.rij-prijs { font-weight: 600; white-space: nowrap; min-width: 76px; text-align: right; }

/* De bewerkknop op een behandelingsregel. Hij doet zelf niets: de klik gaat
   door naar de summary eronder, die de regel openklapt. Het is puur een
   bordje dat zegt dat er hier iets te openen valt. */
.bewerkknop {
  flex: none; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--papier);
  color: var(--grijs); font: 600 12.5px/1 var(--sans); white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.bewerkknop::after { content: "Bewerken"; }
a.behandeling:hover .bewerkknop {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}

/* Op een smal scherm botst hij tegen de prijs. Dan zakt hij mee naar
   beneden in plaats van de regel uit elkaar te duwen. */
@media (max-width: 560px) {
  a.behandeling { flex-wrap: wrap; }
  a.behandeling .rij-tekst { flex-basis: calc(100% - 60px); }
  a.behandeling .rij-duur { margin-left: auto; }
  .bewerkknop { padding: 6px 12px; font-size: 12px; }
}

/* Het icoontje van de soort, klein, voor elke behandeling. Zacht groen, zodat
   het de regel rustig houdt en niet met de kleur van de salon vecht. */
.rij-icoon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--groen-zacht);
  color: var(--groen);
  display: flex; align-items: center; justify-content: center;
}
.rij-icoon svg { width: 18px; height: 18px; }

/* Naam en uitleg samen. De uitleg mag afgekort worden, de naam nooit:
   daarom krijgt alleen de uitleg het krimpen toebedeeld. */
.rij-tekst {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 12px;
}
.rij-tekst > .rij-naam { flex: 0 1 auto; min-width: 0; margin-right: 0; }
.rij-uitleg {
  flex: 1 1 auto; min-width: 0;
  color: var(--grijs); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bewerk { padding: 4px 20px 20px; border-top: 1px solid var(--lijn); }

.schakelaar {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 14.5px; cursor: pointer;
  padding: 10px 0; margin-bottom: 0;
}
.schakelaar input { width: 20px; height: 20px; accent-color: var(--hoofd); }

.kiesrij {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  margin-bottom: 7px;
  background: var(--kaart);
  cursor: pointer;
  min-height: 58px;
}
.kiesrij:hover { border-color: var(--hoofd); }

/* Naam, inwerktijd, duur en prijs op één regel. Op een smal scherm zakken
   duur en prijs onder de naam in plaats van eruit te lopen. */
.kiesrij { flex-wrap: wrap; }
.kiesrij .rij-tekst { min-width: 0; }
/* Het icoontje hoort er ook gewoon bij te staan, niet uitgebleekt. */

@media (max-width: 560px) {
  .kiesrij .rij-tekst { flex-basis: calc(100% - 80px); margin-right: 0; }
  .kiesrij .rij-duur { margin-left: 80px; margin-right: auto; }
}
.kiesrij input { width: 21px; height: 21px; accent-color: var(--groen); flex: none; }
.kiesrij:has(input:checked) { border-color: #cfe0d5; }

/* ═══════════════════════════════════════════════════════════ Onboarding */

.stappen { display: flex; gap: 10px; align-items: center; color: var(--grijs); font-size: 12.5px; margin-bottom: 22px; }

.stapbol {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--lijn);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--kaart);
}
.stapbol.klaar { background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst); }
.stapbol.nu { border-color: var(--hoofd); color: var(--hoofd); }
.staplijn { width: 26px; height: 1px; background: var(--lijn); }
.stappen .rest { margin-left: auto; }

.twee-luik { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 940px) { .twee-luik { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* --- sfeerkaartjes --- */

.sferen { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 460px) { .sferen { grid-template-columns: 1fr; } }

.sfeer {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--kaart);
  cursor: pointer;
  position: relative;
  margin-bottom: 0;
  min-height: 74px;
}

.sfeer:hover { border-color: var(--hoofd); }
.sfeer input { position: absolute; opacity: 0; pointer-events: none; }
.sfeer:has(input:checked) { border-color: var(--inkt); border-width: 2px; padding: 14px 15px; }

.sfeer:has(input:checked)::after {
  content: "✓";
  position: absolute; top: -9px; right: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--inkt); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

.staal { display: flex; flex: none; }
.staal span { width: 22px; height: 40px; }
.staal span:first-child { border-radius: 7px 0 0 7px; }
.staal span:last-child { border-radius: 0 7px 7px 0; }

.sfeer-naam { font-weight: 600; font-size: 15px; }
.sfeer-omschrijving { color: var(--grijs); font-size: 13px; }

.eigen-kleuren { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 460px) { .eigen-kleuren { grid-template-columns: 1fr; } }

.kleurveld {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 11px 13px;
  background: var(--kaart);
}

.kleurveld input[type="color"] {
  width: 38px; height: 38px; padding: 0; border: 0; background: none;
  border-radius: 8px; cursor: pointer; flex: none; min-height: 0;
}
.kleurveld .kleurnaam { font-size: 13.5px; font-weight: 600; }
.kleurveld .kleurcode { font-size: 12px; color: var(--grijs); font-family: ui-monospace, Consolas, monospace; }

/* --- levend voorbeeld --- */

.voorbeeld-kop { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.voorbeeld-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--groen); }

.voorbeeld {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  box-shadow: 0 18px 44px rgba(38, 32, 27, .10);
  min-height: 330px;
}

.voorbeeld-rail {
  width: 54px; flex: none;
  background: var(--vb-hoofd);
  padding: 12px 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}

.voorbeeld-rail .vb-merk {
  width: 30px; height: 30px; border-radius: 9px;
  background: #fff; color: var(--vb-hoofd);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; margin-bottom: 6px;
}
.voorbeeld-rail .vb-stip { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.45); }
.voorbeeld-rail .vb-stip.aan { background: #fff; border-color: #fff; }

.voorbeeld-inhoud { flex: 1; padding: 18px 20px; min-width: 0; }
.vb-salon { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--grijs); }
.vb-groet { font-family: var(--serif); font-size: 22px; margin: 2px 0 14px; }

.vb-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.vb-tegel { border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 10px; }
.vb-tegel.warm { background: var(--vb-accent-zacht); border-color: transparent; }
.vb-tegel .vb-label { font-size: 8px; text-transform: uppercase; letter-spacing: .11em; color: var(--grijs); }
.vb-tegel .vb-getal { font-family: var(--serif); font-size: 17px; }

.vb-onder { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.vb-blok { border: 1px solid var(--lijn); border-radius: 10px; padding: 11px 12px; }
.vb-blok-kop { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 8px; }
.vb-blok-kop b { font-size: 11px; }
.vb-blok-kop span { color: var(--grijs); }

.vb-rij { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.vb-rij .vb-uur { font-size: 8.5px; color: var(--grijs); min-width: 24px; }
.vb-rij .vb-streep { width: 2px; align-self: stretch; background: var(--vb-hoofd); border-radius: 2px; }
.vb-rij .vb-naam { font-size: 10px; font-weight: 600; }
.vb-rij .vb-wat { font-size: 8.5px; color: var(--grijs); }

.vb-volgende { text-align: center; }
.vb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vb-accent-zacht);
  color: var(--vb-hoofd);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; margin: 4px auto 6px;
}
.vb-knop {
  background: var(--vb-hoofd);
  color: var(--vb-hoofd-tekst);
  border-radius: 7px; padding: 6px; font-size: 9px; font-weight: 600;
  text-align: center; margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════ Pincode */

.pin-vak { display: flex; gap: 9px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.pin-vak input { width: 112px; text-align: center; letter-spacing: .3em; font-size: 17px; min-height: 44px; }

.slot-getal { font-family: var(--serif); font-size: 30px; letter-spacing: .12em; color: var(--grijs); }

/* ═══════════════════════════════════════════════════════ Openingsuren */

/* De weekuren als tabel: de kolomtitels staan één keer bovenaan in plaats van
   boven elk veld. Dat scheelt zeven keer dezelfde twee woorden. */

.uurkop, .uurrij {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
}

.uurkop {
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--lijn);
  color: var(--grijs);
  font-size: 12.5px;
}

.uurrij {
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.uurrij:last-of-type { border-bottom: 0; }
.uurrij .dagnaam { font-weight: 600; text-transform: capitalize; font-size: 15px; }

/* Een dag dat de zaak dicht is: de naam en de uren doven uit, maar blijven
   leesbaar. Je moet kunnen zien welke uren er zouden gelden. */
.uurrij.dicht .dagnaam { color: var(--grijs); }
.uurrij.dicht .uurvak { opacity: .45; }

/* Het kopje per regel is er alleen op een smal scherm; daar valt de kolomtitel
   bovenaan weg. */
.smalkop { display: none; }

/* Het klokje in de uurkiezer. Niet aanklikbaar, anders vang je de klik af die
   de lijst hoort te openen. */
.uurvak { position: relative; display: block; }
.uurvak .uurkiezer { width: 100%; padding-left: 38px; }
.uurklok {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--grijs);
  pointer-events: none;
}

/* De schuifknop. Een vinkje zegt "aangevinkt", een schuif zegt "aan of uit" —
   en dat is wat hier bedoeld wordt. */
.schuif {
  display: inline-flex; align-items: center; gap: 11px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
.schuif input { position: absolute; opacity: 0; pointer-events: none; }

.schuifbaan {
  flex: none; position: relative;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--lijn);
  transition: background .15s;
}
.schuifbaan::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--kaart);
  box-shadow: 0 1px 3px rgba(38, 32, 27, .28);
  transition: transform .15s;
}

.schuif input:checked + .schuifbaan { background: var(--hoofd); }
.schuif input:checked + .schuifbaan::after { transform: translateX(20px); }
.schuif input:focus-visible + .schuifbaan {
  outline: 2px solid var(--hoofd);
  outline-offset: 3px;
}

.schuiftekst { color: var(--grijs); font-size: 14px; }
.schuif input:checked ~ .schuiftekst { color: var(--inkt); font-weight: 600; }

@media (max-width: 760px) {
  .uurkop { display: none; }
  .smalkop { display: block; margin-bottom: 4px; }
  .uurrij {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    padding: 16px 0;
  }
  .uurrij .dagnaam { grid-column: 1 / -1; }
  .uurrij .schuif { grid-column: 1 / -1; }
}

/* De rij in de dagontvangsten draagt nu een wisknop. Die hoort niet binnen
   de link van de rij zelf, dus de rij is een vak geworden met de link erin. */
.dagrij-binnen {
  display: flex; align-items: center; gap: 13px;
  flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}

/* Bewust rustig: dit wist echt iets, en dan moet het er niet uitnodigend
   uitzien. Rood wordt het pas als je erover gaat, zodat je weet waar je aan
   begint. Het ronde bakje op je prijslijst heet .wisbak en staat onderaan. */
.wisknop {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--grijs);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.wisknop svg { width: 15px; height: 15px; }
.wisknop:hover {
  border-color: var(--rood);
  background: var(--rood-zacht);
  color: var(--rood);
}

@media (max-width: 620px) {
  .wisknop-woord { display: none; }
}

/* Een pincodeveld is zo breed als een pincode lang is. Over de volle breedte
   ziet het eruit alsof er een zin in moet.

   Let op de selector: `input[type="password"]` erbij, niet alleen de klasse.
   De algemene regel voor invoervelden bovenaan dit bestand zet width op 100%,
   en die weegt zwaarder dan een losse klassenaam — een attribuut plus een
   element wint van één klasse. Zonder dit bleef het veld gewoon over de volle
   breedte staan, zonder dat er iets fout leek. */
input[type="password"].pincodeveld {
  width: 150px;
  text-align: center;
  letter-spacing: .35em;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════ Een eigen venster

   In plaats van het grijze kadertje van de browser. Dat ziet er niet uit als
   dit programma, en bij een onomkeerbare stap wil je dat het scherm zelf je
   aanspreekt in plaats van "localhost:5000 meldt het volgende". */

.venster {
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--kaart);
  color: var(--inkt);
  max-width: 520px;
  width: calc(100% - 40px);
  box-shadow: 0 24px 70px rgba(38, 32, 27, .3);
}

.venster::backdrop { background: rgba(38, 32, 27, .5); }

.vensterkop {
  display: flex; align-items: center; gap: 13px;
  padding: 22px 24px 2px;
}
.vensterkop h2 {
  margin: 0;
  font-size: 21px;
  font-family: var(--serif);
  font-weight: 400;
}

.vensterteken {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--rood-zacht);
  color: var(--rood);
  display: flex; align-items: center; justify-content: center;
}
.vensterteken svg { width: 21px; height: 21px; }

.vensterlijf { padding: 6px 24px 20px; color: var(--grijs); font-size: 14.5px; }
.vensterlijf p { margin: 10px 0; }
.vensterlijf strong { color: var(--inkt); }

/* De eerste zin mag zwaarder wegen dan de rest: dat is wat er weg gaat. */
.vensterzin { color: var(--inkt); font-size: 15.5px; line-height: 1.65; }

/* De waarschuwing krijgt een eigen teken, anders leest ze als nog een zin en
   dan lees je ze niet. */
.vensterlet {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 18px 0 0;
}
.vensterlet p { margin: 0; line-height: 1.6; }
.letteken {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rood-zacht);
  color: var(--rood);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  line-height: 1;
}

/* Je code staat in een eigen blok, met een lijn erboven. */
.vensterpin {
  padding: 18px 24px;
  border-top: 1px solid var(--lijn-zacht);
}
.vensterpin label {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--inkt);
}
.vensterpin .hint { margin: 0 0 11px; }

/* Zo breed als het venster het toelaat, maar niet tot de rand: een vakje voor
   vier cijfers dat over de hele breedte loopt, ziet eruit alsof er een zin in
   moet. Let op de selector — `input[type="password"]` erbij, anders wint de
   algemene regel voor invoervelden met haar width: 100%. */
input[type="password"].pinveld {
  width: 100%;
  max-width: 300px;
  font-size: 15px;
}

.venstervoet {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--lijn-zacht);
}
.venstervoet .knop { flex: 1; min-width: 140px; }


/* Een getekend icoontje in een knop, op de hoogte van de tekst. */
.knopicoon {
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
}

/* De knop die het echt doet, op het bevestigingsscherm. */
.knop.gevaar {
  background: var(--rood);
  border-color: var(--rood);
  color: #fff;
}

/* Wat er weg gaat, regel per regel. */
.wisrij {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
.wisrij:last-child { border-bottom: 0; }
.wislabel { flex: none; width: 120px; color: var(--grijs); font-size: 13.5px; }


/* ═══════════════════════════════════════════════════════════ Klanten */

.klantkop {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.klantkop > div:first-child { flex: 1; min-width: 220px; }
.klantkop h1 { margin-top: 0; }

/* Zoekveld en knop horen op één lijn. Ze mochten hier zelf afbreken en ook
   nog krimpen, dus zodra de titel ernaast ruimte opeiste viel de knop naar
   beneden. Nu neemt dit blok precies de breedte die het nodig heeft en gaat
   de rest naar de titel.

   Wordt het scherm te smal, dan wipt het hele blok in één keer onder de
   titel — dat regelt .klantkop, die wél mag afbreken. */
.klantzoek {
  display: flex; align-items: center; gap: 10px;
  flex: none;
  flex-wrap: nowrap;
}
.klantzoek .zoekvak { flex: 0 1 320px; margin-bottom: 0; }

/* Even hoog, en even groot geschreven. Een knop is standaard 48 pixels hoog
   en een invoerveld 44, met ook nog een groter lettertype — naast elkaar zie
   je dat verschil meteen. Hier krijgen ze allebei dezelfde maat, vastgezet
   met height en niet alleen met min-height, zodat er niets kan uitschieten. */
.klantzoek .zoekvak input,
.klantzoek .knop {
  height: 46px;
  min-height: 46px;
  font-size: 14.5px;
}

/* De knop hoeft niet even breed te zijn als het zoekveld — dat zou een
   heleboel groen geven voor twee woorden — maar wel breed genoeg om als
   tegenhanger te lezen in plaats van als restje. */
.klantzoek .knop { white-space: nowrap; min-width: 170px; }
.klantzoek .zoekvak input { padding: 11px 40px 11px 16px; font-size: 14.5px; }
.klantzoek .zoekvak svg { right: 14px; width: 17px; height: 17px; }

/* De drie cijfers bovenaan. Geen vierde over "actieve klanten": wanneer is
   iemand actief? Elk antwoord daarop is een grens die wij verzinnen, en dan
   staat er een getal waar niemand op kan bouwen. */
.klantcijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.cijfer {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}

.cijferbol {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--hoofd-zacht);
  color: var(--hoofd);
  display: flex; align-items: center; justify-content: center;
}
.cijferbol svg { width: 23px; height: 23px; }

.cijfertekst { min-width: 0; }
.cijferlabel { display: block; font-size: 12.5px; color: var(--grijs); }
.cijfergetal {
  font-family: var(--serif); font-size: 26px; line-height: 1.15;
  margin-right: 6px;
}
.cijferonder { font-size: 13px; color: var(--grijs); }

/* Een kaartje per klant. */
.klantrooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.klantkaart {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  text-decoration: none; color: inherit;
  transition: border-color .12s;
}
.klantkaart:hover { border-color: var(--hoofd); }

.klantkaartkop {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 4px;
}
.kaartster { font-size: 19px; line-height: 1; }

.klantkaartnaam { font-size: 17px; font-weight: 600; line-height: 1.25; }

/* Telefoon en e-mail. Een lang e-mailadres wordt afgekort in plaats van het
   kaartje uit te rekken; het volledige adres staat op de fiche. */
.klantregel {
  display: flex; align-items: center; gap: 9px;
  color: var(--grijs); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klantregel svg { flex: none; width: 15px; height: 15px; }

.klantmerkjes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.klantmerkjes .letop-merkje { font-size: 11.5px; padding: 3px 9px; }

.klantvoet {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--lijn-zacht);
}
.klantbezoek { min-width: 0; }
.klantbezoek .hint { display: block; }
.klantbezoek strong { font-size: 14px; }

.kaartpijl {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--hoofd-zacht);
  color: var(--hoofd);
  display: flex; align-items: center; justify-content: center;
}
.kaartpijl svg { width: 17px; height: 17px; }
.klantkaart:hover .kaartpijl { background: var(--hoofd); color: var(--hoofd-tekst); }

@media (max-width: 560px) {
  .klantzoek { width: 100%; }
  .klantzoek .zoekvak { flex: 1 1 100%; }
}


/* ═══════════════════════════════════════════════════════ Medewerkers */

.medewerker-rij {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.medewerker-rij.uit { opacity: .55; }
.medewerker-rij .naamveld { flex: 1; min-width: 150px; }

.kleurkiezer { display: flex; gap: 6px; flex-wrap: wrap; }
.kleurkiezer label {
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; margin: 0; border: 2px solid transparent; display: block;
  position: relative;
}
.kleurkiezer input { position: absolute; opacity: 0; pointer-events: none; }
.kleurkiezer label:has(input:checked) { border-color: var(--inkt); transform: scale(1.12); }

/* ═══════════════════════════════════════════════════════ Agenda koppelen */

.feed-kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--hoofd);
  border-radius: var(--rond);
  padding: 17px 20px;
  margin-bottom: 12px;
  box-shadow: var(--schaduw);
}

.feed-kop { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.feed-kop .naam { font-family: var(--serif); font-size: 18px; }

.adresvak { display: flex; gap: 8px; align-items: stretch; margin: 11px 0 6px; }
.adresvak input { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.stap-lijst { counter-reset: stap; padding: 0; list-style: none; margin: 0; }
.stap-lijst li { counter-increment: stap; position: relative; padding: 0 0 14px 40px; margin: 0; }
.stap-lijst li::before {
  content: counter(stap);
  position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--accent-zacht); color: var(--hoofd);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════ Klantfiche */

.zoekbalk { display: flex; gap: 10px; margin-bottom: 18px; }
.zoekbalk input { flex: 1; }

.historiek-rij {
  display: flex; gap: 13px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--lijn-zacht);
  text-decoration: none; color: inherit;
}
.historiek-rij .hist-datum { color: var(--grijs); font-size: 13px; white-space: nowrap; min-width: 92px; }
.historiek-rij .hist-wat { flex: 1; }
.historiek-rij .hist-prijs { color: var(--grijs); font-size: 13.5px; white-space: nowrap; }

.formule-blok {
  background: var(--papier);
  border: 1px dashed var(--lijn);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px;
  white-space: pre-wrap;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════ Foto's van kapsters */

.portret {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lijn);
  background: var(--papier);
}

.portret.groot, .bolletje.groot {
  width: 104px; height: 104px;
  font-size: 34px;
  border-width: 3px;
}

.portret.mini, .bolletje.mini {
  width: 24px; height: 24px;
  font-size: 10px;
  border-width: 1.5px;
}

.foto-rij { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.klantrij.uit-dienst { opacity: .55; }

input[type="file"] {
  width: 100%;
  border: 1px dashed var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--papier);
  font: inherit;
  font-size: 14px;
}

/* Kolomkop van de agenda met portretjes */
.kolomnaam .kop-binnen {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Kapster die vandaag niet werkt, in een keuzelijst */
.wie-knop.vrijaf { opacity: .45; }
.wie-knop.vrijaf:hover { border-color: var(--lijn); }

/* Merkje met wie een behandeling mag doen */
.merkje.wie { background: var(--accent-zacht); color: var(--hoofd); }

/* ── Verlof en afwezigheden ── */

.afwezig-rij {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--lijn-zacht);
  flex-wrap: wrap;
}

.afwezig-rij:last-of-type { border-bottom: 0; }
.afwezig-rij .afwezig-wat { flex: 1; min-width: 180px; }
.afwezig-rij .afwezig-wanneer { font-weight: 600; }

.merkje.verlof { background: var(--groen-zacht); color: var(--groen); }
.merkje.ziek { background: var(--rood-zacht); color: var(--rood); }
.merkje.opleiding, .merkje.anders { background: var(--accent-zacht); color: var(--hoofd); }

/* ═══════════════════════════════════════════ De behandelingenkiezer

   Eén lange keuzelijst wordt onwerkbaar zodra een salon vijftig behandelingen
   heeft. Daarom: een zoekveld bovenaan, kopjes per categorie, en de keuze als
   chips zodat je ziet wat je hebt aangeduid zonder te scrollen. */

.kiezer {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--papier);
  overflow: hidden;
}

.kiezer-kop {
  display: flex;
  gap: 9px;
  padding: 12px 13px;
  background: var(--kaart);
  border-bottom: 1px solid var(--lijn);
}

.kiezer-zoek { flex: 1; }

.gekozen-strook {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 13px;
  background: var(--accent-zacht);
  border-bottom: 1px solid var(--lijn);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hoofd);
  color: var(--hoofd-tekst);
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 34px;
}

.chip span { opacity: .7; font-size: 15px; line-height: 1; }
.chip:hover span { opacity: 1; }

.kiezer-lijst {
  max-height: 380px;
  overflow-y: auto;
  padding: 10px 13px;
}

.kiezer-groepkop {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--grijs);
  padding: 12px 2px 6px;
  position: sticky;
  top: -10px;
  background: var(--papier);
  z-index: 1;
}

.kiezer-groep:first-child .kiezer-groepkop { padding-top: 2px; }

.kiezer-lijst .kiesrij {
  background: var(--kaart);
  min-height: 52px;
  padding: 10px 14px;
}

.kiezer-lijst .kiesrij .rij-naam { font-weight: 500; }

.kiezer-totaal {
  padding: 12px 15px;
  background: var(--kaart);
  border-top: 1px solid var(--lijn);
  font-size: 13.5px;
  color: var(--grijs);
}

.kiezer-totaal.vol { color: var(--inkt); font-weight: 600; }

@media (max-width: 560px) {
  .kiezer-lijst .kiesrij { flex-wrap: wrap; }
  .kiezer-lijst .kiesrij .rij-duur,
  .kiezer-lijst .kiesrij .rij-prijs { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════ Prikklok

   Bedoeld als kiosk-scherm op een tablet aan de muur: grote kaarten, dikke
   knoppen, alles met een duim te bedienen. */

.prik-kop {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.prik-klok {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--hoofd);
  font-variant-numeric: tabular-nums;
}

.prik-bord {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.prik-kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 20px 18px;
  text-align: center;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.prik-kaart.aan-het-werk {
  border-color: var(--wie);
  border-width: 2px;
  padding: 19px 17px;
}

.prik-kaart .portret.groot,
.prik-kaart .bolletje.groot { width: 88px; height: 88px; font-size: 28px; }

.prik-naam { font-family: var(--serif); font-size: 20px; margin-top: 10px; }
.prik-status { min-height: 44px; }
.prik-vandaag {
  font-size: 12.5px;
  color: var(--grijs);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.prik-vak { width: 100%; }
.prik-vak summary { list-style: none; cursor: pointer; }
.prik-vak summary::-webkit-details-marker { display: none; }
.prik-vak form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.prik-vak input { text-align: center; font-size: 17px; }
.prik-vak[open] > summary { display: none; }

/* ── Overzicht gewerkte uren ── */

.uren-kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 4px;
}

.uren-totaal {
  font-family: var(--serif);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.uren-dag {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.uren-dag:last-of-type { border-bottom: 0; }

.uren-datum {
  min-width: 74px;
  color: var(--grijs);
  font-size: 13px;
  padding-top: 4px;
}

.uren-dagtotaal {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 54px;
  text-align: right;
  padding-top: 4px;
}

.uren-beurt {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}

.uren-beurt.open { color: var(--oranje); font-weight: 600; }
.uren-herstel { display: flex; gap: 7px; align-items: center; }
.uren-herstel input[type="time"] { width: 120px; min-height: 38px; padding: 6px 9px; }

/* Iemand op pauze: de kaart blijft opvallen, maar rustiger dan aan het werk */
.prik-kaart.op-pauze { border-color: var(--oranje); border-width: 2px; padding: 19px 17px; }
.merkje.koffie { background: var(--oranje-zacht); color: var(--oranje); }

.prik-vak .knop.klein { font-size: 13px; min-height: 38px; }
.prik-vak + .prik-vak { margin-top: 7px; }

.uren-pauze {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 3px 0 3px 16px;
  font-size: 13px;
  color: var(--oranje);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════ Dagontvangsten */

.ontvangst-rij {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--lijn-zacht);
  min-height: 58px;
}

.ontvangst-rij:last-child { border-bottom: 0; }

.ontvangst-bedrag {
  font-family: var(--serif);
  font-size: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── De maandkalender ── */

.kalender-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.kalender {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.kalender-letter {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grijs);
  padding-bottom: 4px;
}

.kalender-dag {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--lijn);
  border-radius: 9px;
  background: var(--kaart);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 2px;
}

.kalender-dag:hover { border-color: var(--hoofd); }
.kalender-dag.buiten { opacity: .35; }
.kalender-dag.leeg { background: var(--papier); }
.kalender-dag.vandaag { border-color: var(--hoofd); border-width: 2px; }

.kalender-dag.gekozen {
  background: var(--hoofd);
  border-color: var(--hoofd);
  color: var(--hoofd-tekst);
}

.kalender-nummer { font-size: 12px; line-height: 1; }

.kalender-bedrag {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: var(--hoofd);
  font-variant-numeric: tabular-nums;
}

.kalender-dag.gekozen .kalender-bedrag { color: var(--hoofd-tekst); }

@media (max-width: 400px) {
  .kalender-bedrag { font-size: 11px; }
  .kalender-nummer { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════ Mijn werk

   Het scherm van de kapster zelf: grote knoppen om af te vinken, en per
   afspraak een uitklapvak om er iets bij te schrijven. */

.werk-kop-balk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.werk-kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--schaduw);
}

.werk-kaart.gedaan { border-left: 4px solid var(--groen); }
.werk-kaart.afgezegd { opacity: .6; border-left: 4px solid var(--oranje); }

.werk-kop { display: flex; align-items: center; gap: 13px; }

.werk-uur {
  font-family: var(--serif);
  font-size: 21px;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}

.werk-bedrag {
  font-family: var(--serif);
  font-size: 17px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.werk-knoppen, .werk-status {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.werk-extra { margin-top: 12px; border-top: 1px solid var(--lijn-zacht); padding-top: 10px; }

.werk-extra summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--grijs);
  list-style: none;
  padding: 4px 0;
  min-height: 30px;
}

.werk-extra summary::-webkit-details-marker { display: none; }
.werk-extra summary::before { content: "＋ "; font-weight: 700; }
.werk-extra[open] summary::before { content: "－ "; }
.werk-extra summary:hover { color: var(--hoofd); }

.werk-regels { margin: 8px 0 4px; }

.werk-regel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: 14px;
}

.werk-regel:last-child { border-bottom: 0; }
.werk-regelprijs { font-variant-numeric: tabular-nums; white-space: nowrap; }

.werk-toevoegen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.werk-toevoegen select, .werk-toevoegen input[type="text"] { flex: 1; min-width: 140px; }
.werk-toevoegen input.mini { flex: none; }

/* ═══════════════════════════════════ Het keuzeveld voor de prijslijst

   De uitklaplijst van de browser zet alles op één regel: geen soort, geen
   duur, en bij dertig behandelingen scroll je door een grijs lijstje zonder
   houvast. Dit blad geeft elke behandeling twee regels en een prijs. */

.kiesveld { position: relative; flex: 1; min-width: 240px; }

.kiesknop {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--grijs);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kiesknop:hover { border-color: var(--hoofd); }
.kiesveld.gekozen .kiesknop { color: var(--inkt); border-color: var(--hoofd); }
.kieslabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiespijl { width: 18px; height: 18px; flex: none; opacity: .55; }
.kiesknop[aria-expanded="true"] .kiespijl { transform: rotate(180deg); }

/* Het blad hangt over de rest van het scherm heen: staat het ertussen, dan
   springt alles eronder op en neer bij elke klik. */
.kiesblad {
  position: absolute; z-index: 40;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: 0 18px 48px rgba(38, 32, 27, .16);
  overflow: hidden;
}

.kieszoekrij {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 12px 0;
  padding: 9px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
}
.kiesloep { width: 16px; height: 16px; flex: none; opacity: .5; }
/* Zonder deze regel erft dit veld de algemene invoerstijl met haar kader en
   haar width: 100%, en dan staat er een vakje in een vakje. */
.kieszoekrij input[type="text"].kieszoek {
  flex: 1; min-width: 0;
  border: 0; padding: 0; background: none;
  font-size: 14.5px;
}
.kieszoekrij input[type="text"].kieszoek:focus { outline: none; }

/* Op één regel die opzij schuift, en niet omslaand. Jonathan heeft veertien
   soorten in zijn prijslijst; die omslaand gezet duwt de behandelingen zelf
   van het scherm en dan zie je alleen nog knopjes. */
.kiesfilters {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--lijn-zacht);
  overflow-x: auto;
  scrollbar-width: thin;
}
.kiesfilter { flex: none; }
.kiesfilter {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--hoofd-zacht);
  color: var(--grijs);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.kiesfilter:hover { background: var(--accent-zacht); }
.kiesfilter.aan { background: var(--hoofd); color: var(--hoofd-tekst); }

/* Ongeveer zes regels hoog: genoeg om te zien dat er meer is, laag genoeg om
   het blad niet over het hele scherm te laten vallen. */
.kieslijst { max-height: 310px; overflow-y: auto; padding: 6px; }

.bladrij {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--rond-klein);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bladrij:hover { background: var(--hoofd-zacht); }
.bladrij.aan { background: var(--accent-zacht); }

.bladrij-tekst { flex: 1; min-width: 0; }
.bladrij-naam {
  display: block; color: var(--inkt); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bladrij-onder {
  display: block; color: var(--grijs); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bladrij-prijs {
  flex: none; color: var(--grijs); font-size: 13.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Het teken staat er altijd, maar alleen bij de gekozen regel te zien. Zo
   verspringt de tekst niet als je iets aanduidt. Vinkje en kruisje liggen op
   dezelfde plek over elkaar, dus wisselen verschuift ook niets. */
.bladrij-teken { position: relative; flex: none; width: 18px; height: 18px; }
.bladrij-teken svg { position: absolute; top: 0; left: 0; width: 18px; height: 18px; }
.kiesvink { color: var(--groen); opacity: 0; }
.kieskruis { color: var(--rood); opacity: 0; }
.bladrij.aan .kiesvink { opacity: 1; }

/* In het lijstje "Gekozen" klik je ze juist weg. Een rood kruisje zegt dat;
   een groen vinkje zou zeggen dat alles in orde is. */
.toont-gekozen .bladrij.aan .kiesvink { opacity: 0; }
.toont-gekozen .bladrij.aan .kieskruis { opacity: 1; }
.toont-gekozen .bladrij:hover { background: var(--rood-zacht); }

.kiesniks { margin: 0; padding: 18px 12px; color: var(--grijs); font-size: 13.5px; }

/* Bij meerdere blijft het blad open tot je zelf sluit; zonder deze voet weet
   je niet hoe je eruit geraakt. */
.kiesvoet {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-top: 1px solid var(--lijn-zacht);
  background: var(--hoofd-zacht);
}
.kiesteller { flex: 1; min-width: 0; color: var(--grijs); font-size: 13px; }


/* ═══════════════════════════════════════════════ Betaalwijze en afzeggen

   Drie herkenbare tekens voor het kassaboek: een euro voor cash, een B voor
   Bancontact, een V voor Visa. Kleur en letter samen maken ze in één blik
   uit elkaar te houden. */

.betaalmerk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--papier);
  white-space: nowrap;
}

.betaalteken {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: #fff;
  flex: none;
}

.betaalmerk.cash { background: #eaf3ee; color: #2f5a46; }
.betaalmerk.cash .betaalteken { background: #4a7c62; }
.betaalmerk.bancontact { background: #e9eef8; color: #23417d; }
.betaalmerk.bancontact .betaalteken { background: #2b4f9e; }
.betaalmerk.visa { background: #edeaf6; color: #3c2f73; }
.betaalmerk.visa .betaalteken { background: #4b3b9c; }

.betaalkeuze { display: flex; gap: 8px; flex-wrap: wrap; }

.betaalknop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  padding: 9px 16px 9px 9px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  min-height: 46px;
}

.betaalknop:hover { border-color: var(--inkt); }
.betaalknop.cash { color: #2f5a46; }
.betaalknop.cash .betaalteken { background: #4a7c62; }
.betaalknop.bancontact { color: #23417d; }
.betaalknop.bancontact .betaalteken { background: #2b4f9e; }
.betaalknop.visa { color: #3c2f73; }
.betaalknop.visa .betaalteken { background: #4b3b9c; }

/* De drie afvinkknoppen, elk met hun eigen vraag eronder */

.werk-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.werk-actie summary { list-style: none; cursor: pointer; }
.werk-actie summary::-webkit-details-marker { display: none; }
.werk-actie[open] { flex-basis: 100%; }
.werk-actie[open] > summary { display: none; }

.werk-actie[open] form {
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 4px 14px 14px;
  background: var(--papier);
}


/* ═══════════════════════════════════════════════════════════════════ Logo */

/* In de zijbalk is maar weinig plaats. Daarom passend maken en nooit
   bijsnijden: liever een klein logo dan een half logo. */
.rail-merk img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.logo-regel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.logo-vak {
  flex: none;
  width: 220px;
  height: 96px;
  padding: 12px;
  border-radius: var(--rond-klein);
  border: 1px solid var(--lijn);
  background: var(--hoofd-zacht);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-vak img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-vak.leeg {
  color: var(--hoofd);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
}

.logo-uitleg {
  flex: 1;
  min-width: 260px;
}


/* ═════════════════════════════════════════════════════ De startwizard */

/* Het onthaal en het slot hebben geen zijbalk en geen formulier; die mogen
   smaller staan dan de rest, dat leest rustiger. */
.onthaal { max-width: 620px; }

.knop.groot { padding: 15px 26px; font-size: 16px; min-height: 52px; }

.kaart.zacht {
  background: var(--accent-zacht);
  border-color: transparent;
  box-shadow: none;
}

.onthaal-lijst { list-style: none; margin: 0; padding: 0; }

.onthaal-lijst li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.onthaal-lijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.onthaal-lijst li:first-child { padding-top: 0; }
.onthaal-lijst .stapbol { flex: none; }

.klaar-rij {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.klaar-rij:last-child { border-bottom: 0; padding-bottom: 0; }
.klaar-rij:first-child { padding-top: 0; }
.klaar-rij .stapbol { flex: none; }

/* --- stap 4: de ploeg --- */

.teamregel {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--lijn-zacht);
}

.teamregel:first-child { padding-top: 0; }
.teamregel:last-child { border-bottom: 0; }

.teamvak { flex: 1; min-width: 0; }
.teamvak > input[type="text"] { margin-bottom: 10px; }

/* De foto is de knop: op de cirkel duwen opent de bestandskiezer. */
.teamfoto {
  flex: none;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

.teamfoto-tekst {
  font-size: 10.5px;
  color: var(--grijs);
  text-align: center;
  line-height: 1.25;
}

.teamfoto:hover .teamfoto-tekst { color: var(--hoofd); }

.teambol {
  width: 54px; height: 54px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hoofd-zacht);
  color: var(--hoofd);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  border: 1px dashed var(--lijn);
}

.teamfoto:hover .teambol { border-color: var(--hoofd); }
.teambol img { width: 100%; height: 100%; object-fit: cover; }

/* Een gekleurde bol krijgt witte letters, want die kleuren zijn donker. */
.teambol[style*="background"] { color: #fff; border-style: solid; }

/* --- welke dagen werkt ze --- */

.dagrei {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.dagrei .hint { margin-right: 3px; }

.dagchip { margin: 0; cursor: pointer; }
.dagchip input { position: absolute; opacity: 0; pointer-events: none; }

.dagchip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--kaart);
  color: var(--grijs);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: capitalize;
}

.dagchip input:checked + span {
  background: var(--hoofd);
  border-color: var(--hoofd);
  color: var(--hoofd-tekst);
}

/* Zichtbaar waar de toetsenbordfocus staat — de bolletjes zijn verborgen. */
.dagchip input:focus-visible + span { outline: 2px solid var(--hoofd); outline-offset: 2px; }

.teamuren {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--rond-klein);
  background: var(--hoofd-zacht);
}

.uurregel {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

.uurdag {
  min-width: 26px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--grijs);
  text-transform: capitalize;
}

@media (max-width: 520px) {
  .teamregel { gap: 10px; }
  .teamfoto { width: 60px; }
  .teambol { width: 46px; height: 46px; }
}


/* ═══════════════════════════════════════════════════════════ Uurkiezer */

/* Een eigen keuzelijst in plaats van <input type="time">: die laat de browser
   tekenen, en een browser op Engels toont "02:00 PM". Wij klokken op 24 uur. */
.uurkiezer {
  width: auto;
  min-width: 92px;
  font-variant-numeric: tabular-nums;
}

/* In de tabel vult ze haar kolom; los ernaast blijft ze zo smal als ze is. */
.uurtabel .uurkiezer { width: 100%; }


/* ═════════════════════════════════════════════ Woorden in de zijbalk */

/* Iconen alleen zeggen niets: een tooltip vraagt hoveren, en op een tablet
   bestaat dat niet. Daarom onder elk icoon een woord. */
.rail-woord {
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: .01em;
  text-align: center;
  opacity: .78;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail a.rail-knop.aan .rail-woord,
.rail a.rail-knop:hover .rail-woord { opacity: 1; }

/* Scheidt het dagelijkse werk van wat je af en toe instelt. */
.rail-streep {
  flex: none;
  width: 42px;
  height: 1px;
  margin: 7px 0;
  background: currentColor;
  opacity: .22;
}

/* Het merkje mag nooit buiten zijn vakje treden, ook niet met een breed logo
   of een lange naam. */
.rail-merk { overflow: hidden; }

@media (max-width: 760px) {
  .rail a.rail-knop {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 0;
    gap: 3px;
    padding: 4px 2px;
  }
  .rail { height: 66px; }
  .rail-woord { font-size: 8.5px; }
  .rail-streep { display: none; }
  .rail a.rail-knop.aan::before { bottom: -4px; }
}


/* ═══════════════════════════════════════════════ Behandelingkiezer */

/* Zoekveld bovenaan, dan één regel per soort met een icoon, en achter elke
   regel klapt de lijst met behandelingen open. Staat los van het dashboard,
   want ditzelfde blok komt straks op de pagina waar de klant zelf boekt. */

/* Let op de naam: dit blok heette eerst ook .kiezer, net als het oudere
   keuzelijstje in het inboekscherm. Dat heeft `overflow: hidden` nodig voor
   zijn ronde hoeken — en dat maakt `position: sticky` van de balk hierin stil
   kapot. Twee verschillende dingen, dus twee namen. */
/* De rand en de achtergrond stonden vroeger in de gedeelde .kiezer-regel.
   Nu het blok een eigen naam heeft, staan ze hier — met wat lucht eromheen,
   want zonder padding plakte de titel tegen de rand. */
.keuzeblok {
  margin-top: 30px;
  padding: 4px 18px 18px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--papier);
}
.keuzeblok-titel { margin-bottom: 4px; }
.keuzeblok-uitleg {
  color: var(--grijs); font-size: 14px; margin: 0 0 18px; max-width: 620px;
  /* Laat de browser de regels netjes verdelen in plaats van een woordje
     onderaan te laten vallen. De vaste spatie in de tekst zelf blijft de
     harde garantie, want dit kent niet elke browser. */
  text-wrap: pretty;
}

/* Zoekveld en keuze op één lijn, en die lijn plakt bovenaan vast. Zo blijven
   allebei binnen bereik terwijl je door zestien soorten scrollt.

   `top: 0` en de lucht als padding binnen de rij zelf: met een `top` groter
   dan nul blijft er een kier waar de inhoud onderdoor te zien is. */
.zoekrij {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 12px;
  background: var(--papier);
}

/* Smal: hier wordt "balayage" in getypt, geen volzin. De rest van de ruimte
   gaat naar wat je gekozen hebt. */
.zoekrij .zoekvak { flex: 0 1 300px; margin-bottom: 0; }
.zoekrij .zoekvak input { padding: 11px 40px 11px 16px; font-size: 14.5px; }
.zoekrij .zoekvak svg { right: 14px; width: 17px; height: 17px; }

.mandje {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px;

  background: var(--hoofd-zacht);
  border: 1px solid var(--hoofd);
  border-radius: var(--rond-klein);
}

.mandje-tekst {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px;
}
.mandje-tekst strong { white-space: nowrap; }
.mandje-tekst .hint { white-space: nowrap; }

/* Op een smal scherm onder elkaar: naast elkaar wordt het daar geknel. */
@media (max-width: 860px) {
  .zoekrij { flex-wrap: wrap; }
  .zoekrij .zoekvak { flex: 1 1 100%; }
  .mandje { margin-left: 0; flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .mandje { flex-wrap: wrap; padding: 10px; }
  .mandje-tekst { flex-basis: 100%; margin-bottom: 4px; }
  .mandje .knop { flex: 1; }
}

.zoekvak { position: relative; margin-bottom: 18px; }

.zoekvak input {
  width: 100%;
  padding: 15px 48px 15px 20px;
  border-radius: var(--rond);
  border: 1px solid var(--lijn);
  background: var(--kaart);
  font-size: 15px;
}

.zoekvak input:focus { border-color: var(--hoofd); outline: none; }

.zoekvak svg {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--grijs);
  pointer-events: none;
}

/* --- de soorten als tegels --- */

/* 310 en niet 250: op een breed scherm paste er anders een vijfde kolom bij
   en hield de naam nog maar tachtig pixels over. Dan breekt "Wassen &
   verzorgen" in drie stukken en worden de tegels ongelijk hoog. */
.soorten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
  align-items: start;
}

.soorttegel {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--kaart);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s;
}

.soorttegel:hover { border-color: var(--hoofd); }
.soorttegel.open { border-color: var(--hoofd); background: var(--hoofd-zacht); }

.soortbol {
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--rond-klein);
  background: var(--hoofd-zacht);
  color: var(--inkt);
  display: flex; align-items: center; justify-content: center;
}

.soorttegel.open .soortbol { background: var(--kaart); }
.soortbol svg { width: 22px; height: 22px; }
.soorttekst { flex: 1; min-width: 0; }

/* De accentkleur van de salon, net als in het voorbeeld. */
.soortnaam {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--hoofd);
}

.soortonder {
  display: block;
  margin-top: 2px;
  color: var(--grijs);
  font-size: 12px;
  line-height: 1.35;
}

.soortpijl { flex: none; color: var(--grijs); display: flex; }
.soortpijl svg { width: 20px; height: 20px; transition: transform .15s; }
.soorttegel.open .soortpijl svg { transform: rotate(180deg); }

/* Het aantal gekozen behandelingen, vóór het zinnetje op de tweede regel. */
.soortmerk {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--groen-zacht);
  color: var(--groen);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}


/* --- het blad met behandelingen: over de volle breedte --- */

/* Het blad staat in hetzelfde rooster als de tegels en beslaat alle kolommen.
   Het schermpje schuift het tot vlak onder de rij waarop geklikt is: opent het
   onderaan alles, dan moet je bij zestien soorten veel te ver scrollen. */
.soortblad {
  grid-column: 1 / -1;
  margin: 2px 0 8px;
  border: 1px solid var(--hoofd);
  border-radius: var(--rond);
  background: var(--kaart);
  overflow: hidden;
}

.bladkop {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  background: var(--hoofd-zacht);
  border-bottom: 1px solid var(--lijn);
}

.bladkop .soortbol { background: var(--kaart); }
.bladtitel { flex: 1; min-width: 0; }
.bladtitel strong { display: block; font-size: 15.5px; }
.bladtitel .hint { display: block; margin-top: 1px; }

.behandelrij {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--lijn-zacht);
  color: inherit;
  min-height: 54px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
}

.behandelrij:last-child { border-bottom: 0; }
.behandelrij:hover { background: var(--accent-zacht); }
.behandelrij.aan { background: var(--groen-zacht); }

/* Het vakje zelf verbergen we; het bolletje ernaast doet het werk. */
.behandelrij input { position: absolute; opacity: 0; pointer-events: none; }

.vinkbol {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--lijn);
  background: var(--kaart);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .1s, border-color .1s;
}

.vinkbol svg { width: 13px; height: 13px; }
.behandelrij:hover .vinkbol { border-color: var(--groen); }

.behandelrij.aan .vinkbol {
  background: var(--groen);
  border-color: var(--groen);
  color: #fff;
}

.behandelrij input:focus-visible + .vinkbol {
  outline: 2px solid var(--hoofd);
  outline-offset: 2px;
}

/* Het icoon van de soort, ook op elke regel: zo herken je in één oogopslag
   waar je zit, ook als je via het zoekveld binnenkomt. */
.behandelicoon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--groen-zacht);
  color: var(--groen);
  display: flex; align-items: center; justify-content: center;
}
.behandelicoon svg { width: 18px; height: 18px; }
.behandelrij.aan .behandelicoon { background: var(--kaart); }

/* Naam en uitleg. Krimpen doet alleen de uitleg — een naam die halverwege
   afgekapt wordt is onbruikbaar, een uitleg met puntjes erachter niet. */
.behandeltekst {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 12px;
}
.behandelnaam { flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 14.5px; }
.behandeluitleg {
  flex: 1 1 auto; min-width: 0;
  color: var(--grijs); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Vaste kolommen, zodat de bedragen onder elkaar staan. Het merkvakje blijft
   ook leeg staan: anders schuift alles per regel op. */
.behandelmerk { flex: none; width: 104px; text-align: right; }
.behandelduur {
  flex: none; width: 76px;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  color: var(--grijs); font-size: 12.5px; white-space: nowrap;
}
.behandelduur svg { flex: none; width: 14px; height: 14px; }
.behandelprijs {
  flex: none; width: 132px; text-align: right;
  font-weight: 600; font-size: 13.5px; white-space: nowrap;
}

/* De balk onderaan het blad. Ze staat waar je uitgekeken bent, niet bovenaan
   waar je net begint te lezen. */
.bladvoet {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--lijn);
  background: var(--hoofd-zacht);
  color: var(--grijs);
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.bladvoet:hover { background: var(--accent-zacht); color: var(--inkt); }
.bladvoet svg { width: 16px; height: 16px; }

.keuzeblok-niets { color: var(--grijs); font-size: 14px; }

/* Wordt het smaller, dan zakt eerst de uitleg onder de naam en pas daarna
   zakken de cijfers mee. Zo wordt er nooit een woord afgekapt. */
@media (max-width: 1000px) {
  .behandeltekst, .rij-tekst {
    flex-direction: column; align-items: flex-start; gap: 1px;
  }
  .behandeluitleg, .rij-uitleg { white-space: normal; }
}

@media (max-width: 720px) {
  .behandelrij { flex-wrap: wrap; gap: 6px 12px; padding: 11px 14px; }
  .behandeltekst { flex-basis: calc(100% - 90px); }
  .behandelmerk { width: auto; margin-left: 77px; text-align: left; }
  .behandelduur { width: auto; justify-content: flex-start; margin-right: auto; }
  .behandelprijs { width: auto; }
}

@media (max-width: 620px) {
  .soorten { grid-template-columns: 1fr; }
  .soortbol { width: 38px; height: 38px; }
  .bladkop { padding: 12px 14px; }
  .behandelrij { padding: 11px 12px; }
  .behandeltekst { flex-basis: 100%; }
  .behandelmerk { margin-left: 0; }
}


/* Een behandeling die al in je prijslijst staat. Ze stond hier half
   doorzichtig en grijs, en dat las als "uitgeschakeld" terwijl ze net wel
   aanstaat. Nu gewoon leesbaar; het groene vinkje en het merkje ernaast
   zeggen dat je ze al hebt. */
.kiesrij.erin { background: var(--kaart); }


/* De prijslijst gebruikt dezelfde soortvakken als de kiezer. De uitklapbare
   bewerkregels erin hebben geen eigen rand meer nodig. */
.soortlijst > .behandeling {
  border: 0;
  border-bottom: 1px solid var(--lijn-zacht);
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.soortlijst > .behandeling:last-child { border-bottom: 0; }

/* Het knopje dat toont wat je al aangeduid hebt. Iets warmer dan de soorten
   ernaast: het gaat over jouw keuze, niet over de prijslijst. */
.kiesfilter.kiesgekozenknop { background: var(--accent-zacht); color: var(--hoofd); }
.kiesfilter.kiesgekozenknop.aan { background: var(--hoofd); color: var(--hoofd-tekst); }

/* ══════════════════════════════════════════════════════════════════
   STARTKLAAR — het opzetten van een nieuwe salon
   ══════════════════════════════════════════════════════════════════
   Links wat ze moet doen, rechts wat het oplevert. Alles hier begint met
   "start" of "kijk", zodat het nooit botst met de rest van het programma.
   Dat is in dit project al eens misgegaan met een klassenaam die op twee
   plaatsen iets anders deed. */

.startraam { max-width: 1380px; margin: 0 auto; padding: 4px 0 40px; }

.startmerk {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hoofd);
}
.startmerk svg { width: 15px; height: 15px; fill: var(--hoofd); flex: none; }

/* De schelp: één kaart met twee helften erin. */
.startschelp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 26px;
  box-shadow: var(--schaduw);
  overflow: hidden;
  min-height: 640px;
}

.startpaneel { min-width: 0; }
.startinhoud { padding: 34px 40px 40px; }

/* ── de stapbalk ── */
.staprij { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 34px; }

.stapbalk { display: flex; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.stapdeel {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.stapdeel b {
  font-size: 10.5px; font-weight: 600; color: var(--grijs);
  text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.stapnr {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--lijn); background: var(--kaart);
  font-size: 12.5px; font-weight: 600; color: var(--grijs);
  position: relative; z-index: 1;
}
.stapnr svg { width: 12px; height: 12px; }

/* Het streepje loopt van deze bol naar de volgende. Het staat achter de
   bollen, anders zie je het door de rand heen steken. */
.stapstreep {
  position: absolute; top: 14px; left: 50%; width: 100%; height: 1px;
  background: var(--lijn); z-index: 0;
}

.stapdeel.nu .stapnr { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.stapdeel.nu b { color: var(--inkt); font-weight: 700; }
.stapdeel.klaar .stapnr { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.stapdeel.klaar .stapstreep { background: var(--inkt); }
.stapdeel.klaar b { color: var(--grijs); }

.staprest { flex: none; color: var(--grijs); font-size: 12.5px; padding-top: 5px; }

/* ── de inhoud van een stap ── */
.startkoprij { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.startkop {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hoofd); margin-bottom: 14px;
}
.startterug { color: var(--grijs); font-size: 13px; text-decoration: none; }
.startterug:hover { color: var(--inkt); }

.startform h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 2.9vw, 46px); font-weight: 500; line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 16px;
}
.startzin { color: var(--grijs); font-size: 15px; max-width: 46ch; margin: 0 0 26px; }

/* ── de drie punten op het welkomscherm ── */
.startpunten { display: grid; gap: 10px; margin-bottom: 26px; }
.startpunten article {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--lijn); border-radius: 14px; padding: 13px 16px;
}
.startpunten article > span {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--hoofd-zacht); color: var(--hoofd);
  font-size: 11.5px; font-weight: 700;
}
.startpunten strong { display: block; font-size: 14px; }
.startpunten small { color: var(--grijs); font-size: 12.5px; }

/* ── de vier vakken op het uitlegscherm ── */
.startvakken { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.startvakken article { border: 1px solid var(--lijn); border-radius: 14px; padding: 16px; }
.startpicto {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 11px;
  background: var(--hoofd-zacht); color: var(--hoofd);
}
.startpicto svg { width: 17px; height: 17px; }
.startvakken strong { display: block; font-size: 14px; margin-bottom: 4px; }
.startvakken small { color: var(--grijs); font-size: 12.5px; line-height: 1.45; }

/* ── de knop die verder gaat ── */
.startverder {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 17px 22px;
  background: var(--inkt); color: #fff;
  border: 0; border-radius: 14px;
  font: 600 15px/1 var(--sans); text-decoration: none;
  cursor: pointer;
}
.startverder:hover { background: #3a322b; }
.startnoot { display: block; text-align: center; color: var(--grijs); font-size: 12.5px; margin-top: 12px; }
.startnoot span { color: var(--groen); }

/* ── het kijkvenster rechts ──
   Een klein dashboard dat meekleurt met wat ze invult. "Kies een kleur" zegt
   niets; zien wat die kleur doet, zegt alles. */
.startkijk {
  /* Een tint tussen het witte linkerpaneel en de pagina in. Nemen we hier
     gewoon --papier, dan valt deze helft weg tegen de achtergrond en lijkt
     de kaart maar half zo breed. */
  background: #faf7f4; border-left: 1px solid var(--lijn);
  padding: 34px 36px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.kijkkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--inkt);
}
.kijkkop small { font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--grijs); font-size: 11.5px; flex: none; }
.kijkstip {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--groen); margin-right: 7px;
}

.kijkscherm {
  display: flex; background: var(--kaart);
  border: 1px solid var(--lijn); border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(38, 32, 27, .07);
}
.kijkrail {
  flex: none; width: 56px; background: var(--kleur);
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0;
}
.kijkmerk {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background: rgba(255, 255, 255, .22); color: #fff;
  font: 700 11px/1 var(--serif); overflow: hidden; margin-bottom: 5px;
}
.kijkmerk img { width: 100%; height: 100%; object-fit: cover; }
.kijkknop { width: 13px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.kijkknop.aan { background: #fff; }

.kijkblad { flex: 1 1 auto; min-width: 0; padding: 15px 16px 16px; }
.kijkbalk { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 13px; }
.kijkbalk small { display: block; font-size: 8.5px; letter-spacing: .12em; color: var(--grijs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kijkbalk strong { font: 500 17px/1.2 var(--serif); }
.kijkbol {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kleur-zacht); color: var(--inkt); font-size: 9px; font-weight: 600;
}
.kijkbol.groot { width: 34px; height: 34px; font-size: 11px; margin: 6px auto 5px; }

.kijkvakken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 9px; }
.kijkvak { border: 1px solid var(--lijn); border-radius: 9px; padding: 8px 9px; min-width: 0; }
.kijkvak.zacht { background: var(--kleur-zacht); border-color: transparent; }
.kijkvak small { display: block; font-size: 8px; color: var(--grijs); margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kijkvak b { font-size: 15px; font-weight: 600; }

.kijkonder { display: grid; grid-template-columns: 1.55fr 1fr; gap: 7px; }
.kijklijst, .kijkkaart { border: 1px solid var(--lijn); border-radius: 9px;
  padding: 9px 10px; min-width: 0; }
.kijklijstkop { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--lijn-zacht); padding-bottom: 6px; margin-bottom: 6px; }
.kijklijstkop b { font-size: 10.5px; }
.kijklijstkop small { font-size: 8px; color: var(--grijs); }

.kijkafspraak { display: flex; gap: 8px; padding: 5px 0; min-width: 0; }
.kijkafspraak > small { flex: none; font-size: 8.5px; color: var(--grijs); padding-top: 1px; }
.kijkafspraak > span { min-width: 0; border-left: 2px solid var(--kleur); padding-left: 7px; }
.kijkafspraak b { display: block; font-size: 9.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kijkafspraak i { font-size: 8px; font-style: normal; color: var(--grijs); }

.kijkkaart { text-align: center; }
.kijkkaart > small { display: block; font-size: 8px; color: var(--grijs); text-align: left; }
.kijkkaart b { display: block; font-size: 9.5px; }
.kijkkaart i { display: block; font-size: 8px; font-style: normal; color: var(--grijs);
  margin-bottom: 7px; }
.kijkknopje {
  display: block; background: var(--kleur); color: #fff;
  border-radius: 6px; padding: 5px; font-size: 8px; font-weight: 600;
}

/* De cijfers in dat venster zijn verzonnen. Dat mag nooit onduidelijk zijn,
   dus staat het er met zoveel woorden onder. */
.kijkvoet { color: var(--grijs); font-size: 11.5px; margin: 14px 0 0; line-height: 1.5; }
.kijkvoet strong { color: var(--inkt); }

/* ── smaller scherm: het kijkvenster onder de stappen ── */
@media (max-width: 1080px) {
  .startschelp { grid-template-columns: 1fr; min-height: 0; }
  .startkijk { border-left: 0; border-top: 1px solid var(--lijn); }
}
@media (max-width: 620px) {
  .startinhoud, .startkijk { padding: 24px 18px 28px; }
  .startvakken { grid-template-columns: 1fr; }
  /* De namen onder de bolletjes passen niet meer; de teller zegt genoeg. */
  .stapdeel b { display: none; }
  .staprij { align-items: center; }
}

/* ── de plus-min uit het voorbeeld: met hoeveel zijn jullie ──
   Het getal is geen apart veld; het telt de regels eronder. */
.telrij {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #faf8f5; border: 1px solid var(--lijn); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 12px;
}
.telrij > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.telrij strong { font-size: 14px; }
.telrij > div:first-child small { color: var(--grijs); font-size: 12.5px; margin-top: 3px; }

.telknoppen {
  flex: none; display: grid; grid-template-columns: 40px 74px 40px;
  align-items: stretch; height: 52px; overflow: hidden;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 11px;
}
.telknoppen button {
  border: 0; background: var(--kaart); color: var(--inkt);
  font-size: 19px; line-height: 1; cursor: pointer;
}
.telknoppen button:hover:not(:disabled) { background: var(--hoofd-zacht); }
.telknoppen button:disabled { color: #d1cbc4; cursor: not-allowed; }
.telknoppen > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn);
}
.telknoppen b { font: 500 19px/1 var(--serif); }
.telknoppen small { color: var(--grijs); font-size: 10px; margin-top: 3px; }

.telnoot {
  background: var(--hoofd-zacht); color: var(--grijs);
  border-radius: 9px; padding: 10px 12px; margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.45;
}
.telnoot span { color: var(--hoofd); margin-right: 6px; }

/* ── stap 4: de vakgebieden ──
   Overgenomen uit het voorbeeld: kaarten van twee op een rij, een tekening
   links, een vinkje rechtsboven en het aantal behandelingen rechtsonder.
   Aangeklikt kleuren ze op met de hoofdkleur.

   Het zijn labels rond een verborgen vakje, geen knoppen. Zo werkt het
   aanduiden ook als het schermpje niet laadt. */
.vakrooster { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }

.vakkaart {
  position: relative; cursor: pointer;
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  align-items: center; gap: 13px;
  min-height: 112px; padding: 16px 60px 16px 15px;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
}
.vakkaart:hover { border-color: #bdb3aa; transform: translateY(-1px); }
.vakkaart:focus-within { outline: 2px solid var(--hoofd); outline-offset: 2px; }

.vakpicto {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; background: var(--hoofd-zacht); color: var(--hoofd);
}
.vakpicto svg { width: 22px; height: 22px; }

.vaktekst { display: flex; flex-direction: column; min-width: 0; }
.vaktekst strong { font-size: 14.5px; }
.vaktekst small {
  color: var(--grijs); font-size: 12px; line-height: 1.4; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.vakvink {
  position: absolute; top: 13px; right: 13px;
  display: grid; place-items: center; width: 25px; height: 25px;
  border: 1px solid var(--lijn); border-radius: 9px; color: transparent;
}
.vakvink svg { width: 12px; height: 12px; }

.vakaantal {
  position: absolute; right: 14px; bottom: 13px;
  display: flex; flex-direction: column; align-items: flex-end;
  font: 700 15px/1 var(--serif); color: var(--hoofd);
}
.vakaantal small { font: 600 9px/1 var(--sans); color: var(--grijs); margin-top: 3px; }

/* Aangeduid: de kaart kleurt op, de tekening keert om, het vinkje verschijnt. */
.vakkaart.aan {
  background: var(--hoofd-zacht); border-color: var(--hoofd);
  box-shadow: inset 0 0 0 1px rgba(114, 89, 78, .09), 0 7px 20px rgba(82, 67, 57, .07);
}
.vakkaart.aan .vakpicto { background: var(--hoofd); color: var(--hoofd-tekst); }
.vakkaart.aan .vakvink {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}

/* De regel eronder die meetelt. "Je kan er meerdere kiezen" staat er met
   zoveel woorden: uit één kaart aanklikken leidt niemand af dat het er
   meerdere mogen zijn. */
.vaknoot {
  display: flex; align-items: center; justify-content: space-between; gap: 15px;
  background: var(--hoofd-zacht); color: var(--inkt);
  border-radius: 11px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; font-weight: 600;
}
.vaknoot small { color: var(--grijs); font-weight: 400; font-size: 12px; flex: none; }

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

/* Het tweede pad onder de grote knop: een nieuwe salon opzetten zonder de
   bestaande aan te raken. Bewust klein — het is de uitzondering. */
.startanders {
  display: block; text-align: center; margin-top: 11px;
  color: var(--grijs); font-size: 13px; text-decoration: none;
}
.startanders:hover { color: var(--hoofd); text-decoration: underline; }

/* ═════════════════════════════════════ Het onthaal van YourBeautyDesk */

/* Eén scherm, één knop. Vast over het hele venster: het omhulsel eromheen
   heeft marges die hier niet gewenst zijn, en zo blijft het beeld heel
   ongeacht waar dit scherm ooit nog terechtkomt.

   De kleuren zijn uit het logo zelf gemeten — het bruin van de letters,
   het goud van de lotus en het beige van de achtergrond — en niet uit de
   saloneigen kleuren. Dit scherm is van het programma, niet van de zaak;
   de zaak heeft zich hier nog niet eens voorgesteld. */
.auravlak {
  --bruin: #6b4520;
  --bruin-diep: #4a2c0f;
  --goud: #be8a50;
  --goud-licht: #e0b884;

  position: fixed; inset: 0; z-index: 1;
  display: flex; overflow-y: auto; overflow-x: hidden;
  padding: 34px 20px;
  /* Hetzelfde verloop als in het logo: licht in het midden, warmer naar
     de randen. Daardoor valt de rand van het beeld niet op. */
  background:
    radial-gradient(78% 58% at 50% 34%, #fbf1e2 0%, rgba(251, 241, 226, 0) 70%),
    linear-gradient(142deg, #e9d3b8 0%, #f3e2cc 34%, #eddcc4 64%, #dcc1a2 100%);
}

/* Twee zachte vegen in de hoeken, met een gouden haarlijn erlangs. Puur
   sier: alles staat uit voor schermlezers. */
.auraveeg {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(238, 213, 184, .35));
}
.auraveeg.boven {
  width: 46vw; height: 34vw; top: -13vw; left: -10vw;
  transform: rotate(-8deg);
  border-bottom: 1px solid rgba(190, 138, 80, .38);
}
.auraveeg.onder {
  width: 52vw; height: 30vw; right: -14vw; bottom: -12vw;
  transform: rotate(6deg);
  border-top: 1px solid rgba(190, 138, 80, .32);
}

/* Twee lichtvlekjes, zoals de glans op het voorbeeld. */
.auraglans {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 240, .85), rgba(255, 250, 240, 0) 70%);
}
.auraglans.een { width: 190px; height: 190px; top: 16%; left: 22%; }
.auraglans.twee { width: 130px; height: 130px; bottom: 22%; right: 26%; }

/* margin:auto centreert én laat lange inhoud gewoon doorlopen; met
   place-items zou de bovenkant wegvallen op een klein scherm. */
.aurakern {
  position: relative; z-index: 1;
  margin: auto; width: 100%; max-width: 560px; text-align: center;
}

.auraboven {
  margin: 0; font: 400 clamp(30px, 5vw, 46px)/1.1 var(--serif);
  color: var(--bruin-diep);
}

/* Het streepje met het sterretje eronder. */
.auraluik {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 15px auto 26px; max-width: 330px;
}
.auraluik span {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(190, 138, 80, 0), var(--goud), rgba(190, 138, 80, 0));
}
.auraluik i { font-style: normal; font-size: 13px; color: var(--goud); }

.auralogo { display: block; width: min(360px, 86%); height: auto; margin: 0 auto; }

/* Het vangnet zolang het logobestand er niet is. */
.auramerk { margin-bottom: 4px; }
.auramerk strong {
  display: block; font: 400 clamp(46px, 9vw, 78px)/1 var(--serif);
  color: var(--bruin); letter-spacing: -.01em;
}
.auraregel {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin-top: 13px;
  font: 600 clamp(10px, 1.6vw, 13px)/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--bruin);
}
.auraregel i { width: 34px; height: 1px; background: var(--goud); flex: none; }

.aurazin {
  margin: 26px 0 0; font: 400 clamp(18px, 2.6vw, 24px)/1.35 var(--serif);
  color: var(--bruin-diep);
}
.aurafijn {
  margin: 11px auto 0; max-width: 430px;
  font-size: 14.5px; line-height: 1.55; color: #8a7660;
}

/* De enige knop op het scherm. De gloed eronder tilt hem op zonder dat er
   een schaduw onder komt die met de achtergrond vloekt. */
.auraknop {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 30px; padding: 16px 42px;
  background: linear-gradient(160deg, var(--bruin), var(--bruin-diep));
  color: #fff; text-decoration: none; border-radius: 999px;
  font: 400 19px/1 var(--serif);
  box-shadow: 0 2px 0 rgba(190, 138, 80, .55), 0 14px 30px rgba(74, 44, 15, .26);
  transition: transform .16s, box-shadow .16s;
}
.auraknop span { color: var(--goud-licht); font-size: 15px; }
.auraknop:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(190, 138, 80, .65), 0 18px 38px rgba(74, 44, 15, .32);
}
.auraknop:focus-visible { outline: 2px solid var(--bruin-diep); outline-offset: 4px; }

.auranoot {
  margin: 20px auto 0; max-width: 400px;
  font-size: 12.5px; line-height: 1.5; color: #9c8a74;
}

/* Het tweede pad: een nieuwe salon opzetten zonder de eerste aan te raken.
   Bewust klein — het is de uitzondering. */
.auraanders {
  display: inline-block; margin-top: 9px;
  font-size: 12.5px; color: var(--bruin); text-decoration: none;
  border-bottom: 1px solid rgba(107, 69, 32, .35);
}
.auraanders:hover { border-bottom-color: var(--bruin); }

@media (max-width: 560px) {
  .auravlak { padding: 26px 18px; }
  .auraglans { display: none; }
}

/* ═══════════════════════ De wizard in de kleuren van YourBeautyDesk */

/* De vijf stappen horen bij het onthaal, niet bij de salon: zij heeft zich
   nog niet voorgesteld. Daarom staat heel de wizard in bruin en goud,
   ook nadat ze in stap 2 haar eigen kleuren heeft gekozen.

   Dat verwart niet, want alles wat háár kleuren toont — het voorbeeldpaneel
   rechts en het proefdashboard bij de sfeerstap — zet die kleuren zelf, met
   eigen variabelen. Het kader eromheen blijft van het programma. */
.aurablad {
  background:
    radial-gradient(74% 44% at 50% 0%, #fdf8ef 0%, rgba(253, 248, 239, 0) 66%),
    linear-gradient(160deg, #f2e2cc 0%, #fbf4e9 42%, #f5e9d6 100%);
  background-attachment: fixed;
}

/* Eén plek waar de kleuren omgezet worden. Alles op het blad werkt met
   var(--hoofd) en volgt dus vanzelf. Het staat op de body en niet op één
   kader, want de stappen delen geen gemeenschappelijk omhulsel. */
.aurablad {
  --hoofd: #6b4520;
  --hoofd-diep: #4a2c0f;
  --hoofd-tekst: #ffffff;
  --hoofd-zacht: #f7eddd;
  --accent: #be8a50;
  --accent-zacht: #fbf3e6;
  /* Het streepje met het sterretje komt van het onthaal en rekent op deze
     naam. Zonder deze regel valt de gouden lijn stilletjes weg. */
  --goud: #be8a50;
  --lijn: #ece0cd;
  --lijn-zacht: #f7f0e4;
}

/* De naam linksboven, in dezelfde hand als op het onthaal: een serif in
   bruin met een gouden sterretje, geen blokletters. */
.aurablad .startmerk {
  gap: 10px; margin-bottom: 20px;
  font: 400 21px/1 var(--serif); letter-spacing: 0; text-transform: none;
  color: var(--hoofd);
}
.aurablad .startmerk svg { width: 13px; height: 13px; fill: var(--accent); }

/* De stapbalk stond in inktzwart — neutraal, maar naast het warme beige
   van het blad leest dat hard. In bruin hoort hij bij de rest.

   Goud blijft van de lijnen af: 2,4 tegen wit is te weinig om te lezen.
   Het kleurt alleen sierdingen, nooit letters. */
.aurablad .stapdeel.nu .stapnr,
.aurablad .stapdeel.klaar .stapnr {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}
.aurablad .stapdeel.klaar .stapstreep { background: var(--hoofd); }
.aurablad .stapdeel.nu b { color: var(--hoofd); }

/* Het opschrift boven elke vraag draagt de naam van het programma. */
.aurablad .label { color: var(--hoofd); }

/* Het randje en het vinkje op de gekozen sfeerkaart zeggen "dit is
   aangeduid" — dat is taal van de wizard, niet van de salon. De stalen
   binnenin blijven wél haar kleuren tonen; dat is de hele bedoeling. */
.aurablad .sfeer:has(input:checked) { border-color: var(--hoofd); }
.aurablad .sfeer:has(input:checked)::after { background: var(--hoofd); }

/* ══════════════════════════════════ Stap 1 — het merkpaneel en de uitleg */

/* Twee helften: links het merk, rechts wat er komt. Dit scherm vraagt niets,
   dus de halve breedte hoeft niet aan een formulier te gaan. Op de
   vraagschermen daarna staat het merk in een smalle strook en houdt het
   levende voorbeeld zijn helft. */
.aurastap {
  --bruin: #6b4520;
  --bruin-diep: #4a2c0f;
  --goud: #be8a50;
  --goud-licht: #e0b884;
  --creme: #fbf6ec;

  position: fixed; inset: 0; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%);
}

/* ── links: het merk ── */
.aurastapmerk {
  position: relative; overflow: hidden;
  display: grid; place-items: center; padding: 40px;
  background: linear-gradient(158deg, #7d5426 0%, #5e3d16 46%, #47290c 100%);
}
.aurastapmerk img { width: min(330px, 76%); height: auto; }

/* De gouden bogen uit het voorbeeld. Alleen sier: dunne cirkels die half
   buiten beeld vallen. */
.aurastapboog {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(224, 184, 132, .34);
}
.aurastapboog.een { width: 62vh; height: 62vh; top: -26vh; left: -20vh; }
.aurastapboog.twee { width: 78vh; height: 78vh; right: -34vh; bottom: -40vh; }

/* Het vangnet zolang er geen lichte versie van het logo is. */
.aurastapnaam { text-align: center; color: var(--creme); }
.aurastapnaam strong {
  display: block; font: 400 clamp(38px, 5vw, 62px)/1 var(--serif); color: var(--creme);
}
.aurastapnaam span {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; font: 600 11px/1 var(--sans);
  letter-spacing: .28em; text-transform: uppercase; color: var(--goud-licht);
}
.aurastapnaam i { width: 30px; height: 1px; background: var(--goud-licht); flex: none; }

/* ── rechts: wat er komt ── */
.aurastapkant {
  display: flex; overflow-y: auto;
  padding: 40px clamp(28px, 6vw, 88px);
  background: var(--creme);
}
.aurastapinhoud { margin: auto 0; width: 100%; max-width: 520px; }

.aurastapteller {
  margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--bruin);
}

/* Stipjes in plaats van genummerde vakjes: dit scherm vraagt niets, dus
   "hoever ben ik" volstaat — welke stap hoe heet, zie je vanzelf. */
.aurastippen { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 30px; padding: 0; }
.aurastippen li { display: flex; align-items: center; }
.aurastippen li span {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid #e2d3bd; background: var(--creme);
}
.aurastippen li.nu span {
  border-color: var(--bruin);
  box-shadow: inset 0 0 0 3.5px var(--creme), inset 0 0 0 9px var(--bruin);
}
.aurastippen li + li::before {
  content: ""; display: block; width: 52px; height: 1.5px; background: #e8dbc7;
}

.aurastapkant h1 {
  margin: 0; font: 400 clamp(34px, 4.6vw, 54px)/1.08 var(--serif);
  color: var(--bruin-diep); letter-spacing: -.01em;
}
.aurastaplead {
  margin: 12px 0 0; font-size: clamp(16px, 1.7vw, 19px); color: var(--bruin);
}
.aurastapzin {
  margin: 16px 0 0; max-width: 430px;
  font-size: 15px; line-height: 1.6; color: #6d5c46;
}

/* De drie dingen die eraan komen. Scheidingslijntjes in plaats van kaders:
   het is een opsomming, geen keuze. */
.aurastaplijst { list-style: none; margin: 30px 0 0; padding: 0; }
.aurastaplijst li {
  display: flex; align-items: center; gap: 17px;
  padding: 15px 0; border-top: 1px solid #ece0cd;
}
.aurastaplijst li:last-child { border-bottom: 1px solid #ece0cd; }
.aurastaplijst b { font-size: 16px; font-weight: 600; color: var(--inkt); }

.aurastapicoon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #ecdcc8; color: var(--goud);
}
.aurastapicoon svg { width: 22px; height: 22px; }

.aurastapknop {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 30px; padding: 17px 30px;
  background: var(--bruin); color: #fff; text-decoration: none;
  border-radius: 12px; font-size: 17px; font-weight: 600;
  box-shadow: 0 10px 24px rgba(74, 44, 15, .22);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.aurastapknop:hover {
  background: var(--bruin-diep); transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(74, 44, 15, .28);
}
.aurastapknop:focus-visible { outline: 2px solid var(--bruin-diep); outline-offset: 3px; }

.aurastapnoot { margin: 14px 0 0; text-align: center; font-size: 13px; color: #9c8a74; }
.aurastapterug {
  display: block; margin-top: 16px; text-align: center;
  font-size: 13px; color: var(--bruin); text-decoration: none;
}
.aurastapterug:hover { text-decoration: underline; }

/* Op een smal scherm past geen tweeluik. Het merk wordt dan een strook
   bovenaan: nog altijd het eerste wat je ziet, maar zonder de helft van je
   telefoon op te eten. */
@media (max-width: 860px) {
  .aurastap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .aurastapmerk { padding: 26px; }
  .aurastapmerk img { width: min(190px, 54%); }
  .aurastapboog { display: none; }
  .aurastapkant { padding: 30px 22px 40px; }
  .aurastippen li + li::before { width: 34px; }
}

/* ════════════════════════ De vraagschermen in de stijl van het ontwerp */

/* Gouden bogen in de hoeken, zoals op het merkpaneel van stap 1. Ze staan
   vast in beeld: zo maken ze nooit een schuifbalk, hoe lang de pagina ook
   wordt. */
.aurablad::before,
.aurablad::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  border-radius: 50%; border: 1.5px solid rgba(190, 138, 80, .3);
}
.aurablad::before { width: 58vw; height: 58vw; top: -26vw; left: -24vw; }
.aurablad::after { width: 66vw; height: 66vw; right: -32vw; bottom: -34vw; }
/* De vraagschermen krijgen een rustiger breedte. Over de volle 1440 pixels
   lopen de invulvakken zo ver uit elkaar dat je oog het spoor bijster raakt.
   Het vakgebiedenscherm houdt zijn volle breedte: dat is een tweeluik. */
.aurablad .omhulsel { position: relative; z-index: 1; }
.aurablad .omhulsel:not(.breed) { max-width: 1180px; padding-top: 22px; }

/* ── de balk bovenaan: merk links, stappen midden, teller rechts ── */
.aurablad .staprij {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(20px, 4vw, 54px);
  margin-bottom: 30px;
}
.stapmerk { display: flex; align-items: center; gap: 11px; }
.stapmerk img { width: auto; height: 52px; flex: none; }
.stapmerk span { display: flex; flex-direction: column; }
.stapmerk strong {
  font: 400 27px/1 var(--serif); color: var(--hoofd); letter-spacing: -.01em;
}
.stapmerk small {
  margin-top: 4px; font: 600 8px/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.aurablad .staprest { padding-top: 0; }

/* ── de kaart eronder ── */
/* Ronder en zachter dan de kaarten in het dashboard: dit scherm heeft er
   maar één en die mag rustig ademen. */
.aurablad .kaart {
  border-radius: 24px;
  border-color: #ece0cd;
  padding: 28px 30px;
  box-shadow: 0 2px 4px rgba(74, 44, 15, .04), 0 18px 44px rgba(74, 44, 15, .08);
}
.aurablad h1 { color: var(--hoofd-diep); }

/* ── het logovak ── */
/* "?" zei niets. Een pijl omhoog en "Logo toevoegen" zeggen wat je hier kan
   doen; dat het niet moet, staat in het opschrift ernaast. */
.aurablad .logo-vak.leeg {
  flex-direction: column; gap: 9px;
  height: 118px; width: 200px;
  border: 1.5px dashed #e3d0b2;
  background: #fdf7ee;
  color: var(--hoofd);
}
.aurablad .logo-vak.leeg svg { width: 27px; height: 27px; }
.aurablad .logo-vak.leeg b { font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .aurablad .staprij { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .aurablad .staprest { grid-column: 1 / -1; text-align: right; }
  .stapmerk img { height: 40px; }
  .stapmerk strong { font-size: 21px; }
  .stapmerk small { display: none; }
}
@media (max-width: 620px) {
  .aurablad::before, .aurablad::after { display: none; }
  .stapmerk span { display: none; }
}

/* De grote knop van het tweeluik stond in inktzwart. Naast een bruine
   balk en een beige blad leest dat als een vreemd element. */
.aurablad .startverder { background: var(--hoofd); }
.aurablad .startverder:hover { background: var(--hoofd-diep); }

/* Zonder merk in de balk vallen de stappen terug op twee vakken. */
.aurablad .staprij:not(:has(.stapmerk)) { grid-template-columns: minmax(0, 1fr) auto; }

/* Het merk boven het tweeluik. */
.aurablad .startmerk { margin: 0 0 20px 4px; }

/* ═══════════════════════════════════════════ Het slot van de startwizard */

/* Spiegelbeeld van het onthaal: logo in het midden, gouden streepje, één
   zin. Geen stapbalk — die zegt "hoever ben ik", en dat is beantwoord. */
.auraklaar {
  max-width: 620px; margin: 0 auto; padding: 26px 0 60px; text-align: center;
}
.auraklaarlogo { display: block; width: min(190px, 46%); height: auto; margin: 0 auto 4px; }

.auraklaar h1 {
  margin: 0; font: 400 clamp(30px, 4.2vw, 46px)/1.12 var(--serif);
  color: var(--hoofd-diep);
}
.auraklaarzin {
  margin: 12px auto 0; max-width: 440px;
  font-size: 15.5px; line-height: 1.6; color: #6d5c46;
}

/* Wat er nú al staat. Links uitgelijnd: het zijn zinnen om te lezen, geen
   opschriften om te scannen. */
.auraklaarlijst {
  list-style: none; margin: 30px 0 0; padding: 22px 24px; text-align: left;
  background: var(--kaart); border: 1px solid #ece0cd; border-radius: 24px;
  box-shadow: 0 2px 4px rgba(74, 44, 15, .04), 0 18px 44px rgba(74, 44, 15, .08);
}
.auraklaarlijst li { display: flex; align-items: flex-start; gap: 15px; padding: 13px 0; }
.auraklaarlijst li + li { border-top: 1px solid var(--lijn-zacht); }
.auraklaarlijst strong { display: block; font-size: 15.5px; }
.auraklaarlijst small {
  display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--grijs);
}

.auraklaarvink {
  display: grid; place-items: center; flex: none;
  width: 27px; height: 27px; margin-top: 2px; border-radius: 50%;
  background: var(--hoofd); color: var(--hoofd-tekst);
}
.auraklaarvink svg { width: 13px; height: 13px; }

.auraklaartip {
  margin-top: 16px; padding: 18px 22px; text-align: left;
  background: var(--hoofd-zacht); border-radius: 18px;
}
.auraklaartip strong { font-size: 14.5px; color: var(--hoofd-diep); }
.auraklaartip p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: #6d5c46; }

.auraklaarknop {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 28px; padding: 16px 40px;
  background: linear-gradient(160deg, var(--hoofd), var(--hoofd-diep));
  color: #fff; text-decoration: none; border-radius: 999px;
  font: 400 18px/1 var(--serif);
  box-shadow: 0 2px 0 rgba(190, 138, 80, .55), 0 14px 30px rgba(74, 44, 15, .26);
  transition: transform .16s, box-shadow .16s;
}
.auraklaarknop:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(190, 138, 80, .65), 0 18px 38px rgba(74, 44, 15, .32);
}
.auraklaarknop:focus-visible { outline: 2px solid var(--hoofd-diep); outline-offset: 4px; }

.auraklaarnaast {
  display: block; margin-top: 13px; font-size: 13px;
  color: var(--hoofd); text-decoration: none;
  border-bottom: 1px solid rgba(107, 69, 32, .32); width: fit-content;
  margin-left: auto; margin-right: auto;
}
.auraklaarnaast:hover { border-bottom-color: var(--hoofd); }

/* ═══════════════════════════════════ Het vakgebied boven de kiezer */

/* Werkt de zaak in meer dan één vakgebied, dan staan de soorten van kapper,
   nagels en schoonheid anders door elkaar in één lange lijst. Deze rij zet
   er schotten tussen.

   Bij één vakgebied staat de rij er niet: één knop is geen keuze. */
.vakrij {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}

.vaktab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px;
  background: var(--kaart); color: var(--grijs);
  border: 1px solid var(--lijn); border-radius: 999px;
  font: 600 13px/1 var(--sans); cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.vaktab:hover { border-color: #cfc4ba; color: var(--inkt); }
.vaktab:focus-visible { outline: 2px solid var(--hoofd); outline-offset: 2px; }

.vaktabpicto {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--hoofd-zacht); color: var(--hoofd);
}
.vaktabpicto svg { width: 14px; height: 14px; }

.vaktab.aan {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}
.vaktab.aan .vaktabpicto {
  background: rgba(255, 255, 255, .22); color: var(--hoofd-tekst);
}

@media (max-width: 620px) {
  /* Op een telefoon schuift de rij opzij in plaats van over drie regels te
     breken; dan blijft de lijst eronder in beeld. */
  .vakrij {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -2px; padding: 2px;
  }
  .vakrij::-webkit-scrollbar { display: none; }
  .vaktab { flex: none; }
}

/* Een vakgebied waar de zaak nog niets in heeft. Bleker, met het aantal
   weggelaten in plaats van een nul: nul is een cijfer om te lezen, leegte
   hoort gewoon stil te zijn. */
.vaktab.leeg { color: #b3a89f; border-style: dashed; }
.vaktab.leeg .vaktabpicto { background: var(--lijn-zacht); color: #b3a89f; }
.vaktab.leeg.aan { color: var(--hoofd-tekst); border-style: solid; }

.vaktelling {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 2px;
  background: var(--hoofd-zacht); color: var(--hoofd);
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.vaktab.aan .vaktelling { background: rgba(255, 255, 255, .22); color: var(--hoofd-tekst); }

/* Het lege vak. Niet "geen resultaten" maar de weg ernaartoe. */
.vakleeg {
  padding: 22px 24px; margin-bottom: 4px;
  background: var(--kaart); border: 1px dashed var(--lijn);
  border-radius: var(--rond); text-align: center;
}
.vakleeg strong { display: block; font-size: 15.5px; }
.vakleeg p {
  margin: 7px auto 14px; max-width: 420px;
  font-size: 13.5px; line-height: 1.55; color: var(--grijs);
}


/* ═════════════════════════════════════════════ Een behandeling bewerken */
/* Een blad voor zichzelf, in plaats van een formulier dat openklapte
   middenin de lijst. */

.bewerkkop {
  display: flex; align-items: center; gap: 14px;
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 14px 18px; margin-bottom: 16px;
}
.terugpijl {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--lijn); border-radius: var(--rond-klein);
  color: var(--inkt); text-decoration: none;
}
.terugpijl:hover { background: var(--hoofd-zacht); border-color: var(--hoofd); }
.bewerkkoptekst { margin-right: auto; display: grid; gap: 2px; min-width: 0; }
.bewerkkoptekst strong { font: 600 16px/1.2 var(--sans); }
.bewerkkoptekst span { color: var(--grijs); font-size: 13px; }
.bewerkkop .knop { display: inline-flex; align-items: center; gap: 7px; }

.bewerkkaart {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 16px 20px; margin-bottom: 16px;
}
.bewerkicoon {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--groen-zacht); color: var(--groen);
}
.bewerkicoon svg { width: 20px; height: 20px; }
.bewerkkaarttekst { margin-right: auto; display: grid; gap: 3px; min-width: 0; }
.bewerkkaarttekst strong { font: 600 18px/1.2 var(--serif); }
.bewerkkaarttekst span { color: var(--grijs); font-size: 13.5px; }
.pil {
  flex: none; padding: 7px 13px; border-radius: 999px;
  background: var(--papier); border: 1px solid var(--lijn);
  color: var(--inkt); font: 600 12.5px/1 var(--sans); white-space: nowrap;
}

.bewerkkolommen { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1020px) {
  .bewerkkolommen { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* De kopjes tussen de blokken. Zwaarder dan een gewoon label, want ze delen
   het formulier in stukken die je apart kan lezen. */
.veldgroep {
  font: 600 14.5px/1 var(--sans); color: var(--inkt);
  margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--lijn-zacht);
}
.kaart > .veldgroep:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.veldhint { display: block; color: var(--grijs); font-size: 12px; margin-top: 5px; }

.infoteken {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--lijn);
  color: var(--grijs); font: 600 10px/1 var(--sans); cursor: help;
  vertical-align: 1px;
}

@media (min-width: 900px) {
  .veld-rij.vier { grid-template-columns: repeat(4, 1fr); }
}

.tipkaart {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: 18px 20px;
}
.tipkaart > strong { display: block; font: 600 14.5px/1 var(--sans); margin-bottom: 14px; }
.tip { display: flex; gap: 11px; margin-bottom: 15px; }
.tip:last-child { margin-bottom: 0; }
.tippicto {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--hoofd-zacht); color: var(--hoofd);
}
.tip > span:last-child { display: grid; gap: 3px; color: var(--grijs); font-size: 12.5px; line-height: 1.45; }
.tip strong { color: var(--inkt); font: 600 13px/1.3 var(--sans); }


/* Het zoekvak boven de startlijst. Dezelfde vorm als dat van je
   eigen prijslijst, zodat het niet als iets anders aanvoelt. */
/* Smal en laag. Over de volle breedte werd het een balk van bijna twaalf-
   honderd pixels voor een woord van vier letters. */
.zoekstart { margin-bottom: 14px; max-width: 380px; }
.zoekstart input { padding: 10px 40px 10px 14px; font-size: 14px; border-radius: var(--rond-klein); }
.zoekstart svg { right: 13px; width: 16px; height: 16px; }
[data-nietsgevonden] em { font-style: normal; font-weight: 600; color: var(--inkt); }


/* Een regel die je uitvinkt op de startlijst: die behandeling gaat uit.
   Duidelijk anders dan grijs-want-je-hebt-ze-al, anders zie je niet dat
   je iets op het punt staat te veranderen. */
.kiesrij.staatuit { opacity: 1; background: var(--rood-zacht); border-color: #e6c9c3; }
.kiesrij.staatuit .rij-naam { text-decoration: line-through; color: var(--grijs); }
.kiesrij.staatuit .merkje { background: var(--rood-zacht); color: var(--rood); }


/* Het merkje bij wat je al hebt, in dezelfde groene taal als het
   vinkje. Zo hangen ze zichtbaar samen. */
.kiesrij.erin .merkje { background: var(--groen-zacht); color: var(--groen); }

/* Hierna, niet ervoor: allebei wegen ze even zwaar, dus wint de laatste.
   Andersom stond "wordt uitgezet" in het groen. */
.kiesrij.erin.staatuit .merkje { background: var(--rood-zacht); color: var(--rood); }
.kiesrij.staatuit .rij-icoon { background: var(--rood-zacht); color: var(--rood); }

/* "komt erbij" verschijnt zodra je een nieuwe regel aanvinkt, in
   dezelfde groene taal als "staat er al". Zonder dit zag aanvinken er
   op elk tabblad anders uit: op Kapper stond overal een merkje omdat je
   alles al hebt, bij de nagels nergens een. */
.kiesrij .merkje.erbij { display: none; }
.kiesrij:has(input:checked) .merkje.erbij {
  display: inline-block;
  background: var(--groen-zacht); color: var(--groen);
}

/* Een nieuwe regel die je weer uitvinkt. Zelfde beeld als een regel die
   uitgaat, want dat is wat je verwacht als je op Alles uitvinken duwt.
   Alleen het woord verschilt: er gaat hier niets uit, ze komt er gewoon
   niet bij. */
.kiesrij.afgevinkt { background: var(--rood-zacht); border-color: #e6c9c3; }
.kiesrij.afgevinkt .rij-naam { text-decoration: line-through; color: var(--grijs); }
.kiesrij.afgevinkt .rij-icoon { background: var(--rood-zacht); color: var(--rood); }
.kiesrij .merkje.nieterbij { display: none; }
.kiesrij.afgevinkt .merkje.nieterbij {
  display: inline-block;
  background: var(--rood-zacht); color: var(--rood);
}

/* Per soort een vinkje en een kruisje. Vroeger stond hier een knop die
   "Alles" heette en "Geen" werd zodra alles aanstond; die las als een
   toestand terwijl het een actie was. */
.groepknoppen { display: inline-flex; gap: 7px; flex: none; }
.soortknop {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--lijn); background: var(--kaart);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.soortknop svg { width: 17px; height: 17px; }
.soortknop:focus-visible { outline: 2px solid var(--hoofd); outline-offset: 2px; }
/* De twee knopjes zeggen twee dingen tegelijk: wat ze doen als je erop
   duwt, en waar de soort nu in staat. Dat tweede weegt het zwaarst - je
   kijkt er vaker naar dan dat je erop duwt. Dus: staat alles aan, dan
   licht het vinkje groen op; staat alles uit, dan het kruisje rood. Wat
   niet de huidige stand is, staat rustig grijs en kleurt pas als je er
   met de muis over gaat. */
.aanknop, .uitknop {
  background: var(--kaart); border-color: #d9d1c8; color: #b3a89f;
}
.aanknop:hover { color: var(--groen); border-color: var(--groen); background: var(--groen-zacht); }
.uitknop:hover { color: var(--rood); border-color: var(--rood); background: var(--rood-zacht); }

/* "gedaan" = dit is de stand waar de soort nu in staat. */
.aanknop.gedaan { color: var(--groen); border-color: var(--groen); background: var(--groen-zacht); }
.uitknop.gedaan { color: var(--rood); border-color: var(--rood); background: var(--rood-zacht); }
.aanknop.gedaan:hover { background: var(--groen); border-color: var(--groen); color: #fff; }
.uitknop.gedaan:hover { background: var(--rood); border-color: var(--rood); color: #fff; }

/* Een vakgebied waarin iets aanstaat. Zo zie je zonder klikken waar je
   al behandelingen hebt en waar nog niets. Het tabblad waar je op staat
   houdt zijn eigen kleur - dat is een andere vraag: waar kijk ik nu. */
.vaktab.gevuld {
  background: var(--groen-zacht); border-color: var(--groen); color: var(--groen);
}
.vaktab.gevuld .vaktabpicto { background: #d8e7de; color: var(--groen); }
.vaktab.gevuld .vaktelling { background: var(--groen); color: #fff; }
.vaktab.gevuld:hover { border-color: var(--groen); color: var(--groen); }
/* Sta je erop, dan wint dat voor de achtergrond; het bolletje met het
   aantal blijft groen, zodat je ook daar ziet dat er iets aanstaat. */
.vaktab.gevuld.aan {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}
.vaktab.gevuld.aan .vaktabpicto { background: rgba(255, 255, 255, .22); color: var(--hoofd-tekst); }
.vaktab.gevuld.aan .vaktelling { background: #7fb392; color: #10240f; }

/* Kort berichtje naast de teller: bewaard, of juist niet. Zonder dat
   klik je aan en weet je niet of het aankwam. */
.bewaardje {
  font: 600 12.5px/1 var(--sans); color: var(--grijs);
  padding: 5px 10px; border-radius: 999px; background: var(--lijn-zacht);
}
.bewaardje.gelukt { background: var(--groen-zacht); color: var(--groen); }
.bewaardje.mislukt { background: var(--rood-zacht); color: var(--rood); }

/* Wat je uitzette: onderaan, dichtgeklapt, rustig. Het hoort niet
   tussen je gewone lijst, maar mag ook niet onvindbaar zijn. */
.uitgezet {
  margin: 26px 0 8px; border: 1px dashed var(--lijn);
  border-radius: var(--rond); background: var(--kaart);
}
.uitgezet > summary {
  padding: 14px 20px; cursor: pointer; list-style: none;
  font: 600 14px/1.3 var(--sans); color: var(--grijs);
}
.uitgezet > summary::-webkit-details-marker { display: none; }
.uitgezet > summary:hover { color: var(--inkt); }
.uitgezetlijst { padding: 0 12px 4px; }
.uitgezet .hint { padding: 0 20px 16px; margin: 0; }
.uitgezet a.behandeling { border: 1px solid var(--lijn); margin-bottom: 8px;
  border-radius: var(--rond-klein); }

/* Het vuilbakje op je prijslijst en je startlijst. Rond in plaats van
   de pil hierboven: het staat op een regel vol andere knoppen en mag
   daar niet mee wedijveren. Zelfde gedrag: rustig tot je erover gaat. */
.wisbak {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--lijn); background: var(--kaart);
  color: var(--grijs); cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.wisbak svg { width: 15px; height: 15px; }
.wisbak:hover { background: var(--rood-zacht); border-color: var(--rood); color: var(--rood); }
.wisbak:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }
/* Een voorstel dat niet in je lijst staat: er valt niets te wissen. */
.wisbak.leeg { border-style: dashed; color: #ded7cf; cursor: default; }
.wisbak.leeg:hover { background: var(--kaart); border-color: var(--lijn); color: #ded7cf; }

/* Staat er geen enkele werkdag aan, dan zegt het vak dat, in plaats
   van een lege balk te laten staan. */
.urenleeg { margin: 0; padding: 2px 0; font-size: 13px; color: var(--grijs); }

/* Een schakelaar die geen voorkeur aanzet maar een stand toont: is de
   zaak die dag open, werkt zij die dag. Groen is de dag die doorgaat,
   rood de dag die wegvalt. Dat leest sneller dan een bruine balk die
   voor allebei hetzelfde kleurt.

   Twee richtingen, want de twee schermen vragen het omgekeerd:
   'Werkt' aangevinkt is goed nieuws, 'Gesloten' aangevinkt niet. */
.standmelder .schuifbaan { background: var(--rood); }
.standmelder input:checked + .schuifbaan { background: var(--groen); }
.standmelder.omgekeerd .schuifbaan { background: var(--groen); }
.standmelder.omgekeerd input:checked + .schuifbaan { background: var(--rood); }

/* Het vak om zelf een categorie te typen. Staat onder de keuzelijst
   en alleen als je '+ Nieuwe categorie' kiest - of altijd, als het
   schermpje niet draait. */
.nieuwevak { margin-top: 8px; }

/* Het vuilbakje op een soorttegel. Kleiner en bleker dan de pijl:
   dit wist alles wat in die soort staat, dus het hoort niet het
   eerste te zijn wat je oog pakt. */
/* Het vuilbakje boven de pijl, in een smal kolommetje rechts. Zo neemt
   het geen breedte af van de naam van de soort. */
.soortacties {
  flex: none; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  margin-left: -4px; margin-right: -4px;
}
/* Rood, altijd. Een grijs bakje moet je eerst uitproberen om te weten wat
   het doet; een rood niet. */
.soortbak {
  width: 26px; height: 26px;
  border-color: var(--rood-zacht); color: var(--rood);
}
.soortbak svg { width: 13px; height: 13px; }
.soortbak:hover { background: var(--rood); border-color: var(--rood); color: #fff; }
.soorttegel:hover .soortbak { border-color: var(--rood); }

/* Een soort die je zelf maakte maar nog niet gevuld hebt. */
.soortleeg {
  margin: 0; padding: 14px 4px; color: var(--grijs); font-size: 14px;
}

/* Het keuzevak voor de tekening bij een soort. Dichtgeklapt, want je
   verandert dit een keer en kijkt er daarna nooit meer naar. */
.icoonvak { margin: 4px 0 14px; }
.icoonvak > summary {
  cursor: pointer; list-style: none; width: fit-content;
  font-size: 13px; color: var(--grijs);
  border-bottom: 1px dashed var(--lijn);
}
.icoonvak > summary::-webkit-details-marker { display: none; }
.icoonvak > summary:hover { color: var(--hoofd); border-bottom-color: var(--hoofd); }

.icoonrij {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px;
}
.icoonknop {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--rond-klein); border: 1px solid var(--lijn);
  background: var(--kaart); color: var(--grijs); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.icoonknop svg { width: 21px; height: 21px; }
.icoonknop:hover { border-color: var(--hoofd); color: var(--hoofd); }
/* De tekening die nu gekozen is. */
.icoonknop.aan {
  background: var(--hoofd); border-color: var(--hoofd); color: var(--hoofd-tekst);
}

/* Een opgeladen tekening in plaats van een van de onze. */
.eigenicoon { width: 100%; height: 100%; object-fit: contain; }

/* Het icoontje in de opengeklapte soort is aanklikbaar. Het penseeltje
   zegt dat: zonder zo'n teken raadt niemand dat je erop kan duwen. */
.soortbol.wijzigbaar { position: relative; cursor: pointer; }
.bolpen {
  position: absolute; right: -5px; bottom: -5px;
  width: 19px; height: 19px; display: grid; place-items: center;
  border-radius: 50%; background: var(--hoofd); color: var(--hoofd-tekst);
  box-shadow: 0 1px 3px rgba(38, 32, 27, .3);
}
.bolpen svg { width: 10px; height: 10px; }
.soortbol.wijzigbaar:hover { border-color: var(--hoofd); }
.soortbol.wijzigbaar:focus-visible { outline: 2px solid var(--hoofd); outline-offset: 2px; }

/* Het uploadvak met de uitleg erbij. */
.icoonuitleg { margin: 12px 0 0; font-size: 13px; color: var(--grijs); }
.beeldvak { margin-top: 4px; }
.beeldeisen {
  margin: 8px 0 0; padding-left: 18px;
  font-size: 13px; line-height: 1.65; color: var(--grijs);
}
.beeldeisen strong { color: var(--inkt); font-weight: 600; }
.beeldkiezen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 11px;
}
/* Het bestandsveld rekt anders over de volle breedte en duwt de knop naar
   de regel eronder. */
.beeldkiezen input[type="file"] { flex: 0 1 300px; min-width: 0; font-size: 13px; }
.beeldnu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--hoofd-zacht); border-radius: var(--rond-klein);
  font-size: 13px; color: var(--grijs);
}
.beeldnu img {
  width: 40px; height: 40px; object-fit: contain; flex: none;
  background: var(--kaart); border-radius: var(--rond-klein); padding: 3px;
}
.beeldnu span { flex: 1; min-width: 160px; }


/* ═════════════════════════════════════════════════════ Aanmelden

   Naar het ontwerp van Jonathan: geen kaart en geen kader, het logo groot
   bovenaan en de velden er los onder. Alles op hetzelfde beige als de rest
   van het programma.

   De velden dragen hun eigen tekeningetje binnenin in plaats van een
   opschrift erboven. Dat kan hier, want het zijn er maar twee en iedereen
   herkent ze; op een formulier met tien velden zou het raden worden. */
.aanmeldvlak {
  position: fixed; inset: 0; z-index: 1;
  display: flex; overflow-y: auto; overflow-x: hidden;
  padding: 40px 20px;
  background:
    radial-gradient(72% 52% at 50% 30%, #f7e7d2 0%, rgba(247, 231, 210, 0) 74%),
    linear-gradient(168deg, #eddbc2 0%, #e6cfb2 46%, #dcc09e 100%);
}

.aanmeldkern {
  margin: auto; width: 100%; max-width: 430px; text-align: center;
}

.aanmeldlogo {
  display: block; width: min(320px, 82%); height: auto; margin: 0 auto 30px;
}

.aanmeldkop {
  margin: 0; font: 400 21px/1.2 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: #4a2c0f;
}
.aanmeldlead {
  margin: 10px 0 26px; font-size: 15px; color: #6d5c46;
}

.aanmeldform { text-align: left; }

/* ── de velden ── */
.veldbak {
  position: relative; margin-bottom: 13px;
}
.veldbak input {
  width: 100%; padding: 15px 15px 15px 46px;
  font: inherit; font-size: 15px; color: var(--inkt);
  background: rgba(255, 252, 246, .72);
  border: 1px solid rgba(107, 69, 32, .16);
  border-radius: 13px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.veldbak input::placeholder { color: #9c8a74; }
.veldbak input:focus {
  outline: none; background: #fffdf9;
  border-color: #6b4520; box-shadow: 0 0 0 3px rgba(107, 69, 32, .12);
}
.veldicoon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: #8a7660; pointer-events: none;
}
.veldicoon svg { width: 100%; height: 100%; }

/* Het oogje om je wachtwoord even te tonen. */
.veldoog {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  color: #8a7660; cursor: pointer;
}
.veldoog svg { width: 19px; height: 19px; }
.veldoog:hover { color: #4a2c0f; }
.veldoog.aan { color: #6b4520; }
.veldoog:focus-visible { outline: 2px solid #6b4520; outline-offset: 1px; }

/* ── onthoud mij, en het vergeten wachtwoord ── */
.aanmeldrij {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin: 4px 0 20px;
}
.onthoudmij {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0; font-size: 14px; color: #4a3a2a; cursor: pointer;
}
.onthoudmij input { width: 17px; height: 17px; accent-color: #6b4520; margin: 0; }

/* Geen dode link: er gaat nog geen herstelmail uit, dus klapt hier open
   wat je dan wél moet doen. */
.vergeten { font-size: 14px; text-align: right; }
.vergeten > summary {
  cursor: pointer; list-style: none; color: #a07840;
}
.vergeten > summary::-webkit-details-marker { display: none; }
.vergeten > summary:hover { text-decoration: underline; }
.vergeten p {
  margin: 8px 0 0; max-width: 240px; margin-left: auto;
  font-size: 12.5px; line-height: 1.55; color: #6d5c46; text-align: left;
}

/* ── de knop ── */
.aanmeldknop {
  width: 100%; padding: 17px 20px;
  font: 600 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: #4a2c0f; border: 0; border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(74, 44, 15, .22);
  transition: background .14s, transform .14s, box-shadow .14s;
}
.aanmeldknop:hover {
  background: #3a220a; transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(74, 44, 15, .28);
}
.aanmeldknop:focus-visible { outline: 2px solid #4a2c0f; outline-offset: 3px; }

.aanmeldscheiding {
  display: flex; align-items: center; gap: 14px; margin: 24px 0 14px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #9c8a74;
}
.aanmeldscheiding::before, .aanmeldscheiding::after {
  content: ""; flex: 1; height: 1px; background: rgba(107, 69, 32, .18);
}

.aanmeldnoot {
  margin: 0; text-align: center;
  font-size: 13.5px; line-height: 1.6; color: #6d5c46;
}

/* ── wat er misging, en wat er goed ging ── */
.aanmeldfout, .aanmeldgoed {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.5;
}
.aanmeldfout {
  background: rgba(164, 74, 63, .12); color: #7a2f27;
  border-left: 3px solid var(--rood);
}
.aanmeldgoed {
  background: rgba(74, 124, 98, .13); color: #2f5a46;
  border-left: 3px solid var(--groen);
}
.aanmelduitleg {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #6d5c46;
}
.aanmeldveld {
  display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600;
  color: #4a3a2a;
}

/* Afmelden staat onderaan de zijbalk, los van de rest. */
.rail-afmelden { margin-top: 10px; }

@media (max-width: 480px) {
  .aanmeldvlak { padding: 26px 16px; }
  .aanmeldlogo { width: min(250px, 78%); margin-bottom: 22px; }
  .aanmeldrij { flex-direction: column; align-items: flex-start; }
  .vergeten { text-align: left; }
  .vergeten p { margin-left: 0; }
}