/* ============================================================================
   ReviewMerci — dashboard voor klanten
   Zelfde stijl als de feedbackpagina (papier, inkt, Fraunces + Work Sans),
   in de kleuren van ReviewMerci zelf.
   ============================================================================ */

/* Lettertypes: zelf aangeboden (geen verzoek naar Google = geen IP-adres naar Google) */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('/fonts/worksans.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
/* Enkel voor de voorbeelden bij "Aanpassen" (lettertypes van de feedbackpagina) */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --paper: #F4EFE6;
  --card: #FDFBF7;
  --ink: #23282B;
  --ink-soft: #5A6166;
  --line: #DBD9D3;

  --accent: #2F4858;
  --accent-dark: #22343F;
  --accent-contrast: #FFFFFF;
  --secondary: #8F97A0;

  --fout: #A13F32;
  --fout-zacht: #F3E1DE;

  --font-titel: 'Fraunces', Georgia, serif;
  --font-tekst: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: var(--font-tekst);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

#app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 40px;
}

/* ---------------------------------------------------------------------------
   Bovenbalk: merknaam, taalkeuze, uitloggen
   --------------------------------------------------------------------------- */
.top-bar {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.merk {
  font-family: var(--font-titel);
  font-weight: 500;
  font-size: 19px;
  color: var(--accent-dark);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Taalkeuze en uitloggen blijven altijd samen op één lijn */
.top-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.uit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-family: var(--font-tekst);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.uit-btn:hover { color: var(--ink); border-color: var(--secondary); }
.uit-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.uit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Smal scherm: alleen het icoontje, zodat alles op één lijn past in elke taal */
@media (max-width: 560px) {
  .uit-tekst { display: none; }
  .uit-btn { width: 36px; padding: 0; justify-content: center; }
  .merk { font-size: 17px; }
  .lang-btn { padding: 6px 9px; }
}

.lang-switch {
  display: flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-tekst);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-btn.active { background: var(--accent); color: var(--accent-contrast); }
.lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.link-btn {
  background: none;
  border: none;
  padding: 6px 2px;
  font-family: var(--font-tekst);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Kaart
   --------------------------------------------------------------------------- */
.inhoud {
  width: 100%;
  display: flex;
  justify-content: center;
}
.card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 24px 48px -24px rgba(44, 36, 24, 0.35), 0 2px 8px rgba(44,36,24,0.06);
  border: 1px solid rgba(44,36,24,0.06);
  padding: 34px 26px 30px;
  animation: rise 0.42s cubic-bezier(.22,1,.36,1);
}
.card--midden {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

.titel {
  font-family: var(--font-titel);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.uitleg {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.card--midden .uitleg:last-child { margin-bottom: 0; }
.hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 18px 0 0;
  text-align: center;
}
.hint--links { text-align: left; margin: 6px 0 0; }

/* ---------------------------------------------------------------------------
   Formulier
   --------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.field-label svg { width: 15px; height: 15px; }
.text-input {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  padding: 13px 14px;
  font-family: var(--font-tekst);
  font-size: 16px; /* 16px voorkomt inzoomen op iPhone */
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.text-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.veld-fout {
  font-size: 13.5px;
  color: var(--fout);
  margin: 0 0 14px;
}

.primary-btn {
  display: block;
  width: 100%;
  border: none;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 15.5px;
  text-align: center;
  padding: 16px 20px;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
  min-height: 52px;
  touch-action: manipulation;
}
.primary-btn:hover { filter: brightness(1.05); }
a.primary-btn { text-decoration: none; box-sizing: border-box; }
.primary-btn:active { transform: scale(0.98); }
.primary-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.primary-btn:disabled { opacity: 0.65; cursor: default; }

.secondary-btn {
  display: block;
  width: 100%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 18px;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 24px;
  touch-action: manipulation;
}
.secondary-btn:hover { border-color: var(--secondary); }

/* ---------------------------------------------------------------------------
   Zaak kiezen en welkom
   --------------------------------------------------------------------------- */
.zaak-lijst { display: flex; flex-direction: column; gap: 10px; }
.zaak-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,0.5);
  border-radius: 14px;
  padding: 15px 16px;
  font-family: var(--font-tekst);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.zaak-btn:hover { border-color: var(--accent); background: #fff; }
.zaak-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.zaak-btn svg { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }

.zaak-logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titel);
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 18px;
}
.zaak-logo.zaak-logo--beeld {
  width: auto;
  max-width: 230px;
  height: auto;
  background: none;
  border-radius: 0;
}
.zaak-logo--beeld img {
  width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------------------
   Laden en meldingen
   --------------------------------------------------------------------------- */
.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: var(--fout-zacht);
  color: var(--fout);
}
.error-icon svg { width: 28px; height: 28px; }

.footer {
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.link-btn:disabled { opacity: 0.5; cursor: default; }
.link-btn--klein { font-size: 13px; padding: 2px 0; }

/* ---------------------------------------------------------------------------
   Reacties (D2)
   --------------------------------------------------------------------------- */
.paneel {
  width: 100%;
  max-width: 720px;
}

/* Logo met de naam van de zaak er altijd onder */
.zaak-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}
.zaak-kop .zaak-logo { margin-bottom: 12px; }
.titel--zaak { margin: 0; font-size: 26px; }
.zaak-kop .link-btn { margin-top: 4px; }

/* Filterknoppen onder elkaar, over de volle breedte */
.tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.tab {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 16px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  touch-action: manipulation;
}
.tab:hover { color: var(--ink); border-color: var(--secondary); }
.tab--actief, .tab--actief:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab-teller {
  font-size: 13px;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  text-align: center;
}

.filters { margin-bottom: 18px; }
.filters .select { width: 100%; }
.select {
  font-family: var(--font-tekst);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.reactie-lijst { display: flex; flex-direction: column; gap: 14px; }
.leeg {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.reactie {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid rgba(44,36,24,0.08);
  box-shadow: 0 10px 24px -18px rgba(44, 36, 24, 0.4);
  padding: 18px 18px 14px;
  border-left: 4px solid transparent;
}
.reactie--aandacht { border-left-color: var(--fout); }

.reactie-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sterren { display: inline-flex; gap: 2px; color: var(--accent); }
.sterren svg { width: 18px; height: 18px; }
.sterren--1, .sterren--2 { color: var(--fout); }
.reactie-datum { font-size: 13px; color: var(--ink-soft); }

.reactie-labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.label {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
}
.label--aandacht { background: var(--fout-zacht); color: var(--fout); }

.reactie-tekst {
  font-size: 15.5px;
  line-height: 1.55;
  margin: 12px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.reactie-tekst--leeg { color: var(--ink-soft); font-style: italic; font-size: 14px; }
.reactie-taal { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }

.knop-labels {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.knop-labels li {
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.6);
}

/* Richting van een aangetikte knop: duim + zachte kleur (nooit enkel kleur) */
.knop-labels li[class*="knop-label--"] { display: inline-flex; align-items: center; gap: 6px; }
.knop-labels li svg { width: 13px; height: 13px; flex-shrink: 0; }
.knop-labels .knop-label--positief { background: #EAF4EC; border-color: #8DBB98; color: #2C5A38; }
.knop-labels .knop-label--negatief { background: #FAEDEA; border-color: #D5A197; color: #7E3328; }

.contact-blok {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.contact-titel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contact-lijst {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.contact-lijst li { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.contact-lijst svg { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }
.contact-lijst a { color: var(--accent-dark); text-underline-offset: 3px; }

.wis-vraag {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--fout-zacht);
  font-size: 14px;
  line-height: 1.5;
}
.wis-vraag p { margin: 0 0 10px; }
.wis-knoppen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gevaar-btn {
  border: none;
  background: var(--fout);
  color: #fff;
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.gevaar-btn:disabled { opacity: 0.6; cursor: default; }
.gevaar-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.kaart-melding { font-size: 13.5px; margin: 12px 0 0; }
.kaart-melding--fout { color: var(--fout); }
.kaart-melding--ok { color: var(--accent-dark); }

.reactie-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.klein-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent-dark);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.klein-btn:hover { background: var(--accent); color: var(--accent-contrast); }
.klein-btn:disabled { opacity: 0.6; cursor: default; }
.klein-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.klein-btn svg { width: 16px; height: 16px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}
.status--ok { color: var(--accent-dark); }
.status svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   Keuze tussen "Reacties" en "Cijfers" (D3)
   --------------------------------------------------------------------------- */
.pagina-keuze {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pagina-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-tekst);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.pagina-btn:hover { color: var(--ink); }
.pagina-btn--actief, .pagina-btn--actief:hover { background: var(--accent); color: var(--accent-contrast); }
.pagina-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pagina-btn--icoon { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.pagina-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Smal scherm: "Aanpassen" enkel als icoontje, zodat alles op één lijn past in elke taal */
@media (max-width: 560px) {
  .pagina-keuze { grid-template-columns: 1fr 1fr 48px 48px; }
  .pagina-btn--icoon { padding: 11px 0; }
  .pagina-btn--icoon .pagina-tekst { display: none; }
}
/* Een medewerker ziet 3 pagina's, een eigenaar 5 (met Team) */
.pagina-keuze--3 { grid-template-columns: 1fr 1fr 1fr; }
.pagina-keuze--5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
@media (max-width: 720px) {
  .pagina-keuze--5 { grid-template-columns: 1fr 1fr 48px 48px 48px; }
  .pagina-keuze--5 .pagina-btn--icoon { padding: 11px 0; }
  .pagina-keuze--5 .pagina-btn--icoon .pagina-tekst { display: none; }
}
@media (max-width: 560px) {
  .pagina-keuze--3 { grid-template-columns: 1fr 1fr 48px; }
}

/* ---------------------------------------------------------------------------
   Hulp (D5)
   --------------------------------------------------------------------------- */
.hulp-faq { text-align: center; margin: -6px 0 16px; font-size: 14.5px; }
.hulp-faq a, .hulp-dringend a { color: var(--accent-dark); font-weight: 600; }
.hulp-label { display: block; font-size: 14.5px; font-weight: 600; margin: 0 0 6px; }
#hulp-form .select { width: 100%; margin-bottom: 16px; }
.hulp-bericht { resize: vertical; min-height: 130px; line-height: 1.5; }
.select.fout, .text-input.fout { border-color: var(--fout); }
.hulp-verstuur { margin-top: 12px; }
#hulp-form .veld-fout { margin: 8px 0 0; }
.hulpvragen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hulpvraag { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.5); }
.hulpvraag-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hulpvraag-onderwerp { font-weight: 600; font-size: 14.5px; }
.hulpvraag-datum { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 8px; }
.hulpvraag-tekst { margin: 0; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.hulpvraag-antwoord { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.hulpvraag-antwoord-kop { font-size: 12.5px; font-weight: 600; color: var(--accent-dark); margin: 0 0 4px; }
.label--open { background: var(--paper); color: var(--ink-soft); }
.label--klaar { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-dark); }
.hulp-bericht-blok + .hulp-bericht-blok { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.hulp-reageer { margin-top: 10px; }
.hulp-reactie { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.hulp-reactie .hulp-bericht { min-height: 90px; }
.hulp-reactie .veld-fout { margin: 8px 0 0; }
.hulp-reactie-knoppen { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.hulp-lijst-melding { margin: -4px 0 12px; }
.hulp-dringend { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin: 18px 0 0; }

/* ---------------------------------------------------------------------------
   Cijfers (D3)
   --------------------------------------------------------------------------- */
.periode-keuze {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
@media (max-width: 560px) {
  .periode-keuze { grid-template-columns: 1fr 1fr; }
}
.periode-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.periode-btn:hover { border-color: var(--secondary); }
.periode-btn--actief, .periode-btn--actief:hover { background: var(--ink); border-color: var(--ink); color: var(--card); }
.periode-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.periode-uitleg {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 18px;
}

.cijfers-houder { position: relative; }
.cijfers { transition: opacity 0.2s ease; }
.cijfers--laden { opacity: 0.35; pointer-events: none; }
.cijfers-lader {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 14px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 10px 24px -12px rgba(44, 36, 24, 0.4);
}

/* Kerncijfers */
.tegels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .tegels { grid-template-columns: 1fr 1fr; }
}
.tegel {
  background: var(--card);
  border: 1px solid rgba(44,36,24,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(44, 36, 24, 0.4);
  padding: 14px 14px 12px;
  min-width: 0;
}
.tegel-label, .tegel-waarde, .tegel-sub, .delta { margin: 0; }
.tegel-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tegel-label .info-btn { margin: -6px -6px -6px 0; }
.tegel-waarde {
  font-family: var(--font-tekst);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 6px;
  color: var(--ink);
}
.tegel-ster { font-size: 20px; margin-left: 3px; color: var(--accent); }
.tegel-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.delta { font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.delta--op { color: var(--accent-dark); }
.delta--neer { color: var(--fout); }
.delta--gelijk { color: var(--ink-soft); font-weight: 400; }

.blok {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid rgba(44,36,24,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(44, 36, 24, 0.4);
  padding: 18px;
}
.blok-titel {
  font-family: var(--font-titel);
  font-weight: 500;
  font-size: 19px;
  margin: 0 0 12px;
}
.blok-uitleg { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: -6px 0 14px; }
.zacht { color: var(--ink-soft); font-weight: 400; }

/* Horizontale balken (sterren en knoppen) */
.balk {
  display: block;
  flex: 1;
  height: 10px;
  min-width: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  overflow: hidden;
}
.balk-vul {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
}
.verdeling { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.verdeling-rij { display: flex; align-items: center; gap: 12px; }
.verdeling-label { width: 34px; flex-shrink: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.verdeling-waarde {
  flex-shrink: 0;
  min-width: 78px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.knop-cijfers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.knop-naam { font-size: 14.5px; margin: 0 0 6px; }
.knop-rij { display: flex; align-items: center; gap: 12px; }
.knop-score { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
/* Wat viel op: balk met positief (groen) en negatief (rood) naast elkaar */
.balk--duim { display: flex; overflow: hidden; }
.balk--duim .balk-vul { border-radius: 0; flex-shrink: 0; }
.balk--duim .balk-vul--pos { background: #3F7A4E; }
.balk--duim .balk-vul--neg { background: #A5483A; }
.knop-richting { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; margin: 5px 0 0; }
.knop-richting > span { display: inline-flex; align-items: center; gap: 5px; }
.knop-richting svg { width: 13px; height: 13px; }
.knop-pos { color: #2C5A38; }
.knop-neg { color: #7E3328; }
.opval-keuze { margin: 2px 0 16px; }

/* Verloop (zie ook "Grafieken vergelijken per vestiging" onderaan) */
.grafiek { margin: 0 0 14px; }
.grafiek-titel { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.grafiek-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.as-tekst { font-family: var(--font-tekst); font-size: 11px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.raster { stroke: var(--line); stroke-width: 1; }
.kolom { fill: var(--accent); }
.kolom.actief { fill: var(--accent-dark); }
.vak-strook { fill: transparent; }
.vak-strook.actief { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.vak-hit { fill: transparent; cursor: pointer; }

.tabel-weergave { margin-top: 4px; font-size: 14px; }
.tabel-weergave summary { cursor: pointer; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.tabel-weergave table { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.tabel-weergave th, .tabel-weergave td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.tabel-weergave th { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.tabel-weergave td:not(:first-child), .tabel-weergave th:not(:first-child) { text-align: right; }

/* ---------------------------------------------------------------------------
   Aanpassen (D4a)
   --------------------------------------------------------------------------- */
.paneel--breed { max-width: 960px; }
.aanp-uitleg { font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-align: center; margin: 0 auto 16px; max-width: 560px; }

/* Twee kolommen op een breed scherm; op een smal scherm één van beide, via de knoppen */
.aanp-tabs { display: none; }
.aanp-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.aanp-instellingen > .blok:first-child { margin-top: 0; }
.aanp-voorbeeld { position: sticky; top: 16px; }
@media (max-width: 900px) {
  .aanp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
  }
  .aanp-raster { grid-template-columns: minmax(0, 1fr); }
  .aanp-raster .aanp-voorbeeld { display: none; position: static; }
  .aanp-raster--voorbeeld .aanp-voorbeeld { display: block; }
  .aanp-raster--voorbeeld .aanp-instellingen { display: none; }
}
.aanp-tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.aanp-tab--actief { background: var(--ink); border-color: var(--ink); color: var(--card); }
.aanp-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.blok-uitleg--onder { margin: 12px 0 0; }

/* Logo */
.logo-rij { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.logo-vak {
  width: 150px;
  height: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.logo-vak img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-letter {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  font-family: var(--font-titel);
  font-size: 24px;
}
.logo-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-kies { cursor: pointer; }
.logo-kies:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.label--nieuw { display: inline-block; margin-top: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--accent-dark); }

/* Kleuren */
.kleur-rij {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.kleur-staal {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}
.kleur-staal::-webkit-color-swatch-wrapper { padding: 3px; }
.kleur-staal::-webkit-color-swatch { border: none; border-radius: 9px; }
.kleur-staal::-moz-color-swatch { border: none; border-radius: 9px; }
.kleur-staal:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kleur-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kleur-tekst label { font-size: 14.5px; font-weight: 600; }
.kleur-tekst span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.hex-input { padding: 10px 10px; font-size: 15px; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.hex-fout { margin: 6px 0 0; }
#kleur-waarschuwingen:not(:empty) { margin-top: 12px; }
.waarschuwing {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fout-zacht);
  color: var(--fout);
  font-size: 13.5px;
  line-height: 1.45;
}
.waarschuwing svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
#kleuren-standaard { margin-top: 10px; }

/* Keuzes: lettertype en aanspreekvorm */
.keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.keuzes--aanspreekvorm, .keuzes--duimpjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .keuzes--lettertype { grid-template-columns: minmax(0, 1fr); }
}
.keuze {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.keuze:hover { border-color: var(--secondary); }
.keuze--actief, .keuze--actief:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.keuze:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.keuze-naam { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.keuze-voorbeeld { font-size: 17px; line-height: 1.3; color: var(--ink); }
.lettertype-klassiek { font-family: 'Fraunces', Georgia, serif; }
.lettertype-modern { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.lettertype-warm { font-family: 'Lora', Georgia, serif; }

/* Teksten (D4b) */
.blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.blok-kop .blok-titel { margin: 0; }
.tekst-talen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.tekst-talen-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tekst-talen-knoppen { display: flex; gap: 6px; }
.tekst-taal { min-width: 52px; padding: 7px 12px; }
.tekst-scherm {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tekst-veld { padding: 10px 0 4px; }
.tekst-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tekst-kop label { font-size: 14.5px; font-weight: 600; }
.tekst-kop .link-btn { flex-shrink: 0; }
.tekst-input { resize: vertical; min-height: 56px; line-height: 1.45; padding: 10px 12px; }
.tekst-input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.tekst-onder { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.invul-rij { display: flex; gap: 6px; flex-wrap: wrap; }
.invul-btn {
  border: 1px dashed var(--line);
  background: none;
  color: var(--ink-soft);
  font-family: var(--font-tekst);
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}
.invul-btn:hover { color: var(--ink); border-color: var(--secondary); }
.invul-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.teller { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tekst-meldingen:not(:empty) { margin-top: 8px; }
.tekst-fout { margin: 0 0 6px; }
.waarschuwing--zacht { background: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--ink); }
.waarschuwing--zacht svg { color: var(--accent-dark); }
.aanp-fouten { margin: 0 0 10px; }
/* Herinnering: ook de andere talen aanpassen (blokkeert het opslaan niet) */
.vertaal-melding {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--fout);
  background: color-mix(in srgb, var(--fout-zacht) 60%, var(--card));
  font-size: 13.5px;
  line-height: 1.45;
}
.vertaal-melding p { margin: 0 0 8px; }
.vertaal-knoppen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vertaal-naar { font-size: 13px; padding: 6px 12px; }

/* Knoppen (D4c) */
.knoppen-teller { font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.knoppen-lijst { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.knop-rij-beheer {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  padding: 8px 10px;
}
.knop-rij-beheer--open { border-color: var(--accent); }
.knop-rij-beheer--verborgen { background: none; border-style: dashed; }
.knop-rij-beheer .tekst-meldingen:not(:empty) { margin: 6px 0 0; }
.knop-hoofd { display: flex; align-items: center; gap: 10px; }
.knop-pijlen { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.pijl-btn {
  width: 30px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.pijl-btn svg { width: 16px; height: 16px; }
.pijl-btn:hover:not(:disabled) { border-color: var(--accent); }
.pijl-btn:disabled { opacity: 0.3; cursor: default; }
.pijl-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.knop-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.knop-naam-beheer { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.knop-terugval { color: var(--ink-soft); font-style: italic; }
.knop-labels-beheer:empty { display: none; }
.label--klein { font-size: 11px; padding: 2px 8px; align-self: flex-start; display: inline-block; }
.label--nieuw-knop { background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--accent-dark); }
.knop-acties { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.knop-bewerk { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.knop-uitleg { margin: 0 0 10px; }
.knop-input { min-height: 0; }
.knop-toevoegen { margin-top: 12px; }
.blok-kop-rechts { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.knop-acties--rij { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.archief-wissel { display: block; margin-top: 16px; }
.herstel-melding { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

/* Opslaan: blijft onderaan in beeld tijdens het scrollen, zolang er iets op te slaan is */
.opslaan-balk {
  z-index: 2;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -18px rgba(44, 36, 24, 0.55);
}
.opslaan-balk--open { position: sticky; bottom: 12px; border-color: var(--accent); }
.opslaan-balk .kaart-melding { margin: 0 0 10px; }
.opslaan-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aanp-status { font-size: 13px; color: var(--ink-soft); margin-right: auto; }
.aanp-status--open { color: var(--ink); font-weight: 600; }
.opslaan-btn { width: auto; min-height: 44px; padding: 11px 22px; margin: 0; font-size: 15px; }

/* Voorbeeld: de echte feedbackpagina in een kader in de vorm van een gsm */
.voorbeeld-kop { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.voorbeeld-kop .blok-uitleg { margin: 0; }
.voorbeeld-herstart { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.voorbeeld-herstart svg { width: 14px; height: 14px; }
.voorbeeld-herstart-uitleg { font-size: 12px; color: var(--ink-soft); margin: 0 0 0 20px; }
.telefoon {
  width: 100%;
  max-width: 380px;
  height: 740px;
  max-height: calc(100vh - 110px);
  min-height: 520px;
  margin: 0 auto;
  border-radius: 28px;
  border: 8px solid var(--ink);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 24px 48px -24px rgba(44, 36, 24, 0.45);
}
.telefoon iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Info-icoontjes (D5b) */
.info-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -6px -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
}
.info-btn svg { width: 17px; height: 17px; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent); }
.info-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

.info-kop { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.info-kop .blok-titel, .info-kop .tekst-scherm { margin: 0; }
.blok-kop .info-kop { margin-bottom: 0; }
.info-kop--h3 {
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.info-kop--h3 .tekst-scherm { padding: 0; border: 0; }

.tab-rij { display: flex; align-items: center; gap: 6px; }
.tab-rij .tab { flex: 1; min-width: 0; }
.tab-rij .info-btn { margin: 0; }
.info-plaats { width: 32px; flex-shrink: 0; }

.info-ballon {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 40px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}
.info-ballon[hidden] { display: none; }
.info-ballon p { margin: 0; }
.info-ballon p + p { margin-top: 6px; }
.info-ballon .info-ballon-titel { font-weight: 600; margin-bottom: 4px; }
.info-sluit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.info-sluit svg { width: 15px; height: 15px; }
.info-sluit:hover { color: var(--ink); }
.info-sluit:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.tabs .info-ballon { margin: 0; }
.tegels + .info-ballon, .tegels ~ .info-ballon:not([hidden]) { margin: 10px 0 0; }
.periode-uitleg + .info-ballon { margin-top: -8px; }

@media (prefers-reduced-motion: no-preference) {
  .info-ballon:not([hidden]) { animation: info-open 0.15s ease-out; }
  @keyframes info-open { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------------------
   Team (C3b, enkel eigenaar)
   --------------------------------------------------------------------------- */
.team-lijst { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.team-persoon { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.5); }
.team-persoon--uit { opacity: 0.75; border-style: dashed; }
.team-persoon--nieuw { margin-top: 4px; }
.team-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-naam { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.team-sub { font-size: 13px; color: var(--ink-soft); margin: 3px 0 0; overflow-wrap: anywhere; }
.team-bereik { font-size: 13.5px; margin: 6px 0 0; }
.team-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.team-status .team-sub { margin: 0; }
.team-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.team-nieuw { margin-top: 2px; }
.team-bericht { margin: 0 0 12px; }
.team-form-titel { font-family: var(--font-titel); font-weight: 500; font-size: 17px; margin: 0 0 12px; }
.team-form-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.team-form-knoppen .primary-btn { width: auto; min-width: 180px; margin: 0; }
@media (max-width: 560px) { .team-form-knoppen .primary-btn { width: 100%; } }
.team-keuze { border: none; padding: 0; margin: 0 0 16px; min-width: 0; }
.team-keuze legend { padding: 0; }
.team-vinkje { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.team-vinkje input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.team-vinkje span { overflow-wrap: anywhere; }
.team-vestigingen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 2px 0 0 26px; }
.team-vestigingen--uit { opacity: 0.45; }
.veld-fout--onder { margin: 6px 0 0; }
.team-link { margin: 0 0 14px; padding: 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.team-link-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-dark); margin: 0 0 10px; }
.team-link-titel svg { width: 17px; height: 17px; flex-shrink: 0; }
.team-link-veld { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: #fff; }
.team-waarschuwing { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--fout-zacht); color: var(--fout); font-size: 13.5px; line-height: 1.45; }
.team-waarschuwing svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

/* ---------------------------------------------------------------------------
   Vestigingen kiezen (tegels): welke vestiging(en) er bekeken worden
   --------------------------------------------------------------------------- */
.zaak-vestiging {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.vest-kiezer {
  margin: -8px 0 20px;
  background: var(--card);
  border: 1px solid rgba(44,36,24,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(44, 36, 24, 0.4);
  padding: 14px 16px 12px;
}
.vest-kiezer--een { padding: 10px 16px; }
.vest-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vest-kop .info-kop { margin-bottom: 0; }
.vest-titel { margin: 0; font-family: var(--font-titel); font-weight: 500; font-size: 17px; }
.vest-kiezer > .info-ballon:not([hidden]) { margin: 10px 0 0; }
.vest-klap { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vest-klap svg { width: 15px; height: 15px; }

.vest-tegels { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vest-zoek { margin-bottom: 2px; }
.vest-rooster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 560px) {
  .vest-rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vest-tegel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 11px;
  font-family: var(--font-tekst);
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vest-tegel[hidden] { display: none; }
.vest-tegel:hover { border-color: var(--line); }
.vest-tegel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vest-tegel--gekozen, .vest-tegel--gekozen:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border-color: var(--accent);
  color: var(--ink);
}
.vest-vinkje {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vest-tegel--gekozen .vest-vinkje { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.vest-vinkje svg { width: 11px; height: 11px; }
.vest-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vest-naam { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.vest-extra { font-weight: 400; color: var(--ink-soft); }
.vest-cijfers { font-size: 12.5px; color: var(--ink-soft); }
.vest-deel { white-space: nowrap; }
.vest-cijfers strong { font-weight: 600; color: var(--ink); }
.vest-cijfers .vest-aandacht { color: var(--fout); }
.vest-cijfers--laden { opacity: 0.6; }
.vest-tegel--alle .vest-tekst { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; flex: 1; }
.vest-geen { margin: 0; font-size: 13px; color: var(--ink-soft); }

.vest-herkomst {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.vest-kiezer--dicht .vest-herkomst, .vest-kiezer--een .vest-herkomst { margin-top: 8px; }
.vest-kiezer--een .vest-herkomst { margin: 0; }
.vest-herkomst svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.vest-herkomst--zaak { justify-content: center; margin: -12px 0 18px; font-weight: 400; color: var(--ink-soft); }
/* In de kleine tegels staat "aandacht nodig" op een eigen regel (past ook op een smalle gsm). */
.vest-rooster .vest-aandacht { display: block; }
.vest-rooster .vest-punt { display: none; }

/* Hulp: filter Alle / Open / Afgehandeld boven "Uw hulpvragen" */
.hulp-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.hulp-filter-teller { font-weight: 400; opacity: 0.75; margin-left: 2px; }

/* ---------------------------------------------------------------------------
   Grafieken vergelijken per vestiging
   Vaste volgorde van 8 kleuren, nagerekend voor kleurenblindheid (tegen de
   achtergrond van de kaart). Een kleur hoort bij een vestiging, niet bij haar
   plaats in de keuze. Tekst blijft altijd in inktkleur.
   --------------------------------------------------------------------------- */
.samen { --k: var(--accent); }
.kleur-0 { --k: #2a78d6; }
.kleur-1 { --k: #eb6834; }
.kleur-2 { --k: #1baf7a; }
.kleur-3 { --k: #eda100; }
.kleur-4 { --k: #e87ba4; }
.kleur-5 { --k: #008300; }
.kleur-6 { --k: #4a3aa7; }
.kleur-7 { --k: #e34948; }

.leg-kleur {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--k);
  flex-shrink: 0;
}
.vest-naam .leg-kleur { margin-right: 6px; vertical-align: 1px; }

.verloop-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.verloop-kop .info-kop, .verloop-kop .blok-titel { margin: 0; }
.graf-groot-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.graf-groot-btn svg { width: 15px; height: 15px; }

.graf-keuzes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.graf-rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  max-width: 100%;
}
.graf-keuzes > .segment { display: grid; grid-template-columns: repeat(4, 1fr); }
.segment-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.segment-btn:hover { background: var(--card); }
.segment-btn--actief, .segment-btn--actief:hover { background: var(--ink); color: var(--card); }
.segment-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.graf-afvlakken { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.graf-afvlakken input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }

.legende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.leg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.leg-btn:hover { border-color: var(--secondary); }
.leg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.leg-btn--uit { color: var(--ink-soft); font-weight: 400; text-decoration: line-through; }
.leg-btn--uit .leg-kleur { background: transparent; box-shadow: inset 0 0 0 2px var(--k); }
.graf-noot { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin: 4px 0 12px; display: flex; align-items: center; gap: 7px; }
.noot-punt { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); flex-shrink: 0; }
.graf-tip { font-size: 13px; color: var(--ink-soft); margin: -4px 0 10px; }

.vak-info { font-weight: 400; min-height: 0; margin: 6px 0 8px; }
.vak-titel { font-size: 14px; font-weight: 600; margin: 0; }
.vak-lijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 20px; }
.vak-rij {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  column-gap: 7px;
  align-items: baseline;
  font-size: 13.5px;
  min-width: 0;
}
.vak-rij .leg-kleur { align-self: center; }
.vak-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vak-waarde { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vak-basis { grid-column: 2 / 4; font-size: 12px; color: var(--ink-soft); }

.reeks-lijn { stroke: var(--k); stroke-width: 2; stroke-linecap: round; fill: none; }
.reeks-lijn--weinig { stroke-dasharray: 2 5; }
.punt { fill: var(--k, var(--accent)); stroke: var(--card); stroke-width: 2; }
.punt.actief { fill: var(--accent-dark); r: 5.5; }
.punt--weinig, .punt--weinig.actief { fill: var(--card); stroke: var(--k, var(--accent)); stroke-width: 2; }
.vak-punt { fill: var(--k); stroke: var(--card); stroke-width: 2; opacity: 0; pointer-events: none; }
.vak-punt.actief { opacity: 1; }
.eind-streep { stroke: var(--k); stroke-width: 3; stroke-linecap: round; }
.eind-label { font-family: var(--font-tekst); font-size: 12px; font-weight: 600; fill: var(--ink); }

.tabel-schuif { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabel-schuif table { min-width: 100%; }
.tabel-weergave th, .tabel-weergave td { white-space: nowrap; }

/* Vergelijkingstabel */
.vgl-tabel { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.vgl-tabel th, .vgl-tabel td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.vgl-tabel thead th { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; vertical-align: bottom; }
.vgl-tabel th:first-child, .vgl-tabel tbody th, .vgl-tabel tfoot th { text-align: left; }
.vgl-tabel tbody th { font-weight: 600; white-space: normal; min-width: 110px; }
.vgl-tabel tfoot th, .vgl-tabel tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--line); }
.vgl-naam { display: inline-flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.vgl-sort {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.vgl-sort--actief { color: var(--ink); }
.vgl-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.vgl-onzeker { color: var(--ink-soft); }

/* Vergrote grafiek: over het hele scherm */
body.geen-scroll { overflow: hidden; }
.groot-laag {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(35, 40, 43, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.groot-venster {
  width: 100%;
  max-width: 1448px;
  max-height: 100%;
  overflow: auto;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
  padding: 18px 22px 20px;
}
@media (max-width: 600px) {
  .groot-laag { padding: 0; }
  .groot-venster { border-radius: 0; height: 100%; padding: 14px 16px 18px; }
}
.groot-sluit {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.groot-sluit svg { width: 20px; height: 20px; }
.groot-sluit:hover { border-color: var(--secondary); }
.groot-sluit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Weergaves per vestiging: kolommen naast elkaar, gestapeld, totaal */
.graf-vormen { display: flex; flex-direction: column; gap: 4px; }
.graf-vormen .segment { display: grid; grid-template-columns: repeat(4, 1fr); }
.graf-vormen .segment-btn { white-space: normal; line-height: 1.2; }
.segment-btn:disabled { color: var(--ink-soft); opacity: 0.55; cursor: not-allowed; }
.segment-btn:disabled:hover { background: transparent; }
@media (max-width: 560px) {
  .graf-vormen .segment { grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .graf-vormen .segment-btn { border-radius: 12px; }
}
.kolom-v { fill: var(--k); }
.kolom--weinig { fill-opacity: 0.35; }
.kolom.kolom--weinig { fill-opacity: 0.35; }
.noot-kolom { width: 10px; height: 12px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 35%, transparent); flex-shrink: 0; }
.vak-rij--totaal { border-top: 1px solid var(--line); padding-top: 3px; margin-top: 2px; font-weight: 600; }

/* Zijwaarts schuiven: de getallen van de as blijven links staan */
.graf-schuif-houder { display: flex; align-items: flex-start; }
.graf-as { flex-shrink: 0; display: block; }
.graf-schuif { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; min-width: 0; flex: 1; }
.graf-schuif:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.graf-schuif .grafiek-svg { max-width: none; }

/* Totaal per vestiging: horizontale balken */
.totaal-lijst { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.totaal-rij {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(40px, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.totaal-naam { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.totaal-balk { height: 14px; background: var(--paper); }
.balk-vul[class*="kleur-"], .balk-vul.samen { background: var(--k); border-radius: 0 4px 4px 0; }
.totaal-rij--weinig .balk-vul { opacity: 0.35; }
.totaal-waarde { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 54px; text-align: right; }
@media (max-width: 480px) {
  .totaal-rij { grid-template-columns: 1fr auto; row-gap: 4px; }
  .totaal-balk { grid-column: 1 / -1; grid-row: 2; }
}

/* Wanneer? (drukste momenten) */
.wan-piek { font-size: 14.5px; line-height: 1.5; margin: 0 0 4px; }
.wan-info { font-size: 13.5px; font-weight: 400; min-height: 2.9em; margin: 4px 0 6px; }
.wan-raster-houder { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wan-raster { max-width: none; }
.wan-vak { stroke: transparent; stroke-width: 2; }
.wan-vak--leeg { fill: transparent; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.wan-vak.actief { stroke: var(--ink); }
.wan-punt { fill: var(--ink-soft); }
.wan-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 4px; }
.wan-legende > span { margin: 0 4px; }
.wan-legende svg { display: block; }
.wan-legende-punt { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px !important; }
.blok--wanneer .grafiek { margin-top: 16px; }

/* Exporteren (rapport.js): knop met menu bij Cijfers en in de vergrote grafiek */
.export-rij { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.groot-acties { display: flex; align-items: center; gap: 8px; }
.export { position: relative; }
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  touch-action: manipulation;
}
.export-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.export-btn .export-pijl { display: inline-flex; }
.export-btn .export-pijl svg { width: 14px; height: 14px; }
.export-btn[aria-expanded="true"] .export-pijl { transform: rotate(180deg); }
.export-btn:hover { border-color: var(--secondary); }
.export-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.export-btn:disabled { opacity: 0.5; cursor: default; }
.export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: min(300px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.35);
  padding: 6px;
}
.export-optie {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-tekst);
  color: var(--ink);
}
.export-optie:hover, .export-optie:focus-visible { background: var(--paper); outline: none; }
.export-optie-icoon { color: var(--accent); display: inline-flex; margin-top: 1px; }
.export-optie-icoon svg { width: 20px; height: 20px; }
.export-optie-naam { display: block; font-weight: 600; font-size: 14.5px; }
.export-optie-uitleg { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

/* Venster "PDF-rapport maken" */
.rap-laag { z-index: 70; }
.rap-venster { max-width: 520px; }
.rap-venster .blok-titel:focus { outline: none; }
.rap-intro { margin: 0 0 12px; text-align: left; }
.rap-gegevens { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; font-size: 13.5px; }
.rap-gegevens dt { font-weight: 600; color: var(--ink-soft); }
.rap-gegevens dd { margin: 0; overflow-wrap: anywhere; }
.rap-kop { font-weight: 600; font-size: 14px; margin: 14px 0 8px; }
.rap-altijd { cursor: default; color: var(--ink-soft); }
.rap-privacy { margin: 12px 0 16px; }
.rap-venster .primary-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rap-venster .primary-btn svg { width: 18px; height: 18px; }
.rap-annuleer { display: block; margin: 8px auto 0; }
.rap-bezig { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 4px; font-size: 14px; color: var(--ink-soft); }
.rap-bezig p { margin: 0; }
.rap-klaar { background: var(--paper); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.rap-klaar p { margin: 0 0 4px; }
.rap-bestand { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .rap-venster { max-width: none; }
}