/* AIVO Mainframe - opmaak */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  padding: 16px 16px 120px;
  transition: background-color 0.3s;
}
@media (min-width: 900px) { body { padding: 20px 32px 48px; } }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--glas-sterk); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }

/* Kleurvlekken achter het glas */
.vlekken { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vlekken span { position: absolute; border-radius: 50%; }
.vlekken span:nth-child(1) { width: 620px; height: 620px; left: -180px; top: -220px; background: var(--vlek-1); filter: blur(90px); }
.vlekken span:nth-child(2) { width: 560px; height: 560px; right: -160px; top: 30%; background: var(--vlek-2); filter: blur(100px); }
.vlekken span:nth-child(3) { width: 640px; height: 640px; left: 25%; bottom: -320px; background: var(--vlek-3); filter: blur(110px); }

/* Glas */
.glas, .kaart {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schaduw);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.glas-sterk {
  background: var(--glas-sterk);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schaduw);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* Logo per thema */
.logo-donker-thema { display: none; }
:root[data-thema="donker"] .logo-licht-thema { display: none; }
:root[data-thema="donker"] .logo-donker-thema { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .logo-licht-thema { display: none; }
  :root:not([data-thema="licht"]) .logo-donker-thema { display: block; }
}

/* Kop */
.kop {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  padding: 8px 10px 8px 16px;
  border-radius: 22px;
  position: sticky;
  top: 12px;
  z-index: 10;
}
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gedempt); min-height: 44px; }
.logo { height: 20px; width: auto; }
.woordmerk { font-family: var(--font-merk); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; }
.hoofdnav { display: none; gap: 4px; }
.hoofdnav a {
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--gedempt);
  text-decoration: none;
  font-weight: 500;
}
.hoofdnav a:hover { color: var(--tekst); background: var(--binnen); }
.hoofdnav a[aria-current="page"] { color: var(--tekst); background: var(--binnen); font-weight: 600; }
.kop-acties { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1000px) { .hoofdnav { display: flex; } }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 14px; border: 1px solid transparent;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.knop-primair { background: var(--primair); color: var(--op-primair); }
.knop-accent { background: var(--accent); color: var(--op-accent); }
.knop-zacht { background: var(--binnen); border-color: var(--lijn); color: var(--tekst); }
.knop-icoon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid var(--lijn); background: var(--binnen); color: var(--tekst); cursor: pointer;
}
.icoon-zon { display: none; }
:root[data-thema="donker"] .icoon-zon { display: block; }
:root[data-thema="donker"] .icoon-maan { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .icoon-zon { display: block; }
  :root:not([data-thema="licht"]) .icoon-maan { display: none; }
}
.verberg-mobiel { display: none; }
@media (min-width: 700px) { .verberg-mobiel { display: inline-flex; } }

/* Inhoud */
.inhoud { max-width: 1360px; margin: 28px auto 0; outline: none; }
.titel { margin: 0; font-size: 32px; font-weight: 700; }
@media (min-width: 700px) { .titel { font-size: 44px; } }
.ondertitel { margin: 6px 0 0; color: var(--gedempt); font-size: 17px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.kaart { border-radius: var(--radius-l); padding: 22px; }
.kaart h2 { margin: 0 0 6px; font-size: 20px; }
.kaart p { margin: 0; color: var(--gedempt); }
.label-klein { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--oranje-tekst); text-transform: uppercase; }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 10px; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gedempt); }
.status.goed { color: var(--goed); }
.status.goed::before { background: var(--goed); }
.status.fout { color: var(--fout); }
.status.fout::before { background: var(--fout); }
.lijst-links { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lijst-links a { display: flex; align-items: center; min-height: 52px; padding: 0 18px; border-radius: var(--radius-m); text-decoration: none; color: var(--tekst); font-weight: 600; }

/* Keuze (thema) */
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; border: 0; padding: 0; }
.keuzes legend { font-weight: 600; margin-bottom: 8px; }
.keuzes label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--lijn); background: var(--binnen); cursor: pointer;
}
.keuzes input { accent-color: var(--link); }

/* Voet */
.voet { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; color: var(--gedempt); font-size: 13px; }
.logo-klein { height: 13px; width: auto; }

/* Tabbalk telefoon */
.tabbalk {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  height: 70px; border-radius: 26px;
  display: flex; align-items: center; justify-content: space-around; z-index: 20;
}
.tabbalk a {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; min-height: 44px; justify-content: center;
  color: var(--gedempt); text-decoration: none; font-size: 11px; font-weight: 500;
}
.tabbalk a[aria-current="page"] { color: var(--link); font-weight: 700; }
.tab-plus {
  width: 52px; height: 52px; border-radius: 18px; border: 0; background: var(--primair); color: var(--op-primair);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
@media (min-width: 1000px) { .tabbalk { display: none; } body { padding-bottom: 48px; } }

/* Melding */
.melding {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px);
  padding: 12px 18px; border-radius: 14px; background: var(--primair); color: var(--op-primair);
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 60; max-width: calc(100% - 32px);
}
.melding.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }

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

/* Kaart als link */
.kaart-link { display: block; text-decoration: none; color: var(--tekst); transition: transform 0.15s; }
.kaart-link:hover { color: var(--tekst); transform: translateY(-2px); }
.kaart-link h2 { margin-top: 6px; }

/* Vergrendeld: alleen het slotscherm tonen */
body.vergrendeld .kop,
body.vergrendeld .tabbalk,
body.vergrendeld .voet { display: none; }
body.vergrendeld { padding-bottom: 16px; }
body.vergrendeld .inhoud { margin-top: 0; min-height: calc(100vh - 32px); display: grid; place-items: center; }

/* Slotscherm (inloggen, pincode) */
.slot { width: min(420px, 100%); border-radius: 28px; padding: 32px 24px 28px; text-align: center; }
.slot-logo { height: 34px; width: auto; margin: 0 auto; }
.slot-woordmerk { margin: 8px 0 20px; color: var(--gedempt); }
.slot-titel { margin: 0; font-size: 26px; font-weight: 700; }
.slot-uitleg { margin: 6px 0 20px; color: var(--gedempt); }
.slot-form { display: grid; gap: 14px; text-align: left; }
.slot-fout { margin: 0; min-height: 1.5em; color: var(--fout); font-weight: 600; font-size: 14px; }
.preview-label {
  display: inline-block; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: var(--op-accent); font-size: 12px; font-weight: 700;
}
.veld { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.veld input {
  min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--lijn);
  background: var(--binnen); color: var(--tekst); font: inherit; font-weight: 500; font-size: 16px;
}
.pin-veld { letter-spacing: 0.4em; text-align: center; font-size: 22px !important; }
.knop-breed { width: 100%; }
.knop[disabled] { opacity: 0.6; cursor: progress; }
.knop-link {
  background: none; border: 0; padding: 10px; min-height: 44px; color: var(--link);
  font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.klein { font-size: 13px; margin-top: 8px !important; }

/* Preview-markering in de kop */
.is-preview .woordmerk::after {
  content: "PREVIEW"; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: var(--op-accent); letter-spacing: 0.08em; font-size: 10px;
}
.slot .woordmerk::after { content: none; }

/* ---------- Plakje 2: projecten ---------- */

.titelrij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kruimel { margin: 0 0 8px; font-weight: 600; }
.kruimel a { text-decoration: none; }
.kruimel a::before { content: "\2190  "; }
.klein-gedempt { color: var(--gedempt); font-size: 13px; }
.versie { font-size: 0.5em; font-weight: 500; color: var(--gedempt); letter-spacing: 0; vertical-align: middle; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.filter {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--lijn);
  background: var(--glas); color: var(--gedempt); font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.filter.aan { background: var(--primair); color: var(--op-primair); border-color: transparent; }
.filter .aantal { opacity: 0.7; font-weight: 500; margin-left: 4px; }

.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.projectkaart { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; text-decoration: none; color: var(--tekst); transition: transform 0.15s; }
.projectkaart:hover { color: var(--tekst); transform: translateY(-2px); }
.pk-tekst { padding: 14px 20px 18px; display: grid; gap: 4px; }
.pk-tekst h2 { margin: 0; font-size: 19px; }
.pk-tekst p { margin: 0; color: var(--gedempt); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Cover */
.cover { position: relative; margin: 8px 8px 0; height: 150px; border-radius: 20px; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-groot { margin: 0 0 20px; height: clamp(160px, 32vw, 320px); border-radius: 28px; }
.cover-letter {
  position: absolute; right: -4px; bottom: -0.28em; font-family: var(--font-merk); font-weight: 700;
  font-size: 150px; line-height: 1; opacity: 0.55;
}
.cover-groot .cover-letter { font-size: clamp(160px, 30vw, 320px); }
.cover-kleur-0 { background: #E7E1F8; color: #C9BCF0; }
.cover-kleur-1 { background: #D5F2EE; color: #A9E2DA; }
.cover-kleur-2 { background: #DCE6FB; color: #B8CCF4; }
.cover-kleur-3 { background: #FFE6D8; color: #FFC7A8; }
.cover-kleur-4 { background: #F6E0EC; color: #E9BCD5; }
.cover-kleur-5 { background: #E3F0D9; color: #C3DFB0; }
:root[data-thema="donker"] .cover-kleur-0 { background: #2A2147; color: #3A2E61; }
:root[data-thema="donker"] .cover-kleur-1 { background: #123A3A; color: #184B4A; }
:root[data-thema="donker"] .cover-kleur-2 { background: #1B2D55; color: #243A6B; }
:root[data-thema="donker"] .cover-kleur-3 { background: #3D2418; color: #55321F; }
:root[data-thema="donker"] .cover-kleur-4 { background: #3A1E30; color: #4F2A42; }
:root[data-thema="donker"] .cover-kleur-5 { background: #1F3320; color: #2B452C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .cover-kleur-0 { background: #2A2147; color: #3A2E61; }
  :root:not([data-thema="licht"]) .cover-kleur-1 { background: #123A3A; color: #184B4A; }
  :root:not([data-thema="licht"]) .cover-kleur-2 { background: #1B2D55; color: #243A6B; }
  :root:not([data-thema="licht"]) .cover-kleur-3 { background: #3D2418; color: #55321F; }
  :root:not([data-thema="licht"]) .cover-kleur-4 { background: #3A1E30; color: #4F2A42; }
  :root:not([data-thema="licht"]) .cover-kleur-5 { background: #1F3320; color: #2B452C; }
}

/* Chips */
.chip {
  position: absolute; top: 12px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--glas-sterk); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cover .chip:not(.chip-focus) { left: 12px; }
.chip-focus { right: 12px; color: var(--oranje-tekst); }
.chip-in_aanbouw { color: var(--oranje-tekst); }
.chip-live { color: var(--link); }
.chip-gepauzeerd, .chip-archief { color: var(--gedempt); }

/* Detail */
.detail-kop { display: grid; gap: 4px; margin-bottom: 20px; }
.detail-kop .knoppenrij { margin-top: 10px; }
.nextup-plek { border-style: dashed; }
.nextup-plek p { margin-top: 4px; }
.tekstblok { white-space: pre-line; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { padding: 4px 10px; border-radius: 999px; background: var(--binnen); border: 1px solid var(--lijn); font-size: 13px; font-weight: 500; }
.detail .raster { margin-top: 20px; }
.detail > .klein-gedempt { margin-top: 20px; }

/* Formulier */
.formulier { display: grid; gap: 18px; margin-top: 20px; max-width: 760px; }
.formulier-blok { display: grid; gap: 14px; }
.formulier-blok h2 { margin: 0; font-size: 18px; }
.veld small { font-weight: 400; color: var(--gedempt); }
.veld textarea, .veld select {
  min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lijn);
  background: var(--binnen); color: var(--tekst); font: inherit; font-weight: 500; font-size: 16px; resize: vertical;
}
.veld select { padding: 0 14px; }
.veldenrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.vinkje { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.vinkje input { width: 20px; height: 20px; accent-color: var(--link); }
.cover-kiezer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cover-voorbeeld { margin: 0; width: 220px; height: 130px; flex: none; }
.cover-voorbeeld .cover-letter { font-size: 120px; }
.cover-acties { display: grid; gap: 8px; justify-items: start; }
.cover-acties small { color: var(--gedempt); }
.bestand-knop { position: relative; overflow: hidden; }
.bestand-knop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bestand-knop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.knop-gevaar { background: transparent; border-color: var(--lijn); color: var(--fout); margin-left: auto; }
.formulier-knoppen { margin-top: 0; }
.leeg { margin-top: 20px; display: grid; gap: 10px; justify-items: start; }