/* Krava Werkplaats.
   Dezelfde taal als de app en de site: koude inktzwarte schil, warm messing,
   1px haarlijnen, Source Serif voor koppen en Public Sans voor de rest.
   Geen kleurgradiënten, geen gloed, geen kaarten met een eigen afronding.
   Het lichte resultaat is het vel in de donkere kamer. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/source-serif-latin.woff2") format("woff2");
}

:root {
  --papier: oklch(0.155 0.026 205);
  --blad: oklch(0.218 0.028 205);
  --paneel: oklch(0.192 0.028 205);
  --paneel-2: oklch(0.232 0.029 205);
  --verhoogd: oklch(0.262 0.030 205);
  --inkt: oklch(0.955 0.006 205);
  --inkt-2: oklch(0.79 0.018 205);
  --inkt-3: oklch(0.625 0.020 205);
  --lijn: oklch(0.305 0.032 205);
  --lijn-zacht: oklch(0.245 0.028 205);
  --accent: oklch(0.885 0.052 88);
  --accent-inkt: oklch(0.93 0.045 90);
  --accent-vlak: oklch(0.285 0.022 88);
  --accent-lijn: oklch(0.47 0.040 88);
  --sein: oklch(0.665 0.185 34);
  --sein-vlak: oklch(0.262 0.062 34);
  --goed: oklch(0.762 0.125 158);
  --goed-vlak: oklch(0.255 0.045 158);
  --fout: oklch(0.685 0.168 22);
  --fout-vlak: oklch(0.268 0.055 22);
  --messing-glas: linear-gradient(180deg, oklch(0.885 0.128 84), oklch(0.795 0.128 79));

  --ui-font: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --radius: 9px;
  --radius-groot: 15px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --duur: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --schaduw-blad: 0 1px 2px oklch(0.14 0.014 60 / 0.5), 0 8px 18px -5px oklch(0.14 0.014 60 / 0.34), 0 24px 52px -16px oklch(0.14 0.014 60 / 0.3);
  --schaduw-paneel: inset 0 1px 0 oklch(1 0 0 / 0.045), 0 10px 30px oklch(0 0 0 / 0.3);
  --vel: oklch(0.978 0.006 85);
  --vel-inkt: oklch(0.255 0.012 85);
  --vel-inkt-2: oklch(0.44 0.011 85);
  --vel-inkt-3: oklch(0.615 0.009 85);
  --vel-lijn: oklch(0.895 0.007 85);
  --vel-lijn-zacht: oklch(0.935 0.005 85);
  --vel-accent: oklch(0.48 0.045 88);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--papier);
  color: var(--inkt);
  font: 16.5px/1.65 var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
/* Eén fijne korrel, net als op de site. Geen gloed en geen kleurverloop. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  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='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-inkt); }
button, input, textarea, select { font: inherit; }
h1, h2, h3 { font-family: var(--display-font); font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.35rem); line-height: 1.1; }
h2 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.2; }
h3 { font-size: 1.16rem; line-height: 1.35; }
.overslaan {
  position: fixed; left: 12px; top: -80px; z-index: 100;
  background: var(--accent); color: oklch(0.19 0.014 72);
  padding: 10px 14px; border-radius: var(--radius); transition: top .2s;
}
.overslaan:focus { top: 12px; }

/* Bovenbalk: dezelfde hoogte, kleur en haarlijn als de app. */
.werkbalk {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: 13px 24px;
  background: var(--paneel);
  border-bottom: 1px solid var(--lijn);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.03);
}
.merk {
  color: var(--inkt); text-decoration: none;
  font-family: var(--display-font); font-size: 22px; font-weight: 600;
  letter-spacing: 0.005em; line-height: 1;
}
.merk span { color: var(--accent); }
.merk small {
  margin-left: 9px; color: var(--inkt-3);
  font-family: var(--ui-font); font-size: 10px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; vertical-align: 1px;
}
.werkbalk-acties { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* Knoppen precies zoals in de app. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 9px 14px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--blad); color: var(--inkt); text-decoration: none;
  font: 500 13.5px/1 var(--ui-font); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.knop:hover:not(:disabled) { background: var(--paneel-2); border-color: var(--inkt-3); }
.knop.primair {
  background: var(--messing-glas); border-color: oklch(0.80 0.045 88);
  color: oklch(0.19 0.014 72); font-weight: 600;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28);
}
.knop.primair:hover:not(:disabled) {
  background: linear-gradient(180deg, oklch(0.925 0.115 86), oklch(0.845 0.125 80));
  border-color: oklch(0.78 0.12 80);
}
.knop.klein { min-height: 32px; padding: 7px 11px; font-size: 12.5px; }
.knop[hidden] { display: none; }
.knop.gevaar { color: var(--fout); border-color: var(--fout-vlak); background: var(--fout-vlak); }
.knop.gevaar:hover:not(:disabled) { border-color: var(--fout); background: var(--fout-vlak); }
.knop:disabled { opacity: .45; cursor: default; }
.knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.melding {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  max-width: min(420px, calc(100vw - 40px)); padding: 13px 15px;
  border: 1px solid var(--lijn); border-left: 2px solid var(--accent);
  background: var(--paneel-2); color: var(--inkt);
  font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px oklch(0 0 0 / 0.28);
}
.melding.fout { border-left-color: var(--fout); }
.melding.goed { border-left-color: var(--goed); }

main { max-width: 1240px; margin: 0 auto; padding: 38px 24px 72px; }
.eyebrow {
  display: block; margin-bottom: 7px; color: var(--accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.start-kop { max-width: 760px; margin-bottom: 26px; }
.start-kop h1 { margin-bottom: 14px; }
.start-kop p { margin: 0; max-width: 62ch; color: var(--inkt-2); font-size: 16.5px; line-height: 1.65; }
.hint { color: var(--inkt-3); font-size: 12px; line-height: 1.45; }

/* Eerst een route, dan een document. Zo is de Werkplaats geen muur van
   zestien losse kaarten maar een werkplek met vier herkenbare ingangen. */
.route-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 22px; }
.route-kaart { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 16px 15px; text-align: left; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--paneel); color: var(--inkt); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.route-kaart:hover, .route-kaart.actief { background: var(--paneel-2); border-color: var(--accent); }
.route-kaart .route-nummer { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.route-kaart strong { font-family: var(--display-font); font-size: 23px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.route-kaart small { color: var(--inkt-3); font-size: 12px; line-height: 1.4; }
.route-kaart .route-pijl { margin-top: auto; color: var(--accent); font-size: 20px; line-height: 1; }
.type-sectie { margin-top: 2px; }
.type-sectie[hidden] { display: none; }
.type-sectie-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.type-sectie-kop h2 { font-size: 24px; }
.type-sectie-kop .eyebrow { margin-bottom: 3px; }
.type-raster [hidden] { display: none; }

/* De keuzes zijn gewone panelen, geen kaarten met een eigen verloop. */
.type-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 22px; }
.type-kaart {
  display: flex; flex-direction: column; gap: 5px; min-height: 124px;
  padding: 15px 14px; text-align: left;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--paneel); color: var(--inkt); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.type-kaart:hover { background: var(--paneel-2); border-color: var(--inkt-3); }
.type-kaart.actief { border-color: var(--accent); background: var(--accent-vlak); }
.type-kaart .type-groep { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.type-kaart strong { font-family: var(--display-font); font-size: 20px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.type-kaart small { color: var(--inkt-3); font-size: 12px; line-height: 1.4; }

.welkom {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--lijn); border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--paneel);
}
.welkom .eyebrow { margin-bottom: 3px; }
.welkom strong { font-family: var(--display-font); font-size: 19px; font-weight: 600; }
.welkom p { margin: 0; max-width: 72ch; color: var(--inkt-2); font-size: 12.5px; line-height: 1.5; }
.sjabloongalerij { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 22px; padding: 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--paneel); }
.sjabloongalerij.verborgen { display: none; }
.sjabloongalerij > strong { width: 100%; margin-bottom: 2px; font-family: var(--display-font); font-size: 18px; font-weight: 600; }
.sjabloon-kaart { min-width: 170px; padding: 10px 12px; text-align: left; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--blad); color: var(--inkt); cursor: pointer; }
.sjabloon-kaart:hover { border-color: var(--accent); }
.sjabloon-kaart b { display: block; font-size: 13.5px; font-weight: 600; }
.sjabloon-kaart small { color: var(--inkt-3); font-size: 11.5px; line-height: 1.35; }

.start-invoer { display: none; }
.start-invoer.actief { display: block; }
.paneel { min-width: 0; padding: 20px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--paneel); }
.paneel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: 14px; }
.paneel-kop .eyebrow { margin-bottom: 4px; }
.paneel-kop h2 { font-size: 24px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 96px; padding: 18px; text-align: center; cursor: pointer;
  border: 1px dashed var(--inkt-3); border-radius: var(--radius); background: var(--blad);
}
.dropzone:hover, .dropzone.sleep { border-color: var(--accent); background: var(--paneel-2); }
.dropzone strong { font-size: 14px; font-weight: 600; }
.dropzone span { color: var(--inkt-3); font-size: 12px; }
.dropzone.klein { min-height: 64px; padding: 10px; }
.of { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--inkt-3); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }
.veld { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 11px; }
.veld > span { color: var(--inkt-2); font-size: 12px; font-weight: 600; }
.veld.groei { flex: 1; }
input, textarea, select {
  width: 100%; padding: 10px 11px; border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--blad); color: var(--inkt); font-size: 14px; line-height: 1.45;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--inkt-3); }
.rij { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.rij > .veld { margin-bottom: 0; }
.start-acties { display: flex; align-items: center; gap: 12px; margin-top: 15px; flex-wrap: wrap; }

/* Editor */
.editor[hidden], .bibliotheek[hidden], .docent[hidden], .start[hidden] { display: none; }
.editor-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.editor-kop > div:first-child { flex: 1 1 380px; min-width: 0; }
.editor-kop h1 { max-width: 30ch; font-size: clamp(1.7rem, 3.2vw, 2.8rem); }
.editor-kop .hint { margin: 5px 0 0; }
.editor-acties { position: relative; display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.exportmenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15;
  display: grid; min-width: 180px; padding: 5px;
  border: 1px solid var(--lijn); border-radius: var(--radius);
  background: var(--paneel-2); box-shadow: var(--schaduw-paneel);
}
.exportmenu.verborgen { display: none; }
.exportmenu button { padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--inkt); text-align: left; font-size: 13px; cursor: pointer; }
.exportmenu button:hover { background: var(--accent-vlak); color: var(--accent-inkt); }
.editor-raster { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(280px, .9fr) minmax(360px, 1.4fr); gap: 13px; align-items: start; }
.feedbackpaneel { grid-column: 1 / -1; }
.bronpaneel textarea { min-height: 230px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.veldenpaneel, .resultaatpaneel { max-height: calc(100vh - 150px); overflow: auto; scrollbar-width: thin; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 0 9px; }
.velden .veld.volledig { grid-column: 1 / -1; }

/* Het lichte vel. Hier gelden de lichte waarden uit de app. */
.resultaat {
  min-height: 280px; padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--vel-lijn); border-radius: 2px;
  background: var(--vel); color: var(--vel-inkt);
  box-shadow: var(--schaduw-blad); line-height: 1.6;
}
.resultaat.leeg { display: flex; align-items: center; justify-content: center; min-height: 280px; padding: 24px; background: var(--paneel); color: var(--inkt-3); border: 1px dashed var(--lijn); box-shadow: none; font-size: 14px; }
.resultaat h1 { max-width: none; color: var(--vel-inkt); font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.05; }
.resultaat h2 { margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--vel-lijn); color: var(--vel-inkt); font-size: 1.35rem; }
.resultaat h3 { margin: 16px 0 5px; color: var(--vel-inkt-2); font-size: 1.05rem; }
.resultaat p { margin: 8px 0; color: var(--vel-inkt); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.resultaat ul, .resultaat ol { margin: 8px 0 8px 20px; padding: 0; color: var(--vel-inkt); }
.resultaat li { margin: 4px 0; font-size: 14px; line-height: 1.5; }
.resultaat table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 12px; }
.resultaat th, .resultaat td { padding: 7px 6px; border-bottom: 1px solid var(--vel-lijn); text-align: left; vertical-align: top; }
.resultaat th { background: oklch(0.945 0.007 85); color: var(--vel-inkt); font-weight: 600; }
.resultaat .ondertitel { margin: 4px 0 18px; color: var(--vel-inkt-3); font-size: 13px; }
.resultaat .bron { margin: 10px 0; padding: 8px 10px; border-left: 2px solid var(--vel-accent); background: oklch(0.955 0.007 85); color: var(--vel-inkt-3); font-size: 11px; white-space: pre-wrap; }
.resultaat .letop { margin: 14px 0; padding: 10px 12px; border: 1px solid oklch(0.86 0.035 75); background: oklch(0.955 0.025 75); color: var(--vel-inkt-2); font-size: 12px; }
.resultaat .letop strong { color: oklch(0.45 0.11 50); }
.resultaat-acties { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.batchlijst { display: grid; gap: 5px; margin-top: 8px; }
.batch-item { padding: 7px 8px; border: 1px solid var(--lijn); border-radius: 4px; color: var(--inkt-3); font-size: 12px; }
.batch-item b { color: var(--inkt); font-weight: 600; }
.extra { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.extra summary { color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 600; }
.extra .veld { margin-top: 10px; }
.versies { display: grid; gap: 6px; margin-top: 8px; }
.versie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--lijn); border-radius: 4px; font-size: 12px; }
.versie small { color: var(--inkt-3); }
.opmerkingvorm { margin-bottom: 12px; }
.opmerkingen { display: grid; gap: 7px; }
.opmerking { padding: 9px 10px; border: 1px solid var(--lijn); border-left: 2px solid var(--accent); border-radius: 4px; font-size: 12px; line-height: 1.45; }
.opmerking.opgelost { opacity: .55; border-left-color: var(--goed); }
.opmerking footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; color: var(--inkt-3); font-size: 10px; }
.opmerking button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 11px; }
.trustblok { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); color: var(--inkt-3); font-size: 12px; line-height: 1.5; }
.trustblok strong { color: var(--inkt-2); font-weight: 600; }

/* Bibliotheek en docentoverzicht */
.bibliotheeklijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.bib-kaart { padding: 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--paneel); color: var(--inkt); text-align: left; cursor: pointer; }
.bib-kaart:hover { border-color: var(--accent); background: var(--paneel-2); }
.bib-kaart strong { display: block; margin-bottom: 5px; font-family: var(--display-font); font-size: 19px; font-weight: 600; line-height: 1.1; }
.bib-kaart small { color: var(--inkt-3); font-size: 11px; }
.bib-kaart .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { padding: 2px 7px; border: 1px solid var(--lijn); border-radius: 20px; color: var(--inkt-3); font-size: 10px; }
.docent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 16px 0; }
.docent-kaart { padding: 16px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--paneel); }
.docent-kaart b { display: block; color: var(--accent); font-family: var(--display-font); font-size: 34px; font-weight: 600; }
.docent-kaart small { color: var(--inkt-3); font-size: 11px; }
.werkvoet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; max-width: 1240px; margin: 0 auto; padding: 18px 24px 28px; border-top: 1px solid var(--lijn); color: var(--inkt-3); font-size: 12px; }
.werkvoet-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.werkvoet-links a { color: var(--inkt-2); }

/* Het inlogblok is een gewoon paneel, geen lege pagina. */
.login-kaart { max-width: 520px; margin: 8vh auto 0; padding: 28px; border: 1px solid var(--lijn); border-radius: var(--radius-groot); background: var(--paneel); box-shadow: var(--schaduw-paneel); }
.login-kaart h1 { font-size: clamp(2rem, 4vw, 3rem); }
.login-kaart p { color: var(--inkt-2); }
.login-kaart .knop { margin-top: 6px; }

@media (max-width: 1100px) {
  .route-raster { grid-template-columns: 1fr 1fr; }
  .type-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-raster { grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr); }
  .resultaatpaneel { grid-column: 1 / -1; max-height: none; }
  .feedbackpaneel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .route-raster { grid-template-columns: 1fr 1fr; gap: 7px; }
  .route-kaart { min-height: 118px; padding: 13px 11px; }
  .route-kaart strong { font-size: 20px; }
  .type-sectie-kop { align-items: flex-start; }
  .login-kaart { margin-top: 18px; padding: 22px; }
  .werkbalk { align-items: flex-start; padding: 11px 14px; }
  .merk small { display: none; }
  .werkbalk-acties { gap: 5px; }
  .werkbalk .knop { min-height: 32px; padding: 6px 8px; font-size: 11.5px; }
  main { padding: 24px 13px 56px; }
  .start-kop h1 { font-size: 2.45rem; }
  .type-raster { grid-template-columns: 1fr 1fr; gap: 7px; }
  .type-kaart { min-height: 112px; padding: 12px 10px; }
  .type-kaart strong { font-size: 18px; }
  .welkom { display: block; }
  .welkom p { margin-top: 7px; }
  .editor-kop { gap: 10px; }
  .editor-acties { width: 100%; }
  .editor-raster { grid-template-columns: 1fr; }
  .bronpaneel, .veldenpaneel, .resultaatpaneel { max-height: none; }
  .velden { grid-template-columns: 1fr; }
  .bibliotheeklijst { grid-template-columns: 1fr; }
  .docent-grid { grid-template-columns: 1fr 1fr; }
  .resultaat { padding: 18px 14px; }
  .resultaat h1 { font-size: 1.8rem; }
  .werkvoet { padding: 15px 14px; }
}
@media (max-width: 720px) {
  .editor-acties { display: grid; grid-template-columns: 1fr 1fr; }
  .editor-acties .knop { width: 100%; white-space: nowrap; }
}
@media (max-width: 390px) {
  .route-raster { grid-template-columns: 1fr; }
  .werkbalk { flex-wrap: wrap; align-items: stretch; gap: 7px; padding: 10px 13px; }
  .werkbalk .merk { width: 100%; font-size: 23px; }
  .werkbalk-acties { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .werkbalk-acties .knop { width: 100%; min-height: 32px; padding: 6px 4px; font-size: 11px; white-space: nowrap; }
  .werkbalk-acties .knop:nth-child(2) { display: none; }
  .werkbalk-acties .knop:nth-child(1) { grid-column: 1 / 2; }
  .werkbalk-acties .knop:nth-child(3) { grid-column: 2 / 3; }
  .werkbalk-acties .knop:nth-child(4) { grid-column: 3 / 4; }
  .type-raster { grid-template-columns: 1fr; }
}
@media print {
  body { background: #fff; color: #111; }
  body::after, .werkbalk, .editor-kop, .bronpaneel, .veldenpaneel, .feedbackpaneel, .resultaat-acties, .werkvoet, .melding, .exportmenu { display: none !important; }
  main { max-width: none; padding: 0; }
  .editor-raster { display: block; }
  .resultaatpaneel { max-height: none; padding: 0; border: 0; background: #fff; }
  .resultaat { min-height: 0; padding: 0; border: 0; box-shadow: none; }
  .paneel-kop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}