/* Klantfeedback-app — basisstijlen en bewegingstokens.
   Bewegingsregels: PLAN.md §Ontwerp en beweging. Elke duur of curve staat uitsluitend hier in
   :root als losse waarde; elders alleen via var(--token) — afgedwongen door
   scripts/check-beweging.mjs. Elke :hover-regel staat binnen @media (hover: hover) en heeft een
   :focus-visible-tegenhanger — afgedwongen door scripts/check-css-staten.mjs. */

:root {
  /* Bewegingstokens (Material, PLAN §Ontwerp en beweging punt 4) */
  --duur-kort: 150ms;
  --duur-uit: 200ms;
  --duur-middel: 250ms;
  --curve-standaard: cubic-bezier(0.2, 0, 0, 1);
  --curve-in: cubic-bezier(0.05, 0.7, 0.1, 1);
  --curve-uit: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* Uitzondering op de 400ms-grens: alleen voor een doorlopende indicator (spinner, straks ook
     de opname-indicator), niet voor een schermovergang. PLAN §Ontwerp en beweging punt 4. */
  --duur-doorlopend: 800ms;

  /* Kleuren en merkverloop: public/merk.css, gegenereerd uit public/merk.js (npm run merk). */

  /* Avatar-animaties: alleen via deze tokens (check-beweging). */
  --duur-avatar: 350ms;
  --duur-viering: 600ms;

  color-scheme: light dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  background-color: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

img {
  max-width: 100%;
}

button,
[role='button'],
.tegel {
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Klanttekst (transcript, notitie) blijft selecteerbaar. */
.transcript,
.tekst-selecteerbaar {
  user-select: text;
}

.veilig-gebied-boven {
  padding-top: env(safe-area-inset-top);
}

.veilig-gebied-onder {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Minder beweging (PLAN §Ontwerp en beweging punt 5): alles wordt een fade van hoogstens
   --duur-kort, of niets. Geen literale duur hier — vandaar de omweg via transition-duration. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property: opacity !important;
    transition-duration: var(--duur-kort) !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Lay-out ---------- */

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.scherm {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.verborgen {
  display: none !important;
}

/* ---------- Login ---------- */

.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* flex-start i.p.v. center: een langere foutmelding duwt dan alleen de knop omlaag, niet de
     hele kolom (incl. titel/veld erboven) omhoog — PLAN §Ontwerp en beweging punt 6. */
  justify-content: flex-start;
  padding-top: max(1.5rem, 18vh);
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1.5rem;
  max-width: 24rem;
  margin: 0 auto;
  width: 100%;
}

.login__titel {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.login__uitleg {
  margin: 0;
}

.login__veld {
  width: 100%;
  min-height: 48px;
  padding: 0 0.875rem;
  font-size: 1rem;
  border: 1px solid var(--kleur-rand-interactief);
  border-radius: 0.5rem;
  background-color: var(--kleur-oppervlak);
  color: var(--kleur-tekst);
  transition: border-color var(--duur-kort) var(--curve-standaard);
}

.login__veld--fout {
  border-color: var(--kleur-fout);
}

.login__veld:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 1px;
}

.login__veld::placeholder {
  color: var(--kleur-tekst-zwak);
}

.login__fout {
  margin: 0;
  color: var(--kleur-fout);
  /* Ruimte voor twee regels (de gangbare foutmeldingen op dit scherm wrappen naar 2 regels op
     375px) zodat de knop eronder niet verspringt zodra de tekst verschijnt — ontwerpreview
     2026-09-17 ronde 2, B1. */
  min-height: 2.8rem;
}

.login__link {
  align-self: flex-start;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--kleur-primair-tekst);
  font-size: 0.9375rem;
  text-decoration: underline;
  transition: opacity var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .login__link:hover {
    opacity: 0.7;
  }
}

.login__link:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.login__knop {
  position: relative;
  min-height: 48px;
  min-width: 48px;
  padding: 0 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--duur-kort) var(--curve-standaard),
    opacity var(--duur-kort) var(--curve-standaard);
}

.login__knop:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .login__knop:hover {
    opacity: 0.92;
  }
}

.login__knop:focus-visible {
  outline: 2px solid var(--kleur-tekst);
  outline-offset: 2px;
}

.login__knop[data-laden='true'] .login__knop-tekst {
  visibility: hidden;
}

.login__spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.login__knop[data-laden='true'] .login__spinner {
  display: flex;
}

.login__spinner-ring {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--kleur-tekst-op-primair);
  animation: draaien var(--duur-doorlopend) linear infinite;
}

@keyframes draaien {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Tegels ---------- */

.tegels-scherm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.tegels-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 1rem;
  /* Merkverloop als dunne lijn onder de kop (BG Digital-herkenning). */
  border-bottom: 3px solid transparent;
  border-image: var(--merk-verloop-lijn) 1;
}

.tegels-kop__merk {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.kop-merk {
  height: 1.5rem;
  width: auto;
  flex: none;
}

.tegels-kop__titel {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.tegels-kop__knoppen {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.tegels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0.75rem;
  padding: 0.5rem 1rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

@media (min-width: 640px) {
  .tegels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .tegels-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tegel {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem;
  min-height: 48px;
  border: none;
  border-radius: 1.25rem;
  /* Altijd wit, ook in donkere modus (Bram, 2026-09-22: "die tegels altijd in wit zodat de
     logo's er mooi afsteken") — bewust --tegel-vlak, niet --kleur-oppervlak: die laatste
     wordt #1e1e1e in dark mode, --tegel-vlak nooit. */
  background-color: var(--tegel-vlak);
  color: var(--tegel-vlak-tekst);
  /* Vaste schaduw i.p.v. een geanimeerde: box-shadow mag niet in transition
     (scripts/check-beweging.mjs — alleen compositor-vriendelijke properties). Het 3D-gevoel
     komt van de transform-lift hieronder, niet van een veranderende schaduwdiepte. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.09);
  transition: transform var(--duur-kort) var(--curve-standaard);
}

@media (prefers-color-scheme: dark) {
  .tegel {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

.tegel--skelet {
  background-color: var(--kleur-rand);
  box-shadow: none;
  opacity: 0.5;
}

/* Het logo zo groot mogelijk binnen de tegel (Bram, 2026-09-22: "zo groot mogelijk ... maar
   ook zeer duidelijk") — flex-1 laat de afbeelding de hele resterende hoogte innemen, niet
   een vaste kleine maat; object-fit: contain doet de rest (nooit uitrekken, nooit bijsnijden). */
.tegel img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
}

.tegel-logo-plek {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  /* Idem: vast, niet het thema-afhankelijke paar — anders wordt dit vlak in donkere modus
     donker-op-donker (onzichtbaar tegen --tegel-vlak). */
  background-color: var(--tegel-logo-plek);
  color: var(--tegel-vlak-tekst-zwak);
}

.tegel-logo-plek svg {
  width: 40%;
  height: 40%;
}

.tegel-naam {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

.tegel:active {
  transform: scale(0.98) translateY(1px);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.09);
}

@media (hover: hover) {
  .tegel:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 10px 22px rgba(0, 0, 0, 0.13);
  }
}

.tegel:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.leeg-uitleg {
  margin: auto;
  max-width: 20rem;
  padding: 1.5rem;
  text-align: center;
}

.leeg-uitleg__knop {
  margin-top: 0.5rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid var(--kleur-primair-tekst);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--kleur-primair-tekst);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity var(--duur-kort) var(--curve-standaard);
}

.tegels-kop__skelet {
  width: 8rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background-color: var(--kleur-rand);
}

@media (hover: hover) {
  .leeg-uitleg__knop:hover {
    opacity: 0.7;
  }
}

.leeg-uitleg__knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

/* ---------- Site in iframe ---------- */

.site-scherm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.topbalk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0 0.5rem;
  background-color: var(--kleur-oppervlak);
  border-bottom: 1px solid var(--kleur-rand);
}

.topbalk__terug {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--kleur-tekst);
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .topbalk__terug:hover {
    background-color: var(--kleur-rand);
  }
}

.topbalk__terug:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: -2px;
}

.topbalk__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbalk__titel {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbalk__status {
  font-size: 0.75rem;
  opacity: 0.7;
}

.site-iframe-omslag {
  flex: 1;
  min-height: 0;
  position: relative;
}

.site-iframe-omslag iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* Voorkomt een wit vlak vóór de site zelf iets tekent, vooral opvallend in donkere modus
     onder de donkere topbalk — ontwerpreview 2026-09-17 ronde 2, B10. */
  background-color: var(--kleur-achtergrond);
}

/* ---------- Snackbar ---------- */

.snackbar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  /* Boven de hoofdknop (56px + 1rem eigen marge), niet erover — anders bedekt een volle-breedte
     snackbar de FAB volledig (ontwerpreview 2026-09-17, bevinding B1). */
  bottom: calc(1rem + 56px + 0.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  min-height: 48px;
  border-radius: 0.5rem;
  background-color: var(--kleur-tekst);
  color: var(--kleur-achtergrond);
  transform: translateY(150%);
  opacity: 0;
  /* Zonder dit onderschept de verborgen snackbar tikken op de hoofdknop: zijn rustpositie
     (translateY(150%)) overlapt die knop nog, en opacity:0 alleen sluit hit-testing niet uit
     (browsercheck-ontwerp.js, fase 5, gevonden bij de nieuwe wachtrij-stap). */
  pointer-events: none;
  transition:
    transform var(--duur-middel) var(--curve-standaard),
    opacity var(--duur-middel) var(--curve-standaard);
  z-index: 20;
}

.snackbar--zichtbaar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.snackbar__tekst {
  font-size: 0.875rem;
}

.snackbar__actie {
  min-height: 48px;
  min-width: 48px;
  padding: 0 0.75rem;
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 600;
}

.snackbar__actie:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Hoofdknop en onderblad ---------- */

.hoofdknop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--duur-kort) var(--curve-standaard),
    opacity var(--duur-kort) var(--curve-standaard);
  z-index: 15;
}

.hoofdknop:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .hoofdknop:hover {
    opacity: 0.92;
  }
}

.hoofdknop:focus-visible {
  outline: 2px solid var(--kleur-tekst-op-primair);
  outline-offset: 2px;
}

.onderblad-scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duur-middel) var(--curve-standaard);
  z-index: 25;
}

.onderblad-scrim--open {
  opacity: 1;
  pointer-events: auto;
}

.onderblad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--kleur-oppervlak);
  color: var(--kleur-tekst);
  border-radius: 1rem 1rem 0 0;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--duur-middel) var(--curve-standaard);
  z-index: 26;
  touch-action: none;
}

.onderblad--open {
  transform: translateY(0);
}

.onderblad--slepen {
  transition: none;
}

/* Handvat en sluitknop op dezelfde rij, zodat ze optisch op één lijn staan (ontwerpreview
   2026-09-17, bevinding B8) — voorheen stond de knop met een losse absolute top-waarde
   op een andere hoogte dan het margin-gecentreerde handvat. */
.onderblad__kop {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.onderblad__handvat {
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background-color: var(--kleur-rand);
  touch-action: none;
}

.onderblad__inhoud {
  min-height: 4rem;
}

.onderblad__sluiten {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--kleur-tekst);
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .onderblad__sluiten:hover {
    background-color: var(--kleur-rand);
  }
}

.onderblad__sluiten:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: -2px;
}

/* Alleen het handvat vangt de sleep-gebaren (bevestigOnderbladSlepen in app.js); de inhoud moet
   gewoon kunnen scrollen zodra hij langer is dan het blad — vandaar pan-y hier i.p.v. op
   .onderblad zelf (die blijft touch-action: none, ongewijzigd). */
.onderblad__inhoud {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

/* ---------- Fase 5: opnemen, typen, foto's, wachtrij, status ---------- */

.onderblad__formulier {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kleur-rand);
  margin-bottom: 0.75rem;
}

.opname-sectie {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.opname-rij {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.opname-knop {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--duur-kort) var(--curve-standaard),
    background-color var(--duur-kort) var(--curve-standaard);
}

.opname-knop--actief {
  background-color: var(--kleur-fout);
}

.opname-knop:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .opname-knop:hover {
    opacity: 0.92;
  }
}

.opname-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.opname-niveau-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.opname-niveau {
  height: 8px;
  border-radius: 4px;
  background-color: var(--kleur-rand);
  overflow: hidden;
}

.opname-niveau__balk {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.04);
  background-color: var(--kleur-primair);
}

.opname-duur {
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zwak);
  font-variant-numeric: tabular-nums;
}

.opname-status {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zwak);
}

.onderblad__tekstveld {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
  border: 1px solid var(--kleur-rand-interactief);
  border-radius: 0.5rem;
  background-color: var(--kleur-oppervlak);
  color: var(--kleur-tekst);
  resize: vertical;
  transition: border-color var(--duur-kort) var(--curve-standaard);
}

.onderblad__tekstveld:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 1px;
}

.fotos-sectie {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onderblad__foto-knop {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--kleur-rand-interactief);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--kleur-tekst);
  font-size: 0.9375rem;
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .onderblad__foto-knop:hover {
    background-color: var(--kleur-rand);
  }
}

.onderblad__foto-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.fotos-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.foto-miniatuur {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}

.foto-miniatuur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

.foto-miniatuur__verwijderen {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: none;
  background-color: var(--kleur-tekst);
  color: var(--kleur-achtergrond);
  display: flex;
  align-items: center;
  justify-content: center;
}

.foto-miniatuur__verwijderen svg {
  width: 14px;
  height: 14px;
}

.foto-miniatuur__verwijderen:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.onderblad__velden {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.onderblad__label {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zwak);
}

.onderblad__select {
  min-height: 48px;
  padding: 0 0.75rem;
  border: 1px solid var(--kleur-rand-interactief);
  border-radius: 0.5rem;
  background-color: var(--kleur-oppervlak);
  color: var(--kleur-tekst);
  font-size: 1rem;
}

.onderblad__select:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 1px;
}

.onderblad__toevoegen-knop {
  min-height: 48px;
  padding: 0 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
  font-size: 1rem;
  font-weight: 600;
  transition: transform var(--duur-kort) var(--curve-standaard);
}

.onderblad__toevoegen-knop:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .onderblad__toevoegen-knop:hover {
    opacity: 0.92;
  }
}

.onderblad__toevoegen-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.wachtrij-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wachtrij-item {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 0.5rem;
  background-color: var(--kleur-oppervlak);
}

.wachtrij-item--mislukt {
  border-color: var(--kleur-fout);
}

.wachtrij-item__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wachtrij-item__type {
  font-size: 0.8125rem;
  font-weight: 600;
}

.wachtrij-item__verwijderen {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--kleur-tekst-zwak);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wachtrij-item__verwijderen svg {
  width: 18px;
  height: 18px;
}

.wachtrij-item__verwijderen:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.wachtrij-item__tekst {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wachtrij-item__status {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--kleur-tekst-zwak);
}

.wachtrij-item__status--mislukt {
  color: var(--kleur-fout);
}

.onderblad__versturen-knop {
  margin-top: 0.75rem;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity var(--duur-kort) var(--curve-standaard);
}

.onderblad__versturen-knop[disabled] {
  opacity: 0.6;
}

@media (hover: hover) {
  .onderblad__versturen-knop:hover {
    opacity: 0.92;
  }
}

.onderblad__versturen-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

/* ---------- Statusoverzicht ---------- */

.tegels-kop__status-knop {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--kleur-tekst);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .tegels-kop__status-knop:hover {
    background-color: var(--kleur-rand);
  }
}

.tegels-kop__status-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: -2px;
}

.status-scherm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.status-lijst {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.status-leeg {
  margin: auto;
  color: var(--kleur-tekst-zwak);
  text-align: center;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 1rem;
  background-color: var(--kleur-oppervlak);
  color: var(--kleur-tekst);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  transition: transform var(--duur-kort) var(--curve-standaard);
}

.status-item:active {
  transform: scale(0.99);
}

@media (hover: hover) {
  .status-item:hover {
    border-color: var(--kleur-primair-tekst);
  }
}

.status-item:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
  border-color: var(--kleur-primair-tekst);
}

.status-item__avatar {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--merk-verloop);
}

.status-item__avatar .avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: 50% 30%;
}

.status-item__inhoud {
  flex: 1;
  min-width: 0;
}

.status-item__nieuw {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kleur-primair-tekst);
}

.status-item__badge--bezig {
  background-color: var(--kleur-tint);
  color: var(--kleur-primair-tekst);
}

.status-item__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.status-item__type {
  font-size: 0.9375rem;
  font-weight: 600;
}

.status-item__badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background-color: var(--kleur-rand);
  color: var(--kleur-tekst);
}

.status-item__badge--klaar {
  background-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
}

.status-item__details {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zwak);
}

/* ---------- Beheer ---------- */

.beheer-storingen-balk {
  margin: 0.5rem 1rem 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--kleur-fout);
  color: var(--kleur-wit);
}

.beheer-storingen-balk p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.beheer-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0;
  overflow-x: auto;
}

.beheer-filter {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 1.5rem;
  background: transparent;
  color: var(--kleur-tekst);
  font-size: 0.875rem;
  transition: background-color var(--duur-kort) var(--curve-standaard), border-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .beheer-filter:hover {
    background-color: var(--kleur-rand);
  }
}

.beheer-filter:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.beheer-filter--actief {
  background-color: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
}

.beheer-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--kleur-rand);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  min-height: 48px;
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .beheer-item:hover {
    background-color: var(--kleur-rand);
  }
}

.beheer-item:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: -2px;
}

.beheer-detail {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.beheer-veld__label {
  margin: 0 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kleur-tekst-zwak);
  text-transform: uppercase;
}

.beheer-veld__waarde {
  margin: 0;
  font-size: 0.9375rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

a.beheer-veld__waarde {
  color: var(--kleur-primair-tekst);
}

.beheer-audio {
  width: 100%;
}

.beheer-afbeeldingen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.beheer-afbeelding {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--kleur-rand);
}

.beheer-status-knoppen,
.beheer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.beheer-status-knop {
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--kleur-rand);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--kleur-tekst);
  font-size: 0.875rem;
  transition: background-color var(--duur-kort) var(--curve-standaard), border-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .beheer-status-knop:hover {
    background-color: var(--kleur-rand);
  }
}

.beheer-status-knop:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

.beheer-status-knop--actief {
  background-color: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: var(--kleur-tekst-op-primair);
}

.beheer-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 0.5rem;
}

.beheer-tag__vinkje {
  width: 24px;
  height: 24px;
}

.beheer-intrekken-knop {
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--kleur-fout);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--kleur-fout);
  font-size: 0.9375rem;
  transition: background-color var(--duur-kort) var(--curve-standaard);
}

@media (hover: hover) {
  .beheer-intrekken-knop:hover {
    background-color: var(--kleur-rand);
  }
}

.beheer-intrekken-knop:focus-visible {
  outline: 2px solid var(--kleur-fout);
  outline-offset: 2px;
}

/* ---------- Merk: avatars en podium (merk.js → avatars, beeld) ---------- */

.avatar {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Het podium: de avatar op het merkverloop met het BG-beeldmerk als watermerk — dezelfde opzet
   als het app-icoon. Vierkant, zodat rekwisieten in de avatarbeelden nooit worden afgesneden. */
.podium {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  background: var(--merk-verloop);
  isolation: isolate;
}

.podium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--merk-monogram-wit) center 42% / 96% auto no-repeat;
  opacity: 0.2;
}

.podium--hero {
  width: min(13rem, 60vw);
  aspect-ratio: 1 / 1;
  align-self: center;
}

.podium--groot {
  width: min(14rem, 62vw);
  aspect-ratio: 1 / 1;
}

.podium--klein {
  width: 6.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
}

.avatar--podium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar--nieuw {
  animation: avatar-in var(--duur-avatar) var(--curve-in) both;
}

.avatar--weg {
  animation: avatar-uit var(--duur-avatar) var(--curve-uit) both;
}

.avatar--viering {
  animation: avatar-pop var(--duur-viering) var(--curve-in) both;
}

.podium--viering::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  animation: glans var(--duur-viering) var(--curve-standaard) both;
  pointer-events: none;
}

@keyframes avatar-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes avatar-uit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes avatar-pop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glans {
  from {
    opacity: 1;
    transform: translateX(-100%);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.login .podium--hero {
  margin-bottom: 0.25rem;
}

.tegel-logo-plek img {
  width: 56%;
  flex: 0 1 auto;
  object-fit: contain;
}

/* Leeg- en foutblok */
.avatar-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: auto;
  max-width: 20rem;
  text-align: center;
}

.avatar-blok__kop {
  margin: 0.25rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.avatar-blok__tekst {
  margin: 0;
  color: var(--kleur-tekst-zwak);
}

/* Avatarkaart over het scherm: versturen, verstuurd, fout */
.avatar-kaart {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duur-middel) var(--curve-standaard);
}

.avatar-kaart--zichtbaar {
  opacity: 1;
  pointer-events: auto;
}

.avatar-kaart__inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 20rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: 1.75rem;
  background-color: var(--kleur-oppervlak);
  text-align: center;
  transform: scale(0.94);
  transition: transform var(--duur-middel) var(--curve-in);
}

.avatar-kaart--zichtbaar .avatar-kaart__inhoud {
  transform: scale(1);
}

.avatar-kaart__kop {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.avatar-kaart__tekst {
  margin: 0;
  color: var(--kleur-tekst-zwak);
}

/* Offlinebalk bovenaan */
.offline-balk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem;
  background-color: var(--kleur-oppervlak);
  border-bottom: 3px solid transparent;
  border-image: var(--merk-verloop-lijn) 1;
  font-size: 0.875rem;
  pointer-events: none;
}

.avatar--offline {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--merk-verloop);
  transform: scale(1);
}

.offline-balk__tekst {
  display: flex;
  flex-direction: column;
}

/* Luisteren tijdens het inspreken */
.luister {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar--luister {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--merk-verloop);
  animation: luister-puls var(--duur-doorlopend) ease-in-out infinite alternate;
}

.luister__tekst {
  color: var(--kleur-tekst-zwak);
  font-style: italic;
}

@keyframes luister-puls {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Statusdetail */
.detail {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}

.detail__kop {
  margin: 0.5rem 0 0;
  font-size: 1.375rem;
  font-weight: 700;
}

.detail__tekst {
  margin: 0;
  max-width: 22rem;
  color: var(--kleur-tekst-zwak);
}

.detail__meta {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--kleur-tekst-zwak);
}

.detail__stappen {
  width: min(22rem, 100%);
  margin-top: 0.75rem;
}

.stappen {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zwak);
}

.stap::before {
  content: '';
  position: absolute;
  top: 0.6875rem;
  right: 50%;
  width: 100%;
  height: 3px;
  background-color: var(--kleur-rand);
}

.stap:first-child::before {
  display: none;
}

.stap__punt {
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 2px solid var(--kleur-rand);
  background-color: var(--kleur-oppervlak);
}

.stap--gedaan::before,
.stap--actief::before {
  background: var(--merk-verloop-lijn);
}

.stap--gedaan .stap__punt,
.stap--actief .stap__punt {
  border-color: transparent;
  background: var(--merk-verloop);
}

.stap--actief .stap__punt {
  box-shadow: 0 0 0 4px var(--kleur-tint);
}

.stap--actief {
  color: var(--kleur-tekst);
  font-weight: 700;
}