/*
  Huisstijl smartconcepts.nl (site.css run-013): Anton voor koppen,
  Archivo voor labels, Inter voor tekst. Rood alleen als accent.
  Achtergrond is echt zwart (#000) in plaats van #0e0f12: zwart = spiegel,
  daar zie je jezelf. Lettertypes zelf gehost, licentie in fonts/LICENSES.md.

  Indeling (versie B): logo + klok bovenaan, leeg spiegelvlak op ooghoogte,
  presentaties en apps onderaan op handhoogte. Liggende schermen: spiegel
  links, presentaties en apps in een kolom rechts.

  Schalen: alle maten zijn een veelvoud van --u. Op een staand scherm van
  1080 x 1920 is --u 10,8px; op een liggend 1920 x 1080 ook. Grotere schermen
  (4K) schalen mee, kleine schermen (telefoon) houden een ondergrens zodat
  tekst leesbaar en tikvlakken groot genoeg blijven.
*/
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url(fonts/anton-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap; src: url(fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap; src: url(fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --spiegel: #000000;
  --oppervlak: #15171b;
  --licht: #f3f1ec;
  --gedimd: #83878f;
  --lijn: #23262c;
  --lijn-sterk: #3a3e46;
  --accent: #ff002c;
  --accent-vlak: #ed0028;
  --f-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --f-label: "Archivo", "Inter", system-ui, sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* schaaleenheid: staand 1080 x 1920 en liggend 1920 x 1080 geven 10,8px */
  --u: min(1vw, 0.5625vh);
  color-scheme: dark;
}
@media (orientation: landscape) {
  :root { --u: min(0.5625vw, 1vh); }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { height: 100%; }
body {
  background: var(--spiegel);
  color: var(--licht);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
ul { list-style: none; margin: 0; padding: 0; }

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: max(20px, calc(3.7 * var(--u)));
  padding:
    calc(max(20px, calc(7.4 * var(--u))) + env(safe-area-inset-top, 0px))
    calc(max(16px, calc(8 * var(--u))) + env(safe-area-inset-right, 0px))
    calc(max(20px, calc(6.7 * var(--u))) + env(safe-area-inset-bottom, 0px))
    calc(max(16px, calc(8 * var(--u))) + env(safe-area-inset-left, 0px));
}

/* ---------- bovenaan: logo links, klok rechts ---------- */
.kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.logo {
  display: block;
  width: max(120px, calc(20 * var(--u)));
  height: auto;
  margin-top: max(6px, calc(1.3 * var(--u)));
}
.klok {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: max(6px, calc(1.1 * var(--u)));
}
.tijd {
  font-family: var(--f-display);
  font-size: max(44px, calc(9.6 * var(--u)));
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.datum {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: max(11px, calc(1.85 * var(--u)));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedimd);
  text-align: right;
}

/* ---------- spiegelvlak ---------- */
.reflectie { flex: 1 1 auto; min-height: 2vh; }

/* ---------- kopjes als eyebrow: rood bolletje ervoor ---------- */
h2 {
  display: flex;
  align-items: center;
  margin: 0 0 max(12px, calc(1.9 * var(--u)));
  font-family: var(--f-label);
  font-weight: 700;
  font-size: max(11px, calc(1.7 * var(--u)));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gedimd);
}
h2::before {
  content: "";
  flex: none;
  width: 0.56em;
  height: 0.56em;
  margin-right: 0.8em;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- presentaties: hele regel = presentatie, rechts website ---------- */
.klanten ul { border-top: 1px solid var(--lijn); }
.klanten li {
  display: flex;
  align-items: stretch;
  min-height: max(64px, calc(10 * var(--u)));
  border-bottom: 1px solid var(--lijn);
}
.presentatie {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: max(12px, calc(2.6 * var(--u)));
  padding: 8px max(12px, calc(2.6 * var(--u))) 8px 0;
  transition: background-color .15s, color .15s;
}
.presentatie:active { background: var(--accent-vlak); color: #fff; }
.symbool {
  flex: none;
  width: max(44px, calc(7 * var(--u)));
  height: max(44px, calc(7 * var(--u)));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--oppervlak);
  border: 1px solid var(--lijn);
  border-radius: 3px;
}
.symbool img { width: 76%; height: 76%; object-fit: contain; display: block; }
.symbool.logo-fitfabriek img { width: 60%; height: 60%; }
.symbool.logo-smart-concepts img { width: 64%; height: 64%; }
.symbool.logo-traderz img { width: 72%; height: 72%; }
/* Breed woordlogo: toon alleen het tandje links. Beter: een los beeldmerk. */
.symbool.logo-tandarts img { width: 70%; height: 70%; object-fit: cover; object-position: left center; }
.naam {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: max(18px, calc(3.9 * var(--u)));
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.play {
  flex: none;
  width: max(44px, calc(5.9 * var(--u)));
  height: max(44px, calc(5.9 * var(--u)));
  display: grid;
  place-items: center;
  border: 1px solid var(--lijn-sterk);
  border-radius: 50%;
}
.play svg { width: 32%; height: 32%; margin-left: 6%; fill: var(--accent); }
.presentatie:active .play { border-color: #fff; }
.presentatie:active .play svg { fill: #fff; }

.website {
  flex: none;
  width: max(64px, calc(15.5 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  border-left: 1px solid var(--lijn);
  font-family: var(--f-label);
  font-weight: 700;
  font-size: max(11px, calc(1.45 * var(--u)));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gedimd);
  transition: background-color .15s, color .15s;
}
.website svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.website:active { background: var(--accent-vlak); color: #fff; }

/* ---------- apps: lage ronde knoppen ---------- */
.apps ul { display: flex; flex-wrap: wrap; gap: max(10px, calc(1.5 * var(--u))); }
.apps a {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-height: max(52px, calc(6.3 * var(--u)));
  padding: 0 1.8em 0 1.3em;
  border: 1px solid var(--lijn-sterk);
  border-radius: 100px;
  font-family: var(--f-label);
  font-weight: 700;
  font-size: max(13px, calc(1.6 * var(--u)));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color .15s, border-color .15s;
}
.apps img { width: 1.7em; height: 1.7em; display: block; filter: brightness(0) invert(1); }
.apps a:active { background: var(--accent-vlak); border-color: var(--accent-vlak); color: #fff; }

/* ---------- smalle schermen (telefoon staand) ---------- */
@media (max-width: 520px) {
  .naam { hyphens: auto; -webkit-hyphens: auto; }
  .logo { width: 104px; }
  .website-tekst { display: none; }
  .website svg { width: 1.6em; height: 1.6em; }
  .apps ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps a { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: 16px; font-size: 12px; letter-spacing: 0.06em; }
  .apps img { width: 24px; height: 24px; }
}

/* ---------- liggende schermen: spiegel links, lijst rechts ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  .pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, calc(78 * var(--u)), 62%));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kop     kop"
      "spiegel klanten"
      "spiegel apps";
    column-gap: max(28px, calc(7 * var(--u)));
    row-gap: max(16px, calc(3 * var(--u)));
  }
  .kop { grid-area: kop; }
  .reflectie { grid-area: spiegel; }
  .klanten { grid-area: klanten; align-self: end; }
  .apps { grid-area: apps; }
  .klanten li { min-height: max(56px, calc(9.4 * var(--u))); }
  .naam { font-size: max(16px, calc(3.4 * var(--u))); }
}

/* Lage liggende schermen (telefoon dwars): kleinere klok, mag scrollen */
@media (orientation: landscape) and (max-height: 500px) {
  .tijd { font-size: 40px; }
  .logo { width: 110px; }
  .klanten li { min-height: 52px; }
  .symbool { width: 40px; height: 40px; }
  .naam { font-size: 16px; }
  .play { width: 44px; height: 44px; }
  .website { width: 56px; }
  .website-tekst { display: none; }
  .website svg { width: 1.6em; height: 1.6em; }
  .apps ul { flex-wrap: nowrap; gap: 8px; }
  .apps a { min-height: 48px; padding: 0 1em 0 0.8em; font-size: 12px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }