/* Zelf gehost (OFL). Gegenereerd uit Google Fonts, alleen latin en latin-ext. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-1.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-ext-2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-3.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/schibsted-grotesk-latin-5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/schibsted-grotesk-latin-ext-4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/schibsted-grotesk-latin-5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tuinblad: richting A, bestektekening, in het kleurenschema groen vel. Werktitel.
   --blauwdruk is de naam van het accent gebleven; in groen vel is dat een diep groen. */
:root {
  --papier: #e7ede0;
  --vel: #f2f6ec;
  --grafiet: #1f3a24;
  --potlood: #4d6650;
  --lijn: #b8c9b2;
  --blauwdruk: #2f6b3a;
  --blad: #cfe0bd;
  --blad-donker: #5d8a45;
  --gazon: #e3eed5;
  --grind: #e4e6dc;
  --op-accent: #fff;
  --water: #c9dbe6;
  --fout: #b3311a;
  --kop: 71px;
  --merk-blad: #4a8a2a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #121a14; --vel: #18221a; --grafiet: #e3ecdc; --potlood: #9fb39d; --lijn: #33473a;
    --blauwdruk: #8cc28f; --op-accent: #10200f; --blad: #2c3a24; --blad-donker: #7f9a5b; --gazon: #222b1d; --grind: #2a2a27; --water: #1f3340; --fout: #ff8a70; --merk-blad: #a9d06e;
  }
}
:root[data-theme="dark"] {
  --papier: #121a14; --vel: #18221a; --grafiet: #e3ecdc; --potlood: #9fb39d; --lijn: #33473a;
  --blauwdruk: #8cc28f; --op-accent: #10200f; --blad: #2c3a24; --blad-donker: #7f9a5b; --gazon: #222b1d; --grind: #2a2a27; --water: #1f3340; --fout: #ff8a70; --merk-blad: #a9d06e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--grafiet); font: 400 17px/1.55 "Schibsted Grotesk", system-ui, sans-serif; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blauwdruk); outline-offset: 2px; }

/* kop */
.kop { display: flex; align-items: baseline; gap: 32px; padding: 18px 28px; border-bottom: 1px solid var(--grafiet); height: var(--kop); }
.merk { display: block; flex: none; line-height: 0; text-decoration: none; }
.merk svg { display: block; height: 30px; width: auto; }
.mi { fill: var(--grafiet); }
.mb { fill: var(--merk-blad); }
.nav { display: flex; gap: 22px; font-size: 15px; overflow-x: auto; scrollbar-width: none; }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a[aria-current] { text-decoration: underline; }

/* gedeelde bouwstenen */
h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 14px; }
h2 { letter-spacing: -0.03em; line-height: 1.05; }
.lead { color: var(--potlood); margin: 0 0 30px; max-width: 36ch; }
.knop { font-weight: 700; font-size: 15px; background: var(--blauwdruk); color: var(--op-accent); border: 0; padding: 12px 18px; cursor: pointer; border-radius: 0; text-decoration: none; display: inline-block; }
.knop.stil { background: transparent; color: var(--grafiet); box-shadow: inset 0 0 0 1px var(--grafiet); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* tool */
.tool { display: grid; grid-template-columns: minmax(320px, 4fr) 8fr; grid-template-rows: auto 1fr; }
.intro { grid-column: 1; grid-row: 1; padding: 40px 32px 0 28px; border-right: 1px solid var(--grafiet); }
.paneel { grid-column: 1; grid-row: 2; padding: 0 32px 40px 28px; border-right: 1px solid var(--grafiet); }
.vel { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 0; height: calc(100vh - var(--kop)); align-self: start;
  background: var(--vel); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr 250px; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend { font-weight: 700; font-size: 15px; margin-bottom: 10px; padding: 0; }
legend b { display: inline-block; width: 22px; font-family: "IBM Plex Mono", monospace; font-weight: 500; color: var(--potlood); }
.sjablonen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sjablonen button { font-size: 14px; background: transparent; border: 1px solid var(--lijn); padding: 6px 11px; cursor: pointer; border-radius: 0; }
.sjablonen button[aria-pressed="true"], .keus input:checked + span { background: var(--grafiet); color: var(--vel); border-color: var(--grafiet); }
.keus { display: flex; flex-wrap: wrap; gap: 6px; }
.keus label { cursor: pointer; }
.keus span { display: block; border: 1px solid var(--lijn); padding: 6px 11px; font-size: 14px; }
.keus input { position: absolute; opacity: 0; pointer-events: none; }
.keus input:focus-visible + span { outline: 2px solid var(--blauwdruk); outline-offset: 2px; }
.maat { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.maat input { width: 74px; font: 500 16px "IBM Plex Mono", monospace; padding: 6px 8px; background: var(--vel); color: var(--grafiet); border: 1px solid var(--grafiet); border-radius: 0; }
.maat input[aria-invalid="true"] { border-color: var(--fout); box-shadow: inset 0 0 0 1px var(--fout); }
.kompas { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); gap: 2px; }
.kompas label { display: contents; }
.kompas span { display: grid; place-items: center; font: 500 14px "IBM Plex Mono", monospace; padding: 0; }
.kompas .n { grid-area: 1 / 2; } .kompas .w { grid-area: 2 / 1; } .kompas .o { grid-area: 2 / 3; } .kompas .z { grid-area: 3 / 2; }
.kompas .huisje { grid-area: 2 / 2; display: grid; place-items: center; font-size: 11px; color: var(--potlood); }
.hint { font-size: 13px; color: var(--potlood); margin: 8px 0 0; max-width: 36ch; }
.acties { display: flex; gap: 10px; flex-wrap: wrap; }

/* gereedschap boven het tekenvel */
.gereedschap { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--grafiet); overflow-x: auto; scrollbar-width: thin; }
.gereedschap button { background: transparent; border: 1px solid transparent; padding: 5px 9px; font-size: 14px; cursor: pointer; white-space: nowrap; border-radius: 0; }
.gereedschap button:hover:not(:disabled) { border-color: var(--lijn); }
.gereedschap button:disabled { color: var(--lijn); cursor: default; }
.gereedschap .scheid { width: 1px; align-self: stretch; background: var(--lijn); margin: 2px 6px; flex: none; }
.gereedschap .label { font-size: 13px; color: var(--potlood); margin-right: 2px; white-space: nowrap; }
.selinfo { grid-column: 1 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px "IBM Plex Mono", monospace; color: var(--potlood); padding: 6px 14px 0; min-height: 26px; }
.melding { grid-column: 1 / -1; margin: 6px 14px 0; font-size: 14px; color: var(--grafiet); padding: 2px 0 2px 10px; border-left: 2px solid var(--blauwdruk); }
.plaat { padding: 8px 20px 8px 28px; display: grid; place-items: center; min-height: 0; }
.plaat svg { width: 100%; height: 100%; max-height: calc(100vh - var(--kop) - 200px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.titelblok { align-self: end; margin: 0 20px 20px 0; background: var(--vel); border: 1px solid var(--grafiet); display: grid; grid-template-columns: auto auto; font: 400 12px/1.3 "IBM Plex Mono", monospace; }
.titelblok div { padding: 5px 8px; border-top: 1px solid var(--grafiet); }
.titelblok div:nth-child(odd) { border-right: 1px solid var(--grafiet); color: var(--potlood); }
.titelblok .t { grid-column: 1 / -1; border-top: 0; border-right: 0 !important; color: var(--grafiet) !important; font: 700 15px "Schibsted Grotesk", sans-serif; padding: 8px; }
.titelblok .legenda { grid-column: 1 / -1; border-right: 0 !important; color: var(--grafiet) !important; display: grid; gap: 5px; padding: 10px 8px; }
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda svg { width: 22px; height: 14px; border: 1px solid var(--grafiet); flex: none; }

/* plattegrond */
.plan .kavel { fill: url(#aarde); stroke: var(--grafiet); stroke-width: 6; }
.plan .zone > rect { stroke: var(--grafiet); stroke-width: 1.5; }
.plan .zone { cursor: pointer; }
.plan .zone-terras > rect, .plan .zone-pad > rect, .plan .zone-zitplek > rect { fill: url(#tegels); }
.plan .zone-border > rect { fill: var(--blad); }
.plan .zone-gazon > rect { fill: url(#gazon); }
.plan .zone-grind > rect { fill: url(#grind); }
.plan .zone-weide > rect { fill: url(#weide); }
.plan .zone-stenen > rect { fill: transparent; stroke-dasharray: 6 6; stroke: var(--lijn); }
.plan .zone-water > rect { fill: var(--water); stroke-width: 2.5; }
.plan .zone-schuur > rect { fill: var(--grind); stroke-width: 3; }
.plan .dak { stroke: var(--grafiet); stroke-width: 1.5; }
.plan .steen { fill: var(--grind); stroke: var(--grafiet); stroke-width: 1.5; }
.plan .plant { fill: var(--vel); fill-opacity: .55; stroke: var(--blad-donker); stroke-width: 1.4; pointer-events: none; }
.plan .plant.bloeit { fill: var(--bloei); fill-opacity: .95; stroke: var(--grafiet); }
.plan .zone-boom .kroon { fill: var(--vel); fill-opacity: .25; stroke: var(--grafiet); stroke-width: 2; stroke-dasharray: 10 6; }
.plan .zone-boom.bloeit .kroon { fill: var(--bloei); fill-opacity: .35; }
.plan .zone-boom .stam { fill: var(--grafiet); }
.plan .codes { pointer-events: none; }
.plan .codes text { font: 500 19px "IBM Plex Mono", monospace; fill: var(--grafiet); text-anchor: middle; paint-order: stroke; stroke: var(--vel); stroke-width: 4px; }
.plan .maat { pointer-events: none; }
.plan .maat line { stroke: var(--grafiet); stroke-width: 1.5; }
.plan .maat text { font: 500 24px "IBM Plex Mono", monospace; fill: var(--grafiet); text-anchor: middle; }
.plan .huis { fill: var(--grafiet); }
.plan .huis-label { fill: var(--vel); font: 500 26px "IBM Plex Mono", monospace; text-anchor: middle; letter-spacing: .2em; pointer-events: none; }
.plan .selectie .kader { fill: transparent; stroke: var(--blauwdruk); stroke-width: 4; cursor: move; touch-action: none; }
.plan .selectie .greep { fill: var(--vel); stroke: var(--blauwdruk); stroke-width: 3; touch-action: none; }
.plan .selectie .greep[data-greep="nw"], .plan .selectie .greep[data-greep="se"] { cursor: nwse-resize; }
.plan .selectie .greep[data-greep="ne"], .plan .selectie .greep[data-greep="sw"] { cursor: nesw-resize; }
.plan .selmaat { font-family: "IBM Plex Mono", monospace; font-weight: 500; fill: var(--blauwdruk); text-anchor: middle; paint-order: stroke; stroke: var(--vel); stroke-width: 5px; pointer-events: none; }
.plan.heeft-selectie .zone:not(.zone-boom) > rect { opacity: .85; }

/* jaarstrook en tellers */
.jaar { grid-column: 1 / -1; border-top: 1px solid var(--grafiet); display: grid; grid-template-columns: 1fr auto; }
.maanden { display: grid; grid-template-columns: repeat(12, 1fr); }
.maanden button { background: none; border: 0; border-right: 1px solid var(--lijn); cursor: pointer; padding: 10px 0 12px; text-align: center; font: 400 12px "IBM Plex Mono", monospace; }
.maanden button i { display: block; height: 28px; margin: 0 6px 6px; background: var(--lijn); opacity: .35; }
.maanden button[aria-pressed="true"] { background: var(--grafiet); color: var(--vel); }
.tellers { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 18px; padding: 10px 22px; border-left: 1px solid var(--grafiet); font-size: 13px; align-content: center; }
.tellers strong { font: 500 22px "IBM Plex Mono", monospace; letter-spacing: -0.02em; display: block; }

/* staten */
.staat, .straat, .maand { display: grid; grid-template-columns: 4fr 8fr; border-top: 1px solid var(--grafiet); }
.staat > h2 { margin: 0; padding: 36px 32px 0 28px; font-size: 30px; border-right: 1px solid var(--grafiet); }
.staat > h2 small { display: block; font-size: 15px; font-weight: 400; color: var(--potlood); letter-spacing: 0; margin-top: 10px; line-height: 1.5; max-width: 32ch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 500; color: var(--potlood); font-size: 13px; }
td.code { font: 500 13px "IBM Plex Mono", monospace; }
td.n, th.n { font-family: "IBM Plex Mono", monospace; text-align: right; }
td em { font-style: normal; color: var(--potlood); font-size: 13px; display: block; }
td a { text-decoration: none; } td a:hover { text-decoration: underline; }
.strip { display: grid; grid-template-columns: repeat(12, 7px); gap: 1px; padding-top: 6px; }
.strip i { height: 10px; background: var(--lijn); opacity: .3; }
/* bloeimaand: altijd een rand, anders zijn witte bloemen onzichtbaar */
.strip i.b { opacity: 1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.tabel-wrap { padding: 18px 14px 36px; overflow-x: auto; }
.materiaal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--lijn); margin: 0 14px; }
.materiaal div { padding: 14px 0; font-size: 13px; color: var(--potlood); }
.materiaal strong { display: block; font: 500 22px "IBM Plex Mono", monospace; color: var(--grafiet); }
.straat > div:first-child, .maand > div:first-child { padding: 36px 32px 36px 28px; border-right: 1px solid var(--grafiet); }
.straat h2 { margin: 0 0 10px; font-size: 30px; }
.minis { display: grid; grid-template-columns: repeat(5, 1fr); }
.minis button { background: none; border: 0; border-right: 1px solid var(--lijn); text-align: left; cursor: pointer; padding: 22px 16px 18px; display: grid; grid-template-rows: 150px auto; gap: 10px; }
.minis button:hover { background: var(--vel); }
.minis svg { width: 100%; height: 100%; }
.minis b { font-size: 15px; } .minis span { font: 12px "IBM Plex Mono", monospace; color: var(--potlood); display: block; }
.maand .groot { font-size: clamp(64px, 9vw, 132px); font-weight: 800; letter-spacing: -0.05em; line-height: .85; margin: 0; }
.maand ol { list-style: none; margin: 0; padding: 0; }
.maand li { border-bottom: 1px solid var(--lijn); padding: 18px 28px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; }
.maand li a { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.maand li a:hover { text-decoration: underline; }
.maand li span { font: 13px "IBM Plex Mono", monospace; color: var(--potlood); white-space: nowrap; }
footer { border-top: 1px solid var(--grafiet); padding: 22px 28px 40px; font-size: 14px; color: var(--potlood); }

@media (max-width: 900px) {
  :root { --kop: auto; }
  .kop { flex-wrap: wrap; gap: 6px 22px; padding: 14px 16px; }
  .tool, .staat, .straat, .maand { grid-template-columns: minmax(0, 1fr); }
  .intro { border-right: 0; padding: 22px 16px 0; }
  .intro .lead { margin-bottom: 12px; font-size: 15px; }
  h1 { font-size: 36px; }
  .vel { grid-column: 1; grid-row: auto; order: 1; position: static; height: auto; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .paneel { grid-column: 1; grid-row: auto; order: 2; border-right: 0; padding: 22px 16px 32px; border-bottom: 1px solid var(--grafiet); }
  .plaat { padding: 8px 16px 4px; }
  .plaat { height: 52vh; }
  .plaat svg { max-height: 100%; }
  .titelblok { margin: 0 16px 12px; }
  .titelblok .legenda { display: none; }
  .jaar { grid-template-columns: 1fr; }
  .tellers { border-left: 0; border-top: 1px solid var(--grafiet); grid-template-columns: repeat(4, auto); padding: 10px 16px; }
  .maanden button { font-size: 10px; }
  .maanden button i { margin: 0 3px 5px; height: 22px; }
  .staat > h2, .straat > div:first-child, .maand > div:first-child { border-right: 0; padding-left: 16px; padding-right: 16px; }
  .staat th:nth-child(3), .staat td:nth-child(3) { display: none; }
  th, td { padding: 9px 8px; }
  .materiaal { margin: 0 8px; }
  .minis { grid-template-columns: repeat(5, 150px); overflow-x: auto; }
  .maand li { padding: 16px; grid-template-columns: 1fr; gap: 4px; }
  footer { padding: 22px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .kop, .paneel, .intro, .gereedschap, .selinfo, .straat, .maand, footer, .maanden { display: none !important; }
  .tool { display: block; }
  .vel { position: static; height: auto; display: grid; grid-template-columns: 1fr 250px; }
  .plaat svg { max-height: 70vh; }
  body { background: #fff; }
}

/* ---------- plantpagina ---------- */
.plant { display: grid; grid-template-columns: 4fr 8fr; }
.kruimel { grid-column: 1 / -1; padding: 14px 28px; border-bottom: 1px solid var(--lijn); font-size: 14px; color: var(--potlood); }
.kruimel a { color: var(--grafiet); }
.plant .tekst { border-left: 1px solid var(--grafiet); }
.zakje-kolom { padding: 32px 32px 40px 28px; display: grid; gap: 18px; align-content: start; }
/* Het zakje: papieren zak met een geknipte bovenrand, de plantkleur als vlak bovenin. */
.zakje { background: var(--vel); border: 1px solid var(--grafiet); }
.zakje-kop { display: flex; justify-content: space-between; padding: 22px 14px 8px; border-top: 0; font-size: 13px; border-bottom: 1px solid var(--grafiet); background: var(--plantkleur); color: #111; }
.zakje-kop .mono { font-weight: 500; }
.zakje-latijn { padding: 14px 14px 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.zakje-beeld { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px 4px; }
.zakje-beeld figure { margin: 0; }
.zakje-beeld svg { width: 100%; height: auto; display: block; aspect-ratio: 1; }
.zakje-beeld .onder { margin: 4px 0 0; font: 400 12px "IBM Plex Mono", monospace; color: var(--potlood); }
.symbool .vlak { fill: var(--gazon); stroke: var(--grafiet); stroke-width: 1; }
.symbool .ruit line { stroke: var(--lijn); stroke-width: 1; }
.symbool circle { stroke: var(--grafiet); stroke-width: 1.5; fill-opacity: .9; }
.symbool text { font: 500 13px "IBM Plex Mono", monospace; text-anchor: middle; fill: #111; paint-order: stroke; stroke: rgba(255,255,255,.6); stroke-width: 3px; }
.meetlat .lat line { stroke: var(--grafiet); stroke-width: 1; }
.meetlat .lat text { font: 400 10px "IBM Plex Mono", monospace; fill: var(--potlood); }
.meetlat rect { stroke: var(--grafiet); stroke-width: 1; }
.meetlat .top { stroke: var(--grafiet); stroke-width: 1.5; stroke-dasharray: 3 3; }
.strip.groot { grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 14px 14px 0; }
.strip.groot i { height: 26px; }
.zakje-maanden { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 4px 14px 14px; font: 400 11px "IBM Plex Mono", monospace; color: var(--potlood); text-align: center; }
.zakje-kolom .knop { text-align: center; }
.plant .tekst { padding: 32px 28px 56px; max-width: 760px; }
.plant h1 small { display: block; font-size: 20px; font-weight: 400; color: var(--potlood); letter-spacing: 0; margin-top: 10px; line-height: 1.3; }
.antwoord { font-size: 20px; line-height: 1.5; margin: 22px 0 26px; max-width: 60ch; }
.let-op { border-left: 3px solid var(--fout); padding: 4px 0 4px 14px; margin: 0 0 22px; max-width: 60ch; }
.gegevens { max-width: 520px; margin-bottom: 34px; }
.gegevens th { width: 42%; font-size: 15px; color: var(--potlood); font-weight: 400; }
.plant h2 { font-size: 26px; margin: 34px 0 10px; }
.plant .tekst p { max-width: 62ch; }
.toel { color: var(--potlood); font-size: 15px; margin-top: 0; }
.buren { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grafiet); max-width: 640px; }
.buren li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.buren a { text-decoration: none; }
.buren a:hover b { text-decoration: underline; }
.buren em { font-style: normal; display: block; font-size: 13px; color: var(--potlood); }
.buren span { font: 400 13px "IBM Plex Mono", monospace; color: var(--potlood); min-width: 52px; text-align: right; }
.buren .strip { padding: 0; }
.bron { font-size: 14px; color: var(--potlood); margin-top: 40px; }

/* ---------- catalogus ---------- */
.catalogus { display: grid; grid-template-columns: 4fr 8fr; }
.catalogus-kop { padding: 40px 32px 40px 28px; }
.catalogus > .tabel-wrap { border-left: 1px solid var(--grafiet); min-height: 100vh; }
.catalogus-kop .lead { margin-bottom: 26px; }
.filters fieldset { margin-bottom: 18px; }
.telling { font: 500 14px "IBM Plex Mono", monospace; margin: 8px 0 0; }
.catalogus .tabel-wrap { padding-top: 24px; }
.catalogus-tabel td a { font-weight: 500; }
.catalogus-tabel tbody tr[hidden] { display: none; }
.leeg { padding: 14px; color: var(--potlood); }
@media (min-width: 901px) { .catalogus-kop { position: sticky; top: 0; align-self: start; } }

@media (max-width: 900px) {
  .plant, .catalogus { grid-template-columns: minmax(0, 1fr); }
  .kruimel { padding: 12px 16px; }
  .zakje-kolom, .catalogus-kop { border-right: 0; padding: 22px 16px; border-bottom: 1px solid var(--grafiet); }
  .plant .tekst { padding: 24px 16px 40px; border-left: 0; }
  .catalogus > .tabel-wrap { border-left: 0; min-height: 0; }
  .antwoord { font-size: 18px; }
  .buren li { grid-template-columns: 1fr auto; }
  .buren li .strip { display: none; }
  .catalogus-tabel th:nth-child(3), .catalogus-tabel td:nth-child(3), .catalogus-tabel th:nth-child(4), .catalogus-tabel td:nth-child(4) { display: none; }
}

/* ---------- gidspagina ---------- */
.gids-kop { display: grid; grid-template-columns: 4fr 8fr; border-bottom: 1px solid var(--grafiet); }
.gids-intro { padding: 36px 32px 36px 28px; border-right: 1px solid var(--grafiet); }
.gids-intro .antwoord { margin-bottom: 18px; }
.gids-plan { margin: 0; padding: 30px 28px; background: var(--vel); display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: center; }
.gids-plan svg { width: 100%; height: auto; }
.gids-plan .kavel-border { fill: var(--blad); stroke: var(--grafiet); stroke-width: 3; }
.gids-plan .plan .codes text { font-size: 12px; stroke-width: 3px; }
.gids-plan .plan .maat text { font-size: 13px; }
.gids-plan .plan .plant { stroke: var(--grafiet); stroke-width: 1; fill-opacity: .85; }
.gids-plan figcaption b { display: block; margin-bottom: 10px; }
.legenda-lijst { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--lijn); }
.legenda-lijst li { display: grid; grid-template-columns: 44px 1fr; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.legenda-lijst .mono { font-size: 13px; padding-top: 2px; }
.legenda-lijst em { grid-column: 2; font-style: normal; font-size: 13px; color: var(--potlood); }
.legenda-lijst a { text-decoration: none; font-weight: 500; } .legenda-lijst a:hover { text-decoration: underline; }
.gids-tekst { padding: 10px 28px 30px; margin-left: calc(33.333% ); max-width: 760px; }
.gids-tekst h2 { font-size: 26px; margin: 30px 0 8px; }
.gids-tekst p { max-width: 64ch; margin: 0 0 12px; }
.gids-lijst { border-top: 1px solid var(--grafiet); }
.gids-lijst-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 26px 28px 0; }
.gids-lijst-kop h2 { margin: 0; font-size: 30px; }
.gids-lijst .catalogus-tabel tbody tr[hidden] { display: none; }
.verwant { padding: 10px 28px 40px; }
.verwant h2 { font-size: 22px; }
.verwant ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.verwant a { font-weight: 700; font-size: 18px; }
.gidsen-index { padding: 0 0 6px; margin: 0; list-style: none; display: grid; gap: 6px; }
.gidsen-index a { font-weight: 500; }

@media (max-width: 900px) {
  .gids-kop { grid-template-columns: minmax(0, 1fr); }
  .gids-intro { border-right: 0; padding: 22px 16px; border-bottom: 1px solid var(--grafiet); }
  .gids-plan { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .gids-tekst { margin-left: 0; padding: 4px 16px 24px; }
  .gids-lijst-kop, .verwant { padding-left: 16px; padding-right: 16px; }
  .gids-lijst .catalogus-tabel th:nth-child(3), .gids-lijst .catalogus-tabel td:nth-child(3), .gids-lijst .catalogus-tabel th:nth-child(4), .gids-lijst .catalogus-tabel td:nth-child(4) { display: none; }
}

/* ---------- voorbeeldontwerpen ---------- */
.vb-kop { padding: 36px 28px 28px; border-bottom: 1px solid var(--grafiet); max-width: 980px; }
.vb-kop .antwoord { margin-bottom: 0; }
.voorbeeld { margin: 0; display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--grafiet); }
.voorbeeld-plan { background: var(--vel); padding: 24px; display: grid; place-items: center; border-right: 1px solid var(--grafiet); }
.voorbeeld-plan svg { width: 100%; max-height: 640px; }
.voorbeeld figcaption { padding: 28px 28px 32px; }
.voorbeeld h2 { font-size: 26px; margin: 0 0 6px; }
.voorbeeld .cijfers { font-size: 13px; color: var(--potlood); margin: 0 0 18px; }
.mini-staat { margin-bottom: 22px; }
.mini-staat td { padding: 7px 8px; font-size: 14px; }
.mini-staat td a { font-weight: 500; }
.vb-tekst { margin-left: 0; padding-left: 28px; }
.vb-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--grafiet); }
.vb-raster li { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vb-raster a { display: grid; gap: 4px; padding: 20px 18px 22px; text-decoration: none; }
.vb-raster a:hover { background: var(--vel); }
.vb-raster a:hover b { text-decoration: underline; }
.vb-mini { height: 220px; display: grid; place-items: center; margin-bottom: 10px; }
.vb-mini svg { width: 100%; height: 100%; }
.vb-mini .codes, .vb-mini .maat { display: none; }
.vb-raster span { font: 12px "IBM Plex Mono", monospace; color: var(--potlood); }
@media (max-width: 900px) {
  .vb-kop { padding: 22px 16px; }
  .voorbeeld { grid-template-columns: minmax(0, 1fr); }
  .voorbeeld-plan { border-right: 0; padding: 12px; }
  .voorbeeld-plan svg { max-height: 60vh; }
  .voorbeeld figcaption { padding: 20px 16px 26px; }
  .vb-tekst { padding-left: 16px; }
  .vb-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-mini { height: 150px; }
}

/* ---------- maandpagina ---------- */
.maandpagina { display: grid; grid-template-columns: 4fr 8fr; }
.maand-links { padding: 36px 32px 40px 28px; border-right: 1px solid var(--grafiet); }
.maand-links .groot { font-size: clamp(64px, 9vw, 132px); font-weight: 800; letter-spacing: -0.05em; line-height: .85; margin: 0 0 18px; }
.maand-links h1 { font-size: 30px; }
.maand-links .antwoord { font-size: 18px; }
.inhoud { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.9; }
@media (min-width: 901px) { .maand-links { position: sticky; top: 0; align-self: start; } .maand-rechts { border-left: 1px solid var(--grafiet); margin-left: -1px; } }
.klus { padding: 30px 28px 22px; border-bottom: 1px solid var(--lijn); max-width: 760px; scroll-margin-top: 12px; }
.klus h2 { font-size: 26px; margin: 0 0 8px; }
.klus p { max-width: 64ch; margin: 0 0 8px; }
.klus .duur { font-size: 12px; color: var(--potlood); }
.klus:target h2 { text-decoration: underline; text-decoration-color: var(--blauwdruk); text-decoration-thickness: 3px; }
.foutpagina { padding: 60px 28px 80px; max-width: 760px; }
.foutpagina ul { line-height: 2; }
@media (max-width: 900px) {
  .maandpagina { grid-template-columns: minmax(0, 1fr); }
  .maand-links { border-right: 0; padding: 22px 16px; border-bottom: 1px solid var(--grafiet); }
  .klus { padding: 22px 16px 16px; }
  .foutpagina { padding: 32px 16px 48px; }
}

/* ---------- beplanting van een geselecteerde border ---------- */
.bordervak { grid-column: 2; align-self: stretch; max-height: 100%; margin: 0 20px 20px 0; background: var(--vel); border: 1px solid var(--grafiet); overflow-y: auto; padding: 10px 10px 4px; font-size: 14px; }
.vel.met-bordervak .titelblok { display: none; }
.bordervak h3 { margin: 0; font-size: 15px; }
.bordervak .toel { margin: 2px 0 8px; font-size: 13px; }
.soortenlijst, .alternatieven { list-style: none; margin: 0; padding: 0; }
.soortenlijst > li { border-top: 1px solid var(--lijn); }
.soortregel { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 6px 0; }
.soortregel .mono { font-size: 11px; }
.soortregel em, .alternatieven em { display: block; font-style: normal; font-size: 12px; color: var(--potlood); }
.soortregel button { border: 1px solid var(--grafiet); background: none; padding: 3px 7px; font-size: 12px; cursor: pointer; }
.alternatieven { padding: 0 0 8px 34px; }
.alternatieven button { all: unset; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; width: 100%; padding: 4px 0; border-top: 1px dotted var(--lijn); font-size: 13px; }
.alternatieven button:hover { color: var(--blauwdruk); }
.alternatieven button:focus-visible { outline: 2px solid var(--blauwdruk); }
.alternatieven em { grid-column: 2; }
.alternatieven .leeg { color: var(--potlood); font-size: 13px; padding: 4px 0; }
@media (max-width: 900px) {
  .bordervak { grid-column: 1; grid-row: auto; margin: 0 16px 12px; }
}

/* ---------- Japanse stijl ---------- */
.plan.stijl-japans .zone-grind > rect { fill: url(#hark); }
.plan .zone-rots .vang { fill: transparent; stroke: none; }
.plan .zone-rots polygon { fill: var(--potlood); fill-opacity: .55; stroke: var(--grafiet); stroke-width: 2; }

/* maandstrook onder een maandpagina */
.maandstrook { padding: 26px 28px 40px; max-width: 760px; }
.maandstrook h2 { font-size: 22px; margin: 0 0 10px; }
.maandstrook div { display: grid; grid-template-columns: repeat(12, 1fr); border: 1px solid var(--grafiet); }
.maandstrook a, .maandstrook span { padding: 12px 0; text-align: center; font: 500 13px "IBM Plex Mono", monospace; border-right: 1px solid var(--lijn); text-decoration: none; }
.maandstrook div > :last-child { border-right: 0; }
.maandstrook a:hover { background: var(--vel); text-decoration: underline; }
.maandstrook [aria-current] { background: var(--grafiet); color: var(--vel); }
.maandstrook .leeg { color: var(--lijn); }
@media (max-width: 900px) {
  .maandstrook { padding: 20px 16px 32px; }
  .maandstrook div { grid-template-columns: repeat(6, 1fr); }
  .maandstrook div > :nth-child(6) { border-right: 0; }
  .maandstrook div > :nth-child(-n+6) { border-bottom: 1px solid var(--lijn); }
}

/* ---------- mediterrane stijl: planten in grind ---------- */
.plan.stijl-mediterraan .zone-border > rect { fill: url(#grind); }

/* ---------- voortuin ---------- */
.plan .zone-containers > rect:first-child { fill: var(--grind); stroke: var(--grafiet); stroke-width: 1.5; }
.plan .zone-containers .bak { fill: var(--vel); stroke: var(--grafiet); stroke-width: 1.5; }
.plan .straat-label { font: 500 20px "IBM Plex Mono", monospace; fill: var(--potlood); text-anchor: middle; letter-spacing: .2em; pointer-events: none; }

/* ---------- adres ---------- */
.adres { margin: 0 0 26px; position: relative; }
@media (max-width: 900px) { .adres { margin-bottom: 14px; } }
.adres label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.adres input { width: 100%; font: 400 16px "Schibsted Grotesk", sans-serif; padding: 11px 12px; border: 1px solid var(--grafiet); border-radius: 0; background: var(--vel); color: var(--grafiet); }
.adres-lijst { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; z-index: 5; background: var(--vel); border: 1px solid var(--grafiet); border-top: 0; }
.adres-lijst li { padding: 9px 12px; cursor: pointer; font-size: 15px; border-top: 1px solid var(--lijn); }
.adres-lijst li:hover, .adres-lijst li[aria-selected="true"] { background: var(--grafiet); color: var(--vel); }
.melding .linkknop { all: unset; cursor: pointer; text-decoration: underline; font-weight: 700; }
.bronregel { font-size: 12px; color: var(--potlood); margin: 4px 0 0; }
.adres-uitkomst { margin-top: 12px; }
.adres-uitkomst p { margin: 0 0 8px; font-weight: 500; }
.naar-3d { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--blauwdruk); }
.naar-3d::after { content: " →"; }

/* ---------- voorpagina ---------- */
.voor-kop { display: grid; grid-template-columns: 7fr 5fr; border-bottom: 1px solid var(--grafiet); }
.voor-intro { padding: 56px 40px 48px 28px; border-right: 1px solid var(--grafiet); }
.voor-intro h1 { font-size: clamp(52px, 7.4vw, 112px); margin-bottom: 20px; }
.voor-intro .lead { font-size: 20px; max-width: 34ch; }
.voor-adres { max-width: 580px; }
.adres-rij { display: flex; }
.adres-rij input { flex: 1; min-width: 0; }
.adres-rij .knop { white-space: nowrap; }
.voor-adres .hint { font-size: 14px; color: var(--potlood); margin: 12px 0 0; }
.voor-maand { padding: 40px 28px 32px; background: var(--vel); }
.voor-maand .groot { font-size: clamp(76px, 9.5vw, 148px); font-weight: 800; letter-spacing: -0.05em; line-height: .85; margin: 0 0 14px; }
.voor-maand h2 { font-size: 16px; letter-spacing: 0; font-weight: 500; color: var(--potlood); margin: 0 0 4px; }
.voor-maand ol { list-style: none; margin: 0 0 18px; padding: 0; }
.voor-maand li { border-bottom: 1px solid var(--lijn); padding: 12px 0; }
.voor-maand li a { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.voor-maand li a:hover, .lijst a:hover b, .seizoensrij a:hover b, .gereedschap-blok a:hover b { text-decoration: underline; }
.verder-link { font-weight: 700; color: var(--blauwdruk); }
.verder-link::after { content: " \2192"; }

/* drie ingangen voor dit seizoen, bewust ongelijk breed: de huidige maand voert */
.seizoensrij ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 5fr 4fr 3fr; border-bottom: 1px solid var(--grafiet); }
.seizoensrij li + li { border-left: 1px solid var(--lijn); }
.seizoensrij a { display: grid; align-content: start; gap: 6px; padding: 22px 28px 26px; text-decoration: none; height: 100%; }
.seizoensrij a:hover { background: var(--vel); }
.seizoensrij .mono { font-size: 12px; color: var(--potlood); }
.seizoensrij b { font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.seizoensrij li:first-child b { font-size: 30px; }
.seizoensrij em { font-style: normal; color: var(--potlood); font-size: 15px; }

/* rubrieken: elk een eigen opbouw */
.rubriek { display: grid; border-bottom: 1px solid var(--grafiet); }
.rubriek h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 0 0 24px; max-width: 20ch; }
.rubriek-tekst { padding: 44px 28px 44px 36px; }
.rubriek-ontwerpen { grid-template-columns: 5fr 7fr; }
.rubriek-beeld { margin: 0; padding: 28px; border-right: 1px solid var(--grafiet); background: var(--vel); display: grid; align-content: center; }
.rubriek-beeld svg { width: 100%; height: auto; max-height: 620px; display: block; }
.rubriek-beeld figcaption { font-size: 12px; color: var(--potlood); margin-top: 10px; }
.rubriek-ligging { grid-template-columns: 7fr 5fr; }
.rubriek-ligging .rubriek-tekst { padding-left: 28px; }
.rubriek-ligging > svg { border-left: 1px solid var(--grafiet); padding: 36px; }
.rubriek-planten { grid-template-columns: 8fr 4fr; }
.rubriek-planten .rubriek-tekst { padding-left: 28px; }
.rubriek-bloeit { padding: 44px 28px; border-left: 1px solid var(--grafiet); background: var(--vel); }
.rubriek-bloeit h3 { margin: 0 0 10px; font-size: 16px; font-weight: 500; color: var(--potlood); }
.rubriek-seizoen { display: block; padding: 44px 28px; }

.lijst { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--lijn); }
.lijst li { border-bottom: 1px solid var(--lijn); }
.lijst a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; padding: 14px 0; text-decoration: none; }
.lijst b { font-size: 18px; letter-spacing: -0.01em; }
.lijst span { color: var(--potlood); font-size: 15px; }
.lijst-groot a { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
.lijst-groot b { font-size: 24px; letter-spacing: -0.02em; }

.windroos { width: 100%; max-width: 400px; display: block; margin: 0 auto; }
.windroos .huis { fill: var(--grafiet); }
.windroos .huislabel { fill: var(--vel); font: 500 13px "IBM Plex Mono", monospace; text-anchor: middle; }
.windroos .vlak { fill: var(--gazon); stroke: var(--grafiet); stroke-width: 1; }
.windroos a:hover .vlak, .windroos a:focus .vlak { fill: var(--blad); }
.windroos .letter { font: 800 30px "Schibsted Grotesk", sans-serif; text-anchor: middle; fill: var(--grafiet); pointer-events: none; }

.bloeit { list-style: none; margin: 0; padding: 0; }
.bloeit a { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); text-decoration: none; }
.bloeit .mini { width: 64px; height: 48px; grid-row: span 2; }
.bloeit b { align-self: end; }
.bloeit em { align-self: start; }
.bloeit b { font-size: 16px; }
.bloeit em { font-size: 13px; color: var(--potlood); }

.jaarstrook { display: grid; grid-template-columns: repeat(12, 1fr); border: 1px solid var(--grafiet); }
.jaarstrook a { padding: 26px 0; text-align: center; text-decoration: none; font-size: 15px; border-right: 1px solid var(--lijn); }
.jaarstrook a:last-child { border-right: 0; }
.jaarstrook a:hover { background: var(--vel); }
.jaarstrook a[aria-current] { background: var(--grafiet); color: var(--vel); }

.gereedschap-blok { padding: 44px 28px 60px; }
.gereedschap-blok h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 0 0 22px; }
.gereedschap-blok > div { display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--grafiet); }
.gereedschap-blok a { display: grid; align-content: start; gap: 8px; padding: 26px 28px 30px; text-decoration: none; }
.gereedschap-blok a + a { border-left: 1px solid var(--grafiet); background: var(--vel); }
.gereedschap-blok b { font-size: 26px; letter-spacing: -0.02em; }
.gereedschap-blok span { color: var(--potlood); max-width: 46ch; }

/* rubriekpagina */
.rubriekpagina { display: grid; grid-template-columns: 5fr 7fr; }
.rubriekpagina-kop { padding: 40px 28px; border-right: 1px solid var(--grafiet); }
.rubriekpagina-kop h1 { font-size: clamp(38px, 4.4vw, 60px); }
.rubriekpagina-kop .windroos, .rubriekpagina-kop .jaarstrook { margin-top: 32px; }
.rubriekpagina > .lijst { margin: 0; padding: 24px 28px 44px; border-top: 0; }

@media (max-width: 900px) {
  .voor-kop, .rubriek, .rubriek-ontwerpen, .rubriek-ligging, .rubriek-planten, .rubriekpagina, .gereedschap-blok > div { grid-template-columns: minmax(0, 1fr); }
  .voor-intro { padding: 28px 16px 30px; border-right: 0; border-bottom: 1px solid var(--grafiet); }
  .voor-intro .lead { font-size: 17px; }
  .voor-maand, .rubriek-tekst, .rubriek-ligging .rubriek-tekst, .rubriek-planten .rubriek-tekst, .rubriek-bloeit, .rubriek-seizoen, .gereedschap-blok, .rubriekpagina-kop { padding: 28px 16px; }
  .adres-rij { flex-direction: column; }
  .adres-rij .knop { margin-top: 8px; }
  .seizoensrij ul { grid-template-columns: minmax(0, 1fr); }
  .seizoensrij li + li { border-left: 0; border-top: 1px solid var(--lijn); }
  .seizoensrij a { padding: 18px 16px; }
  .rubriek-beeld { border-right: 0; border-bottom: 1px solid var(--grafiet); padding: 16px; }
  .rubriek-beeld svg { max-height: 420px; }
  .rubriek-ligging > svg, .rubriek-bloeit { border-left: 0; border-top: 1px solid var(--grafiet); }
  .rubriek-ligging > svg { padding: 20px 16px; }
  .lijst a { grid-template-columns: minmax(0, 1fr); }
  .jaarstrook { grid-template-columns: repeat(6, 1fr); }
  .jaarstrook a:nth-child(6) { border-right: 0; }
  .jaarstrook a:nth-child(-n+6) { border-bottom: 1px solid var(--lijn); }
  .gereedschap-blok a + a { border-left: 0; border-top: 1px solid var(--grafiet); }
  .rubriekpagina-kop { border-right: 0; border-bottom: 1px solid var(--grafiet); }
  .rubriekpagina > .lijst { padding: 8px 16px 32px; }
}

/* plantfoto's */
.mini { display: block; object-fit: cover; background: var(--blad); }
.mini.leeg { background: repeating-linear-gradient(45deg, var(--gazon) 0 4px, var(--vel) 4px 8px); }
.plantcel { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.plantcel .mini { width: 80px; height: 60px; grid-row: span 2; }
.plantcel a { align-self: end; }
.plantcel em { align-self: start; }
.plantfoto { margin: 0 0 26px; max-width: 720px; }
.plantfoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--blad); }
.plantfoto figcaption { font-size: 11.5px; line-height: 1.5; color: var(--potlood); margin-top: 8px; max-width: 72ch; }
.plantfoto figcaption a { color: inherit; }

/* ---------- artikel ---------- */
.artikel { display: grid; grid-template-columns: 4fr 8fr; grid-template-rows: auto 1fr; grid-template-areas: "zij opening" "zij tekst"; border-bottom: 1px solid var(--grafiet); }
.artikel-opening { grid-area: opening; padding: 40px 28px 0 44px; border-left: 1px solid var(--grafiet); min-width: 0; }
.artikel-opening h1 { font-size: clamp(36px, 4.2vw, 58px); max-width: 18ch; margin-bottom: 24px; text-wrap: balance; }
.artikel-opening p { max-width: 66ch; margin: 0; font-size: 21px; line-height: 1.5; }
.artikel-zij { grid-area: zij; padding: 40px 28px; }
.artikel-zij > * + * { margin-top: 24px; }
@media (min-width: 901px) { .artikel-zij { position: sticky; top: 0; align-self: start; } }
.artikel-datum { font-size: 13px; color: var(--potlood); margin: 0; }
.artikel-kort { background: var(--vel); border: 1px solid var(--lijn); padding: 18px 20px; }
.artikel-kort h2 { font-size: 16px; letter-spacing: 0; margin: 0 0 8px; }
.artikel-kort ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.artikel-kort li + li { margin-top: 6px; }
.artikel-tekst { grid-area: tekst; padding: 0 28px 48px 44px; min-width: 0; border-left: 1px solid var(--grafiet); }
.artikel-tekst > p, .artikel-tekst > ul, .artikel-tekst > ol, .artikel-tekst > h2, .artikel-tekst > h3 { max-width: 66ch; }
.artikel-tekst > p { margin: 0 0 16px; font-size: 18px; line-height: 1.62; }
.artikel-tekst h2 { font-size: 28px; margin: 40px 0 12px; text-wrap: balance; }
.artikel-tekst h3 { font-size: 20px; margin: 26px 0 8px; letter-spacing: -0.01em; }
.artikel-tekst ul, .artikel-tekst ol { font-size: 18px; line-height: 1.6; padding-left: 22px; margin: 0 0 18px; }
.artikel-tekst li + li { margin-top: 6px; }
.artikel-tekst a { color: var(--blauwdruk); }
.artikel-planten { margin-top: 44px; border-top: 1px solid var(--grafiet); padding-top: 22px; }
.artikel-planten h2 { font-size: 20px; margin: 0 0 14px; }
.artikel-planten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.artikel-planten a { display: grid; gap: 4px; text-decoration: none; color: var(--grafiet); }
.artikel-planten img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.artikel-planten b { font-size: 15px; } .artikel-planten em { font-size: 13px; color: var(--potlood); }
.verder ul { gap: 14px 28px; }

/* nieuwe artikelen op de voorpagina */
.nieuw { padding: 44px 28px; border-bottom: 1px solid var(--grafiet); }
.nieuw h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 0 0 22px; }
.nieuw ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 6fr 3fr 3fr; border-top: 1px solid var(--grafiet); }
.nieuw li { border-right: 1px solid var(--lijn); }
.nieuw li:last-child { border-right: 0; }
.nieuw a { display: grid; gap: 6px; padding: 18px 20px 22px 0; text-decoration: none; }
.nieuw li + li a { padding-left: 20px; }
.nieuw .mono { font-size: 12px; color: var(--potlood); }
.nieuw b { font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; }
.nieuw li:first-child b { font-size: 30px; }
.nieuw em { font-style: normal; color: var(--potlood); font-size: 15px; }
.nieuw a:hover b { text-decoration: underline; }

@media (max-width: 900px) {
  .artikel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "opening" "zij" "tekst"; }
  .artikel-opening { border-left: 0; padding: 28px 16px 24px; }
  .artikel-opening p { font-size: 19px; }
  .artikel-zij { border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--grafiet); padding: 20px 16px 24px; }
  .artikel-tekst { border-left: 0; }
  .artikel-tekst { padding: 28px 16px 36px; }
  .artikel-tekst > p, .artikel-tekst ul, .artikel-tekst ol { font-size: 17px; }
  .nieuw { padding: 28px 16px; }
  .nieuw ul { grid-template-columns: minmax(0, 1fr); }
  .nieuw li { border-right: 0; border-bottom: 1px solid var(--lijn); }
  .nieuw li + li a { padding-left: 0; }
}