/* Kleuren. Blauw is bemonsterd uit app/static/app_icoon.png (#0f75bd, 30,8%
   van de pixels). De zonekleuren komen letterlijk uit app/domein.py:1358, zodat
   de site dezelfde kleurtaal spreekt als de app. */
:root {
  --blauw: #0f75bd;
  --blauw-donker: #0b5b94;
  --inkt: #16202a;
  --grijs: #5a6874;
  --lijn: #dfe5ea;
  --papier: #ffffff;
  --papier-zacht: #f5f8fa;

  --zone-1: #9ca3af;
  --zone-2: #3b82f6;
  --zone-3: #22c55e;
  --zone-4: #f97316;
  --zone-5: #ef4444;
  --zone-rust: #d1d5db;  /* _ZONE_ONBEKEND in app/domein.py */

  /* Systeemletters: geen externe letterbestanden, dus ook geen verzoek naar
     een andere partij. Dat is wat de privacyverklaring belooft. */
  --letters: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --breedte: 60rem;
  --ruimte: 1rem;
}

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

body {
  margin: 0;
  font-family: var(--letters);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }

a { color: var(--blauw-donker); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 2px;
}

/* Raster ---------------------------------------------------------------- */

.omhulsel { width: min(100% - 2rem, var(--breedte)); margin-inline: auto; }
.blok { padding: clamp(2.5rem, 8vw, 4.5rem) 0; }
.blok--zacht { background: var(--papier-zacht); }
.blok--blauw { background: var(--blauw); color: var(--papier); }
.blok--blauw a { color: var(--papier); }

/* Kopbalk --------------------------------------------------------------- */

.kopbalk {
  position: sticky; top: 0; z-index: 10;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.kopbalk__binnen {
  display: flex; align-items: center; gap: var(--ruimte);
  flex-wrap: wrap; padding: 0.75rem 0;
}
.kopbalk__naam { font-weight: 700; margin-right: auto; }
.kopbalk__naam a { color: inherit; text-decoration: none; }
.kopbalk__menu { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

/* Naam, drie ankerlinks en een knop passen niet op een telefoon; de kopbalk
   zou dan drie regels hoog worden en plakkend een derde van het scherm eten.
   De pagina heeft maar drie blokken, dus scrollen kan ook. */
@media (max-width: 34rem) {
  .kopbalk nav { display: none; }
}

/* Knoppen --------------------------------------------------------------- */

.knop {
  display: inline-block; padding: 0.7rem 1.25rem; border-radius: 0.4rem;
  font-weight: 600; text-decoration: none; border: 2px solid var(--blauw);
  background: var(--blauw); color: var(--papier); cursor: pointer;
}
.knop--rand { background: transparent; color: var(--blauw-donker); }
.blok--blauw .knop { background: var(--papier); color: var(--blauw-donker); border-color: var(--papier); }

/* Briefje naar training ------------------------------------------------- */

.omzetting { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) {
  /* Twee rijen met subgrid: het bijschrift van alle drie de kolommen krijgt
     dezelfde hoogte, zodat de toestellen op dezelfde lijn beginnen ook als
     de ene tekst over twee regels loopt en de andere over drie. */
  .omzetting {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.75rem; align-items: start;
  }
  .omzetting__stap { grid-row: span 2; grid-template-rows: subgrid; }
}
.zone-1 { background: var(--zone-1); }
.zone-2 { background: var(--zone-2); }
.zone-3 { background: var(--zone-3); }
.zone-4 { background: var(--zone-4); }
.zone-5 { background: var(--zone-5); }

/* Formulier ------------------------------------------------------------- */

.veld { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.veld label { font-weight: 600; }
.veld input, .veld select, .veld textarea {
  font: inherit; padding: 0.6rem 0.75rem;
  border: 1px solid var(--lijn); border-radius: 0.4rem; background: var(--papier);
  color: var(--inkt); width: 100%;
}
.veld textarea { min-height: 9rem; resize: vertical; }
.veld__fout { color: #b3261e; font-size: 0.9375rem; }

/* Honeypot. Moet hier staan en niet als style-attribuut: de CSP
   (default-src 'self') weigert inline stijl. */
.verborgen-veld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bevestiging {
  border: 1px solid var(--lijn); border-left: 4px solid var(--blauw);
  background: var(--papier-zacht); padding: 1rem 1.25rem; border-radius: 0.4rem;
  margin-bottom: 1.5rem;
}
.vangnet { color: var(--grijs); font-size: 0.9375rem; margin-bottom: 0; }

/* Voettekst ------------------------------------------------------------- */

.voettekst { border-top: 1px solid var(--lijn); padding: 2rem 0; color: var(--grijs); font-size: 0.9375rem; }
.voettekst ul { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }

.klein { font-size: 0.9375rem; color: var(--grijs); }
.blok--blauw .klein { color: var(--papier); }

/* Privacyverklaring ----------------------------------------------------- */

.verklaring { max-width: 44rem; }
.verklaring h2 { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.verklaring table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9375rem; }
.verklaring th, .verklaring td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--lijn); }
.verklaring th { background: var(--papier-zacht); }
/* Drie kolommen tekst passen niet op een telefoon; laat de tabel schuiven
   in plaats van de woorden tot letters per regel te persen. */
@media (max-width: 34rem) {
  .verklaring table { display: block; overflow-x: auto; }
}

/* Van briefje naar training --------------------------------------------- */
/* Drie kolommen: het appje van de coach, wat MTL Endurance ervan maakt, en
   waar het terechtkomt. Alles nagebouwd in HTML/CSS — geen schermafdrukken,
   dus niets dat veroudert bij een UI-wijziging en niets dat per ongeluk
   gegevens van een echte atleet toont. */

.omzetting__stap {
  margin: 0; display: grid; gap: 0.85rem; align-content: start;
  /* Niet uitrekken: het toestel is precies zo hoog als zijn scherm, anders
     blijft het donkere frame eronder zichtbaar. */
  justify-items: center; align-items: start;
}
.omzetting__bijschrift { display: flex; gap: 0.75rem; align-items: start; font-size: 0.9375rem; }
.omzetting__nummer {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--blauw); color: var(--papier);
  font-size: 1.05rem; font-weight: 700; flex: none;
}
/* Kleur het bijschrift via een eigen klasse, nooit via een afstammelings-
   selector op een element: die wint van .omzetting__nummer en kleurde het
   witte cijfer grijs op blauw (zo'n 1,6:1). */
.omzetting__tekst { color: var(--grijs); }
.omzetting__tekst strong {
  display: block; color: var(--inkt); font-size: 1rem; margin-bottom: 0.15rem;
}

/* Telefoon -------------------------------------------------------------- */
/* De telefoon is een container: alles in het scherm is uitgedrukt in cqw of em,
   zodat de nagebouwde schermen meeschalen met de breedte. Op een telefoon mag
   het toestel breder worden, en dan wordt de tekst erin vanzelf groter. */

.telefoon {
  container-type: inline-size;
  width: 100%; max-width: 20rem; margin-inline: auto;
  background: #1b1f24; border-radius: 2rem; padding: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Moet NA de basisregel staan: een mediaquery voegt geen specificiteit toe,
   dus bij gelijke selectors wint gewoon wie later komt. */
@media (min-width: 54rem) {
  .telefoon { max-width: 15rem; }
}
.telefoon__scherm {
  position: relative; border-radius: 1.6rem; overflow: hidden;
  background: var(--papier); aspect-ratio: 9 / 18;
  font-size: 0.5rem;          /* terugval als cqw niet werkt */
  font-size: 3.4cqw;
  line-height: 1.5;
}
.telefoon__eiland {
  position: absolute; top: 3cqw; left: 50%; transform: translateX(-50%);
  width: 24cqw; height: 6cqw; background: #1b1f24; border-radius: 6cqw; z-index: 3;
}
.telefoon__inhoud { position: absolute; inset: 0; overflow: hidden; padding: 3.8em 1.2em 0; }
.telefoon__vervaag {
  position: absolute; left: 0; right: 0; bottom: 0; height: 23cqw; z-index: 2;
  pointer-events: none;
}

/* Op een smal scherm weegt leesbaarheid zwaarder dan getrouwheid: iets
   grotere letter, dus minder inhoud zichtbaar. De vervaging onderaan laat
   toch al zien dat er meer is. */
@media (max-width: 53.99rem) {
  .telefoon__scherm { font-size: 3.9cqw; }
}

/* Kolom 1: het appje ---------------------------------------------------- */

.kletsscherm { background: var(--papier); }
.kletsscherm .telefoon__vervaag { background: linear-gradient(transparent, var(--papier)); }

/* Gesprekskop: laat zien van wie het bericht komt. */
.kletskop {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.6em;
  padding: 3.2em 1em 0.7em; background: var(--papier-zacht);
  border-bottom: 1px solid var(--lijn); color: var(--inkt);
}
.kletskop__terug { color: var(--grijs); }
.kletsavatar {
  width: 2.1em; height: 2.1em; border-radius: 50%; flex: none;
  background: var(--blauw); color: var(--papier);
  display: grid; place-items: center; font-size: 0.84em; font-weight: 700;
}
.kletskop__naam { display: grid; line-height: 1.2; font-weight: 600; }
.kletskop__naam small { font-size: 0.8em; font-weight: 400; color: var(--grijs); }
.kletsinhoud { padding-top: 6.2em; }

.kletsbubbel {
  background: var(--papier-zacht); color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: 1em 1em 1em 0.3em;
  padding: 0.9em 1em;
}
.kletsbubbel p { margin: 0 0 0.9em; }
.kletsbubbel p:last-child { margin-bottom: 0; }
.kletsbubbel b { display: block; margin-bottom: 0.2em; }
.kletsbubbel ul { margin: 0 0 0.9em; padding-left: 1.5em; }

/* Kolom 2: de app ------------------------------------------------------- */

.appscherm { background: var(--papier); }
.appscherm .telefoon__vervaag { background: linear-gradient(transparent, var(--papier)); }
.appdag { font-weight: 700; font-size: 1.1em; margin: 0 0 0.6em; }
.appdag--vandaag {
  background: #eceff1; border-radius: 0.5em;
  margin-inline: -0.45em; padding: 0.5em 0.45em 0.1em;
}
.appkaart {
  border: 1px solid var(--lijn); border-left: 0.3em solid var(--grijs);
  border-radius: 0.7em; padding: 0.7em 0.8em; margin-bottom: 0.8em;
  background: var(--papier);
}
.appkaart--zwemmen { border-left-color: var(--zone-2); }
.appkaart--fietsen { border-left-color: var(--zone-4); }
.appkaart--lopen   { border-left-color: var(--zone-3); }
.appkaart__kop { font-weight: 700; }
.appkaart__duur { color: var(--grijs); }
.appkaart__knop {
  border: 1px solid var(--lijn); border-radius: 0.5em;
  text-align: center; padding: 0.4em; margin-top: 0.6em; color: var(--grijs);
}

/* Het intensiteitsprofiel: staafjes per stap, in de zonekleuren van de app. */
.profiel {
  display: flex; align-items: flex-end; gap: 1px; height: 2.8em;
  background: #eceff1; border-radius: 0.3em; padding: 0 1px; overflow: hidden;
}
.profiel span { flex: 1; border-radius: 1px; }
.profiel .vrij { flex: 3; }
.profiel .breed { flex: 2; }
.profiel .breeder { flex: 3; }

/* De hoogte ís de intensiteit, net als in het profiel in de app. */
.profiel .zone-rust { background: var(--zone-rust); height: 22%; }
.profiel .zone-1 { height: 35%; }
.profiel .zone-2 { height: 52%; }
.profiel .zone-3 { height: 70%; }
.profiel .zone-4 { height: 86%; }
.profiel .zone-5 { height: 100%; }

/* Kolom 3: echte toestelkaders ------------------------------------------ */
/* Productfoto van de Fenix 8 en de Edge 850 als omhulsel, bijgesneden tot het
   toestel zelf — bij de Fenix scheelde het bandje ruim een derde van de hoogte.
   Het schermvenster is opgemeten: het ronde Fenix-scherm is 454x454 binnen een
   uitsnede van 640x640, het Edge-scherm 274x377 binnen 351x596. */

.apparaten { display: grid; gap: 0.75rem; justify-items: center; width: 100%; }
.apparaat { display: grid; gap: 0.25rem; justify-items: center; width: 100%; }
.apparaat__naam {
  font-size: 0.7rem; line-height: 1.3; color: var(--grijs);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}

.toestel { position: relative; width: 100%; margin-inline: auto; }
.toestel img { display: block; width: 100%; height: auto; }
.toestel__scherm { position: absolute; overflow: hidden; background: #000; }

.toestel--fenix { max-width: 14rem; }
.toestel--fenix .toestel__scherm {
  left: 14.53%; top: 14.53%; width: 70.94%; height: 70.94%; border-radius: 50%;
}
.toestel--edge { max-width: 11.5rem; }
.toestel--edge .toestel__scherm {
  left: 13.11%; top: 16.44%; width: 78.06%; height: 63.26%; background: #fff;
}

/* Naast elkaar is er minder ruimte per kolom dan wanneer alles onder elkaar
   staat. Ook hier: na de basisregels, niet ervoor. */
@media (min-width: 54rem) {
  .toestel--fenix { max-width: 8.99rem; }
  .toestel--edge { max-width: 7.41rem; }
}

/* Wisselende schermvlakken */
.vlakken { position: relative; width: 100%; height: 100%; }
.vlak { position: absolute; inset: 0; display: grid; }
.vlakken--2 .vlak:nth-child(1) { animation: vlak2a 8s infinite; }
.vlakken--2 .vlak:nth-child(2) { animation: vlak2b 8s infinite; }
.vlakken--3 .vlak:nth-child(1) { animation: vlak3a 12s infinite; }
.vlakken--3 .vlak:nth-child(2) { animation: vlak3b 12s infinite; }
.vlakken--3 .vlak:nth-child(3) { animation: vlak3c 12s infinite; }

@keyframes vlak2a { 0%, 44% { opacity: 1 } 50%, 94% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vlak2b { 0%, 44% { opacity: 0 } 50%, 94% { opacity: 1 } 100% { opacity: 0 } }
@keyframes vlak3a { 0%, 29% { opacity: 1 } 33%, 96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes vlak3b { 0%, 29% { opacity: 0 } 33%, 62% { opacity: 1 } 66%, 100% { opacity: 0 } }
@keyframes vlak3c { 0%, 62% { opacity: 0 } 66%, 96% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .vlak { animation: none !important; opacity: 0; }
  .vlak:first-child { opacity: 1; }
}

/* De schermafdruk vult het schermvenster. object-fit vangt het kleine
   verschil op tussen de opgemeten uitsnede en de verhouding van de afdruk. */
.toestel__scherm img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Kop van de pagina ------------------------------------------------------ */

.blok--blauw { padding-block: clamp(2rem, 6vw, 3.25rem); }
.belofte { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.9rem; }

/* Compacter dan de lopende tekst: dit is een kop, geen artikel. */
.intro { max-width: 38rem; }
.intro p {
  font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.55em;
  padding-left: 1.7em; text-indent: -1.7em;
}
.intro p:last-child { margin-bottom: 0; }
.teken { display: inline-block; width: 1.7em; text-indent: 0; }
.blok--blauw .intro + .klein { margin-top: 1rem; }