/* Stijl van de app, volgens het CORE design system. Alle kleuren en maten komen uit tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-body);
  line-height: var(--regelafstand-lopend);
  letter-spacing: var(--spatiering);
  font-kerning: normal;
}
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: var(--gewicht-kop);
  line-height: var(--regelafstand);
  letter-spacing: var(--spatiering);
  margin: 0 0 .6em;
}
h1 { font-size: var(--tekst-kop-1); }
h2 { font-size: var(--tekst-kop-2); }
h3 { font-size: var(--tekst-kop-3); }
.titel { font-family: var(--font-titel); font-weight: 500; font-size: var(--tekst-titel); line-height: 1; letter-spacing: 0; }
p { margin: 0 0 .8em; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--schaduw-focus); border-radius: var(--radius-klein); }
::selection { background: var(--kleur-accent); color: var(--core-zwart); }
img { max-width: 100%; }

/* Kop en voet */
.site-header {
  display: flex; gap: var(--ruimte); align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 1rem clamp(1rem, 0.4rem + 2.6vw, 3rem);
  border-bottom: 1px solid var(--kleur-lijn);
}
.logo { display: inline-flex; border-radius: var(--radius-pil); }
.logo svg { height: 2rem; width: auto; display: block; }
.site-header nav { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; align-items: center; }
.site-header nav a {
  font-weight: var(--gewicht-kop); font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht);
  text-decoration: none; transition: color var(--overgang);
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--kleur-tekst); }
.site-header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .5em; }
.site-header nav button.link { font-size: var(--tekst-klein); font-weight: var(--gewicht-kop); color: var(--kleur-tekst-zacht); text-decoration: none; }
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte);
  padding: 1.5rem clamp(1rem, 0.4rem + 2.6vw, 3rem); margin-top: 3rem;
  border-top: 1px solid var(--kleur-lijn); color: var(--kleur-tekst-zacht); font-size: var(--tekst-klein);
}
.site-footer svg { height: 1.25rem; width: auto; }
main { max-width: var(--max-breedte); margin: 0 auto; padding: 2rem var(--ruimte) 5rem; }

/* Intro met bol (publieke startpagina) */
.intro { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ruimte); margin-bottom: 2rem; }
.intro .titel { margin: 0 0 1rem; }
.intro p { color: var(--kleur-tekst-zacht); max-width: 28rem; }
.bol { width: clamp(6rem, 18vw, 11rem); height: auto; animation: ademen 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes ademen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .bol { animation: none; } }
@media (max-width: 480px) { .intro { grid-template-columns: 1fr; } .bol { justify-self: start; order: -1; width: 5rem; } }

/* Kaarten */
.kaart {
  background: var(--kleur-vlak);
  border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 2rem); margin-bottom: var(--ruimte);
}
.kaart > h1:first-child, .kaart > h2:first-child { margin-top: 0; }

/* Formulieren */
label { display: block; font-weight: var(--gewicht-kop); font-size: var(--tekst-klein); margin: 1.1rem 0 .4rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%; padding: .75rem 1rem; font: inherit; letter-spacing: inherit; color: var(--kleur-tekst);
  border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein); background: var(--core-wit);
  transition: border-color var(--overgang);
}
input:hover, textarea:hover, select:hover { border-color: rgb(0 0 0 / 0.4); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--kleur-tekst); }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--kleur-actie); vertical-align: -0.15em; }
input[type=number] { max-width: 10rem; }
.helptekst { color: var(--kleur-tekst-zacht); font-size: var(--tekst-klein); margin: .35rem 0 0; }
.errorlist { color: var(--kleur-fout); list-style: none; padding: 0; margin: .35rem 0 0; font-size: var(--tekst-klein); font-weight: 500; }

/* Knoppen: pil, zwart met crème (primair) */
button, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; margin-top: 1.5rem; padding: 0 1.5rem;
  font: inherit; font-weight: var(--gewicht-kop); letter-spacing: var(--spatiering); text-decoration: none; cursor: pointer;
  background: var(--kleur-actie); color: var(--kleur-op-actie);
  border: 1px solid var(--kleur-actie); border-radius: var(--radius-pil);
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
button:hover, .knop:hover { background: rgb(0 0 0 / 0.85); }
.knop.secundair, button.secundair { background: transparent; color: var(--kleur-tekst); border-color: rgb(0 0 0 / 0.4); }
.knop.secundair:hover, button.secundair:hover { border-color: var(--kleur-tekst); background: rgb(0 0 0 / 0.05); }
button.link {
  background: none; color: inherit; border: 0; min-height: 0; padding: 0; margin: 0; font-weight: 400;
  text-decoration: underline; text-underline-offset: .25em;
}
button.link:hover { background: none; text-decoration-thickness: 2px; }
button.gevaar { background: var(--kleur-fout); border-color: var(--kleur-fout); color: var(--core-wit); }
button:disabled { opacity: .4; pointer-events: none; }

/* Meldingen en tabellen */
.melding {
  padding: .9rem 1.25rem; border-radius: var(--radius-klein); margin-bottom: var(--ruimte);
  background: var(--kleur-vlak); border-left: 4px solid var(--kleur-lijn);
}
.melding.success { border-left-color: var(--kleur-succes); }
.melding.error { border-left-color: var(--kleur-fout); }
table { width: 100%; border-collapse: collapse; font-size: var(--tekst-klein); }
th, td { text-align: left; padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--kleur-lijn); vertical-align: top; }
th { color: var(--kleur-tekst-zacht); font-weight: var(--gewicht-kop); }
.profielfoto { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.zacht { color: var(--kleur-tekst-zacht); }
@media (max-width: 480px) { main { padding: 1.25rem .75rem; } }

/* Publieke pagina's */
.trainer-kaart { display: flex; gap: 1.25rem; align-items: center; }
.trainer-kaart h1, .trainer-kaart h3 { margin: 0 0 .4rem; }
.trainer-kaart p:last-child { margin-bottom: 0; }
.keuze-kaart {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  border: 1px solid transparent; transition: border-color var(--overgang);
}
.keuze-kaart strong { font-size: var(--tekst-kop-3); }
.keuze-kaart:hover { border-color: var(--kleur-tekst); }
.weeknavigatie { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0 1rem; gap: .5rem; font-size: var(--tekst-klein); }
.weeknavigatie a { font-weight: var(--gewicht-kop); }
.dag { margin: 0 0 1rem; font-size: var(--tekst-kop-3); }
.dag::first-letter { text-transform: uppercase; }
.slots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.slots li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.slots-raster { flex-direction: row; flex-wrap: wrap; }
.slots-raster form { margin: 0; }
.slot-tijd { font-weight: var(--gewicht-kop); min-width: 3.5rem; }
.slot, button.slot {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: 0 1.1rem;
  background: transparent; color: var(--kleur-tekst); border: 1px solid rgb(0 0 0 / 0.4);
  border-radius: var(--radius-pil); text-decoration: none; font-weight: var(--gewicht-kop);
  font-variant-numeric: tabular-nums; transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.slot:hover, .slot:focus-visible, button.slot:hover { background: var(--kleur-actie); color: var(--kleur-op-actie); border-color: var(--kleur-actie); }
.tijdzone { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tijdzone label { font-weight: 400; font-size: var(--tekst-klein); color: var(--kleur-tekst-zacht); margin: 0; }
.tijdzone select { max-width: 18rem; padding: .5rem .9rem; font-size: var(--tekst-klein); }
fieldset.vraag { border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein); margin: var(--ruimte) 0; padding: 0 var(--ruimte) var(--ruimte); }
.les-regel {
  display: grid; grid-template-columns: minmax(7rem, auto) 1fr auto; gap: .5rem 1rem; align-items: center;
  padding: .9rem 0; border-bottom: 1px solid var(--kleur-lijn); text-decoration: none;
}
.les-regel:last-of-type { border-bottom: 0; }
.les-regel:hover .les-naam { text-decoration: underline; }
.les-tijd { font-weight: var(--gewicht-kop); font-variant-numeric: tabular-nums; white-space: nowrap; }
.les-plekken {
  font-size: var(--tekst-klein); font-weight: var(--gewicht-kop); padding: .3rem .8rem;
  border: 1px solid var(--kleur-tekst); border-radius: var(--radius-pil); white-space: nowrap;
}
.les-regel.vol { color: var(--kleur-tekst-zacht); }
.les-regel.vol .les-plekken { border-color: var(--kleur-lijn); }
.plekken { font-weight: var(--gewicht-kop); }
.plekken.vol { color: var(--kleur-fout); }
@media (max-width: 480px) { .les-regel { grid-template-columns: 1fr auto; } .les-naam { grid-column: 1 / -1; grid-row: 2; } }
.filter-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.filter-chips a {
  padding: .45rem 1rem; border: 1px solid rgb(0 0 0 / 0.4); border-radius: var(--radius-pil);
  text-decoration: none; font-size: var(--tekst-klein); font-weight: var(--gewicht-kop);
}
.filter-chips a[aria-current] { background: var(--kleur-actie); color: var(--kleur-op-actie); border-color: var(--kleur-actie); }
details.annuleren { margin-top: 1.5rem; }
details.annuleren summary { cursor: pointer; color: var(--kleur-fout); font-weight: var(--gewicht-kop); }

/* Dashboard */
.filters { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
.filters label { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.filters select, .filters input { width: auto; }
.filters button { margin: 0; }
.reeks { border-bottom: 1px solid var(--kleur-lijn); padding: 1rem 0; }
.reeks strong { display: block; }
.inline-form { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.inline-form label { margin: 0; font-weight: 400; }
.inline-form input { width: auto; }
.inline-form button { margin: 0; }
.label { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-pil); font-size: .8rem; font-weight: var(--gewicht-kop); border: 1px solid var(--kleur-lijn); }
.label.nieuw { background: var(--kleur-accent); color: var(--core-zwart); border-color: var(--kleur-accent); }

/* Feedback */
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feedback-knop { position: fixed; right: 1rem; bottom: 1rem; z-index: 10; margin: 0; min-height: 2.75rem; padding: 0 1.1rem; }
dialog.feedback {
  width: min(32rem, calc(100vw - 2rem)); padding: 0; border: 0;
  border-radius: var(--radius); background: var(--kleur-vlak); color: var(--kleur-tekst);
}
dialog.feedback::backdrop { background: rgb(0 0 0 / .45); }
dialog.feedback header, dialog.feedback footer { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.5rem; }
dialog.feedback header { justify-content: space-between; border-bottom: 1px solid var(--kleur-lijn); }
dialog.feedback header h2 { margin: 0; font-size: var(--tekst-kop-3); }
dialog.feedback .sluiten { background: none; color: inherit; border: 0; margin: 0; padding: .25rem; min-height: 0; }
.feedback-inhoud { padding: 0 1.5rem; }
.feedback-soorten { border: 0; padding: 0; margin: 1.25rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.feedback-soorten label {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer;
  padding: .9rem .25rem; border: 1px solid var(--kleur-lijn); border-radius: var(--radius-klein);
  font-size: var(--tekst-klein); text-align: center; color: var(--kleur-tekst-zacht);
}
.feedback-soorten input { position: absolute; opacity: 0; }
.feedback-soorten label:has(input:checked) { border-color: var(--kleur-tekst); color: var(--kleur-tekst); background: var(--kleur-achtergrond); }
.feedback-soorten label:has(input:focus-visible) { box-shadow: var(--schaduw-focus); }
.feedback-inhoud > label { text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; color: var(--kleur-tekst-zacht); }
.verplicht { color: var(--kleur-fout); }
.inspreken {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: .5rem; margin: .4rem 0; padding: .6rem 1rem; min-height: 0;
  background: none; color: var(--kleur-tekst-zacht); font-weight: 400;
  border: 1px dashed var(--kleur-lijn); border-radius: var(--radius-klein);
}
.inspreken:hover { background: none; border-color: var(--kleur-tekst-zacht); }
.inspreken.actief { color: var(--kleur-fout); border-color: var(--kleur-fout); }
.feedback-contact { margin-top: .75rem; font-size: var(--tekst-klein); }
.feedback-contact summary { cursor: pointer; color: var(--kleur-tekst-zacht); }
.feedback-pagina { color: var(--kleur-tekst-zacht); font-size: .8rem; margin: .5rem 0 0; word-break: break-all; }
.feedback-status { min-height: 1.25rem; margin: .25rem 0 0; font-size: var(--tekst-klein); }
dialog.feedback footer { border-top: 1px solid var(--kleur-lijn); margin-top: .75rem; }
dialog.feedback footer button { flex: 1; margin: 0; }
.feedback-lijst .melding-kop { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }

/* Ingebed op de eigen website: geen eigen achtergrond en minder witruimte */
body.embed { background: transparent; }
body.embed main { padding-top: 0; }