/* Het werkblad van /tijd/klokkijken op papier (3 oktober 2026).

   main.css staat op media="screen", dus bij printen geldt daar niets van. Deze
   stylesheet staat op media="print" en alleen op /tijd/klokkijken. Op die pagina
   gaat er dan alleen het werkblad op papier, ook als je print via het menu van de
   browser en niet met de knop. Wie deze pagina print, wil het werkblad.

   Alles buiten de lijn body > #container > #contentcontainer > #contentwrapper >
   #content > #werkblad gaat weg. Zo hoeft hier niet elk onderdeel van de kop en de
   voet bij naam te staan, en valt er niets mee als die later verandert.

   De klokken zijn svg zonder eigen kleuren. Zonder de regels hieronder zou er een
   lege plaat staan, daarom staan ze hier nog een keer, in zwart. */

@page { margin: 14mm; }

body { margin: 0; background: #fff; color: #000; font-family: Manrope, Arial, sans-serif; }

body > :not(#container),
#container > :not(#contentcontainer),
#contentcontainer > :not(#contentwrapper),
#contentwrapper > :not(#content),
#content > :not(#werkblad),
#werkblad > :not(.wb-blad),
.wb-blad[hidden] { display: none !important; }

#container, #contentcontainer, #contentwrapper, #content, #werkblad {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none; width: auto;
}

.wb-kop { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 6mm; }
.wb-titel { font-size: 18pt; font-weight: 800; }
.wb-naam { min-width: 7cm; border-bottom: 1px solid #000; font-size: 12pt; }

.wb-raster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9mm 6mm;
  margin: 0; padding: 0 0 0 6mm; font-size: 12pt;
}
.wb-raster { list-style: none; counter-reset: wb; }
.wb-raster li { break-inside: avoid; position: relative; counter-increment: wb; }
.wb-raster li::before { content: counter(wb) "."; position: absolute; top: 0; left: -6mm; }
.wb-lijn { display: block; height: 9mm; margin: 0 4mm; border-bottom: 1px solid #000; }
.wb-tijd { display: block; margin: 2mm 0 0; text-align: center; font-weight: 600; }

/* Het antwoordblad op een eigen pagina. */
.wb-antwoordblad { break-before: page; }

.kk-plaat { display: block; width: 4.3cm; height: auto; margin: 0 auto; }
.kk-rand   { fill: #fff; stroke: #000; stroke-width: 1.2; }
.kk-streep { stroke: #888; stroke-width: .7; stroke-linecap: round; }
.kk-streep-uur { stroke: #000; stroke-width: 1.4; stroke-linecap: round; }
.kk-cijfer {
  font-size: 8.5px; font-weight: 700; fill: #000;
  text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: #fff; stroke-width: 2.5px; stroke-linejoin: round;
}
.kk-uur    { stroke: #000; stroke-width: 4; stroke-linecap: round; }
.kk-minuut { stroke: #176e8f; stroke-width: 2.6; stroke-linecap: round; }
.kk-as     { fill: #000; }