/* Koach rotatiegenerator. Bouwt voort op /kennisbank/kennisbank.css (kop, voet, typografie).
   Kleuren uit dezelfde huisstijl: #0E1426 grond, #11182B vlakken, #232B40 lijnen,
   #FF5A1F accent. Invoervelden hebben een rand van #5B6479: tegen #11182B is dat ruim 3:1,
   de ondergrens voor de omtrek van een bedieningselement. */
.gr-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gr-pagina{max-width:1180px;margin:0 auto;padding:56px 24px 88px}
.gr-hero{max-width:780px}
.gr-hero .kb-lead{margin-bottom:0}
.gr-eyebrow{display:inline-flex;gap:10px;align-items:center}
.gr-eyebrow b{font-weight:500;color:#AEB4C2}

/* ---------- gereedschap: formulier + resultaat ---------- */
.gr-tool{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
@media (min-width:1000px){.gr-tool{grid-template-columns:350px minmax(0,1fr);align-items:start}}
.gr-form{background:#11182B;border:1px solid #232B40;border-radius:18px;padding:22px 20px 20px}
/* Bewust niet sticky: het formulier is hoger dan een laptopscherm, en een sticky blok met een
   eigen scrollvak verstopte de printknoppen onderaan. */
.gr-form fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.gr-form legend,.gr-label{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#F5F3EF;margin:0 0 8px;padding:0}
.gr-hint{font-size:13px;line-height:1.5;color:#AEB4C2;margin:6px 0 0}
.gr-form legend+.gr-hint{margin:-2px 0 12px}

.gr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#0E1426;border:1px solid #5B6479;border-radius:12px;padding:4px}
.gr-seg label{position:relative;display:block}
.gr-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.gr-seg span{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:9px;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#C9CEDA;transition:background .15s,color .15s}
.gr-seg input:checked+span{background:#FF5A1F;color:#0E1426}
.gr-seg input:focus-visible+span{outline:2px solid #FF6B35;outline-offset:2px}
.gr-seg label:hover input:not(:checked)+span{color:#F5F3EF;background:#1A2340}

.gr-veldje{margin:0 0 12px}
.gr-veldje[hidden]{display:none}
.gr-veldje label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;font-size:14px;font-weight:600;color:#F5F3EF;margin:0 0 5px}
.gr-veldje .gr-label{display:block}
.gr-afk{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:2px 6px;color:#0E1426}
.gr-afk-s{background:#FF8A5C}.gr-afk-d{background:#C9A7FF}.gr-afk-p{background:#5FD89A}.gr-afk-m{background:#7FB0FF}.gr-afk-l{background:#FFD166}
.gr-invoer,.gr-kies{width:100%;min-height:44px;background:#0E1426;border:1px solid #5B6479;border-radius:10px;color:#F5F3EF;font-family:'Hanken Grotesk',sans-serif;font-size:16px;padding:10px 12px}
.gr-invoer::placeholder{color:#8A93A8}
.gr-invoer:focus-visible,.gr-kies:focus-visible{outline:2px solid #FF6B35;outline-offset:1px;border-color:#FF6B35}
.gr-kies{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23AEB4C2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.gr-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
@media (max-width:360px){.gr-paar{grid-template-columns:1fr}}

.gr-check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 10px;cursor:pointer;font-size:14px;font-weight:600;color:#F5F3EF}
.gr-check input{width:20px;height:20px;margin:1px 0 0;accent-color:#FF5A1F;flex:0 0 auto}
.gr-check input:focus-visible{outline:2px solid #FF6B35;outline-offset:2px}
.gr-check small{display:block;font-weight:400;font-size:13px;color:#AEB4C2;line-height:1.45;margin-top:2px}

.gr-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.gr-knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:12px;border:1px solid transparent;background:#FF5A1F;color:#0E1426;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15.5px;padding:10px 18px;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s}
.gr-knop:hover{background:#FF6B35;transform:translateY(-1px)}
.gr-knop:focus-visible{outline:2px solid #F5F3EF;outline-offset:3px}
.gr-knop-2{background:transparent;color:#F5F3EF;border-color:#5B6479}
.gr-knop-2:hover{background:#1A2340;border-color:#AEB4C2}
.gr-knop svg{flex:0 0 auto}
.gr-wis{align-self:center;background:none;border:0;color:#AEB4C2;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 8px}
.gr-wis:hover{color:#F5F3EF}
.gr-wis:focus-visible{outline:2px solid #FF6B35;outline-offset:2px;border-radius:6px}
.gr-status{min-height:1px}

/* ---------- resultaat ---------- */
.gr-resultaat-kop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 6px}
.gr-resultaat-kop h2{margin:0}
.gr-resultaat-uitleg{font-size:15px;line-height:1.6;color:#AEB4C2;margin:0 0 16px}
.gr-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0 0 18px;padding:0;font-size:13px;color:#C9CEDA}
.gr-legenda li{display:inline-flex;align-items:center;gap:7px}
.gr-legenda i{display:inline-block;width:14px;height:14px;border-radius:4px}
.gr-legenda .gr-bal{width:15px;height:15px;color:#FF6B35}
.gr-legenda .gr-afk{min-width:26px;text-align:center}
.gr-legenda li[hidden]{display:none}
.gr-leg-streep{font-family:'Archivo',sans-serif;font-weight:800;color:#F5F3EF;text-decoration:underline;text-decoration-color:#FF5A1F;text-decoration-thickness:3px;text-underline-offset:3px}

.gr-kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.gr-kaart{background:#11182B;border:1px solid #232B40;border-radius:16px;padding:14px 14px 12px;min-width:0}
.gr-kaart-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gr-kaart-kop h3{margin:0;font-size:17px}
.gr-chip{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#FFB08F;background:rgba(255,90,31,.14);border:1px solid rgba(255,90,31,.35);border-radius:999px;padding:3px 9px;white-space:nowrap}

.gr-veld{background:#1A2544;border:2px solid #3A4A70;border-radius:10px;padding:0 8px 8px;position:relative}
.gr-net{position:relative;height:18px;margin:0 -8px 8px;border-bottom:3px solid #F5F3EF;display:flex;justify-content:center}
.gr-net span{position:absolute;bottom:-9px;background:#1A2544;padding:0 8px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#C9CEDA;line-height:14px}
.gr-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.gr-aanvalslijn{border-top:2px dashed rgba(245,243,239,.38);margin:7px -8px}
/* De rolkleur als strook bovenin, getekend als achtergrond in plaats van een dikke
   border-top: die kromt mee met de afgeronde hoeken en leest dan als een vlek. */
.gr-plek{--rk:#8A93A8;--grond:#F5F3EF;position:relative;background:linear-gradient(var(--rk) 0 4px,var(--grond) 4px);color:#0E1426;border-radius:8px;margin:0;padding:8px 6px 6px;min-height:66px;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}
.gr-pos{display:flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:#4A5268;line-height:1}
.gr-pos .gr-bal{width:14px;height:14px;color:#C2410C}
.gr-naam{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 2px}
.gr-rol{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;border-radius:5px;padding:1px 5px;background:#DDE1EA;color:#0E1426}
.gr-voor{font-size:10.5px;line-height:1.2;color:#4A5268;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-rol-s{--rk:#FF5A1F}.gr-rol-s .gr-rol{background:#FF8A5C}
.gr-rol-d{--rk:#9B6CF0}.gr-rol-d .gr-rol{background:#C9A7FF}
.gr-rol-p{--rk:#22A565}.gr-rol-p .gr-rol{background:#5FD89A}
.gr-rol-m{--rk:#3D7BF0}.gr-rol-m .gr-rol{background:#7FB0FF}
.gr-rol-l{--rk:#D99A00;--grond:#FFF1C4}.gr-rol-l .gr-rol{background:#FFD166}
.gr-serveert{box-shadow:inset 0 0 0 2px #FF6B35}
.gr-zonder-naam .gr-rol{display:none}
.gr-zonder-naam .gr-naam{font-size:17px;margin-top:6px}
.gr-verdeelt .gr-naam{text-decoration:underline;text-decoration-color:#FF5A1F;text-decoration-thickness:3px;text-underline-offset:3px}
.gr-regels{list-style:none;margin:10px 2px 0;padding:0;display:flex;flex-direction:column;gap:3px}
.gr-regels li{font-size:13.5px;line-height:1.45;color:#C9CEDA;margin:0;padding-left:14px;position:relative}
.gr-regels li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#5B6479}

/* ---------- uitleg onder de tool ---------- */
.gr-uitleg{max-width:760px;margin:64px auto 0}
.gr-uitleg p,.gr-uitleg li{font-size:16.5px;line-height:1.75;color:#C9CEDA}
.gr-uitleg ul,.gr-uitleg ol{padding-left:22px}
.gr-uitleg li{margin-bottom:6px}
.gr-uitleg strong{color:#F5F3EF}
.gr-uitleg a{color:#FF6B35;text-decoration:none}
.gr-uitleg a:hover{text-decoration:underline}
.gr-uitleg a:focus-visible,.gr-pagina a:focus-visible{outline:2px solid #FF6B35;outline-offset:2px;border-radius:3px}
.gr-posities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:360px;margin:18px 0 8px;padding:0;list-style:none}
.gr-posities li{background:#11182B;border:1px solid #232B40;border-radius:8px;padding:8px 10px;font-size:13.5px;line-height:1.35;color:#C9CEDA;margin:0}
.gr-posities b{display:block;font-family:'JetBrains Mono',monospace;color:#FF6B35}
.gr-uitleg .kb-faq{margin-top:10px}
.gr-uitleg .kb-ctablock a.gr-ctalink{background:transparent;color:#0E1426;border:0;padding:6px 4px;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.gr-uitleg .kb-ctablock a.gr-ctalink:hover{transform:none;box-shadow:none}
.gr-uitleg .kb-ctablock p{color:rgba(14,20,38,.85)}
.gr-uitleg .kb-ctablock .gr-cta-knoppen{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center}
.gr-uitleg .kb-ctablock a:focus-visible{outline:2px solid #0E1426;outline-offset:3px}

@media (max-width:520px){
  .gr-pagina{padding:36px 16px 72px}
  .gr-form{padding:18px 14px 16px}
  .gr-kaart{padding:12px 10px 10px}
  .gr-plek{min-height:62px;padding:4px 5px 5px}
  .gr-naam{font-size:14px}
  .gr-uitleg{margin-top:48px}
  .gr-uitleg .kb-ctablock{padding:28px 18px}
}

/* ---------- printversie (verborgen op het scherm) ---------- */
.gr-print{display:none}
@media print{
  @page{size:A4 portrait;margin:9mm}
  html,body{background:#fff!important;color:#000!important}
  body>*:not(.gr-print){display:none!important}
  .gr-print{display:block;font-family:'Hanken Grotesk',Arial,sans-serif;color:#000}
  .gr-print *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body[data-print="formulier"] .gr-blad-rotaties{display:none}
  .gr-blad{break-after:page;page-break-after:always}
  .gr-blad:last-child{break-after:auto;page-break-after:auto}
  .gr-blad-kop{display:flex;align-items:baseline;justify-content:space-between;gap:6mm;border-bottom:.6mm solid #000;padding-bottom:2mm;margin-bottom:4mm}
  .gr-blad-kop h2{font-family:'Archivo',Arial,sans-serif;font-size:17pt;margin:0;letter-spacing:-.01em;color:#000}
  .gr-blad-kop .gr-blad-team{font-size:11pt;font-weight:700;flex:1}
  .gr-blad-bron,.gr-blad-voet{font-family:'JetBrains Mono',monospace;font-size:7.5pt;color:#333}
  .gr-blad-voet{margin:3mm 0 0}

  .gr-print .gr-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:4mm 5mm}
  .gr-print .gr-kaart{background:#fff;border:.35mm solid #000;border-radius:2.5mm;padding:2.5mm 3mm;break-inside:avoid;page-break-inside:avoid}
  .gr-print .gr-kaart-kop{margin-bottom:1.8mm}
  .gr-print .gr-kaart-kop h3{font-size:12pt;color:#000}
  .gr-print .gr-chip{color:#000;background:#fff;border:.3mm solid #000;font-size:8pt}
  .gr-print .gr-veld{background:#fff;border:.45mm solid #000;border-radius:1.5mm;padding:0 2mm 2mm}
  .gr-print .gr-net{height:4mm;margin:0 -2mm 2mm;border-bottom:.9mm solid #000}
  .gr-print .gr-net span{background:#fff;color:#000;font-size:6.5pt;bottom:-2.2mm;line-height:3.6mm}
  .gr-print .gr-rij{gap:1.6mm}
  .gr-print .gr-aanvalslijn{border-top:.35mm dashed #000;margin:1.8mm -2mm}
  .gr-print .gr-plek{--grond:#fff;background:linear-gradient(var(--rk) 0 1.2mm,var(--grond) 1.2mm);border:.3mm solid #000;border-radius:1.2mm;min-height:17mm;padding:1.8mm 1.4mm 1mm}
  .gr-print .gr-rol-l{--grond:#FFF1C4}
  .gr-print .gr-pos{font-size:7.5pt;color:#000}
  .gr-print .gr-pos .gr-bal{width:3.4mm;height:3.4mm;color:#000}
  .gr-print .gr-naam{font-size:11.5pt;margin:.6mm 0}
  .gr-print .gr-rol{font-size:6.5pt;border:.2mm solid #000}
  .gr-print .gr-voor{font-size:6.5pt;color:#000}
  .gr-print .gr-serveert{box-shadow:none;outline:.6mm solid #000;outline-offset:-.1mm}
  .gr-print .gr-regels{margin:1.8mm 0 0;gap:.4mm}
  .gr-print .gr-regels li{font-size:7.6pt;line-height:1.3;color:#000;padding-left:2.6mm}
  .gr-print .gr-regels li::before{background:#000;width:1mm;height:1mm;top:.55em;left:0}

  /* Blad 2: het lege formulier */
  .gr-velden{display:grid;grid-template-columns:1.4fr 1.4fr 1fr;gap:4mm;margin:0 0 4mm}
  .gr-velden div{font-size:9pt;font-weight:700;border-bottom:.3mm solid #000;padding:5mm 0 .8mm}
  .gr-knipkaarten{display:grid;grid-template-columns:repeat(5,1fr);border-top:.3mm dashed #000;border-left:.3mm dashed #000}
  .gr-knip{border-right:.3mm dashed #000;border-bottom:.3mm dashed #000;padding:2mm}
  .gr-knipkaart{border:.4mm solid #000;padding:1.6mm 1.6mm 1.8mm}
  .gr-knipkaart .gr-kk-set{font-family:'Archivo',Arial,sans-serif;font-weight:800;font-size:10.5pt;margin:0 0 1mm}
  .gr-kk-regel{display:flex;border:.3mm solid #000;border-bottom:0;font-size:7pt;min-height:5mm;align-items:stretch}
  .gr-kk-regel>span{padding:.6mm 1mm;display:flex;align-items:center}
  .gr-kk-regel>span+span{border-left:.3mm solid #000}
  .gr-kk-regel>.gr-kk-leeg{flex:1}
  .gr-kk-veld{border:.3mm solid #000;padding:1.4mm 1.2mm;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4mm 1.2mm}
  .gr-kk-vak{border:.3mm solid #000}
  .gr-kk-vak b{display:block;text-align:center;font-size:6.5pt;border-bottom:.3mm solid #000;line-height:3.2mm}
  .gr-kk-vak i{display:block;height:7.5mm}
  .gr-kk-teken{font-size:6.5pt;margin-top:1.4mm;line-height:1.25;min-height:6.5mm}
  .gr-kk-teken span{display:block;border-bottom:.3mm solid #000;height:3mm}
  .gr-knip-uitleg{font-size:7pt;margin:1.2mm 0 4mm;color:#000}

  .gr-overzicht{width:100%;border-collapse:collapse;table-layout:fixed;font-size:7.5pt}
  .gr-overzicht caption{text-align:left;font-family:'Archivo',Arial,sans-serif;font-weight:800;font-size:11pt;padding:0 0 1.5mm}
  .gr-overzicht th,.gr-overzicht td{border:.3mm solid #000;padding:.8mm;vertical-align:top}
  .gr-overzicht thead th{font-size:7.5pt;text-align:center;background:#EEE}
  .gr-overzicht tbody th{font-family:'Archivo',Arial,sans-serif;font-size:11pt;text-align:center;vertical-align:middle;width:9mm}
  .gr-ov-pos div{height:7mm;border-bottom:.25mm solid #000}
  .gr-ov-pos div+div{height:6mm;border-bottom:0;font-size:6pt;color:#333;display:flex;align-items:flex-end}
  .gr-ov-vakjes{display:flex;flex-wrap:wrap;gap:1mm}
  .gr-ov-vakjes i{display:block;width:3.6mm;height:3.6mm;border:.3mm solid #000}
  .gr-ov-stand{font-size:10pt;text-align:center;vertical-align:middle!important}
  .gr-ov-uitleg{font-size:7pt;margin:1.5mm 0 0}
}