/* Akkerkompas, huisstijl versie 1.
   Kleuren komen uit een bodemprofiel. Groen is de enige merkkleur.
   Roest en blauw dragen betekenis, nooit versiering. */

:root {
  /* ================================================================
     Ontwerp: "Akkerkompas Redesign" uit Claude Design, ronde 1 tot 4.
     ================================================================

     Wat er veranderde ten opzichte van de vorige ronde: het papier werd warmer en
     doffer, de kaarten kregen kleine radii in plaats van grote, en de lime is
     verdwenen. De nadruk is nu een diepgroen vlak met crème letters.

     De namen blijven hetzelfde als hiervoor, want de hele site verwijst ernaar. Alleen
     de waarden veranderen, en dat verandert elk scherm in een keer. */

  /* Het papier. Drie lagen: de pagina, de kaart erop, en het vak in die kaart. */
  --grond:      #E4DCCC;
  --vlak:       #F6F2E9;
  --vlak-diep:  #F1EDE1;

  /* Drie lijndiktes in kleur: de rand van een kaart, de haarlijn erbinnen, en de
     lijn die wel gezien mag worden (een omtrekknop, een gesloten merkje). */
  --lijn:       #DCD2BE;
  --lijn-zacht: #E5DCCA;
  --lijn-sterk: #C3B9A4;

  /* Inkt. Van donker naar licht: de kop, de lopende tekst, de bijzin, het etiket. */
  --inkt:       #2C3220;
  --inkt-tekst: #4B4E3C;
  --inkt-zacht: #6A6553;
  --leem:       #8A8270;

  /* Groen. --diep is het vlak waar iets op gedrukt wordt (knop, merkje), --gewas is
     de kleur van tekst en balken, --gewas-zacht het vlak eronder. */
  /* Het palet van de baas, vier kleuren, met de rol die uit de meting volgt.
   *
   * Nagemeten tegen het papier (#E4DCCC), de kaart (#F6F2E9) en crème letters:
   *
   *   #4F8C2A   3,01   3,67   3,55
   *   #78C34D   1,59   1,94   1,87
   *   #3B5A15   5,79   7,07   6,83
   *
   * Daaruit volgt vanzelf wie wat doet. #4F8C2A is de merkkleur en vult balken, het
   * beeldmerk en de vlakken die geen letter dragen; op een vlak is 3:1 genoeg en dat
   * haalt hij. Als lettercolor of als knop met crème erop haalt hij de 4,5 niet, en
   * daar staat #3B5A15 uit hetzelfde palet: 6,8 tot 7,1. #78C34D is te licht voor
   * papier maar juist de beste van de vier op een donkere ondergrond (8,76), dus dat
   * is de merkkleur in de donkere stand.
   *
   * Vandaar --gewas voor vlakken en --gewas-inkt voor letters. Zet nooit --gewas op een
   * color: zonder na te meten; daar zijn 66 regels voor omgezet. */
  --diep:       #3B5A15;
  --diep-vlak:  #2C440F;
  --gewas:      #4F8C2A;
  --gewas-fel:  #78C34D;
  --gewas-inkt: #3B5A15;
  --gewas-inkt-fel: #4F8C2A;
  --gewas-licht: #78C34D;
  --gewas-zacht: #E9F6E9;
  --gewas-lijn:  #C7E4C2;
  --op-gewas:    #F3EEE3;

  /* Nadruk. Heette --nadruk en was een fel groengeel vlak met donkere letters. In dit
     ontwerp komt die kleur niet meer voor; de nadruk is nu hetzelfde diepgroen als de
     knop. De naam is meeveranderd, want een variabele die --nadruk heet en donkergroen
     bevat is een val waar je later in loopt. */
  --nadruk:     #3B5A15;
  --nadruk-diep: #2C440F;
  --op-nadruk:  #F3EEE3;

  /* Klei voor droogte en waarschuwingen. */
  --roest:      #B4552A;
  --roest-mid:  #C4713F;
  --roest-zacht: #F6E6DA;
  --roest-lijn: #E8CDB9;
  --op-roest:   #5A3A26;

  /* Blauw voor het water. Een eigen vlak, want de waterbalans is geen weegfactor van
     dezelfde soort maar het verhaal over dit perceel. */
  --water:      #5C7F8C;
  --water-vlak: #E8EDEE;
  --water-lijn: #D3DEE0;
  --water-inkt: #2F4550;
  --water-zacht: #CFDBDD;

  /* Stro: waar iets voorlopig of onder voorbehoud is. */
  --stro:       #8A6A3A;
  --stro-vlak:  #EDE3CB;

  /* Bodemkleuren, voor de bodemkaart en het beeldmerk. */
  --bouwvoor:   #2C3220;
  --zand:       #B5A176;
  --zand-licht: #D8CBA9;
  --op-donker:  #E4DCCC;

  /* De donkere band met de bronnen en de voet. */
  --band:       #2C3220;
  --band-vlak:  #2C3220;
  --band-lijn:  #6A6553;

  /* Papierwit. Bewust wit, niet de ondergrond: het perceelbeeld is een kavelkaart en
     het knopje van een schakelaar. */
  --papier:     #FFFFFF;

  /* Ronding. Ronde 5 zet niet meer overal dezelfde waarde: de cijferband is recht, de
     stapkaarten zijn bijna een pil en het adviespaneel zit ertussenin. Dat is een keuze
     van de baas, tegen de oude regel in dat alles uit drie waarden komt. De tokens
     hieronder zijn de hele lijst; zoek er een op voordat je een los getal in een regel
     zet, want er hebben twee keer regels gestaan die de tokens verderop terugdraaiden. */
  --rond-klein: 3px;
  --rond:       6px;
  --rond-groot: 8px;
  --rond-kaart: 4px;    /* beheer, mijn, beleid, bestellen */
  --rond-bron:  7px;    /* de bronkaartjes op de homepage */
  --rond-knop:  10px;   /* knoppen in een rij */
  --rond-knopbreed: 12px; /* knoppen die de volle breedte pakken */
  --rond-paneel: 16px;  /* het adviespaneel dat over de kaart zweeft */
  --rond-diep:  18px;   /* de donkergroene kaart en het slotblok */
  --rond-stap:  55px;   /* de drie stapkaarten op de homepage */
  --rond-pil:   999px;

  /* Ronde 5 tilt de kaarten van het papier. Hiervoor stond hier vrijwel niets en deed
     de rand al het werk; nu draagt elke kaart een dubbele schaduw: een scherpe vlak
     eronder en een wijde zachte daaronder. Drie standen: liggend, zwevend over de
     kaart, en opgetild zolang je hem aanwijst. */
  --schaduw:      0 1px 2px rgba(44, 50, 32, .05), 0 12px 26px -18px rgba(44, 50, 32, .35);
  --schaduw-diep: 0 1px 0 #3E4A2A inset, 0 8px 24px -18px rgba(44, 50, 32, .5);
  --schaduw-zweef: 0 2px 6px rgba(44, 50, 32, .12), 0 26px 50px -24px rgba(44, 50, 32, .55);
  --schaduw-til:  0 12px 28px -18px rgba(44, 50, 32, .5);

  /* De letter staat in een variabele en niet tachtig keer uitgeschreven. Ronde 5
     wisselde Newsreader voor Libre Baskerville en Public Sans voor Karla, en dat waren
     tachtig losse vervangingen; de volgende sprong is er nog een. Drie letters en niet
     meer. Let op het gewicht: Libre Baskerville kent alleen 400 en 700 en geen 500, dus
     koppen krijgen 700 en losse getallen en prijzen 400. */
  --letter-kop:   "Libre Baskerville", Georgia, "Times New Roman", serif;
  --letter-tekst: Karla, ui-sans-serif, system-ui, sans-serif;
  --letter-mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Groen dat ronde 5 erbij vraagt: een rand en een vlak voor een kaartje dat ergens
     goed op scoort, plus de tint waarin het topkaartje zijn scorebalk zet. */
  --gewas-rand:  #A8D49E;
  --gewas-rand-op: #78C34D;
  --gewas-vlak-op: #DCF0D9;
  --gewas-balk:  #CFE9CA;

  /* Warm wit voor een invoerveld: net lichter dan de kaart eronder, zodat een veld
     leesbaar leeg is zonder dat er een tweede rand omheen hoeft. */
  --papier-warm: #FBF8F1;

  /* Op het diepgroene vlak is mos onleesbaar, dus een plusteken en het beeldmerk
     krijgen daar een lichtere tint. */
  --op-diep-groen: #9ADB6F;
  --op-diep-merk:  #78C34D;
  --op-diep-bruin: #6B5D46;

  --rand:       clamp(1rem, .5rem + 2vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dezelfde aarde, andere rol: de bouwvoor wordt de ondergrond. Warm blijven,
       want een koud grijs onder deze accenten ziet er meteen uit als een fout. */
    /* De accent blijft dezelfde kleur, alleen de tekst erop verschuift niet: lime
       met donkere letters werkt in allebei de standen. De schaduw wordt dieper en
       zwarter, want op een donkere ondergrond zie je een zachte bruine schaduw niet. */
    --diep:       #0F1606;
    --diep-vlak:  #1A2410;
    --schaduw:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .6);
    --schaduw-diep: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 44px -16px rgba(0, 0, 0, .7);
    --schaduw-zweef: 0 2px 8px rgba(0, 0, 0, .5), 0 26px 54px -20px rgba(0, 0, 0, .8);
    --schaduw-til:  0 14px 30px -14px rgba(0, 0, 0, .7);

    --grond:      #14100A;
    --vlak:       #1E1810;
    --vlak-diep:  #292117;
    --lijn:       #3A3022;
    --lijn-zacht: #2C2418;
    --inkt:       #EDE6D3;
    --inkt-tekst: #D3C9B2;
    --inkt-zacht: #A79A82;

    /* Mos is in het donker te donker om als knopkleur te dienen, dus daar draaien
       de twee tinten om: gewas wordt de lichte en de knop krijgt donkere letters. */
    /* Omgekeerd aan het licht: #78C34D haalt 8,76 op deze ondergrond en #3B5A15 maar
       2,40, dus de lichte van de twee wordt hier de merkkleur en de knop krijgt
       donkere letters. --gewas-inkt en --gewas wijzen hier naar dezelfde kleur: op een
       donkere ondergrond is er geen verschil meer nodig tussen een vlak en een letter. */
    --gewas:      #78C34D;
    --gewas-fel:  #9ADB6F;
    --gewas-inkt: #78C34D;
    --gewas-inkt-fel: #9ADB6F;
    --op-gewas:   #14100A;
    --gewas-zacht: #21310F;
    --gewas-lijn:  #33501C;
    --gewas-licht: #9ADB6F;

    /* De vier tinten die ronde 5 erbij vroeg. In het licht zijn het bleke groenen op
       papier; in het donker moeten ze juist net boven de ondergrond uitkomen, anders
       verdwijnt de rand van een kaartje dat ergens goed op scoort helemaal. */
    --gewas-rand:    #3C5A22;
    --gewas-rand-op: #5A8A33;
    --gewas-vlak-op: #2A4114;
    --gewas-balk:    #2E4418;

    /* Een invoerveld is in het donker juist donkerder dan de kaart eromheen: een licht
       vlak zou als enige wit op het scherm staan. */
    --papier-warm:   #171208;

    --roest:      #D9834E;
    --roest-zacht: #3A2418;
    --stro:       #E0B457;
    --water:      #62A9C4;

    --bouwvoor:   #6B5D46;
    /* Leem is niet alleen een grondkleur maar ook de kleur van elk klein label,
       op negentien plekken. Op #8A6741 haalde dat maar 3,3 tegen de achtergrond,
       dus in het donker gaat hij lichter. Hij blijft leemkleurig. */
    --leem:       #C0AA83;
    --zand:       #C7A067;
    --zand-licht: #C7A067;
    --op-donker:  #EDE6D3;
    --lijn-sterk: #55492F;

    /* Dieper dan de pagina, en warm. */
    --band:       #0C0906;
    --band-vlak:  #17110B;
    --band-lijn:  #3A3022;
  }
}

* { box-sizing: border-box; }

/* Het hidden-attribuut hoort van alles te winnen.

   De browser geeft [hidden] alleen display:none mee als standaardstijl, en elke
   eigen regel met een display erin wint daarvan. Dat ging hier mis: de drie delen
   van het paneel kregen netjes hidden mee, maar .paneeldeel had display:flex en
   dus stonden ze alle drie gewoon onder elkaar. Op de server klopte het, in het
   scherm niet. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Libre Baskerville staat een stuk breder en met een hogere onderkast dan Newsreader,
   dus dezelfde punten lezen groter. De schaal is daarop herijkt: h1 loopt iets verder
   door, de regelafstand gaat van 1.02 naar 1.14 omdat de letter anders tegen zichzelf
   aan botst, en de negatieve letterafstand wordt sterker naarmate de kop groter is. */
h1, h2, legend, .woordmerk {
  font-family: var(--letter-kop);
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -.02em;
  color: var(--inkt);
}

h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.14; margin: 0; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.16; margin: 0; }

/* Ronde 5 draaide dit om. Hiervoor was een h3 bewust geen schreef maar een vette regel
   in de tekstletter, omdat het een kopje binnen een kaart is en niet de kop van een
   scherm. In het nieuwe ontwerp is elke kop een schreef, ook de kopjes in de kaarten,
   en dat scheelde meteen acht regels verderop die dat per blok terugdraaiden. */
h3 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

p { margin: 0; max-width: 62ch; }

a { color: var(--gewas-inkt); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible + .vlak {
  outline: 3px solid var(--gewas);
  outline-offset: 2px;
}

/* ---------- kop en voet ---------- */

.siteko {
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding: 1rem var(--rand);
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.merkregel { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--inkt); }
.woordmerk { font-weight: 700; font-size: 1.3rem; }
.woordmerk i { font-style: normal; color: var(--gewas-inkt); }
.siteko .payoff {
  font-family: var(--letter-kop);
  font-size: .9rem;
  color: var(--inkt-zacht);
  margin-left: auto;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) var(--rand) 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sitevoet {
  border-top: 1px solid var(--lijn);
  background: var(--vlak);
  padding: 1.5rem var(--rand) 2.5rem;
  color: var(--inkt-zacht);
  font-size: .88rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sitevoet .klein { font-size: .78rem; }

/* ---------- intro ---------- */

.intro { display: flex; flex-direction: column; gap: .75rem; }
.intro p { color: var(--inkt-zacht); }

/* ---------- het formulier ---------- */

.vragen { display: flex; flex-direction: column; gap: 1.75rem; }
.vragen.ingeklapt { border-top: 1px solid var(--lijn); padding-top: 1.75rem; }
.wijzig { color: var(--inkt-zacht); font-size: 1rem; }

.groep { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.groep legend { font-size: 1.1rem; font-weight: 700; padding: 0; }

.opties { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.optie { position: relative; display: block; cursor: pointer; }
.optie input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.optie .vlak {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  padding: .8rem .9rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  transition: border-color .12s ease, background .12s ease;
}
.optie:hover .vlak { border-color: var(--gewas-inkt); }
.optie input:checked + .vlak {
  border-color: var(--gewas-inkt);
  border-width: 2px;
  padding: calc(.8rem - 1px) calc(.9rem - 1px);
  background: color-mix(in srgb, var(--gewas) 8%, var(--vlak));
}
.optienaam { font-weight: 700; }
.optieuitleg { font-size: .84rem; color: var(--inkt-zacht); }

.verzenden { display: flex; }
.verzenden button {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: var(--rond);
  background: var(--gewas-inkt);
  color: var(--op-gewas);
}
.verzenden button:hover { background: var(--gewas); }

@media (min-width: 34rem) {
  .verzenden button { width: auto; min-width: 14rem; }
}

/* ---------- de uitslag ---------- */

.uitslagkop { display: flex; flex-direction: column; gap: .6rem; }
.kruimel { font-size: .85rem; }
.samenvatting {
  font-family: var(--letter-mono);
  font-size: .85rem;
  color: var(--inkt-zacht);
}

.advies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }

.gewas {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-areas: "rang inhoud" "score score";
  gap: .5rem .85rem;
  padding: 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.gewas.top {
  border-color: var(--gewas-inkt);
  border-width: 2px;
  padding: calc(1rem - 1px);
}

.gewas .rang {
  grid-area: rang;
  font-family: var(--letter-mono);
  font-size: 1.1rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.gewas.top .rang { color: var(--gewas-inkt); font-weight: 500; }

.gewas .inhoud { grid-area: inhoud; display: flex; flex-direction: column; gap: .6rem; }
.gewas .omschrijving { font-size: .92rem; color: var(--inkt-zacht); }

.redenen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.redenen li { display: flex; gap: .5rem; align-items: flex-start; }
.redenen li::before {
  flex: none;
  width: 1.1rem;
  text-align: center;
  font-weight: 700;
}
.redenen .goed::before   { content: "+"; color: var(--gewas-inkt); }
.redenen .pas_op::before { content: "!"; color: var(--roest); }

/* Wat de wet eist. Geen plus of uitroepteken maar een paragraafteken, want dit
   gaat niet over goed of slecht maar over wat moet. Blauw, want dat betekent op
   deze site niet droogte maar water en regels, en er staat altijd een woord bij. */
.redenen .moet::before { content: "§"; color: var(--water); }
.redenen.plicht li { color: var(--inkt-zacht); }

.details { margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.details div { display: flex; gap: .5rem; }
.details dt { flex: none; width: 4.5rem; color: var(--inkt-zacht); }
.details dd { margin: 0; }


.leeg {
  padding: 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--roest);
  border-radius: var(--rond);
}

/* Eén blok boven de ranglijst.
   Hier stonden zes gekleurde alinea's onder elkaar: weermelding, seizoenswissel,
   hoeveel gewassen er passen, de samenvatting, de vochtbalans en de KNMI-bronregel.
   Alles even hard, alles even breed, en je was een half scherm verder voor je bij het
   eerste gewas kwam. Nu één kader: een kopregel, de feiten als chips, één regel over
   het seizoen, en het narekenen achter een klepje. */
.situatie {
  margin: 0 0 1.6rem;
  padding: 1rem 1.1rem;
  background: var(--grond);
  border-radius: var(--rond);
}
.situatiekop {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: 1.05rem;
}
.situatiekop b { color: var(--gewas-inkt); }

.feitenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
  margin: .7rem 0 0;
}
.feitenrij span {
  padding: .18rem .55rem;
  font-size: .8rem;
  color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: 999px;
}
.feitenrij .mm { font-variant-numeric: tabular-nums; color: var(--water); border-color: var(--water); }
.feitenrij .uit { color: var(--inkt-zacht); }

.scenarioregel { margin: .7rem 0 0; font-size: .88rem; color: var(--inkt-zacht); }
.scenarioregel b { color: var(--inkt); }

.analyse select {
  font: inherit;
  width: 100%;
  padding: .55rem .6rem;
  color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
.analyse select:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }

.seizoenknop {
  display: inline-block;
  margin-left: .2rem;
  color: var(--gewas-inkt);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.rekenwijze { margin-top: .6rem; }
.rekenwijze summary { cursor: pointer; font-size: .82rem; color: var(--inkt-zacht); padding: .25rem 0; }
.rekenwijze summary:hover { color: var(--gewas-inkt); }
.rekenwijze > p { margin: .5rem 0 0; font-size: .86rem; }

/* De nummer 1 als nummer 1.
   Het kaartje had alleen een dikkere rand; dat je hem aanraadt stond nergens. */
.bestekeuze {
  margin: 0 0 .7rem;
  padding: .5rem .7rem;
  font-size: .88rem;
  color: var(--inkt);
  background: color-mix(in srgb, var(--gewas) 10%, transparent);
  border-left: 3px solid var(--gewas);
  border-radius: 0 var(--rond) var(--rond) 0;
}
.bestekeuze b { color: var(--gewas-inkt); }

/* Is de beste keuze zelf ook mager, dan hoort daar niet de kleur van een topper bij. */
.bestekeuze.matig { background: color-mix(in srgb, var(--stro) 14%, transparent); border-left-color: var(--stro); }
.bestekeuze.matig b { color: var(--roest); }

/* Zaaitijd, hoog in het kaartje. */
.zaailijn { margin: 0 0 .6rem; font-size: .88rem; }
.zaailijn span {
  display: inline-block;
  margin-right: .4rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leem);
}

/* De cijfers achter een klepje: tien kaartjes met alles open is een document. */
/* Hier stonden de regels voor het klepje "Meer details" in een gewaskaartje. Dat
   klepje is in ronde 5 opgegaan in .gklep, dat het hele kaartje openschuift. */

/* Groepen percelen in het account.
   Een groep is een blok land: mijn grasvelden, mijn maisland. De kop toont hoeveel
   hectare erin zit tegen hoeveel je wilde, de percelen staan eronder, en het voorstel
   ("wat past hier het beste") klapt open als je erom vraagt, want dat rekent alle losse
   percelen door en dat hoort niet bij elk bezoek te gebeuren. */
.groepvak .plankop { margin-bottom: .2rem; }
.groepvak .planwaar { margin-bottom: .8rem; }

.groeplijst { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.groeplijst li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: .92rem;
}
.groeplijst li:last-child { border-bottom: 0; padding-bottom: 0; }
.groeplijst li > span { color: var(--inkt-zacht); font-size: .86rem; flex: 1 1 12rem; }
.groeplijst .mist { color: var(--roest); }
.groepknopje { margin-left: auto; }

.groeplijst.voorstel { margin-top: .4rem; }
.groepvak h4 {
  font-family: var(--letter-kop);
  font-size: .95rem;
  margin: 1.1rem 0 0;
}

.groepinstel { margin-top: 1rem; }
.groepinstel summary { cursor: pointer; font-size: .84rem; color: var(--inkt-zacht); padding: .3rem 0; }
.groepinstel summary:hover { color: var(--gewas-inkt); }

.groepform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: .7rem; }
.groepform label { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 10rem; }
.groepform label span { font-size: .8rem; color: var(--inkt-zacht); }
.groepform input, .groepform select {
  font: inherit;
  padding: .5rem .6rem;
  color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
.groepform input:focus-visible, .groepform select:focus-visible {
  outline: 3px solid var(--gewas);
  outline-offset: 2px;
}
.knop.klein { padding: .3rem .7rem; font-size: .82rem; }
.knop.weg { color: var(--roest); border-color: var(--roest); }

/* Het bouwplan, per gewas.
   De kop is het gewas met hoeveel hectare je vroeg en hoeveel we gevonden hebben; de
   percelen staan eronder, het beste bovenaan. Dat is de volgorde waarin een boer erover
   denkt: eerst wat hij nodig heeft, dan waar het heen kan. */
.gewasplan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.gewasplan > li {
  padding: 1rem 1.1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}

.plankop { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.plankop h3 { font-size: 1.1rem; margin: 0; }
.plankop .planha {
  margin-left: auto;
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  color: var(--inkt-zacht);
}

.planpercelen { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.planpercelen > li { padding-left: .7rem; border-left: 2px solid var(--lijn); }
.planperceelkop { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; font-size: .92rem; }
.planperceelkop .planha { margin-left: 0; }
.planperceelkop .glabel { margin-left: auto; }
.planpercelen .gbalk { margin: .3rem 0 .25rem; }

.planwaar { margin: 0; font-size: .84rem; color: var(--inkt-zacht); }
.planreden { display: block; margin: .3rem 0 0; font-size: .84rem; color: var(--inkt-zacht); }
.planreden.let { color: var(--roest); }
.plantekort { margin: .7rem 0 0; font-size: .88rem; color: var(--roest); }
.plantotaal { margin: 1.2rem 0 .4rem; }

/* Waar de score op rust, vier cijfers onder de balk. */
.scoredelen {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  margin: .5rem 0 .8rem;
  font-size: .8rem;
}
/* De opmaak van dit blok staat onderaan dit bestand, bij de balkjes.
   Hier stond een regel die elke span een pil met rand en achtergrond gaf, en die
   trof ook de balkjes: die werden lege chipjes naast de tekst in plaats van een
   balk eronder. */

/* Het droogterisico.
   De balk is de vochtvraag van het gewas, honderd procent breed. De vulling is wat
   dit perceel in dit seizoen levert; wat overblijft is het tekort. Het streepje staat
   waar je in een droog jaar uitkomt. Het waren twee zinnen tussen de andere
   waarschuwingen, en dan lees je een getal maar zie je geen risico. */
.water { margin: 0 0 .9rem; }
.watertekst { display: block; margin-top: .35rem; font-size: .82rem; color: var(--inkt-zacht); }
.watertekst b { color: var(--inkt); font-variant-numeric: tabular-nums; }
.watertekst .mist { color: var(--roest); }
.watertekst .ruim { color: var(--gewas-inkt); }

/* Alles wat niet bij de eerste tien staat, op reden gesorteerd.
   Dit was .afgevallen, een platte lijst van soms honderd namen. Nu met kopjes, en
   de namen naast elkaar als de reden voor de hele groep dezelfde is: dan is het
   een opsomming en geen lijst van honderd regels die allemaal hetzelfde zeggen. */
.rest { font-size: .9rem; margin-top: 1.4rem; }
.rest summary { cursor: pointer; color: var(--inkt-zacht); }
.rest h4 {
  font-family: var(--letter-kop);
  font-size: .95rem;
  margin: 1.2rem 0 .1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--lijn-zacht);
}
.rest > h4:first-of-type { border-top: 0; padding-top: 0; margin-top: .9rem; }
.rest .restreden { color: var(--inkt-zacht); margin: 0 0 .5rem; }

.restlijst { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.restlijst li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.restlijst li span { color: var(--inkt-zacht); }
.restlijst .restscore {
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gewas-inkt);
  font-weight: 700;
}

/* Een groep met een gemeenschappelijke reden: alleen namen, dus naast elkaar. */
.restlijst.namen { flex-direction: row; flex-wrap: wrap; gap: .3rem .5rem; }
.restlijst.namen li { display: inline; }
.restlijst.namen b { font-weight: 400; }
.restlijst.namen li:not(:last-child) b::after { content: ","; }

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

.sitevoet .waarschuwing { color: var(--roest); }

/* ---------- adres en bodemkaart ---------- */

.veldnaam { font-family: var(--letter-kop); font-size: 1.1rem; font-weight: 700; }

#plaats {
  font: inherit;
  width: 100%;
  padding: .8rem .9rem;
  color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
#plaats:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }
#plaats::placeholder { color: var(--inkt-zacht); }

.veldhulp { font-size: .84rem; color: var(--inkt-zacht); }

.melding {
  display: flex;
  gap: .55rem;
  font-size: .9rem;
  padding: .7rem .85rem;
  border-radius: var(--rond);
  background: color-mix(in srgb, var(--gewas) 8%, var(--vlak));
  border-left: 4px solid var(--gewas);
}
.melding::before { content: "+"; font-weight: 700; color: var(--gewas-inkt); }
.melding.let {
  background: color-mix(in srgb, var(--roest) 8%, var(--vlak));
  border-left-color: var(--roest);
}
.melding.let::before { content: "!"; color: var(--roest); }

.bron { font-size: .85rem; color: var(--inkt-zacht); }

/* ---------- de kaart ---------- */

.zoekrij { display: flex; gap: .5rem; flex-wrap: wrap; }
.zoekrij #plaats { flex: 1 1 14rem; }
.zoekknop {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: .8rem 1.1rem;
  border: 1px solid var(--gewas);
  border-radius: var(--rond);
  background: var(--vlak);
  color: var(--gewas-inkt);
}
.zoekknop:hover { background: color-mix(in srgb, var(--gewas) 10%, var(--vlak)); }

.kaartblok { display: flex; flex-direction: column; gap: .5rem; }

.kaart {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 65vh;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak-diep);
  cursor: crosshair;
  touch-action: none;
  contain: strict;
  /* Slepen over een kaart hoort geen tekst blauw te maken, en de tegels
     horen niet als plaatje mee te komen. */
  user-select: none;
  -webkit-user-select: none;
}

.kaart .tegel,
.kaart .vorm {
  -webkit-user-drag: none;
  user-select: none;
}
.kaart.sleept { cursor: grabbing; }
.kaart:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }

.kaart .doek { position: absolute; inset: 0; }
/* Elke laag zijn eigen stapeling.

   Zonder dit gelden de z-index-waarden van de tegels over de lagen heen, en een
   fototegel staat op 1 terwijl een naamtegel op niets staat. Dan ligt de foto
   boven de namen en zie je ze alleen tijdens het zoomen, want dan zakt de oude
   foto naar 0 als opvulling. Precies dezelfde fout als eerder met de
   perceellijnen. Met isolation blijft de volgorde binnen de laag, en bepaalt de
   z-index van de laag zelf wat er bovenop ligt. */
.kaart .tegels { position: absolute; inset: 0; isolation: isolate; }
.kaart .tegels.basis { z-index: 1; }
/* De themalaag (bodemkaart of grondwater) ligt tussen de foto en de namen. Half
   doorzichtig, want de luchtfoto blijft de ondergrond: je moet de percelen die je kent
   nog door de kleuren heen zien. Ook deze laag krijgt zijn eigen isolation, en dat is
   precies waarvoor de regel hierboven bestaat. */
.kaart .tegels.themalaag { z-index: 2; opacity: .62; }
.kaart .tegels.namen { z-index: 3; }

/* De namenlaag ligt boven de foto: plaatsnamen, wegen en straten van de
   achtergrondkaart van PDOK, los aangeleverd en doorzichtig. Zo weet je op
   satellietbeeld nog waar je bent. Ietsje getemperd, want de foto is de baas. */
/* De namenlaag: vol, en met extra rand.

   PDOK tekent donkere letters met een lichte gloed erachter. Nagemeten op een
   tegel bij Lelystad: 8 procent van de inkt is donkere tekst, 66 procent die
   lichte gloed, en de waternamen zijn blauw. Boven een drukke luchtfoto is dat te
   dun: op een lichte akker valt de gloed weg en op een donker bos de letter.

   Een donkere schaduw eromheen vult precies het andere geval aan. Samen met de
   lichte gloed die er al is heb je dan altijd contrast, welke ondergrond er ook
   onder ligt. De filter staat op de laag en niet op elke tegel, dus de browser
   rekent hem een keer uit en kan hem tijdens het slepen hergebruiken. */
.kaart .tegels.namen {
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.kaart .tegel {
  position: absolute;
  top: 0;
  left: 0;
  /* Een pixel groter dan hun vak. Landt een tegel op een halve pixel, dan
     blijft er anders een haarlijn open tussen twee tegels en zie je het
     tegelraster als blokken over de kaart. Een pixel overlap dekt dat af; het
     plaatje wordt er 0,2 procent voor uitgerekt en dat zie je niet. */
  width: 513px;
  height: 513px;
  display: block;
  pointer-events: none;
}

/* De namenlaag komt van PDOK alleen als tegel van 256, dus die hangt er als vier
   stukjes in. */
.kaart .tegel.naamdeel { width: 257px; height: 257px; }

.kaart .vorm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kaart .vorm polygon {
  fill: color-mix(in srgb, var(--gewas) 30%, transparent);
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
}

.kaartknoppen {
  position: absolute;
  display: flex;
  gap: .3rem;
}
.zoomknoppen { top: .5rem; right: .5rem; flex-direction: column; }
.laagknoppen { bottom: .5rem; left: .5rem; }

.kaartknoppen button {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--inkt);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.zoomknoppen button { width: 2.4rem; height: 2.4rem; }
.laagknoppen button { font-size: .82rem; padding: .4rem .7rem; }
.kaartknoppen button:hover { border-color: var(--gewas-inkt); color: var(--gewas-inkt); }
.laagknoppen button.aan {
  background: var(--gewas-inkt);
  border-color: var(--gewas-inkt);
  color: var(--op-gewas);
}
.kaarthulp { font-size: .84rem; color: var(--inkt-zacht); }

.perceelinfo:empty { display: none; }
.perceelinfo {
  font-size: .9rem;
  padding: .6rem .8rem;
  border-radius: var(--rond);
  background: var(--vlak-diep);
  border-left: 4px solid var(--lijn);
}
.perceelinfo.gekozen { border-left-color: var(--gewas-inkt); }
.perceelinfo.let { border-left-color: var(--roest); }
.perceelinfo.bezig { color: var(--inkt-zacht); }

/* ---------- voederwaarde ---------- */

.voeding {
  border-collapse: collapse;
  font-size: .85rem;
  width: 100%;
  max-width: 26rem;
}
.voeding caption {
  text-align: left;
  font-family: var(--letter-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  padding-bottom: .3rem;
}
.voeding th, .voeding td { text-align: left; padding: .25rem .5rem .25rem 0; }
.voeding th { font-weight: 400; color: var(--inkt-zacht); }
.voeding td { font-variant-numeric: tabular-nums; font-weight: 700; }

.opbrengst { font-size: .9rem; }
.opbrengst b { color: var(--gewas-inkt); }

/* ---------- kop en voet ---------- */

.siteko {
  position: sticky;
  top: 0;
  z-index: 20;
  display: block;
  padding: 0;
}
.korij {
  max-width: 70rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding: 1rem var(--rand);
}
.woordmerk { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }

.hoofdnav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; }
.hoofdnav a { color: var(--leem); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.hoofdnav a:hover { color: var(--gewas-inkt); text-decoration: underline; }

.knop {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  padding: .7rem 1.3rem;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--rond-knop);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.knop:active { transform: translateY(1px); }
.knop.groen { background: var(--gewas-inkt); color: var(--op-gewas); border-color: var(--gewas-inkt); }
.knop.groen:hover { background: var(--gewas-fel); border-color: var(--gewas-inkt-fel); }
.knop.rand { border-color: var(--lijn-sterk); color: var(--inkt); background: var(--vlak); }
.knop.rand:hover { border-color: var(--bouwvoor); }

/* De felle knop uit het ontwerp: lime vlak met donkere letters. Voor de ene
   handeling per scherm die er echt toe doet. */
.knop.nadruk { background: var(--nadruk); color: var(--op-nadruk); border-color: var(--nadruk); }
.knop.nadruk:hover { background: var(--nadruk-diep); border-color: var(--nadruk-diep); }

body.thuis main { max-width: none; padding: 0; gap: 0; }

.sitevoet { padding: 0; }
.voetrij {
  max-width: 70rem;
  margin: 0 auto;
  padding: 3rem var(--rand) 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.voetmerk p { margin-top: .75rem; font-size: .9rem; }
.voetkolom { display: flex; flex-direction: column; gap: .5rem; }
.voetkolom h2 { font-family: var(--letter-kop); font-size: .95rem; }
.voetkolom a { font-size: .9rem; color: var(--leem); text-decoration: none; }
.voetkolom a:hover { color: var(--gewas-inkt); text-decoration: underline; }
.voetslot {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.5rem var(--rand) 2.5rem;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ---------- homepage ---------- */

.hero, .blok {
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(2.75rem, 2rem + 4vw, 5rem) var(--rand);
}
.blok { border-top: 1px solid var(--lijn); }

.wit, .donker { max-width: none; }
.wit { background: var(--vlak); }
.donker { background: var(--band); color: var(--op-donker); }
.wit > *, .donker > * { max-width: 70rem; margin-left: auto; margin-right: auto; }
.donker h2, .donker b { color: #fff; }


.hero {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; }
}
.hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin-bottom: 1.1rem;
}
.leidend { font-size: 1.06rem; line-height: 1.62; color: var(--inkt-zacht); }
.donker .leidend { color: var(--op-donker); }
.knoppen { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.5rem 0 .7rem; }

.proefkaart { border: 1px solid var(--lijn); background: var(--vlak); padding: 1.4rem; }
.proefkop { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--lijn-zacht); }
.proefkop b { font-family: var(--letter-kop); font-size: 1.15rem; }
.proefkop span { font-size: .85rem; color: var(--leem); }
.proeflijst { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.proeflijst li { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; }
.gnaam { font-weight: 700; }
.glabel { font-size: .85rem; font-weight: 700; color: var(--gewas-inkt); font-variant-numeric: tabular-nums; }
.gbalk { width: 100%; height: 8px; background: var(--lijn-zacht); }
.gbalk i { display: block; height: 100%; background: var(--gewas); }
.proefvoet { font-size: .85rem; line-height: 1.6; color: var(--inkt-zacht); padding-top: .9rem; border-top: 1px solid var(--lijn-zacht); }

/* De drie stappen. Hiervoor waren het drie kolommen met een streep erboven; ronde 5
   maakt er kaarten van met een rond nummerschijfje. De ronding van 55px is de ruimste
   op de hele site en dat is met opzet: dit is het enige blok dat over gewone menselijke
   handelingen gaat en niet over cijfers. */
.stappen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 1.75rem; }
.stap {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 1px solid var(--lijn);
  border-radius: var(--rond-stap);
  padding: 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  box-shadow: var(--schaduw);
}
/* Het nummerschijfje draagt de kleur van de stap. Kleur mag dat nooit alleen doen, dus
   het nummer staat er gewoon in. */
.stap .nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--rond-pil);
  font-family: var(--letter-mono);
  font-size: 1rem;
  background: var(--gewas-zacht);
  color: var(--gewas-inkt);
}
.stap.leem .nr { background: var(--stro-vlak); color: var(--stro); }
.stap.bruin .nr { background: var(--water-vlak); color: var(--water-inkt); }
.stap h3 { font-size: 1.15rem; margin: .3rem 0 0; }
.stap p { font-size: 1rem; line-height: 1.6; color: var(--inkt-tekst); }

.tweeluik { display: grid; gap: 2.75rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .tweeluik { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; } }

/* Een kolom, met korte regels. Twee kolommen geprobeerd, maar in de smalle helft
   van het tweeluik breekt dan elke regel af en wordt de lijst juist hoger: 633
   pixels tegen 488. De winst zit in de tekst, niet in de opmaak. */
.streeplijst {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.streeplijst li { display: flex; gap: .7rem; align-items: baseline; font-size: .98rem; flex-wrap: wrap; }
.streeplijst li::before { content: "\2014"; color: var(--gewas-inkt); font-weight: 700; }
.later {
  font-family: var(--letter-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leem);
  border: 1px solid var(--lijn);
  padding: .1rem .35rem;
  white-space: nowrap;
}

.kaartje { border: 1px solid var(--lijn); background: var(--vlak); padding: 1.5rem; }
.kaartje h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.profiel { margin: 0 0 1.2rem; display: flex; flex-direction: column; }
.profiel div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--lijn-zacht); }
.profiel dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leem); align-self: center; }
.profiel dd { margin: 0; font-family: var(--letter-kop); font-weight: 700; font-size: 1.15rem; }
.profiel dd.goed { color: var(--gewas-inkt); }
.profiel dd.let { color: var(--roest); }

/* De bronnen als raster met haarlijnen ertussen.
 *
 * Dit was een bijna zwarte band dwars door de pagina. Dat werkte toen de site wit
 * was, maar onder de warme aardkleuren wordt het een zware plaat die de bladzijde in
 * tweeen hakt. Nu is het een raster van kaarten met een lijn van een pixel ertussen:
 * de scheiding komt uit de achtergrond die tussen de cellen door schijnt. */
.bronnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .8rem;
  background: none;
  border: 0;
  border-radius: 0;
  margin-top: 1.6rem;
}
.bron {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-bron);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  color: var(--inkt);
}
.bron b { font-size: 1rem; font-weight: 600; }
.bron span { font-size: .91rem; color: var(--inkt-zacht); }

/* De weging als balken onder elkaar.
 *
 * Dit stonden vier kolommen naast elkaar, elk met een groot getal en een groene
 * streep erboven. Vier keer hetzelfde streepje zegt niets over de verhouding: 40 en
 * 10 kregen precies evenveel ruimte. Een balk laat wel zien dat grond vier keer zo
 * zwaar telt als gangbaarheid, en dat is nou juist het punt van deze sectie.
 *
 * De breedte komt uit advies_weging(), dus de balk kan nooit iets anders zeggen dan
 * het percentage ernaast. */
.weging {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Gecentreerd en niet tegen de linkerkant aan. Op een breed scherm is de sectie
     70rem en het blok 44rem; links uitgelijnd bleef er een gat van vierhonderd pixels
     rechts naast de percentages staan, en dan lijken de balken ergens aan vast te
     kleven in plaats van dat ze een geheel zijn. */
  margin: 1.6rem auto 1.4rem;
  max-width: 44rem;
  width: 100%;
}
/* Label boven, balk over de volle breedte, percentage rechts.
   Naast elkaar gezet levert korte balkjes op die je moeilijk vergelijkt, en een lang
   label als "Past het bij het doel, en bij wat het dier nodig heeft" breekt dan over
   twee regels. Zo is de balk zo breed mogelijk en loopt het oog van links naar rechts
   over de hele verhouding. */
.weging div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  gap: .4rem 1.2rem;
  align-items: center;
}
.weging span:first-of-type {
  font-size: .95rem;
  font-weight: 500;
  grid-column: 1;
}
.weging .weegbalk { grid-column: 1; margin-top: 0; }
.weging b {
  font-family: var(--letter-kop);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
  grid-column: 2;
  grid-row: 1 / span 2;
}
/* De balken staan in een kaart, zoals in het ontwerp. Het blok is breder dan eerst
   (48rem in plaats van 44) omdat de langste regel anders over twee regels breekt. */
#rekenwijze .sectiekop, #rekenwijze .leidend, #rekenwijze .weging {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}
#rekenwijze .weging { gap: 1.4rem; }
.weging div { grid-template-columns: minmax(0, 1fr) 4.5rem; }
.weging span:first-of-type { font-size: 1.03rem; }

/* De toelichting staat in dezelfde kolom als de balken, anders begint hij links
   terwijl de balken in het midden staan en valt het uit elkaar. */
.wegingvoet { max-width: 44rem; margin: 0 auto; }

@media (max-width: 40rem) {
  .weging div { grid-template-columns: minmax(0, 1fr) 3rem; }
}
.breed { max-width: 62ch; }

.quotes { display: grid; gap: 2.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.quotes figure { margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.quotes blockquote { margin: 0; font-family: var(--letter-kop); font-size: 1.25rem; line-height: 1.5; }
.quotes figcaption { font-size: .9rem; color: var(--leem); }

/* Het slotblok staat links uitgelijnd; zie het blok "slotblok onderaan de
   homepage" verderop. Hier stond text-align: center, uit de tijd dat het blok geen
   beeld ernaast had. */

/* ---------- schakelaars ---------- */

.schakelaars { display: flex; flex-direction: column; gap: .9rem; }
.schakelaar { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.schakelaar input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakelaar .knopje {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--lijn);
  padding: 3px;
  transition: background 180ms ease;
}
.schakelaar .knopje::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--papier);
  transition: transform 180ms ease;
}
.schakelaar input:checked + .knopje { background: var(--gewas); }
.schakelaar input:checked + .knopje::before { transform: translateX(20px); }
.schakelaar input:focus-visible + .knopje { outline: 3px solid var(--gewas); outline-offset: 2px; }
.schakelaar .tekst { display: flex; flex-direction: column; gap: .15rem; font-size: .92rem; }
.schakelaar .tekst span { font-size: .84rem; color: var(--inkt-zacht); }

.balans {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--inkt-zacht);
  border-left: 3px solid var(--gewas);
  padding-left: .8rem;
}

/* ---------- de adviespagina: kaart links, paneel rechts ---------- */

:root {
  --kophoogte: 4.6rem;
  /* Breedte van het paneel op de adviespagina. Gelijk in stap 1, 2 en 3, want een
     zijbalk die per stap van maat verandert leest als een andere pagina. */
  --paneelbreed: 27rem;
  /* Hoe breed een pagina mag worden. Meegroeien met het scherm, met een bovengrens
     zodat een regel tekst leesbaar blijft. Op 1920 komt dat uit op 108 rem. */
  --velbreedte: min(108rem, 100%);
}

body.werk main { max-width: none; padding: 0; gap: 0; }

/* Lijstpaginas: net zo breed als de kaartpagina maar met de gewone marges, en
   zonder de kaartscripts. Stond dit op werk, dan werd main een flexrij en werd
   het perceelrooster tot zijn inhoudsbreedte samengeknepen: twee kolommen op een
   scherm waar er vier passen. */
body.lijst main { max-width: var(--velbreedte); }

/* Volbreed: een scherm vol in plaats van een kolom in het midden. Voor schermen die
   werkschermen zijn en geen leespaginas, zoals het beheer.
   Niet .breed noemen: die klasse bestaat al als hulpje voor een tekstkolom van 62ch,
   en op de body zette dat de hele pagina op 665 pixels dicht. */
body.volbreed main { max-width: none; padding-left: var(--rand); padding-right: var(--rand); }

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.werkblad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.kaartvak { display: flex; flex-direction: column; background: var(--vlak); }

.kaartbalk {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .75rem var(--rand);
  border-bottom: 1px solid var(--lijn);
}
.zoekveld { flex: 1 1 16rem; display: block; }
.zoekveld input {
  font: inherit;
  width: 100%;
  padding: .6rem .75rem;
  color: var(--inkt);
  background: var(--vlak);
  border: 1px solid var(--lijn);
}
.zoekveld input:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }
.zoekveld input::placeholder { color: var(--inkt-zacht); }

.kaartbalk .laagknoppen { position: static; margin-left: auto; }

.kaartvak .kaart { border: 0; border-radius: 0; }
.kaarthulp { padding: .6rem var(--rand) .8rem; border-top: 1px solid var(--lijn); margin: 0; }
.kaarthulp.gekozen { border-top-color: var(--gewas-inkt); color: var(--inkt); }
.kaarthulp.let { border-top-color: var(--roest); }
.kaarthulp.bezig { color: var(--inkt-zacht); }

.paneel { background: var(--vlak); display: flex; flex-direction: column; }

.paneelnav {
  position: sticky;
  top: var(--kophoogte);
  z-index: 6;
  display: flex;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
/* Drie knoppen in plaats van drie ankers. Het paneel toont een stap tegelijk en
   de stap staat in het webadres, dus dit zijn echte verzendknoppen die alles wat
   je al ingevuld hebt meenemen. */
.paneelnav button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
  font: inherit;
  padding: .8rem .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--leem);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
}
.paneelnav button:hover { color: var(--inkt); border-bottom-color: var(--lijn-sterk); }
.paneelnav button.nu {
  color: var(--gewas-inkt);
  border-bottom-color: var(--gewas-inkt);
  background: color-mix(in srgb, var(--gewas) 6%, transparent);
}
.paneelnav .stapnr {
  font-family: var(--letter-mono);
  font-size: .75rem;
  width: 1.35rem;
  height: 1.35rem;
  line-height: 1.35rem;
  border-radius: 999px;
  background: var(--lijn);
  color: var(--vlak);
  flex: none;
}
.paneelnav button.nu .stapnr { background: var(--gewas-inkt); color: var(--op-gewas); }

/* Terug en verder naast elkaar. */
.verzenden.tweeknops { display: flex; gap: .6rem; }
/* De algemene regel geeft elke verzendknop min-width 14rem. Twee daarvan naast
   elkaar passen niet in het paneel, en dan loopt de groene knop het scherm uit.
   Hier dus geen ondergrens. */
.paneeldeel .verzenden.tweeknops button { width: auto; min-width: 0; }
.paneeldeel .verzenden.tweeknops button:last-child { flex: 1; }


.paneeldeel {
  padding: 1.5rem var(--rand);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scroll-margin-top: calc(var(--kophoogte) + 3rem);
}
.paneeldeel > h2 { font-family: var(--letter-kop); font-size: 1.15rem; }
.paneeldeel .verzenden button { width: 100%; }

.feiten { margin: 0; display: flex; flex-direction: column; }
.feiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
.feiten div:last-child { border-bottom: 0; }
.feiten dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leem); align-self: center; }
.feiten dd { margin: 0; font-weight: 700; text-align: right; }
.feiten dd.fijn { font-weight: 400; font-size: .85rem; color: var(--inkt-zacht); }
.feiten dd.goed { color: var(--gewas-inkt); }
.feiten dd.let { color: var(--roest); }

@media (min-width: 64rem) {
  .werkblad { grid-template-columns: minmax(0, 1fr) 27rem; }
  .kaartvak {
    position: sticky;
    top: var(--kophoogte);
    height: calc(100vh - var(--kophoogte));
  }
  .kaartvak .kaart { flex: 1; aspect-ratio: auto; max-height: none; }
  .paneel { border-left: 1px solid var(--lijn); }
}

/* ---------- de gewassen in het paneel ---------- */

.advies { gap: 1.25rem; }

.gewas {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  border: 1px solid var(--lijn);
  background: var(--vlak);
}
.gewas.top { border-color: var(--gewas-inkt); border-width: 2px; padding: calc(1rem - 1px); }

.gkop { display: flex; align-items: baseline; gap: .6rem; }
.gkop h3 { font-size: 1.1rem; margin: 0; }
.gkop .rang {
  font-family: var(--letter-mono);
  font-size: .9rem;
  color: var(--leem);
  font-variant-numeric: tabular-nums;
}
.gewas.top .gkop .rang { color: var(--gewas-inkt); }
.gkop .glabel { margin-left: auto; white-space: nowrap; }

.gewas .omschrijving { font-size: .9rem; color: var(--inkt-zacht); }
.gewas .voeding { max-width: none; }
.gewas .details dt { width: 4rem; }

/* Main is een flexkolom. Zonder min-width mogen de secties niet krimpen onder
   hun min-content-breedte, en dan schuift de pagina op een telefoon opzij. */
body.thuis main > *,
.werkblad > *,
.paneel > * { min-width: 0; }

/* Rasters klappen alleen netjes in als hun ouder een gewone blokbreedte heeft.
   In een flexkolom is die breedte tijdens het meten nog onbepaald, en dan blijft
   een driekoloms raster op een telefoon drie kolommen breed. */
body.thuis main { display: block; }
.sitevoet { display: block; }

/* ---------- meekijken met de muis ---------- */

.kaart .vorm .keuze {
  fill: color-mix(in srgb, var(--gewas) 30%, transparent);
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
}
.kaart .vorm .zweef {
  fill: color-mix(in srgb, #fff 18%, transparent);
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.kaarttip {
  position: absolute;
  z-index: 4;
  max-width: 18rem;
  padding: .35rem .55rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  font-size: .8rem;
  line-height: 1.35;
  color: var(--inkt);
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.kaarttip[hidden] { display: none; }

/* ---------- gewassen naast elkaar ---------- */

.uitslagknoppen { display: flex; gap: .6rem; flex-wrap: wrap; }
.uitslagknoppen .knop { font-size: .85rem; padding: .55rem .9rem; }

.vergelijkvink { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; cursor: pointer; }
.vergelijkvink input { accent-color: var(--gewas-inkt); width: 1rem; height: 1rem; }
.vergelijkvink span { color: var(--leem); }
.vergelijkvink input:checked ~ span { color: var(--gewas-inkt); font-weight: 700; }

.vergelijking { display: flex; flex-direction: column; gap: .8rem; }
.vergelijking h3 { font-size: 1.05rem; }

.tabelrol { overflow-x: auto; border: 1px solid var(--lijn); }

.vergelijktabel {
  border-collapse: collapse;
  width: 100%;
  min-width: 22rem;
  font-size: .85rem;
  background: var(--vlak);
}
.vergelijktabel th,
.vergelijktabel td {
  text-align: left;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
}
.vergelijktabel thead th {
  font-family: var(--letter-kop);
  font-size: .9rem;
  border-bottom: 2px solid var(--lijn);
  position: sticky;
  top: 0;
  background: var(--vlak);
}
.vergelijktabel tbody th {
  font-weight: 500;
  font-size: .88rem;
  color: var(--inkt);
  white-space: nowrap;
}
/* Een naam onder het adres, niet erachter: anders lees je ze als een zin. */
.vergelijktabel tbody th .fijn { display: block; font-weight: 400; }
.vergelijktabel td { font-variant-numeric: tabular-nums; }
.vergelijktabel td.fijn { font-size: .78rem; color: var(--inkt-zacht); min-width: 11rem; }
.vergelijktabel td.goed { color: var(--gewas-inkt); }
.vergelijktabel td.let { color: var(--roest); }

/* Het venstertje dat vraagt of een perceel bewaard mag worden. Zie kiezen.php. */
.bewaarvenster {
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond);
  background: var(--vlak);
  color: var(--inkt);
  padding: 1.4rem 1.5rem 1.5rem;
  max-width: min(92vw, 26rem);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
}
.bewaarvenster::backdrop { background: rgba(18, 22, 15, .55); }
.bewaarvenster h2 { margin: 0 0 .8rem; font-size: 1.25rem; }
.bewaarvenster .perceelfeiten { margin-bottom: 1rem; }
.bewaarvenster .veldnaam { display: block; margin-bottom: .3rem; font-size: 1rem; }
.bewaarvenster input[type="text"] {
  font: inherit;
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--lijn);
  background: var(--grond);
  color: var(--inkt);
}
.vensterknoppen { display: flex; gap: .6rem; margin-top: 1.1rem; }
.vensterknoppen .knop { min-width: 0; }

/* De kaartpagina zonder paneel: de kaart krijgt alle ruimte. */
/* De kaartpagina zonder paneel.
   .werkblad zet op brede schermen twee kolommen neer: kaart plus paneel van 27rem.
   Hier is er geen paneel, dus bleef die kolom leeg staan en werd de kaart voor
   niets samengeknepen. Een kolom, en de kaart krijgt het hele scherm. */
.kiesblad { grid-template-columns: minmax(0, 1fr) !important; }
.kiesblad .kaartvak { width: 100%; }
.kiesblad .kaartbalk { flex-wrap: wrap; }

/* De sectiekop uit het ontwerp: titel links, het soort sectie klein rechts, en een
   lijn eronder. Zo weet je bij het scrollen waar je bent zonder dat er een tweede
   grote kop nodig is. */
.sectiekop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--lijn);
}
.sectiekop h2 { margin: 0; max-width: 16ch; }

/* Op de bronnensectie stond de bovenkop boven de titel. Daar hoort hij nu naast. */
.sectiekop + .leidend { max-width: 58ch; }

/* ================================================================
   Uit het ontwerp: bandensporen, pil en weegbalken
   ================================================================ */

/* Twee sporen die over de hero lopen, zoals een trekker ze in een akker achterlaat.
   Puur decoratie, dus aria-hidden en pointer-events uit: het mag nooit een klik
   opvangen of door een schermlezer voorgelezen worden. */
.bandensporen {
  position: absolute;
  inset: 0 0 auto 0;
  height: 40rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bandensporen svg { width: 100%; height: 100%; display: block; }

/* De hero komt erboven te liggen, anders valt de tekst weg achter de sporen. */
.heroband { position: relative; }
.heroband > .hero { position: relative; z-index: 1; }

/* De weegbalken onder de percentages. De breedte komt uit advies_weging(), dus het
   staafje kan nooit iets anders zeggen dan het getal ernaast. */
.weegbalk {
  display: block;
  height: .95rem;
  margin-top: .5rem;
  background: var(--lijn-zacht);
  border-radius: var(--rond-pil);
  overflow: hidden;
}
.weegbalk > span {
  display: block;
  height: 100%;
  background: var(--gewas);
  border-radius: var(--rond-pil);
}
.weging div:nth-of-type(2) .weegbalk > span { background: var(--gewas-licht); }
.weging div:nth-of-type(3) .weegbalk > span { background: var(--water); }


/* ================================================================
   De accountpagina: zijbalk met onderdelen, inhoud ernaast
   ================================================================ */

.accountvel { width: 100%; }

.accountkop { margin-bottom: 1.4rem; }
.accountkop h1 { margin: 0 0 .25rem; }
.accountkop .klein { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.accountkop .scheider { color: var(--lijn-sterk); }

/* Beheerder is een rol en geen versiering, dus met een woord en niet alleen kleur. */
.rolmerk {
  font-family: var(--letter-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border: 1px solid var(--gewas);
  border-radius: 999px;
  color: var(--gewas-inkt);
}

.accountmelding { margin-bottom: 1.2rem; max-width: none; }

/* Mobiel eerst: de zijbalk ligt dan gewoon boven de inhoud. Pas als er ruimte is
   zetten we hem ernaast; dat is precies het punt waarop twee kolommen passen. */
.accountindeling { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 60rem) {
  .accountindeling { grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; }
  .accountzij { position: sticky; top: calc(var(--kophoogte) + 1rem); }
}

.accountzij { display: flex; flex-direction: column; gap: .2rem; }

.zijknop {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--rond);
  background: none;
  font: inherit;
  font-size: .95rem;
  color: var(--inkt);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.zijknop:hover { background: var(--vlak); border-color: var(--lijn); }

/* Waar je bent: gevuld vlak, dikkere letter en een streep aan de zijkant. Drie
   dragers, want alleen een kleurvlak valt weg in de zon op een telefoonscherm. */
.zijknop.hier {
  background: var(--vlak);
  border-color: var(--lijn);
  border-left: 3px solid var(--gewas);
  padding-left: calc(.85rem - 2px);
  font-weight: 700;
  color: var(--gewas-inkt);
}

.zijicoon { width: 1.25rem; height: 1.25rem; flex: none; }
.zijknop span { flex: 1; }

.zijtelling {
  flex: none;
  font-family: var(--letter-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--inkt-zacht);
  background: var(--grond);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: .05rem .45rem;
}
.zijknop .zijtelling { flex: none; }
.zijknop.hier .zijtelling { color: var(--gewas-inkt); border-color: var(--gewas-inkt); }

/* Afmelden hoort er niet tussen: een streep en wat lucht ervoor. */
.zijafmelden { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--lijn); }
.zijafmelden .zijknop { color: var(--inkt-zacht); }
.zijafmelden .zijknop:hover { color: var(--roest); }

/* Dit vlak was een tweede <main> en leende daardoor de opmaak van de paginakolom:
   twee rem vulling links en rechts, en op een lijstpagina ook een maximumbreedte. Het
   is nu een gewone div, dus de ruimte die het wel hoorde te hebben staat hier. */
.accountmain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.accountmain > h2 { margin: 0; }
.accountmain > h3 { margin: .4rem 0 0; }
.accountmain > p { margin: 0; }

.deelkop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lijn);
}
.deelkop h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.deelkop .klein { margin: 0; }

/* De vakken onder elkaar, niet meer in kolommen: op deze pagina is er een kolom en
   staan er hoogstens twee vakken, en dan leest onder elkaar rustiger. */
.accountmain .instelvak { max-width: 34rem; margin-bottom: 1.2rem; }

/* Aan of uit in een woord, met een stip erbij. Kleur alleen is niet genoeg. */
.staat {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .6rem;
  font-weight: 700;
  font-size: .9rem;
}
.staat::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}
.staat.aan { color: var(--gewas-inkt); }
.staat.uit { color: var(--inkt-zacht); }

.perceelfeiten.breed > div { gap: 1.5rem; }
.perceelfeiten.breed dd { font-size: .95rem; }

/* ================================================================
   Account en de bewaarde percelen
   ================================================================ */

/* Een smalle kolom voor formulieren: aanmelden, registreren, afmelden. Breder dan
   dit leest niet prettiger, want er staat maar een veld per regel. */
.smalvel {
  max-width: 34rem;
  margin: 0 auto;
  width: 100%;
}
.smalvel h1 { margin-bottom: .8rem; }
.smalvel .aanmelden { margin-top: 1.4rem; }
.smalvel .aanmelden .klein { margin: -.2rem 0 .4rem; }

.mijnvel {
  width: 100%;
}

.mijnkop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.mijnkop h1 { margin: 0 0 .2rem; }
.mijnkop .klein { margin: 0; }

/* Het lege begin: geen kale bladzijde maar uitleg over de eerstvolgende stap. */
.leegvak {
  border: 1px dashed var(--lijn-sterk);
  border-radius: var(--rond);
  padding: 2rem 1.4rem;
  text-align: center;
  max-width: 40rem;
  margin: 1.5rem auto;
}
.leegvak h2 { margin-top: 0; }

/* De kaartjes. Automatisch zoveel kolommen als er passen, dus op een telefoon een
   en op een breed scherm vier, zonder aparte breekpunten. */
.perceelrooster {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  margin: 1rem 0 2.5rem;
}

.perceelkaart {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Het beeld is met opzet wit en blijft wit, ook in het donker: het is een tekening
   van je land, zoals een kavelkaart. Een lijn eronder houdt het van de kaart af. */
.perceelbeeld {
  display: block;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  line-height: 0;
}
.perceelbeeld:focus-visible { outline: 3px solid var(--gewas); outline-offset: -3px; }
.perceelkaartje { display: block; width: 100%; height: auto; }

.perceelinhoud { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.perceelinhoud h2 { font-size: 1.1rem; margin: 0; line-height: 1.25; }
.perceelinhoud h2 a { color: var(--inkt); text-decoration: none; }
.perceelinhoud h2 a:hover { color: var(--gewas-inkt); text-decoration: underline; }

.perceelfeiten { margin: 0; display: grid; gap: .35rem; }
.perceelfeiten > div { display: flex; justify-content: space-between; gap: .8rem; }
.perceelfeiten dt { font-size: .78rem; color: var(--inkt-zacht); }
.perceelfeiten dd {
  margin: 0;
  font-size: .85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.perceelbewerk { margin-top: auto; border-top: 1px solid var(--lijn); padding-top: .6rem; }
.perceelbewerk summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--inkt-zacht);
}
.perceelbewerk summary:hover { color: var(--gewas-inkt); }
.perceelbewerk .naamform { display: grid; gap: .35rem; margin: .7rem 0 .5rem; }
.perceelbewerk .naamform input {
  font: inherit;
  font-size: .9rem;
  padding: .45rem .6rem;
  border: 1px solid var(--lijn);
  background: var(--grond);
  color: var(--inkt);
}
.perceelbewerk .knop { min-width: 0; padding: .4rem .8rem; font-size: .85rem; }

/* Een knop die eruitziet als een link, voor iets dat wel een POST moet zijn maar
   niet de nadruk verdient: afmelden, iets uit de lijst halen. */
.knoplink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--roest);
  text-decoration: underline;
  cursor: pointer;
}
.knoplink:hover { color: var(--bouwvoor); }

.instelraster {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.instelvak {
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  padding: 1.1rem 1.2rem 1.3rem;
}
.instelvak h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.instelvak p { font-size: .9rem; }
.instelvak .aanmelden { max-width: none; }
.instelvak .knop { min-width: 0; }

/* De bewaarknop in het paneel van de adviespagina. */
.bewaarrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lijn);
}
.bewaarrij .knop { min-width: 0; }
.bewaarrij .klein, .bewaarrij p { margin: 0; }
/* De onderhoudstabel in het beheerscherm. Vier kolommen met tekst en een knop,
   dus alles bovenaan uitlijnen en de toelichting eronder in het klein. */
.vergelijktabel.taken th,
.vergelijktabel.taken td { vertical-align: top; }
.vergelijktabel.taken tbody th { font-weight: 600; max-width: 22rem; }
.vergelijktabel.taken .uitleg {
    display: block;
    margin-top: .2rem;
    font-weight: 400;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--inkt-zacht);
}
.vergelijktabel.taken form { margin: 0; }
.vergelijktabel.taken .knop {
    min-width: 0;
    padding: .35rem .8rem;
    font-size: .85rem;
    white-space: nowrap;
}

/* ---------- afdrukken, en daarmee opslaan als pdf ---------- */

@media print {
  .siteko,
  .sitevoet,
  .kaartvak,
  .paneelnav,
  #uitgangspunten,
  .uitslagknoppen,
  .vergelijkvink,
  .rest { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .werkblad { display: block; }
  .paneel { border: 0; }
  .paneeldeel { border: 0; padding: 0 0 1rem; break-inside: avoid; }

  .gewas {
    border: 1px solid #999;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: .6rem;
  }
  .gbalk { border: 1px solid #999; }
  .gbalk i { background: #555; }

  .tabelrol { overflow: visible; }
  .vergelijktabel { min-width: 0; }

  /* Zonder afzender is een uitdraai niet terug te vinden. */
  .paneel::before {
    content: "Akkerkompas, advies per perceel";
    display: block;
    font-family: var(--letter-kop);
    font-weight: 700;
    font-size: 14pt;
    margin-bottom: .4rem;
  }
  .paneel::after {
    content: "Richtinggevend advies op basis van BRO Bodemkaart en BRP Gewaspercelen. Geen vervanging van je teeltadviseur.";
    display: block;
    font-size: 8pt;
    color: #444;
    margin-top: 1rem;
    border-top: 1px solid #999;
    padding-top: .4rem;
  }

  a[href]::after { content: ""; }
}

/* ---------- beheerscherm ---------- */

.beheer { max-width: none; margin: 0; padding: 1.6rem 0 4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.beheer h1 { font-family: var(--letter-kop); font-size: 1.7rem; }
.beheer h2 { font-family: var(--letter-kop); font-size: 1.3rem; }
.beheer h3 { font-size: 1.05rem; margin-top: .5rem; }

.aanmelden { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.aanmelden input {
  font: inherit;
  padding: .6rem .75rem;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--inkt);
}

/* Tweestapsverificatie. Cijfers en een geheim leest niemand goed in een
   lopende letter, dus mono met ruimte tussen de tekens. */
.codeveld {
  font-family: var(--letter-mono) !important;
  font-size: 1.5rem;
  letter-spacing: .3em;
  text-align: center;
}

.tweestapsblok {
  border: 1px solid var(--lijn);
  background: var(--vlak);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  max-width: 34rem;
}
.tweestapsblok .veldnaam { margin: 0 0 .3rem; }
.geheim {
  font-family: var(--letter-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .08em;
  word-break: break-all;
  margin: 0 0 .6rem;
  color: var(--gewas-inkt);
}
.breekbaar { word-break: break-all; }

.beheerraster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.beheerveld { display: flex; flex-direction: column; gap: .3rem; }
.beheerveld input {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.beheerveld.afwijkend input { border-color: var(--gewas-inkt); border-width: 2px; }
.veldkop { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leem); }
.beheerform { display: flex; flex-direction: column; gap: 1.2rem; }

/* De tegels: pas tonen als ze er zijn, en een grovere kaart als vulling terwijl
   de fijnere binnenkomt. */
.kaart .tegel {
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity 140ms ease;
}
.kaart .tegel.klaar { opacity: 1; }
.kaart .tegel.vulling { z-index: 0; }

/* Twee naamtegels over elkaar mogen nooit.

   Bij de foto valt dat niet op: de nieuwe tegel dekt de oude af. Namen zijn
   doorzichtig, dus dan zie je elke plaatsnaam twee keer, een stukje verschoven.

   De eerste oplossing was de oude namen meteen verbergen. Dat gaf een gat: je zag
   de namen wegspringen zodra er iets overheen laadde. Het hoort andersom. Zolang
   we aan het overschakelen zijn blijven de oude namen staan en wachten de nieuwe;
   als het stel compleet is verdwijnt de opvulling en verschijnen de nieuwe, in
   hetzelfde beeld. Zo is er geen moment zonder namen en ook geen moment met
   dubbele. */
.kaart.wisselt .tegels.namen .tegel:not(.vulling) { opacity: 0; }
.kaart .tegels.basis .tegel:not(.vulling) { z-index: 1; }

/* Donker, niet licht. Wat er tussen de tegels doorschemert valt op een
   luchtfoto dan niet op als een lichte lijn. */
.kaart .doek { background: #2b2f28; }

/* Een dun streepje zolang er nog tegels onderweg zijn. */
.kaart::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gewas), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 3;
}
.kaart.laadt::after { opacity: 1; animation: kaartlaadt 1.1s linear infinite; }

@keyframes kaartlaadt {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .kaart .tegel { transition: none; }
  .kaart.laadt::after { animation: none; }
}

/* De perceelgrenzen als scherpe lijnen. Een donkere rand eronder, zodat ze
   leesbaar blijven op zowel een lichte kaart als een donkere luchtfoto. */
.kaart .vorm .grenzenrand {
  fill: none;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
}
.kaart .vorm .grenzen {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* ---------- knopjes in plaats van keuzevakken ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  padding: .45rem .7rem;
  border: 1px solid var(--lijn);
  background: var(--vlak);
  color: var(--leem);
  white-space: nowrap;
}
.chip:hover span { border-color: var(--gewas-inkt); color: var(--gewas-inkt); }
.chip input:checked + span {
  background: var(--gewas-inkt);
  border-color: var(--gewas-inkt);
  color: var(--op-gewas);
}
.chip input:focus-visible + span { outline: 3px solid var(--gewas); outline-offset: 2px; }

/* ---------- bouwplan van een perceel ---------- */

.historie { display: flex; flex-direction: column; gap: .5rem; }
.historie h3 { font-size: 1rem; }
.historie ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historie li {
  display: flex;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
  font-size: .9rem;
}
.historie li:last-child { border-bottom: 0; }
.historie .jaar {
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  color: var(--leem);
  flex: none;
  width: 3rem;
  align-self: center;
}

/* De keuzelijstjes staan in de lijst zelf, op de regel van hun eigen jaar. Zo zie
   je meteen welk jaar nog leeg is en vul je het daar in, in plaats van een stap
   verderop. */
.historie li { align-items: center; }
.historie select {
  font: inherit;
  font-size: .88rem;
  flex: 1;
  min-width: 0;
  padding: .35rem .45rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  color: var(--inkt);
}
.historie select:focus-visible { outline: 3px solid var(--gewas); outline-offset: 1px; }
.historie li.onbekend select { color: var(--inkt-zacht); }

/* ---------- perceelomtrek, aanwijzen en kiezen ---------- */

/* De omtrek van elk perceel: wit lijntje met een donkere rand eronder, zodat het
   leesbaar blijft op een lichte kaart en op een donkere luchtfoto. */
.kaart .vorm .grenzenrand {
  fill: none;
  stroke: rgba(0, 0, 0, .6);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.kaart .vorm .grenzen {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

/* Waar de muis boven hangt licht op. */
.kaart .vorm .zweef {
  fill: #fff;
  fill-opacity: .22;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 120ms ease;
}

/* Het gekozen perceel. */
.kaart .vorm .keuze {
  fill: var(--gewas);
  fill-opacity: .32;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
}
.kaart .vorm .keuze.net { animation: perceeltik 420ms ease-out; }

@keyframes perceeltik {
  from { fill-opacity: .62; stroke-width: 9; }
  to   { fill-opacity: .32; stroke-width: 3; }
}

/* Boven een perceel wordt de aanwijzer een handje. */
.kaart.raak { cursor: pointer; }
.kaart.sleept, .kaart.sleept.raak { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .kaart .vorm .keuze.net { animation: none; }
  .kaart .vorm .zweef { transition: none; }
}

.verder { margin-top: .3rem; }
.verder .knop { display: inline-block; }
.balansfeiten { margin-bottom: .3rem; }

.seizoentabel td, .seizoentabel th { text-align: right; }
.seizoentabel tbody th, .seizoentabel thead th:first-child { text-align: left; }
.seizoentabel .nu { background: color-mix(in srgb, var(--gewas) 10%, var(--vlak)); font-weight: 700; }

/* ---------- perceelgrenzen: zwarte lijn met witte gloed, plus nummers ---------- */

.kaart .vorm .grenzenrand {
  fill: none;
  stroke: rgba(255, 255, 255, .75);
  stroke-width: 4.5;
  vector-effect: non-scaling-stroke;
}
.kaart .vorm .grenzen {
  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.kaart .vorm .nummers text {
  font-family: var(--letter-mono);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #fff;
  stroke: rgba(0, 0, 0, .8);
  stroke-width: 3;
  paint-order: stroke;
  pointer-events: none;
}

.gemeten { display: block; margin-top: .3rem; font-size: .8rem; color: var(--inkt-zacht); }

/* De tegels hebben onderling een stapelvolgorde nodig, zodat een grovere
   vulling onder de scherpe tegel blijft. Maar die volgorde mag niet buiten
   het doek gelden, want dan komen de tegels boven de perceellijnen te liggen.
   Tijdens het slepen zette de transform op het doek dat vanzelf goed, en
   daardoor zag je de lijnen alleen tijdens het slepen. Met isolation blijft
   de volgorde altijd binnen het doek. */
.kaart .doek {
  isolation: isolate;
  z-index: 0;
}

.kaart .vorm { z-index: 2; }
.kaart .kaartknoppen { z-index: 5; }


/* De twee getallen van de eigen bodemanalyse. Naast elkaar als het past, want
   ze horen bij elkaar en samen zijn ze een klein blokje. */
.analyse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .8rem;
  margin-top: .8rem;
}
.analyse label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.analyse input {
  font: inherit;
  font-family: var(--letter-mono);
  padding: .6rem .7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  color: var(--inkt);
  width: 100%;
}
.analyse input:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }

.analyse select {
  font: inherit;
  font-size: .92rem;
  padding: .55rem .6rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--vlak);
  color: var(--inkt);
  width: 100%;
}
.analyse.bouwplan label span {
  font-family: var(--letter-mono);
  color: var(--inkt-zacht);
}

/* Als het jaar anders uitpakt staat er een ander gewas bovenaan. Dat is in een
   op de vijf gevallen zo, dus het hoort boven de lijst en niet eronder. */

/* Waarom deze lijst er zo uitziet. Staat boven de gewassen, want anders denkt
   een boer met paarden dat we de helft vergeten zijn. */
.doeluitleg {
  border-left: 3px solid var(--gewas);
  padding: .6rem .9rem;
  background: var(--vlak-diep);
  font-size: .93rem;
}

/* Een keuze die we zelf al ingevuld hebben: het antwoord staat er, met de bron,
   en de knoppen zitten eronder voor als de boer het beter weet. */
.groep.gemeten details { border: 1px solid var(--lijn); background: var(--vlak); }
.groep.gemeten summary {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .7rem .85rem;
  cursor: pointer;
  list-style: none;
}
.groep.gemeten summary::-webkit-details-marker { display: none; }
.groep.gemeten summary b { font-size: 1rem; }
.groep.gemeten .wijzigen {
  margin-left: auto;
  font-size: .82rem;
  color: var(--gewas-inkt);
  text-decoration: underline;
  flex: none;
}
.groep.gemeten details[open] .wijzigen { color: var(--inkt-zacht); }
.groep.gemeten details[open] summary { border-bottom: 1px solid var(--lijn-zacht); }
.groep.gemeten .chips { padding: .7rem .85rem; }

/* Een droog seizoen krijgt de roestkleur die op deze site droogte betekent, met
   het woord droog in de tekst zelf. Kleur alleen is nooit genoeg. */

/* De vraag met vinkjes: wat kun je oogsten. Kleinere vakjes dan de radioknoppen,
   want er staan er zeven en het is een bijvraag, geen hoofdkeuze. */
.groep.vinkjes .opties { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.groep.vinkjes .vlak { padding: .55rem .7rem; }
.groep.vinkjes .optienaam { font-size: .9rem; }
.groep.vinkjes .optieuitleg { font-size: .75rem; }
.groep.vinkjes input:checked + .vlak { border-color: var(--gewas-inkt); background: var(--gewas-zacht); }

/* ================================================================
   Het nieuwe ontwerp: zwevende kaarten, ronde hoeken, lime accent.
   Zie de merkgids in CLAUDE.md. De vormtaal zit in de variabelen
   bovenaan dit bestand; wat hieronder staat zijn de onderdelen die
   een eigen vorm hadden en dus niet vanzelf meeveranderen.
   ================================================================ */

/* De kop was een zwevende pil; ronde 5 maakt er een gewone strook van die aan de
   bovenkant blijft plakken, half doorzichtig met een waas erachter. Dat werkt beter op
   de adviespagina, waar de kaart eronder doorloopt: een pil laat de kaart er langs de
   randen omheen zien en dat leest als een gat.

   De waas kost niets zolang de strook niet meebeweegt, maar backdrop-filter dwingt wel
   een eigen laag af. Daarom staat er ook een dekkende terugval in dezelfde kleur voor
   browsers die hem niet kennen: dan is de strook gewoon ondoorzichtig. */
.siteko {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .siteko {
    background: color-mix(in srgb, var(--vlak) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.korij {
  max-width: 82rem;
  margin: 0 auto;
  padding: .8rem var(--rand);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: .75rem 1.25rem;
}
/* Vanaf 68 rem past alles op een regel. Daaronder mag hij wel wikkelen, want daar is
   het alternatief dat er iets buiten beeld valt. */
@media (min-width: 68rem) {
  .korij { flex-wrap: nowrap; gap: .6rem 1.25rem; }
  .hoofdnav { gap: 1.6rem; }
  .korij .knop { padding: .6rem 1.15rem; }
  .merkregel { flex: none; }
}
/* De navigatie draagt de actieve pagina met een streep en niet met een vlak. Een streep
   van twee pixels staat er altijd, doorzichtig als hij niet aan de beurt is, zodat de
   regel niet verspringt op het moment dat je ergens bent. */
.hoofdnav { align-self: stretch; align-items: center; }
.hoofdnav a {
  padding: .5rem 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-size: .97rem;
  font-weight: 600;
  color: var(--inkt-zacht);
  transition: color .18s ease, border-color .18s ease;
}
.hoofdnav a:hover { background: none; color: var(--inkt); text-decoration: none; }
.hoofdnav a.hier { color: var(--inkt); border-bottom-color: var(--gewas-inkt); }

/* Kaarten krijgen lucht eronder in plaats van alleen een lijn eromheen. */
.gewas, .instelvak, .leegvak, .situatie, .vergelijking, .groepvak {
  box-shadow: var(--schaduw);
}
.gewas:hover { box-shadow: var(--schaduw-diep); }

/* Het paneel op de adviespagina zweeft over de kaart, zoals bij Harvesta. */
.paneel {
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-diep);
}
.kaartvak { border-radius: var(--rond-groot); overflow: hidden; }

/* Grote cijfers met een klein label erboven: de stat-tegel uit het ontwerp.
   Het label staat bewust boven en klein, het getal eronder en groot, want dat is
   waar je oog heen gaat. */
.feiten > div {
  padding: .7rem .85rem;
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-klein);
}
.feiten dt {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leem);
}
.feiten dd { font-size: 1.05rem; }

/* De band onderaan wordt diep groen in plaats van bouwvoorbruin, zodat lime en
   groen erop uitkomen. */
.sitevoet { background: var(--diep); }

/* De koploper krijgt de accentkleur, zoals de "Optimal zone" in het ontwerp.
   Een vlak met donkere letters en niet lime als tekst: dat haalt het contrast niet.
   Er staat altijd een woord bij ("Beste keuze"), want kleur mag nooit de enige
   drager van betekenis zijn. */
.gewas.top {
  border-color: var(--nadruk-diep);
  box-shadow: var(--schaduw-diep);
}
.gewas.top .rang {
  background: var(--nadruk);
  color: var(--op-nadruk);
  border-radius: var(--rond-pil);
  padding: .1rem .5rem;
  font-weight: 700;
}
.bestekeuze {
  background: var(--nadruk);
  color: var(--op-nadruk);
  border-left: 0;
  border-radius: var(--rond-klein);
}
.bestekeuze b { color: var(--op-nadruk); }
.bestekeuze.matig { background: var(--roest-zacht); }
.bestekeuze.matig b { color: var(--roest); }

/* Het chipje met de beschikbare millimeters is het enige getal in het kader dat
   je meteen wilt zien. Dat krijgt de accent in plaats van een blauwe rand. */
.feitenrij .mm {
  background: var(--nadruk);
  color: var(--op-nadruk);
  border-color: var(--nadruk-diep);
}

/* De situatie- en groepskaarten krijgen dezelfde ronding als de rest. */
.situatie { border-radius: var(--rond-groot); }
.gewasplan > li, .instelvak, .leegvak { border-radius: var(--rond); }

/* De balkjes en voortgangsstreepjes rond, zoals overal in het ontwerp. Ronde 5 maakt ze
   dikker (10 tot 15 pixels in plaats van 4), en dan leest 3px als een streep met
   hoekjes: het worden volle pillen. */
.gbalk, .weegbalk { border-radius: var(--rond-pil); overflow: hidden; }
.gbalk i, .weegbalk i { border-radius: var(--rond-pil); }

/* ================================================================
   De kaart als werkblad: bediening zweeft erover
   ================================================================

   Uit het Farm Map-ontwerp: de kaart vult het vlak, en zoeken, zoomen en de
   perceelmelding liggen er als losse pillen en kaartjes overheen. Dat scheelt
   verticale ruimte en het maakt de kaart de hoofdzaak, wat hij al hoort te zijn.

   Het lagenkaartje uit dat ontwerp hebben we een ronde lang overgeslagen, met de reden
   "wij hebben maar een laag". Dat klopte niet: de bodemkaart en de grondwaterstand
   waren er al als WMS, we bevroegen ze alleen per punt. Sinds ronde 5 staan ze er als
   tegels bij, zie .laagkeuze hieronder.

   Wat we er nog steeds niet uit overnemen: de kostenbalk en de NDVI-tegels. Die data
   hebben we niet en verzinnen we niet. */

/* De laagkeuze: drie pillen die zeggen wat er over de luchtfoto ligt.

   Rechtsboven, onder de zoekbalk. Linksboven zit het zoeken, rechtsonder het zoomen en
   middenonder de perceelmelding; dit is de enige hoek die nog vrij was.

   De namen staan er voluit. Een icoontje voor "bodemkaart" bestaat niet, en kleur mag
   nooit de enige drager van betekenis zijn. */
.laagkeuze {
  position: absolute;
  z-index: 12;
  top: 3.9rem;
  right: .7rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .3rem;
  background: var(--vlak-diep);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-paneel);
  box-shadow: var(--schaduw);
}
.laagkeuze button {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  padding: .4rem .9rem;
  border: 0;
  border-radius: var(--rond-pil);
  background: transparent;
  color: var(--inkt-zacht);
  transition: background .18s ease, color .18s ease;
}
.laagkeuze button:hover { color: var(--inkt); background: var(--vlak); }
.laagkeuze button.hier { background: var(--nadruk); color: var(--op-nadruk); }

/* Op een smal scherm past er rechts geen kolom naast de kaart zonder hem dicht te
   zetten. Daar gaat de keuze liggend onder de zoekbalk staan, over de volle breedte. */
@media (max-width: 34rem) {
  .laagkeuze {
    left: .7rem;
    right: .7rem;
    flex-direction: row;
  }
  .laagkeuze button { flex: 1; text-align: center; padding: .4rem .4rem; font-size: .84rem; }
}

.kaartvak {
  position: relative;
  border-radius: var(--rond-groot);
  overflow: hidden;
  box-shadow: var(--schaduw);
}

/* De zoekbalk wordt een zwevende pil linksboven. */
.kaartbalk {
  position: absolute;
  z-index: 12;
  top: .7rem;
  left: .7rem;
  right: 3.9rem;
  padding: 0;
  border: 0;
  gap: .4rem;
}
.kaartbalk .zoekveld { flex: 1 1 auto; max-width: 26rem; }
.zoekveld input {
  padding: .6rem 1rem;
  border-radius: var(--rond-pil);
  border-color: transparent;
  box-shadow: var(--schaduw);
}
.kaartbalk .knop { box-shadow: var(--schaduw); }

/* Zoomen rechtsonder en rond, zoals in het ontwerp. */
.zoomknoppen { top: auto; bottom: .8rem; right: .8rem; gap: .4rem; }
.kaartknoppen button {
  border-radius: var(--rond-pil);
  border-color: transparent;
  box-shadow: var(--schaduw);
}
.zoomknoppen button { width: 2.6rem; height: 2.6rem; }

/* De melding over het aangewezen perceel zweeft onderaan de kaart in plaats van
   eronder te staan. Leeg is hij weg, anders staat er een lege pil op de foto. */
.kaarthulp {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: .8rem;
  transform: translateX(-50%);
  max-width: min(32rem, calc(100% - 8rem));
  margin: 0;
  padding: .55rem 1rem;
  font-size: .86rem;
  color: var(--inkt);
  background: var(--vlak);
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw-diep);
  text-align: center;
}
.kaarthulp:empty { display: none; }
.kaarthulp.gekozen { border: 1px solid var(--nadruk-diep); }
.kaarthulp.let { border: 1px solid var(--roest); }

/* Op smalle schermen is er geen plek om iets te laten zweven naast de zoekbalk:
   dan gaat de melding onder de kaart staan zoals hij deed. */
@media (max-width: 34rem) {
  .kaartbalk { position: static; padding: .7rem; }
  .zoekveld input { box-shadow: none; border-color: var(--lijn); }
  .kaarthulp {
    position: static;
    transform: none;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }
}

/* Het paneel zweeft als kaart naast de kaart, met dezelfde taal. */
.paneel {
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
}

/* ================================================================
   Datarijen in de stijl van EarthEye
   ================================================================

   Label links met een kleine ondertitel, het getal groot rechts, en een dunne lijn
   ertussen. Dat leest sneller dan een rij tegels: je oog loopt de rechterkolom af.
   De ondertitel is bij ons de herkomst ("uit de bodemkaart"), en dat is precies wat
   daar hoort te staan. */

.feiten {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.feiten > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lijn-zacht);
  border-radius: 0;
}
.feiten > div:last-child { border-bottom: 0; }
.feiten dt {
  flex: 0 0 auto;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--inkt-zacht);
}
.feiten dd {
  margin: 0;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--inkt);
}
.feiten dd .fijn {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--leem);
}

/* De cijferband onder de hero, uit het ontwerp met de 193k+ en de 90%.
   Groot getal, klein woord eronder, en daaronder in het fijn waar het vandaan komt.
   Dat laatste is bij ons niet optioneel: een getal zonder bron is een claim. */
.cijferband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--rand) 2.5rem;
  background: transparent;
}
.cijferband > div {
  padding: 1.1rem 1.2rem;
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.cijferband b {
  display: block;
  font-family: var(--letter-kop);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.1;
  color: var(--gewas-inkt);
  font-variant-numeric: tabular-nums;
}
.cijferband span { display: block; margin-top: .2rem; font-size: .9rem; }
.cijferband i {
  display: block;
  margin-top: .35rem;
  font-style: normal;
  font-size: .76rem;
  color: var(--leem);
}

/* Het voorbeeldkaartje in de hero zweeft, zoals de kaartjes over de foto in het
   ontwerp. */
.proefkaart {
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-diep);
}
.proefkaart .gbalk { border-radius: var(--rond-pil); overflow: hidden; }

/* De blokken op de homepage krijgen lucht: het ontwerp zet elke sectie op een eigen
   vlak in plaats van doorlopende tekst. */
.blok.wit > .sectiekop, .blok > .sectiekop { margin-bottom: 1.4rem; }

/* ================================================================
   Minder sjabloon, meer ontwerp
   ================================================================

   Wat hier weg is: het kopje in kapitalen boven elke titel. Dat is het tic dat je
   op elke gegenereerde landingspagina ziet, en het zegt nooit iets wat de titel
   eronder niet al zegt. De titel draagt het zelf.

   Wat hier verandert: de koppen worden groot, de secties krijgen een ongelijk
   ritme in plaats van vier keer dezelfde kaartenrij, en de cijfers staan naakt met
   een haarlijn erboven zoals in het ontwerp, niet in een doosje met schaduw. */


/* Een kop mag ruimte innemen. In het ontwerp beslaat hij de halve pagina. */
.blok h2, .sectiekop h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 20ch;
}

/* Kop links breed, inleiding rechts smal en lager: dat is de asymmetrie uit het
   ontwerp. Vier keer dezelfde gecentreerde kop-plus-lead is wat het sjabloonachtig
   maakt. */
.sectiekop {
  align-items: end;
  padding-bottom: 1.6rem;
  margin-bottom: 2.4rem;
}
@media (min-width: 54rem) {
  .sectiekop { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
  .sectiekop h2 { max-width: none; }
  .sectiekop + .leidend { max-width: 52ch; }
}

/* De cijfers stonden een ronde lang kaal op de pagina, zonder doos. Ronde 5 zet ze
   terug in vier kaarten met een rand en de nieuwe schaduw, maar met rechte hoeken: dat
   is het enige blok op de homepage zonder ronding, en juist daardoor leest het als een
   band en niet als vier losse dingen. */
.cijferband {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-bottom: 0;
  border-top: 0;
  max-width: 82rem;
}
.cijferband > div {
  padding: 1.2rem 1.25rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 0;
  box-shadow: var(--schaduw);
}
.cijferband b {
  display: block;
  font-family: var(--letter-kop);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--inkt);
}
.cijferband span {
  display: block;
  margin-top: .45rem;
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--inkt);
}
.cijferband i {
  display: block;
  margin-top: .2rem;
  font-size: .88rem;
  font-style: normal;
  color: var(--inkt-zacht);
}

/* De hero was twee kolommen: de zin links, het voorbeeldkaartje rechts. Ronde 5 haalt
   dat kaartje weg en zet alles midden op de foto. Eén kop, één zin, twee knoppen, en
   verder niets tussen de bezoeker en de kaart. */
.hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}
.hero h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero .leidend { max-width: 34rem; margin-left: auto; margin-right: auto; }
.hero .knoppen { justify-content: center; }

/* ================================================================
   De hero met een echte luchtfoto eronder
   ================================================================

   De ontwerpen openen allemaal met een grote foto en de kop eroverheen. Wij hadden
   geen enkele afbeelding, en een stockfoto van een Amerikaans maisveld hoort niet op
   een site over Nederlandse percelen. Dit is de luchtfoto van PDOK, dezelfde die
   onder de kaart ligt, een keer opgehaald door scripts/hero-luchtfoto.php.

   De donkere sluier eroverheen is er niet voor de sier maar voor het contrast: witte
   letters op een luchtfoto zijn onleesbaar zodra er een licht perceel onder valt. */

.hero.metfoto {
  position: relative;
  isolation: isolate;
  max-width: none;
  padding-left: var(--rand);
  padding-right: var(--rand);
  padding-top: clamp(3.5rem, 2rem + 6vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--op-donker);
  border-radius: 0;
}
.hero.metfoto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--herofoto);
  background-size: cover;
  background-position: center;
}
.hero.metfoto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
      rgba(44, 50, 32, .62) 0%,
      rgba(44, 50, 32, .38) 45%,
      rgba(44, 50, 32, .72) 100%);
}

/* De inhoud van de hero blijft binnen dezelfde kolombreedte als de rest. */
.hero.metfoto > * { max-width: 48rem; }
.hero.metfoto {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, 48rem);
  align-content: center;
  min-height: 40rem;
}

.hero.metfoto h1 { color: var(--op-donker); }
.hero.metfoto .leidend { color: rgba(228, 220, 204, .92); }
/* Op de foto is de omrande knop bijna onzichtbaar; daar krijgt hij een lichte rand en
   lichte letters. De klasse staat in index.php, zodat dezelfde knop elders gewoon
   blijft. */
.hero.metfoto .knop.rand,
.knop.rand.licht { border-color: rgba(228, 220, 204, .55); color: var(--op-donker); background: transparent; }
.hero.metfoto .knop.rand:hover,
.knop.rand.licht:hover { border-color: var(--op-donker); background: rgba(228, 220, 204, .12); }

.fotobron {
  grid-column: 1 / -1;
  margin: 2.5rem 0 0;
  font-size: .72rem;
  color: rgba(228, 220, 204, .6);
}

/* De band met de bandensporen hoort niet over een foto heen. */
.hero.metfoto ~ .bandensporen, .heroband:has(.hero.metfoto) .bandensporen { display: none; }

/* ================================================================
   Het paneel zweeft over de kaart (stap 1 en 2)
   ================================================================

   Uit het Farm Map-ontwerp: de kaart vult het vlak en het detailkaartje ligt er
   linksboven overheen, met een eigen schuifbalk. Dat maakt de kaart de hoofdzaak,
   en die is dat op deze pagina ook.

   Ronde 5 doet dit ook bij stap 3. Dat kon een ronde lang niet, want tien gewaskaartjes
   van elk een halve schermhoogte lees je niet in een kolom die over een luchtfoto
   zweeft. Nu beginnen die kaartjes dichtgeklapt (.gklep), dus er staan tien namen met
   hun cijfer en je klapt open wat je wilt lezen. Het paneel houdt zijn eigen schuifbalk.

   Het paneel staat links, zoals in het ontwerp, en niet rechts. */

@media (min-width: 64rem) {
  .werkblad.zwevend {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }
  .werkblad.zwevend .kaartvak {
    grid-column: 1;
    grid-row: 1;
  }
  .werkblad.zwevend .paneel {
    position: absolute;
    z-index: 14;
    top: 1.25rem;
    left: 1.25rem;
    width: min(27rem, calc(100% - 2.5rem));
    max-height: calc(100% - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--lijn);
    border-radius: var(--rond-paneel);
    box-shadow: var(--schaduw-zweef);
  }
  /* De stappenbalk plakt bovenin het zwevende kaartje en niet aan de pagina. */
  .werkblad.zwevend .paneelnav {
    top: 0;
    border-radius: var(--rond-paneel) var(--rond-paneel) 0 0;
  }
  /* De zoekpil schuift op zodat hij niet onder het paneel verdwijnt. */
  .werkblad.zwevend .kaartbalk { left: 29.5rem; }
  /* En de melding onderaan blijft rechts van het paneel gecentreerd. */
  .werkblad.zwevend .kaarthulp { left: calc(50% + 14rem); }
}

/* Onder de 64 rem verandert er niets: daar staat alles gewoon onder elkaar. */

/* Het naamplaatje op het gekozen perceel, uit het Farm Map-ontwerp.
   Een wit pilletje met een rond groen puntje ervoor, midden op het perceel. Hij
   hangt aan het zwaartepunt van de vorm, dus hij schuift mee met de kaart. */
.perceelchip {
  position: absolute;
  z-index: 11;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem .4rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--inkt);
  background: var(--vlak);
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw-diep);
  pointer-events: none;
}
.perceelchip::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gewas);
  box-shadow: inset 0 0 0 3px var(--nadruk);
}

/* ================================================================
   Stap 3: het advies krijgt de brede kolom
   ================================================================

   Bij stap 1 en 2 zweeft het paneel over de kaart. Ging je door naar het advies, dan
   viel dat weg en kwam het paneel in de smalle rechterkolom van 27 rem terecht,
   terwijl de kaart de brede kolom hield. Twee dingen mis: de lijst sprong zichtbaar
   naar rechts en werd smal, en de kaart nam de meeste ruimte terwijl hij op dat
   moment niets meer te vertellen heeft.

   Nu andersom. De ranglijst staat links en breed, de kaart blijft rechts staan als
   smalle kolom zodat je een ander perceel kunt aanklikken zonder terug te stappen.
   Zo verspringt er niets naar de zijkant: het paneel groeit van een zwevend kaartje
   links naar een brede kolom links. */

@media (min-width: 64rem) {
  .werkblad:not(.zwevend):not(.kiesblad) {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
  /* De kaart wordt klein bij stap 3.
   *
   * Hij stond hier op een volle schermhoogte en nam daarmee veertig procent van het
   * scherm in beslag, terwijl je op dat moment een lijst leest. De kaart heeft daar
   * nog maar een taak: laten zien welk perceel het is, en de mogelijkheid om een
   * ander aan te klikken zonder terug te stappen. Daar is een kaartje van een paar
   * honderd pixels genoeg voor.
   *
   * Hij plakt bovenaan mee zodat hij in beeld blijft terwijl je de gewassen langsgaat,
   * maar de rest van die kolom is vrij voor de lijst. */
  .werkblad:not(.zwevend):not(.kiesblad) .kaartvak {
    order: 2;
    align-self: start;
    position: sticky;
    top: calc(var(--kophoogte) + 1rem);
    height: 20rem;
    margin: 1rem 1rem 1rem 0;
  }
  /* De zwevende bediening past niet in een klein kaartje: zoeken gaat op stap 1. */
  .werkblad:not(.zwevend):not(.kiesblad) .kaartbalk { display: none; }
  .werkblad:not(.zwevend):not(.kiesblad) .kaarthulp { display: none; }
  .werkblad:not(.zwevend):not(.kiesblad) .zoomknoppen { bottom: .5rem; right: .5rem; }
  .werkblad:not(.zwevend):not(.kiesblad) .zoomknoppen button { width: 2.1rem; height: 2.1rem; }
  .werkblad:not(.zwevend):not(.kiesblad) .paneel {
    order: 1;
    border-left: 0;
    border-right: 1px solid var(--lijn-zacht);
  }
}

/* ================================================================
   De stappenbalk als segmentregelaar
   ================================================================

   Uit de ontwerpen: een pil met drie vakken waarvan er een gevuld is, in plaats van
   drie knoppen met een streep eronder. Het gevulde vak is de stap waar je staat.
   Het nummer blijft staan, want de stap staat ook in het webadres en een boer die
   terugkomt moet zien waar hij was. */

.paneelnav {
  gap: .2rem;
  padding: .45rem;
  background: var(--grond);
  border-bottom: 1px solid var(--lijn-zacht);
}
.paneelnav button {
  gap: .45rem;
  padding: .55rem .5rem;
  font-size: .84rem;
  border: 0;
  border-radius: var(--rond-pil);
  color: var(--inkt-zacht);
  background: transparent;
  transition: background .15s, color .15s;
}
.paneelnav button:hover {
  color: var(--inkt);
  background: var(--vlak);
  border-bottom-color: transparent;
}
.paneelnav button.nu {
  color: var(--op-gewas);
  background: var(--gewas-inkt);
  border-bottom-color: transparent;
  box-shadow: var(--schaduw);
}
.paneelnav .stapnr {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: .74rem;
  font-weight: 700;
  background: var(--lijn);
  color: var(--inkt);
}
.paneelnav button.nu .stapnr { background: var(--nadruk); color: var(--op-nadruk); }

/* Op smalle schermen past de tekst er niet naast: dan alleen de nummers, en de naam
   van de stap staat als kop in het paneel eronder. */
@media (max-width: 26rem) {
  .paneelnav button { font-size: .78rem; padding: .5rem .3rem; }
}

/* Wat helpt en wat punten kost, naast elkaar.
   Twee kolommen met een kop erboven leest als een afweging; twee lijstjes onder
   elkaar met een plusje en een uitroepteken leest als een verhaal. */
.afweging {
  display: grid;
  gap: .9rem 1.4rem;
  margin: .9rem 0;
}
@media (min-width: 34rem) {
  .afweging { grid-template-columns: 1fr 1fr; }
}
.afweging h4, .plichtvak h4 {
  margin: 0 0 .35rem;
  font-family: var(--letter-kop);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--leem);
}
.afweging .helpt h4 { color: var(--gewas-inkt); }
.afweging .kost h4 { color: var(--roest); }

.plichtvak { margin: .9rem 0; }
.plichtvak h4 { color: var(--water); }

/* Hoe zeker weten we dit? Een oordeel in een woord, met eronder waar het op rust. */
.zekerheid {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  margin: .9rem 0 0;
  padding: .55rem .8rem;
  font-size: .84rem;
  border-radius: var(--rond-klein);
  background: var(--grond);
}
.zekerkop {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leem);
}
.zekerheid b { font-size: .95rem; }
.zekerheid.hoog b { color: var(--gewas-inkt); }
.zekerheid.midden b { color: var(--stro); }
.zekerheid.laag b { color: var(--roest); }
.zekeruit { color: var(--inkt-zacht); flex: 1 1 100%; font-size: .78rem; }

/* De beslissingskaart bovenaan.
   De naam van het gewas groot, het oordeel ernaast, en daaronder de drie getallen
   die de keuze dragen. De telling van hoeveel gewassen er passen staat eronder in
   het klein: dat is achtergrond, geen antwoord. */
.beslissing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin: 0 0 1rem;
}
.beslissingkop {
  flex: 1 1 100%;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leem);
}
.beslissing b {
  font-family: var(--letter-kop);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.beslissinglabel {
  padding: .2rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--op-nadruk);
  background: var(--nadruk);
  border-radius: var(--rond-pil);
}

.beslissingcijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0 0 1rem;
}
.beslissingcijfers > div {
  padding: .7rem .8rem;
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-klein);
}
.beslissingcijfers b {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.25rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.beslissingcijfers span { display: block; margin-top: .15rem; font-size: .76rem; color: var(--inkt-zacht); }
.beslissingcijfers .goed b { color: var(--gewas-inkt); }
.beslissingcijfers .let b { color: var(--roest); }

.situatiekop.klein { font-size: .88rem; font-family: inherit; color: var(--inkt-zacht); }

/* Wat verandert er als het anders loopt.
   Drie kaartjes met een getal en een zin, in plaats van de vraag te moeten
   afleiden uit een tabel van vier kolommen. Op een telefoon is die tabel sowieso
   niet te lezen; de kaartjes stapelen gewoon. */
.watals { margin: 1.6rem 0; }
.watals h3 { margin-bottom: .8rem; }
.watalsrij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
}
.watalsrij > div {
  padding: .9rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.watalskop {
  display: block;
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--leem);
}
.watalsrij b {
  display: block;
  margin: .15rem 0 .3rem;
  font-family: var(--letter-kop);
  font-size: 1.8rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--gewas-inkt);
}
.watalsrij b.meer { font-size: 1.1rem; }
.watalszin { display: block; font-size: .82rem; color: var(--inkt-zacht); }

/* De balk onder het getal: dun is waar het nu staat, dik is waar het heen gaat.
   Een getal alleen laat je rekenen, een balk laat je zien. Het getal blijft ernaast,
   want wie wil narekenen moet dat kunnen. */
.watalsbalk {
  position: relative;
  display: block;
  height: 10px;
  margin: 0 0 .45rem;
  background: var(--lijn-zacht);
  border-radius: var(--rond-pil);
  overflow: hidden;
}
.watalsbalk u {
  position: absolute;
  inset: 0 auto 0 0;
  border-right: 2px solid var(--leem);
  background: transparent;
}
.watalsbalk i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gewas);
  border-radius: var(--rond-pil);
}

/* De drie deelcijfers als balkjes naast elkaar.
   Losse getallen dwingen je te vergelijken; een balk laat de vorm zien. Woord en
   cijfer blijven erbij: het woord omdat kleur nooit de enige drager van betekenis
   mag zijn, het cijfer om na te rekenen. */
.scoredelen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem .8rem;
  margin: .6rem 0 .9rem;
  padding: 0;
}
.scoredelen > div {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.deelkop {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-size: .78rem;
  color: var(--inkt-zacht);
}
.deelkop b { color: var(--inkt); font-weight: 600; }
.deelkop i {
  margin-left: auto;
  font-style: normal;
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  color: var(--leem);
}
.deelbalk {
  display: block;
  height: 6px;
  margin-top: .25rem;
  background: var(--lijn-zacht);
  border-radius: var(--rond-pil);
  overflow: hidden;
}
.deelbalk i { display: block; height: 100%; background: var(--gewas); border-radius: 3px; }
.deelbalk.matig i { background: var(--stro); }
.deelbalk.zwak i  { background: var(--roest); }

@media (max-width: 30rem) {
  .scoredelen { grid-template-columns: 1fr; gap: .4rem; }
}

/* De waterdruppel.
   Vol is genoeg water, half is de helft tekort, en de streep erin is waar je in een
   droog jaar uitkomt. Kleur is nooit de enige drager: de zin ernaast zegt hetzelfde
   in woorden, en het aantal millimeters staat eronder. */
.water {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0 0 .9rem;
}
.waterdrup { flex: 0 0 auto; margin-top: .1rem; }
.waterdrup .drupvorm { fill: var(--lijn-zacht); stroke: var(--lijn-sterk); stroke-width: 1; }
.waterdrup .drupvul { fill: var(--water); }
.waterdrup.half .drupvul { fill: var(--stro); }
.waterdrup.leeg .drupvul { fill: var(--roest); }
.waterdrup .drupdroog { stroke: var(--inkt); stroke-width: 1.4; stroke-dasharray: 2.5 2; opacity: .55; }

.water .watertekst { margin-top: 0; }

/* ================================================================
   De zijbalk houdt een breedte, en alles past erin
   ================================================================

   Hij was bij stap 1 en 2 een zwevend kaartje van 25 rem en bij stap 3 een brede
   kolom van zestig procent. Dat verspringt, en dat is precies wat je niet wilt als
   je van uitgangspunten naar advies stapt: je verwacht dat de lijst verschijnt waar
   het paneel al stond.

   Nu overal 28 rem, zwevend over de kaart. Alles wat erin staat is daarop gemaakt:
   de tabel gaat achter een klepje, de afweging staat onder elkaar, en de cijfers
   krijgen de maat die in die breedte leesbaar blijft. */

@media (min-width: 64rem) {
  /* De zijbalk is altijd 28 rem breed. Wat verschilt is of hij zweeft of meeloopt.
   *
   * Het paneel zweeft over de kaart bij alle drie de stappen. Bij stap 1 en 2 deed het
   * dat al; stap 3 stond een ronde lang in een eigen kolom, omdat de hele ranglijst
   * geperst in een zwevend bakje niet te lezen was.
   *
   * Sinds ronde 5 kan het wel, om één reden: de gewaskaartjes beginnen dichtgeklapt
   * (.gklep). Er staan dus tien namen met hun cijfer in het paneel en je klapt open wat
   * je wilt lezen, in plaats van tien documenten onder elkaar.
   *
   * Blijkt dat bij het lezen alsnog te krap, dan is de weg terug klein: geef de klasse
   * zwevend in advies.php weer alleen aan stap 1 en 2 en zet de regels voor
   * .werkblad:not(.zwevend) hieronder weer aan het werk. */
  .werkblad:not(.kiesblad) { min-height: calc(100vh - var(--kophoogte)); }

  .werkblad.zwevend {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }
  .werkblad.zwevend .kaartvak {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--kophoogte);
    height: calc(100vh - var(--kophoogte));
    margin: 0;
  }
  .werkblad.zwevend .paneel {
    position: absolute;
    z-index: 14;
    top: 1.25rem;
    left: 1.25rem;
    width: var(--paneelbreed);
    max-height: calc(100% - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--lijn);
    border-radius: var(--rond-paneel);
    box-shadow: var(--schaduw-zweef);
  }
  .werkblad.zwevend .paneelnav {
    top: 0;
    border-radius: var(--rond-paneel) var(--rond-paneel) 0 0;
  }
  .werkblad.zwevend .kaartbalk { display: flex; left: calc(var(--paneelbreed) + 2.5rem); }
  .werkblad.zwevend .kaarthulp { display: block; left: calc(50% + var(--paneelbreed) / 2); }

  /* Stap 3: dezelfde breedte, maar in de pagina. Geen schuifbalk in een schuifbalk,
     en de lijst mag zo lang worden als hij is. */
  .werkblad:not(.zwevend):not(.kiesblad) {
    grid-template-columns: var(--paneelbreed) minmax(0, 1fr);
    align-items: start;
  }
  .werkblad:not(.zwevend):not(.kiesblad) .paneel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    border-right: 1px solid var(--lijn-zacht);
    border-radius: 0;
    box-shadow: none;
  }
  .werkblad:not(.zwevend):not(.kiesblad) .paneelnav {
    top: var(--kophoogte);
    border-radius: 0;
  }
  .werkblad:not(.zwevend):not(.kiesblad) .kaartvak {
    position: sticky;
    top: calc(var(--kophoogte) + 1rem);
    height: calc(100vh - var(--kophoogte) - 2rem);
    margin: 1rem 1rem 1rem 0;
  }

  .werkblad:not(.kiesblad) .zoomknoppen { bottom: .8rem; right: .8rem; }
  .werkblad:not(.kiesblad) .zoomknoppen button { width: 2.6rem; height: 2.6rem; }
}

/* Alles wat in die 28 rem moet passen. */

/* Wat helpt en wat kost staan onder elkaar: naast elkaar is elke kolom 12 rem en
   dan breekt elke regel op drie woorden. */
.paneel .afweging { grid-template-columns: minmax(0, 1fr); gap: .7rem; }

/* De drie deelbalkjes blijven naast elkaar, maar smaller. */
.paneel .scoredelen { gap: .35rem .5rem; }
.paneel .deelkop { font-size: .72rem; }
.paneel .deelkop i { font-size: .68rem; }

/* De drie cijfers in de beslissingskaart passen op een rij van 28 rem als de
   getallen iets kleiner zijn. */
.paneel .beslissingcijfers { gap: .35rem; }
.paneel .beslissingcijfers > div { padding: .55rem .6rem; }
.paneel .beslissingcijfers b { font-size: 1.05rem; }
.paneel .beslissingcijfers span { font-size: .7rem; }

/* De wat-als-kaartjes onder elkaar in plaats van naast elkaar. */
.paneel .watalsrij { grid-template-columns: minmax(0, 1fr); }
.paneel .watalsrij b { font-size: 1.4rem; }

/* De tabel achter een klepje, met een eigen schuifbalk. */
.vergelijking > summary {
  cursor: pointer;
  font-family: var(--letter-kop);
  font-size: 1rem;
  font-weight: 600;
  padding: .5rem 0;
  color: var(--inkt);
}
.vergelijking > summary:hover { color: var(--gewas-inkt); }
.paneel .tabelrol { overflow-x: auto; }
.paneel .vergelijktabel { min-width: 30rem; font-size: .82rem; }

/* De koploper krijgt een pil in plaats van een markeerstift.
   Een vol lime vlak achter drie regels tekst is te veel: in de ontwerpen zit die
   kleur op kleine pillen. De boodschap blijft, de schreeuw gaat eraf. */
.bestekeuze {
  background: transparent;
  color: var(--inkt);
  border-left: 3px solid var(--nadruk-diep);
  border-radius: 0;
  padding: .1rem 0 .1rem .8rem;
}
.bestekeuze b { color: var(--gewas-inkt); }
.bestekeuze.matig { background: transparent; border-left-color: var(--roest); }

/* De voederwaarde als tegels.
   Klein label boven, getal groot eronder, twee naast elkaar. Een tabel met vier
   kolommen leest niet in een kolom van 28 rem. */
.voedingblok { margin: 0 0 1rem; }
.voedingblok h4 {
  margin: 0 0 .5rem;
  font-family: var(--letter-kop);
  font-size: .92rem;
}
.voedingblok h4 span { font-weight: 400; font-size: .76rem; color: var(--leem); }
.voedingtegels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.voedingtegels > div {
  padding: .55rem .7rem;
  background: var(--grond);
  border-radius: var(--rond-klein);
  text-align: center;
}
.voedingtegels span { display: block; font-size: .72rem; color: var(--inkt-zacht); }
.voedingtegels b {
  display: block;
  margin-top: .1rem;
  font-family: var(--letter-kop);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* De waterstrook: liggend, in waterblauw.
   Gevuld is wat dit perceel levert, de bleke rest is het tekort, en het streepje
   staat waar je in een droog jaar uitkomt. De zin eronder zegt hetzelfde in
   woorden, dus kleur draagt het niet alleen. */
.waterstrook {
  position: relative;
  display: block;
  height: 12px;
  margin: 0 0 .5rem;
  background: color-mix(in srgb, var(--water) 16%, var(--vlak));
  border-radius: var(--rond-pil);
  overflow: hidden;
}
.waterstrook i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--water) 55%, white),
      color-mix(in srgb, var(--water) 80%, white));
  border-radius: var(--rond-pil);
}
.waterstrook u {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--inkt);
  opacity: .45;
}
.water { display: block; }

/* Wat helpt en wat punten kost als twee vakken, zoals in het ontwerp.
   Een groen en een zandkleurig vlak met een tekentje ervoor leest sneller dan twee
   kale kolommen met alleen een gekleurde kop. */
.afweging > div {
  padding: .7rem .85rem;
  border-radius: var(--rond-klein);
  border: 1px solid var(--lijn-zacht);
}
.afweging .helpt { background: var(--gewas-zacht); border-color: color-mix(in srgb, var(--gewas) 25%, transparent); }
.afweging .kost  { background: var(--roest-zacht); border-color: color-mix(in srgb, var(--roest) 25%, transparent); }
.afweging h4 { display: flex; align-items: center; gap: .35rem; }
.afweging .helpt h4::before { content: "\2713"; font-size: .9rem; }
.afweging .kost h4::before  { content: "\26A0"; font-size: .9rem; }

/* ================================================================
   De drie cijfers als rijen, en het water als eigen vlak
   ================================================================

   Ze stonden als drie kolommen naast elkaar en daaronder nog een vierde balk voor
   het water. Vier balken op een rij onder elkaar leest als ruis, en in 28 rem waren
   de drie kolommen te smal om de balken iets te laten zeggen.

   Nu: drie rijen met het woord links, de balk in het midden en het cijfer rechts,
   zoals de NPK-lijst in het ontwerp. Het water staat apart in een eigen blauw vlak,
   want dat is geen vierde weegfactor van dezelfde soort maar het verhaal over dit
   perceel. */

.scoredelen {
  display: block;
  margin: .7rem 0 .9rem;
  padding: 0;
}
.scoredelen > div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) 3.4rem 2.2rem;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
.scoredelen > div:last-child { border-bottom: 0; }
.scoredelen dt {
  font-size: .82rem;
  color: var(--inkt-zacht);
}
.scoredelen dd {
  display: contents;
}
.scoredelen dd b {
  font-size: .8rem;
  font-weight: 600;
  color: var(--inkt);
}
.scoredelen dd i {
  font-style: normal;
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--leem);
  min-width: 1.8rem;
  text-align: right;
}
.deelbalk {
  display: block;
  height: 8px;
  background: var(--lijn-zacht);
  border-radius: var(--rond-pil);
  overflow: hidden;
}
.deelbalk i { display: block; height: 100%; background: var(--gewas); border-radius: var(--rond-pil); min-width: 0; }
.deelbalk.matig i { background: var(--stro); }
.deelbalk.zwak i  { background: var(--roest); }

/* Het water in een eigen vlak. */
.water {
  display: block;
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  background: color-mix(in srgb, var(--water) 8%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--water) 22%, transparent);
  border-radius: var(--rond-klein);
}
.waterstrook { height: 14px; margin: 0 0 .4rem; }
.watermaat {
  display: block;
  margin-bottom: .5rem;
  font-size: .78rem;
  color: var(--inkt-zacht);
}
.watermaat b {
  font-family: var(--letter-kop);
  font-size: 1.1rem;
  color: var(--water);
  font-variant-numeric: tabular-nums;
}
.water .watertekst { display: block; font-size: .86rem; }
.water .watertekst b { color: var(--inkt); }

/* De cijfers op het beheeroverzicht: groot getal, klein label erboven, herkomst
   eronder. Dezelfde vorm als de cijferband op de homepage, maar hier in tegels
   omdat het er vier naast elkaar zijn in een smallere kolom. */
.beheercijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
  margin: 1.2rem 0 2rem;
}
.beheercijfers > div {
  padding: .9rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.beheercijfers span {
  display: block;
  font-size: .82rem;
  color: var(--leem);
}
.beheercijfers b {
  display: block;
  margin: .15rem 0 .1rem;
  font-family: var(--letter-kop);
  font-size: 1.9rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.beheercijfers i { font-style: normal; font-size: .78rem; color: var(--inkt-zacht); }

.probleemlijst { margin: .4rem 0 .6rem; padding-left: 1.1rem; font-size: .9rem; }
.probleemlijst li { margin-bottom: .2rem; }

/* De verdelingen op het gebruiksscherm hergebruiken de balkjes van de score, maar
   met bredere labels omdat er gewasnamen in staan. */
.gebruikslijst > div { grid-template-columns: 12rem minmax(0, 1fr) auto auto; }
@media (max-width: 44rem) {
  .gebruikslijst > div { grid-template-columns: 7rem minmax(0, 1fr) auto auto; }
}
/* ---------- beleidspagina: privacy en voorwaarden (ontwerp 1a) ---------- */
/* Een kaart met een kop, en daaronder twee kolommen: het nummer met de titel links, de
   tekst rechts. Elk onderdeel is een rij met een haarlijn eronder.

   Hier stond een register dat meeliep bij het scrollen. Dat leek handig maar het werkte
   tegen: je moest heen en weer kijken tussen register en tekst, en op een lange pagina
   liepen ze uit elkaar. Nu staat de titel naast zijn eigen alinea en lees je in een
   rechte lijn naar beneden. */

.beleidvel {
  max-width: 58rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  overflow: hidden;
}

.beleidkop {
  padding: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(1.4rem, .6rem + 4vw, 4.5rem) 2.5rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.beleidmerk {
  margin: 0 0 1.4rem;
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leem);
}
.beleidkop h1 { margin: 0 0 1.25rem; }
.beleidlead {
  margin: 0;
  max-width: 34em;
  font-family: var(--letter-kop);
  font-size: 1.32rem;
  line-height: 1.45;
  color: #4C5138;
}

.beleidlijst { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) {
  .beleidlijst { grid-template-columns: 19rem minmax(0, 1fr); }
}

.beleidnr {
  padding: 2rem clamp(1.4rem, .6rem + 4vw, 4.5rem) .4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.beleidnr h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}
/* Het nummer stond klein en in mono boven de kop. Ronde 5 zet het in de schreef en in
   de merkkleur, en op smalle schermen boven de kop en breed ernaast. Het is een
   volgnummer en geen code, dus geen mono. */
.sectienr {
  font-family: var(--letter-kop);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--gewas-inkt);
  line-height: 1.1;
}

.beleidtekst {
  padding: .4rem clamp(1.4rem, .6rem + 4vw, 4.5rem) 2rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.beleidtekst p {
  margin: 0;
  max-width: 36em;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--inkt-tekst);
}
.beleidtekst p + p,
.beleidtekst ul { margin-top: 1rem; }
.beleidtekst > :last-child { margin-bottom: 0; }

/* Op een breed scherm loopt de haarlijn onder allebei de kolommen door en niet alleen
   onder de tekst, anders lijkt de linkerkolom los te zweven. */
@media (min-width: 52rem) {
  .beleidnr { border-bottom: 1px solid var(--lijn-zacht); padding-bottom: 2rem; }
  .beleidtekst { padding-top: 2rem; padding-left: 0; }
  .beleidlijst > .beleidnr:nth-last-child(2),
  .beleidlijst > .beleidtekst:last-child { border-bottom: 0; }
}

/* Wat er nog ingevuld moet worden, gemarkeerd zoals in het ontwerp: geen vet maar een
   geel vlakje, want het is een gat in de tekst en geen nadruk. */
.beleidtekst strong {
  background: var(--stro-vlak);
  color: #6B4B1F;
  font-weight: 400;
  padding: 1px 4px;
  border-radius: 2px;
}

.beleidslot {
  margin: 2rem clamp(1.4rem, .6rem + 4vw, 4.5rem) 3.5rem;
  padding: 1.25rem 1.5rem;
  background: #EFEADC;
  border-left: 2px solid #A9AF86;
  border-radius: 0 4px 4px 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--inkt-zacht);
}

/* ---------- het slotblok onderaan de homepage (ontwerp 3a) ---------- */
/* De vraag links, een beeld van echt land rechts dat tot tegen de rand van de kaart
   loopt. Onder de 56 rem gaat het beeld eronder en wordt het lager, want een vierkant
   beeld van 460 hoog duwt op een telefoon de knop van het scherm af. */

/* Ronde 5 legt de tekst óp het beeld in plaats van ernaast. Het verloop loopt van
   links donker naar rechts bijna open, zodat de zin leesbaar is en het land toch te
   zien. Dat is dezelfde truc als in de hero, alleen liggend in plaats van staand. */
.blok.slot {
  position: relative;
  isolation: isolate;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-diep);
  overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.blok.slot.metbeeld {
  display: flex;
  align-items: center;
  min-height: 20rem;
  border: 0;
  padding: clamp(1.6rem, 1rem + 2vw, 3rem);
  color: var(--op-donker);
}
.blok.slot.metbeeld::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
      rgba(44, 50, 32, .86) 0%,
      rgba(44, 50, 32, .55) 60%,
      rgba(44, 50, 32, .3) 100%);
}
.blok.slot.metbeeld .slottekst { max-width: 34rem; }
.blok.slot.metbeeld h2 { color: var(--op-donker); }
.blok.slot.metbeeld .leidend { color: rgba(228, 220, 204, .92); }
.blok.slot.metbeeld .slotmerk { color: rgba(228, 220, 204, .7); }

.slottekst { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.slotmerk {
  margin: 0;
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leem);
}
.blok.slot h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.blok.slot .leidend {
  margin: 0;
  max-width: 26em;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
}
.blok.slot .knoppen { margin: .4rem 0 0; }

/* Het beeld ligt nu ónder het hele blok en niet meer als kolom ernaast. Het blijft een
   gewone <img> en geen achtergrond, zodat de alt-tekst en het lazy laden werken. */
.slotbeeld {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
}
.slotbeeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- de eigenaarsbalk ---------- */
/* Zweeft rechtsonder over alles heen, en alleen een beheerder krijgt hem. Ingeklapt is
   het een knopje van 2,6 rem met een stip die de stand van de pagina laat zien; op de
   adviespagina dekt dat niets van de kaart af.
   De kleur van de stip is nooit de enige drager: het cijfer staat in de lade erachter
   en de tekst zegt hetzelfde in woorden. */
.eigenaar {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.eigenaarknop {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--diep);
  border: 1px solid var(--diep);
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw-diep);
  cursor: pointer;
}
.eigenaarknop:hover { background: var(--diep-vlak); }
.eigenaarknop:focus-visible { outline: 3px solid var(--nadruk); outline-offset: 2px; }

.eigenaarstip {
  width: .7rem;
  height: .7rem;
  border-radius: var(--rond-pil);
  background: var(--nadruk);
}
.eigenaarstip.let   { background: var(--stro); }
.eigenaarstip.traag { background: var(--roest); }

.eigenaarlade {
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: .9rem 1rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-diep);
  font-size: .84rem;
}

.eigenaarkop {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.eigenaarkop b { font-family: var(--letter-kop); }
.eigenaartijd {
  margin-left: auto;
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
  color: var(--inkt-zacht);
}

.eigenaarkopje {
  margin: .9rem 0 .3rem;
  font-size: .74rem;
  color: var(--leem);
}

.eigenaarfeiten { margin: .4rem 0 0; }
.eigenaarfeiten > div {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
.eigenaarfeiten > div:last-child { border-bottom: 0; }
.eigenaarfeiten dt { flex: 1; color: var(--inkt-zacht); }
.eigenaarfeiten dd {
  margin: 0;
  text-align: right;
  font-family: var(--letter-mono);
  font-variant-numeric: tabular-nums;
}
.eigenaarfeiten dd i {
  display: block;
  font-style: normal;
  font-size: .72rem;
  color: var(--leem);
}

.eigenaarlet {
  margin: .5rem 0 0;
  padding: .45rem .6rem;
  font-size: .8rem;
  background: var(--roest-zacht);
  border-radius: var(--rond-klein);
}

.eigenaarknoppen { display: flex; flex-wrap: wrap; gap: .3rem; }
.eigenaarknoppen button {
  font: inherit;
  font-size: .78rem;
  padding: .3rem .6rem;
  background: var(--grond);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-pil);
  cursor: pointer;
}
.eigenaarknoppen button:hover { border-color: var(--lijn-sterk); }
.eigenaarknoppen button.aan { background: var(--nadruk); border-color: var(--nadruk-diep); color: var(--op-nadruk); }

.eigenaaruitslag {
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--inkt-zacht);
}

.eigenaarvoet {
  margin: .8rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--lijn-zacht);
  font-size: .74rem;
  color: var(--leem);
}

/* Wat de ontwerpcontrole aanwijst. Roze en niet roest: dit is gereedschap en geen
   betekenis op de pagina, dus het mag nergens op lijken wat we echt gebruiken. */
.proeffout { outline: 2px solid #E0218A !important; outline-offset: -2px; }
.proeffout::after {
  content: attr(data-proeffout);
  position: absolute;
  z-index: 70;
  transform: translateY(-100%);
  padding: 0 .25rem;
  font: 500 10px/1.4 var(--letter-mono);
  white-space: nowrap;
  background: #E0218A;
  color: #fff;
  pointer-events: none;
}
.proefraster * { outline: 1px solid rgba(224, 33, 138, .25) !important; }

@media (max-width: 30rem) {
  .eigenaarlade { width: calc(100vw - 2rem); }
}

@media print {
  .eigenaar { display: none; }
}

/* Gevonden door de ontwerpcontrole: <code> had geen letter en viel terug op wat de
   browser toevallig monospace noemt. In de merkgids staat IBM Plex Mono voor cijfers
   en codes, dus dat hoort hier ook te staan. */
code, kbd, samp {
  font-family: var(--letter-mono);
  font-size: .92em;
}

/* Gevonden door de ontwerpcontrole: tien invoervelden op de adviespagina stonden op
   de zwarte letterkleur van de browser. Ze zijn onzichtbaar (het vinkje wordt door een
   span ernaast getekend), dus je zag het niet, maar een besturingselement hoort de
   inkt van de pagina te erven en niet een kleur die nergens in de huisstijl staat. */
input, select, textarea, button { color: inherit; }

/* ---------- de pakketten (ontwerp 2a) ---------- */
/* Het hele blok is een kaart op het papier, met de drie pakketten als vakken daarin.
   Het aangeraden pakket steekt niet uit maar is anders van kleur, met een haarlijn
   bovenin en het merkje over de rand. Dat is rustiger dan een kaart die omhoog springt
   en het werkt ook als de drie verschillend lang worden. */

#pakketten {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.2rem, .6rem + 3vw, 4rem) 3.5rem;
}
#pakketten > h2 {
  max-width: 47rem;
  margin-inline: auto;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-align: center;
}
#pakketten > .leidend {
  max-width: 47rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--inkt-zacht);
}

.pakketten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin: 2.75rem 0 0;
}
@media (min-width: 56rem) {
  .pakketten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pakket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.35rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw);
}
/* Het aangeraden pakket was een groener vlak; ronde 5 maakt er het diepgroene vlak met
   crème letters van, hetzelfde vlak als de knop. Nadruk draagt hier geen betekenis, dus
   het merkje "meest gekozen" zegt het ook in woorden. */
.pakket.aangeraden {
  background: var(--nadruk);
  border-color: var(--nadruk);
  color: var(--op-nadruk);
  box-shadow: var(--schaduw);
}

.pakketmerk {
  position: absolute;
  top: -11px;
  left: 1.6rem;
  padding: .3rem .6rem;
  font-family: var(--letter-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--op-nadruk);
  background: var(--nadruk);
  border-radius: var(--rond-klein);
}

/* De kop van de kaart heeft een vaste hoogte, zodat de streep eronder bij alle drie op
   dezelfde lijn valt, ook als de ene omschrijving een regel langer is. */
.pakket > .pakketnaam { margin: 0; }
.pakketnaam,
.pakketprijs,
.pakketvoor { margin: 0; }
.pakketnaam {
  font-family: var(--letter-mono);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leem);
}
.pakket.aangeraden .pakketnaam { color: var(--lijn-sterk); }

.pakketprijs {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}
.pakketprijs b {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--inkt);
}
.pakketprijs span { font-size: .82rem; color: var(--inkt-zacht); }

.pakketvoor {
  margin-top: .6rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}
.pakket.aangeraden .pakketvoor { color: var(--zand-licht); }

.pakketkop { min-height: 8.25rem; }
.pakket.aangeraden .pakketprijs b { color: var(--op-nadruk); }
.pakket.aangeraden .pakketprijs span { color: var(--zand-licht); }
.pakket.aangeraden h3 { color: var(--op-nadruk); }
.pakket.aangeraden .pakketmerk { background: var(--op-nadruk); color: var(--nadruk); }

.pakketlijst {
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--lijn-zacht);
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  font-size: .88rem;
  line-height: 1.5;
}
.pakket.aangeraden .pakketlijst { border-top-color: rgba(228, 220, 204, .28); }
.pakketlijst li { display: flex; gap: .62rem; }
/* Het teken staat los van de kleur, want kleur mag nooit de enige drager zijn. */
.pakketlijst li::before { flex: none; }
.pakketlijst .wel { color: #3C4530; }
.pakketlijst .wel::before  { content: "+"; color: var(--gewas-licht); }
.pakketlijst .niet { color: #9A9484; }
.pakketlijst .niet::before { content: "\2013"; }
.pakket.aangeraden .wel { color: var(--op-nadruk); }
.pakket.aangeraden .wel::before { color: var(--op-diep-groen); }
.pakket.aangeraden .niet { color: var(--lijn-sterk); }

.pakketknop { margin: 1.6rem 0 0; }
.pakketknop .knop,
.pakketknop button {
  display: block;
  width: 100%;
  padding: .82rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 5px;
}
/* Drie knopvormen, precies zoals in het ontwerp: het pakket dat je al hebt is een
   grijze omtrek zonder handeling, een pakket dat je kunt nemen is een groene omtrek,
   en het aangeraden pakket is een gevuld vlak. */
.pakketknop [aria-current] {
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt-zacht);
  cursor: default;
}
.pakketknop .knop.rand {
  border: 1px solid #8C9A6C;
  background: transparent;
  color: var(--diep);
}
.pakketknop .knop.rand:hover { background: var(--gewas-zacht); }
.pakketknop .knop.groen,
.pakketknop button.groen {
  background: var(--diep);
  border: 1px solid var(--diep);
  color: var(--op-gewas);
}
.pakketknop .knop.groen:hover,
.pakketknop button.groen:hover { background: var(--diep-vlak); border-color: var(--diep-vlak); }
.pakketknop .veldhulp { margin: 0; text-align: center; }

#pakketten > .veldhulp {
  max-width: 47rem;
  margin: 2.25rem auto 0;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--leem);
}

.pakket.huidig { border-color: var(--lijn-sterk); }
/* ---------- weergaven per dag ---------- */
/* Dertig staafjes, gewone blokjes met een hoogte. Geen bibliotheek en geen canvas: het
   print mee, het schaalt mee met de tekstgrootte, en een schermlezer krijgt de getallen
   omdat elke staaf zijn dag en aantal als verborgen tekst draagt. */
.dagbalken {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 5rem;
  margin: .8rem 0 .3rem;
  padding: 0;
  list-style: none;
}
.dagbalken li { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.dagbalken i {
  display: block;
  width: 100%;
  background: var(--gewas);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
/* De laatste dag loopt nog, dus die is nooit af. Lichter, zodat je niet schrikt van
   een halve staaf om tien uur 's ochtends. */
.dagbalken li:last-child i { background: var(--gewas-fel); opacity: .55; }

.dagbalkenvoet {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: .74rem;
  color: var(--leem);
}

/* Het instelvak op het beheerscherm mag breder dan een formulier van 34 rem. */
.instelvak.breedvak { max-width: 32rem; }
.beheerveld { display: flex; flex-direction: column; gap: .25rem; margin-top: .8rem; }
.beheerveld label { font-size: .84rem; color: var(--inkt-zacht); }
.beheerveld input {
  font: inherit;
  padding: .5rem .7rem;
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
}
.beheerveld input:focus-visible { outline: 3px solid var(--gewas); outline-offset: 2px; }

.codeblok {
  margin: .6rem 0;
  padding: .8rem 1rem;
  overflow-x: auto;
  background: var(--diep);
  color: var(--op-donker);
  border-radius: var(--rond-klein);
  font-size: .82rem;
  line-height: 1.6;
}
.codeblok code { color: inherit; }

/* ---------- de sleutel en zijn stand ---------- */
/* Een sleutel is een geheim, dus hij staat er afgeschermd en met een merkje ernaast dat
   zegt of hij het doet en of er echt geld mee wordt afgeschreven. Live is klei, want
   dat is het geval waarin een vergissing geld kost. Kleur draagt dat niet alleen: er
   staat een woord in. */
.sleutelvak {
  padding: .9rem 1.1rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.sleutelregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0;
}
.sleutellabel { font-size: .8rem; color: var(--inkt-zacht); }
.sleutelwaarde {
  font-family: var(--letter-mono);
  font-size: .9rem;
  padding: .15rem .5rem;
  background: var(--grond);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-klein);
}

.standmerk {
  font-size: .74rem;
  font-weight: 600;
  padding: .15rem .6rem;
  border-radius: var(--rond-pil);
  border: 1px solid transparent;
}
.standmerk.proef { background: var(--gewas-zacht); color: var(--gewas-inkt); border-color: var(--gewas-inkt); }
.standmerk.live  { background: var(--nadruk); color: var(--op-nadruk); border-color: var(--nadruk-diep); }
.standmerk.stuk  { background: var(--roest-zacht); color: var(--roest); border-color: var(--roest); }
.standmerk.uit   { background: var(--grond); color: var(--inkt-zacht); border-color: var(--lijn); }

.sleutelstand { margin: .6rem 0 0; font-size: .88rem; }
.sleutelvoet { margin: .5rem 0 0; font-size: .78rem; color: var(--leem); }
.sleutelvoet a { margin-left: .3rem; }

.verzenden .knop + .knop { margin-left: .5rem; }
.beheerveld input:disabled { background: var(--grond); color: var(--inkt-zacht); }

/* ---------- het gewaskaartje (ontwerp 1b) ---------- */
/* De opbouw van boven naar beneden: rangnummer met de naam en de score, dan de drie
   deelcijfers als rijen, dan het water in een eigen blauw vak, dan zaaien, de
   omschrijving in de schreefletter, wat helpt en wat kost, en onderaan een strook met
   de betrouwbaarheid.

   Wat er in dit ontwerp anders is dan hiervoor: de kop staat in een eigen vak met een
   ondergrond, de deelcijfers dragen naast het getal ook het woord, en de betrouwbaarheid
   staat niet meer als losse regel tussen de tekst maar als voet onder de kaart. */

.gewas {
  gap: 0;
  padding: 0;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  overflow: hidden;
  box-shadow: none;
}
.gewas:hover { box-shadow: none; }
.gewas.top { border-color: var(--lijn); border-width: 1px; }

/* De kop: rangnummer als rond schijfje, naam in de schreef, score ernaast. */
.gewas .gkop {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  padding: 1.35rem 1.5rem 1.25rem;
  background: var(--vlak-diep);
  border-bottom: 1px solid var(--lijn-zacht);
}
.gewas .gkop .rang {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--nadruk);
  color: var(--op-nadruk);
  font-family: var(--letter-mono);
  font-size: .82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gewas .gkop h3 {
  margin: 0;
  font-family: var(--letter-kop);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--inkt);
}
.gewas.top .gkop .rang { background: var(--nadruk); }

/* De rest van de kaart heeft zijn eigen marges, want de kop loopt tot de rand. */
.gewas > :not(.gkop):not(.gvoet) { margin-left: 1.5rem; margin-right: 1.5rem; }
.gewas > .gbalk { margin-top: 1.1rem; }

.scoredelen { margin: 1.15rem 0 0; }
.scoredelen > div {
  grid-template-columns: 3.4rem minmax(0, 1fr) 2.4rem 4rem;
  gap: .75rem;
  padding: .3rem 0;
  border-bottom: 0;
}
.scoredelen dt { font-size: .82rem; color: var(--inkt-zacht); }
.scoredelen dd i {
  order: 1;
  font-family: var(--letter-mono);
  font-size: .88rem;
  font-weight: 500;
  color: var(--inkt);
  text-align: left;
  min-width: 0;
}
.scoredelen dd b {
  order: 2;
  font-size: .82rem;
  font-weight: 400;
  color: var(--inkt-zacht);
}
.deelbalk { height: 6px; border-radius: 3px; background: var(--roest-zacht); }
.deelbalk i { border-radius: 3px; }
.deelbalk.goed i  { background: #3E5A22; }
.deelbalk.matig i { background: var(--gewas); }
.deelbalk.zwak i  { background: var(--roest); }
.deelbalk { background: #E4DCCA; }

/* Het water: een eigen blauw vak, want dit is geen vierde weegfactor van dezelfde
   soort maar het verhaal over dit perceel. */
.water {
  margin-top: 1.25rem !important;
  padding: 1.1rem 1.25rem;
  background: var(--water-vlak);
  border: 1px solid var(--water-lijn);
  border-radius: var(--rond);
}
.waterstrip, .water .balk {
  height: 7px;
  border-radius: 4px;
  background: var(--water-zacht);
}
.watertekst { color: #4A5A61; }
.watertekst b, .watertekst strong { color: var(--water-inkt); }

.zaailijn {
  margin-top: 1.25rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lijn-zacht);
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-size: .94rem;
  color: var(--inkt);
}
.zaailijn span {
  flex: none;
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leem);
}

/* De omschrijving in de schreefletter: dat is de zin waarin een mens iets zegt, en
   niet een cijfer of een etiket. */
.gewas .omschrijving {
  margin-top: .9rem !important;
  font-family: var(--letter-kop);
  font-size: 1.12rem;
  line-height: 1.45;
  color: #4C5138;
}

.afweging { margin-top: 1.25rem !important; gap: .75rem; }
.afweging .helpt, .afweging .kost {
  padding: 1rem 1.15rem;
  border-radius: var(--rond);
}
.afweging .helpt { background: var(--gewas-zacht); border: 1px solid var(--gewas-lijn); }
.afweging .kost  { background: var(--roest-zacht); border: 1px solid var(--roest-lijn); }
.afweging h4 {
  font-family: var(--letter-mono);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.afweging .helpt h4 { color: var(--gewas-inkt); }
.afweging .kost h4  { color: var(--roest); }
.afweging li { line-height: 1.55; }
.afweging .helpt li { color: #3C4530; }
.afweging .kost li  { color: var(--op-roest); }

/* De voederwaarde als tegels van een pixel uit elkaar, zodat de lijnen ertussen de
   rand van het rooster zijn en niet vier losse randen. */
.voeding {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lijn-zacht);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
  overflow: hidden;
}
.voeding > div, .voedingtegel {
  background: var(--vlak-diep);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.voedingtegel span, .voeding dt {
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leem);
}
.voedingtegel b, .voeding dd {
  font-family: var(--letter-mono);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--inkt);
}

/* De betrouwbaarheid als voet onder de kaart: het hoort bij het hele kaartje en niet
   bij een van de alinea's erboven. */
.gewas .zekerheid {
  margin: 1.25rem 0 0 !important;
  padding: 1rem 1.5rem;
  background: var(--vlak-diep);
  border-top: 1px solid var(--lijn-zacht);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .82rem;
  color: var(--leem);
}
.gewas .zekerheid .zekerkop {
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leem);
}
.gewas .zekerheid b { font-size: .94rem; font-weight: 600; color: var(--inkt); }


/* ---------- beheeroverzicht (ontwerp 4a) ---------- */
/* Alles in een kaart, met een kop die de datum draagt. De cijfertegels staan in een
   rooster met een pixel ertussen, zodat de lijnen ertussen de rand van het rooster zijn
   en niet vier losse randen. Daaronder de weergaven met een echte as, en dan twee
   vakken naast elkaar. */

.beheer .accountmain {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  padding: clamp(1.4rem, .8rem + 2vw, 2.75rem);
  gap: 1.75rem;
}

.overzichtkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.overzichtkop h2 { margin: 0; font-size: 2.1rem; line-height: 1; }
.overzichtwanneer {
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leem);
}

/* De melding: een dun vlak met een streep links, geen kader met een schaduw. */
.accountmelding {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin: 0;
  padding: .82rem 1rem;
  max-width: none;
  font-size: .88rem;
  color: #3C4530;
  background: var(--gewas-zacht);
  border: 1px solid var(--gewas-lijn);
  border-left: 2px solid var(--gewas-fel);
  border-radius: 0 5px 5px 0;
}
.accountmelding::before { content: "\2713"; color: var(--gewas-inkt-fel); font-weight: 400; }
.accountmelding.let {
  color: var(--op-roest);
  background: var(--roest-zacht);
  border-color: var(--roest-lijn);
  border-left-color: var(--roest);
}
.accountmelding.let::before { content: "!"; color: var(--roest); }

/* De cijfertegels: een pixel uit elkaar op een gekleurde ondergrond. */
/* De cijfertegels waren een raster met haarlijnen ertussen; ronde 5 maakt er losse
   kaarten van met een rand en de nieuwe schaduw, zoals de cijferband op de homepage.
   Het getal staat in de schreef en niet meer in de mono: een getal van twee tekens in
   mono leest als een code, en dit is een aantal. */
.beheercijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.beheercijfers > div {
  background: var(--vlak);
  padding: 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  box-shadow: var(--schaduw);
}
.beheercijfers span {
  order: 2;
  font-family: var(--letter-tekst);
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--inkt);
  margin-top: .45rem;
}
.beheercijfers b {
  order: 1;
  margin: 0;
  font-family: var(--letter-kop);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--inkt);
}
.beheercijfers i { order: 3; font-style: normal; font-size: .88rem; color: var(--inkt-zacht); }

/* De vakken op het overzicht. */
.beheervak {
  padding: 1.3rem 1.35rem 1.5rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  box-shadow: var(--schaduw);
}
.beheervak > h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.beheervak p { font-size: .88rem; line-height: 1.6; color: var(--inkt-tekst); }

/* De weergaven met een as ernaast, zoals in het ontwerp: vijf lijnen, de onderste
   donkerder, en de dagen eronder. */
.weergavenvak { display: flex; flex-direction: column; gap: 1.1rem; }
.weergavenkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
}
.weergavenkop h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.weergavenkop span {
  font-family: var(--letter-mono);
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leem);
}

.grafiek {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .62rem;
  height: 10.75rem;
}
.grafiekas {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1.15rem;
  font-family: var(--letter-mono);
  font-size: .62rem;
  color: #A29A87;
}
.grafiekvlak { position: relative; }
.grafieklijnen {
  position: absolute;
  inset: 0 0 1.15rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.grafieklijnen span { height: 1px; background: #E5DCCA; }
.grafieklijnen span:last-child { background: #CFC5AF; }

.dagbalken {
  position: absolute;
  inset: 0 0 1.15rem 0;
  display: grid;
  align-items: end;
  gap: .5rem;
  margin: 0;
  padding: 0 .4rem;
  height: auto;
  list-style: none;
}
.dagbalken li { display: flex; align-items: flex-end; height: 100%; }
.dagbalken i {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--gewas);
  border-radius: 2px;
}
/* De laatste dag loopt nog, dus die is nooit af. */
.dagbalken li:last-child i { background: var(--gewas-licht); }

.grafiekdagen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: .5rem;
  padding: 0 .4rem;
  margin: 0;
  font-family: var(--letter-mono);
  font-size: .62rem;
  color: #A29A87;
  text-align: center;
}
.grafiekleeg {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  max-width: 32em;
  text-align: center;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--leem);
}

/* De rijen onder "klopt het advies nog": label, balk, getal.
 *
 * Alles hieronder staat binnen .beheervak, en dat is geen sier. De selector was hier
 * kaal en zonder ouder, maar die klasse draagt ook het perceelblok in het adviespaneel en de
 * samenvatting bij het bestellen. Die rijen hebben twee kinderen en geen drie, dus daar
 * bleef er anderhalve centimeter lege derde kolom staan en werd het label in een paneel
 * van 27 rem één woord per regel.
 *
 * Dezelfde soort fout als $lijst in een paginasjabloon: een naam die in een beheerscherm
 * bedacht is, geldt overal. */
.beheervak .feiten { display: flex; flex-direction: column; margin: .25rem 0 0; }
.beheervak .feiten > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 3.5rem;
  align-items: center;
  gap: .75rem;
  padding: .68rem 0;
  border-top: 1px solid var(--lijn-zacht);
  border-bottom: 0;
  background: none;
}
.beheervak .feiten > div:last-child { border-bottom: 1px solid var(--lijn-zacht); }
.beheervak .feiten dt {
  font-family: var(--letter-tekst);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--inkt-tekst);
}
.beheervak .feiten dd {
  margin: 0;
  font-family: var(--letter-mono);
  font-size: .88rem;
  font-weight: 500;
  text-align: right;
  color: var(--inkt);
}
.feitbalk {
  height: 5px;
  border-radius: 3px;
  background: #E4DCCA;
  position: relative;
  overflow: hidden;
}
.feitbalk i { position: absolute; inset: 0 auto 0 0; background: var(--gewas); border-radius: 3px; }
.feitbalk.mager i { background: #8C9A6C; }
.feitbalk.let i { background: var(--roest); }
.aboomzet { display: flex; align-items: baseline; gap: .62rem; margin: 0 0 .25rem; }
.aboomzet b { font-family: var(--letter-kop); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--inkt); }
.aboomzet span { font-size: .82rem; color: var(--inkt-zacht); }

/* ---------- het pakkettenblok in het midden ---------- */
/* Hier ging het mis: `.wit > *` geeft elk kind `margin-left: auto`, maar mijn eigen
   regel `.pakketten { margin: 2.75rem 0 0 }` zette dat met de korte schrijfwijze weer op
   nul. Gevolg: de kop centreerde wel en het rooster niet, en dan hangt de halve sectie
   scheef. De kaart is nu zelf het blok dat gecentreerd staat, en zijn kinderen vullen
   hem in plaats van nog een keer op 70 rem geknepen te worden. */
#pakketten {
  max-width: 74rem;
  margin-inline: auto;
}
#pakketten > * { max-width: none; margin-left: 0; margin-right: 0; }
#pakketten > h2,
#pakketten > .leidend,
#pakketten > .veldhulp { max-width: 47rem; margin-inline: auto; }
.pakketten { margin: 2.75rem auto 0; }

/* ---------- de voet leesbaar ---------- */
/* De voet staat op diepgroen, maar de tekst stond nog op de inktkleuren van een licht
   vlak: leem op mos is nauwelijks te lezen. Alles op de crèmekleur die ook op de
   knoppen staat, met de bijzinnen een slag zachter maar niet zo zacht dat ze wegvallen. */
.sitevoet {
  background: var(--diep);
  color: #D8D3C2;
}
.sitevoet h2 {
  font-family: var(--letter-mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9AA383;
}
.sitevoet a {
  color: #F3EEE3;
  text-decoration: none;
}
.sitevoet a:hover { color: #fff; text-decoration: underline; }
.sitevoet .woordmerk { color: #F3EEE3; }
.sitevoet .voetmerk p { color: #B9B4A2; }
.sitevoet .voetslot { border-top: 1px solid #55603F; }
.sitevoet .voetslot p { color: #B9B4A2; }
.sitevoet .klein { color: #9A9484; }
/* Het beeldmerk staat op een donkere ondergrond, dus de bouwvoor eronder moet mee. */
.sitevoet .merkregel svg .onder { fill: #9AA383; }


/* De stopknop onder de pakketten: een handeling die je zelden doet maar wel moet kunnen
   vinden. Geen rode knop, want opzeggen is geen fout. */
.stopform { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin: 1.5rem 0 0; }
.stopform .veldhulp { margin: 0; }

/* ---------- de foutpagina ---------- */
/* Groot getal, korte zin, en dan waar je wel heen kunt. Geen grap en geen tekening: wie
   hier komt zocht iets en dat wil hij vinden. */
.foutvel {
  max-width: 40rem;
  padding: clamp(2rem, 1rem + 4vw, 4rem) 0 4rem;
}
.foutcode {
  margin: 0 0 .5rem;
  font-family: var(--letter-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--leem);
}
.foutvel h1 { margin: 0 0 1rem; }
.foutvel .leidend { max-width: 34em; color: var(--inkt-zacht); }

.foutwegen {
  margin: 2.25rem 0 2rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.foutwegen li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  padding: .95rem 0;
  border-top: 1px solid var(--lijn-zacht);
}
.foutwegen li:last-child { border-bottom: 1px solid var(--lijn-zacht); }
.foutwegen a { font-size: 1.05rem; font-weight: 600; text-decoration: none; color: var(--gewas-inkt); }
.foutwegen a:hover { text-decoration: underline; }
.foutwegen span { font-size: .88rem; color: var(--inkt-zacht); }
/* "kompas" staat in de merkkleur, en die is te donker op de voet. Een lichtere tint uit
   dezelfde familie, zodat het merk herkenbaar blijft en toch leesbaar is. */
.sitevoet .woordmerk i { color: #A8BC80; font-style: normal; }

/* ---------- bestellen ---------- */
.bestelvel { max-width: 46rem; }
.bestelvel .beleidkop { padding: 0 0 1.75rem; border-bottom: 0; }

/* De drie stappen bovenaan. Wat je gehad hebt krijgt een vinkje, want een nummer dat
   groen is zegt niet of je er nog moet komen of al geweest bent. */
.bestelstappen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 0 0 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--lijn-zacht);
  border-bottom: 1px solid var(--lijn-zacht);
  list-style: none;
  font-size: .88rem;
  color: var(--leem);
}
.bestelstappen li { display: flex; align-items: center; gap: .55rem; }
.bestelstappen .stapnr {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--lijn-sterk);
  font-family: var(--letter-mono);
  font-size: .75rem;
}
.bestelstappen .nu { color: var(--inkt); font-weight: 600; }
.bestelstappen .nu .stapnr { background: var(--nadruk); color: var(--op-nadruk); border-color: var(--nadruk); }
.bestelstappen .gehad { color: var(--gewas-inkt); }
.bestelstappen .gehad .stapnr { border-color: var(--gewas-inkt); color: var(--gewas-inkt); }

.bestelform { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.bestelveld { display: flex; flex-direction: column; gap: .3rem; }
.bestelveld label { font-size: .88rem; font-weight: 600; color: var(--inkt); }
.bestelveld label .fijn { font-weight: 400; color: var(--leem); }
.bestelveld input {
  font: inherit;
  padding: .68rem .8rem;
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: 5px;
}
.bestelveld input:focus-visible { outline: 2px solid var(--gewas); outline-offset: 1px; }
.bestelveld .veldhulp { margin: 0; }
.bestelrij { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) {
  .bestelrij { grid-template-columns: 10rem minmax(0, 1fr); }
}

.bestelvak {
  margin: 0 0 1.25rem;
  padding: 1.4rem 1.5rem;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
}
.bestelvak h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.bestelvak .feiten > div { grid-template-columns: minmax(0, 1fr) 0 auto; }
.bestelvak .feitbalk { background: none; }
.bestelgegevens { margin: 0 0 1rem; font-size: .98rem; line-height: 1.6; }

/* ---------- de mailteksten in het beheer ---------- */
.mailvak {
  margin-bottom: .6rem;
  background: var(--vlak-diep);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
}
.mailvak > summary {
  padding: .9rem 1.1rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
}
.mailvak > summary b { font-size: .98rem; }
.mailvak > summary span { font-size: .84rem; color: var(--inkt-zacht); }
.mailform {
  padding: 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.mailform textarea {
  font-family: var(--letter-mono);
  font-size: .84rem;
  line-height: 1.6;
  padding: .75rem .85rem;
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: 5px;
  resize: vertical;
}
.mailform textarea:focus-visible { outline: 2px solid var(--gewas); outline-offset: 1px; }
.mailvelden { margin: 0; font-size: .82rem; color: var(--inkt-zacht); }
.mailvelden code {
  background: var(--grond);
  border: 1px solid var(--lijn-zacht);
  border-radius: 3px;
  padding: .05rem .35rem;
  margin-right: .2rem;
}

/* ================================================================
   Het gewaskaartje klapt open (ronde 5)
   ================================================================

   In het ontwerp staat er per gewas eerst alleen de rang, de naam, het oordeel en de
   balk. Wijs je hem aan, dan schuift de onderbouwing eronder open. Tien kaartjes met
   alles eronder is geen lijst meer maar een document; zo lees je eerst de tien namen en
   pas daarna waarom.

   Het schuiven gaat met grid-template-rows van 0fr naar 1fr. Dat is de enige manier om
   naar een hoogte te bewegen die je niet vooraf kent, zonder een vaste max-height te
   verzinnen die er bij het langste kaartje naast zit.

   Aanwijzen bestaat niet op een telefoon, dus het is een <details>: een tik opent hem en
   zonder javascript werkt hij ook. kaart.js zet hem op een gewoon scherm open zodra de
   muis erover gaat, en weer dicht als je weggaat, tenzij je zelf geklikt hebt. */

.gklep {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.22, .61, .36, 1);
}
.gklep[open] { grid-template-rows: auto 1fr; }
.gklepvak {
  overflow: hidden;
  min-height: 0;
}

/* De driehoek van de browser weg: het kaartje zelf is de knop. De regel blijft wel
   staan, want hij zegt in woorden wat eronder zit en dat is wat een schermlezer
   voorleest. */
.gklep > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 0 .1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gewas-inkt);
}
.gklep > summary::-webkit-details-marker { display: none; }
.gklep > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 300ms ease;
}
.gklep[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.gklep > summary:hover { color: var(--gewas-inkt-fel); }

/* Het hele kaartje tilt op zolang je het aanwijst, zoals in het ontwerp. De rand wordt
   groen mee, zodat het ook zichtbaar is voor wie geen beweging ziet. */
.gewas {
  transition: background 260ms ease, border-color 260ms ease,
              box-shadow 260ms ease, transform 260ms ease;
}
.gewas:hover,
.gewas:focus-within {
  border-color: var(--gewas-rand);
  box-shadow: var(--schaduw-til);
  transform: translateY(-2px);
}
.gewas.top:hover,
.gewas.top:focus-within {
  background: var(--gewas-vlak-op);
  border-color: var(--gewas-rand-op);
}

/* Wie beweging liever niet ziet, krijgt hem niet. Het klepje werkt dan gewoon, alleen
   springt hij open in plaats van te schuiven. */
@media (prefers-reduced-motion: reduce) {
  .gklep, .gklep > summary::after, .gewas { transition: none; }
  .gewas:hover, .gewas:focus-within { transform: none; }
}

/* Afdrukken: alles open. Een dichtgeklapt kaartje op papier is een gat. */
@media print {
  .gklep { grid-template-rows: auto 1fr; }
  .gklep > summary { display: none; }
  .gklepvak { overflow: visible; }
}


/* ================================================================
   Ronde 5: de zijbalk, het bouwplan, de analyses en de facturen
   ================================================================ */

/* De zijbalk van /mijn en /beheer wordt een rijtje pillen. Actief is het diepgroene
   vlak met crème letters, hetzelfde vlak als de knop; de rest is doorzichtig. Het vlak
   draagt geen betekenis, alleen nadruk, en er staat altijd een woord in. */
.accountzij { border-radius: var(--rond-kaart); padding: .5rem; }
.accountzij .zijknop {
  border-radius: var(--rond-knop);
  padding: .6rem .85rem;
  font-size: .95rem;
  font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.accountzij .zijknop.hier {
  background: var(--nadruk);
  color: var(--op-nadruk);
}
.accountzij .zijknop.hier .zijicoon { color: var(--op-nadruk); }
.accountzij .zijknop.hier .zijtelling { color: var(--op-nadruk); opacity: .7; background: none; }

/* Het perceelkaartje: de tekening in een groen vlak met een lijn eronder, en het hele
   kaartje tilt op zolang je het aanwijst. */
.perceelkaart {
  border-radius: var(--rond-kaart);
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.perceelkaart:hover,
.perceelkaart:focus-within {
  border-color: var(--gewas-rand);
  box-shadow: var(--schaduw-til);
  transform: translateY(-2px);
}
.perceelbeeld {
  display: block;
  background: var(--gewas-zacht);
  border-bottom: 1px solid var(--gewas-lijn);
  padding: 1rem;
}
.perceelbeeld .perceelkaartje { width: 100%; height: auto; display: block; }

/* ---------- het bouwplan per perceel ---------- */
/* Een raster van perceel maal jaar. De kleur zegt tot welke gewasgroep het hoort, maar
   nooit alleen: in elk blokje staat de verkorte gewasnaam en de volledige naam staat in
   de title. Bij zon op een telefoonscherm valt het verschil tussen twee groenen weg. */
.bouwplanraster {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) repeat(var(--jaren, 6), minmax(3.4rem, 1fr));
  gap: .4rem;
  align-items: stretch;
  min-width: 32rem;
}
.bpjaar {
  font-family: var(--letter-mono);
  font-size: .82rem;
  color: var(--inkt-zacht);
  text-align: center;
}
.bpnaam { align-self: center; font-size: .93rem; font-weight: 600; text-wrap: pretty; }
.bpvak {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .35rem;
  border-radius: var(--rond);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
}
.bpvak.gras     { background: var(--gewas-licht); color: var(--inkt); }
.bpvak.graan    { background: var(--gewas-inkt); color: var(--op-gewas); }
.bpvak.mais     { background: var(--stro); color: var(--op-nadruk); }
.bpvak.hak      { background: var(--roest); color: var(--op-nadruk); }
.bpvak.vlinder  { background: var(--gewas-zacht); color: var(--inkt); border: 1px solid var(--gewas-rand); }
.bpvak.groente  { background: var(--water); color: var(--op-nadruk); }
.bpvak.bemester { background: var(--stro-vlak); color: var(--stro); }
.bpvak.overig   { background: var(--vlak-diep); color: var(--inkt-zacht); border: 1px solid var(--lijn-zacht); }
.bpvak.leeg     { background: none; color: var(--leem); border: 1px dashed var(--lijn); }

.bplegenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--lijn-zacht);
  font-size: .9rem;
  color: var(--inkt-tekst);
}
.bplegkleur { display: flex; align-items: center; gap: .4rem; }
.bplegkleur .bpvak {
  width: .85rem;
  height: .85rem;
  padding: 0;
  border-radius: var(--rond-klein);
  flex: none;
}
.bouwplanlet { margin-top: 1.1rem; }

/* ---------- de bodemanalyses ---------- */
.analyselijst { display: flex; flex-direction: column; gap: 1rem; }
.analysevak { margin: 0; }
.analysecijfers {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  margin-top: 1rem;
}
.analysetegel {
  background: var(--vlak-diep);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-kaart);
  padding: .8rem .9rem;
}
.analysenaam { display: block; font-size: .9rem; color: var(--inkt-zacht); }
.analysetegel b {
  display: block;
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
}
/* Het oordeel in woorden naast het cijfer. Een getal zonder schaal is geen informatie:
   "pH 5,4" zegt niets, "pH 5,4 iets laag" wel. */
.analyseoordeel { font-size: .88rem; font-weight: 600; }
.analyseoordeel.goed  { color: var(--gewas-inkt); }
.analyseoordeel.let   { color: var(--roest); }
.analyseoordeel.mager { color: var(--stro); }

.analysebewerk { margin-top: 1.1rem; }
.analysebewerk > summary {
  cursor: pointer;
  font-size: .93rem;
  font-weight: 600;
  color: var(--gewas-inkt);
}
.analyseraster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: 1rem;
}
.analyseform .verzenden { margin-top: 1.2rem; }

/* ---------- de facturen ---------- */
.facturen .rechts { text-align: right; }
.facturen .mono { font-family: var(--letter-mono); font-variant-numeric: tabular-nums; }
.staatmerk {
  display: inline-block;
  padding: .15rem .6rem;
  font-size: .86rem;
  border-radius: var(--rond-pil);
  background: var(--vlak-diep);
  border: 1px solid var(--lijn-zacht);
  color: var(--inkt-tekst);
}
.staatmerk.goed  { background: var(--gewas-zacht); border-color: var(--gewas-rand); color: var(--diep); }
.staatmerk.let   { background: var(--roest-zacht); border-color: var(--roest-lijn); color: var(--roest); }
.staatmerk.mager { background: var(--stro-vlak); border-color: var(--lijn-zacht); color: var(--stro); }

/* ---------- een factuur om af te drukken ---------- */
.factuurvel { max-width: 46rem; }
.factuur {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart);
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--schaduw);
}
.factuurkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--lijn-zacht);
}
.factuurmerk { display: flex; align-items: center; gap: .55rem; }
.factuurnr { text-align: right; }
.factuurnr b {
  display: block;
  font-family: var(--letter-mono);
  font-size: 1.1rem;
  font-weight: 500;
}
.factuurpartijen {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 1.6rem 0;
}
.factuurpartijen p { margin: .3rem 0 0; font-size: .97rem; line-height: 1.5; }
.factuurregels { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.factuurregels th, .factuurregels td {
  text-align: left;
  padding: .8rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
  vertical-align: top;
}
.factuurregels .rechts { text-align: right; }
.factuurregels .mono { font-family: var(--letter-mono); font-variant-numeric: tabular-nums; }
.factuurregels thead th {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leem);
  font-weight: 400;
}
.factuurregels tbody .fijn { display: block; margin-top: .2rem; }
.factuurtotaal th, .factuurtotaal td {
  font-family: var(--letter-kop);
  font-size: 1.2rem;
  font-weight: 700;
  border-bottom: 0;
}
.factuurvoet { margin-top: 1.6rem; font-size: .9rem; color: var(--inkt-zacht); }

/* Wat alleen op het scherm hoort en niet op papier. */
@media print {
  .schermalleen { display: none; }
  .factuur { border: 0; box-shadow: none; padding: 0; }
}


/* ================================================================
   Ronde 5: bestellen, beleid, foutpagina
   ================================================================ */

/* Invoervelden krijgen overal hetzelfde warme vlak en dezelfde ronding als in het
   ontwerp. Ze stonden op vier plekken net anders. */
.bestelform input,
.analyseform input,
.beheerveld input,
.aanmelden input {
  background: var(--papier-warm);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-groot);
  padding: .65rem .8rem;
  font: inherit;
  color: var(--inkt);
}
.bestelform input:focus-visible,
.analyseform input:focus-visible,
.beheerveld input:focus-visible {
  outline: 3px solid var(--gewas);
  outline-offset: 2px;
}

/* De samenvatting naast het bestelformulier is in het ontwerp een diepgroene kaart met
   crème letters, dezelfde als het aangeraden pakket. */
.bestelvak.samenvatting {
  background: var(--nadruk);
  color: var(--op-nadruk);
  border-color: var(--nadruk);
  border-radius: var(--rond-diep);
}
.bestelvak.samenvatting h2,
.bestelvak.samenvatting b { color: var(--op-nadruk); }
.bestelvak.samenvatting .fijn,
.bestelvak.samenvatting .veldhulp { color: var(--zand-licht); }

/* De foutpagina: het getal groot en bleek, zoals in het ontwerp. Het stond als klein
   label in mono bovenaan; dat las als een technische code en niet als "deze pagina is
   er niet". */
.foutvel { text-align: center; margin-left: auto; margin-right: auto; }
.foutcode {
  margin: 0 0 .5rem;
  font-family: var(--letter-kop);
  font-size: clamp(5rem, 3rem + 10vw, 9rem);
  font-weight: 400;
  line-height: .85;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--lijn-sterk);
}
.foutvel h1 { margin: 1.2rem 0 1rem; }
.foutvel .leidend { margin-left: auto; margin-right: auto; }
.foutwegen { text-align: left; max-width: 32rem; margin-left: auto; margin-right: auto; }
.foutvel .veldhulp { text-align: center; }


/* ---------- twee kleuren die het net niet haalden ----------
 *
 * Nagemeten in de lichte stand, tegen de achtergrond waar ze op staan:
 *
 *   .hoofdnav a    leem #8A8270 op kaart #F6F2E9   3,58
 *   .sitevoet h2   #9AA383 op diep #3E4A2A         3,58
 *
 * Allebei onder de 4,5 die je voor tekst wilt halen. Het ontwerp zet daar een lichte
 * grijstint neer, en op een scherm in de schuur bij daglicht valt dat weg. Een navigatie
 * die je niet kunt lezen is erger dan een navigatie die een tint donkerder is dan de
 * mockup, dus ze gaan allebei een slag op binnen dezelfde familie.
 *
 * De actieve link blijft op de volle inktkleur staan, dus het verschil tussen waar je
 * bent en waar je heen kunt blijft zichtbaar. En dat verschil hangt niet aan kleur
 * alleen: er staat ook een groene streep onder. */
.hoofdnav a { color: var(--inkt-tekst); }        /* 7,66 */
.sitevoet h2 { color: #C3CBA9; }                 /* 6,60 */


/* De zin onder de laagkeuze. Hij staat in hetzelfde kaartje als de pillen, want hij
   hoort bij de keuze die je net gemaakt hebt. Smal genoeg om de kaart niet dicht te
   zetten, breed genoeg voor twee regels. */
.laaguitleg {
  max-width: 15rem;
  margin: .45rem .25rem .15rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--inkt-tekst);
  white-space: normal;
}
@media (max-width: 34rem) {
  /* Liggend past er geen alinea meer naast de knoppen; daar gaat hij eronder over de
     volle breedte. */
  .laagkeuze { flex-wrap: wrap; }
  .laaguitleg { max-width: none; flex: 1 0 100%; }
}


/* ================================================================
   Ronde 5b: de banding weg, en lucht tussen de blokken
   ================================================================

   De homepage wisselde per sectie tussen papier en een wit vlak over de volle breedte.
   Onder elkaar gezet leest dat als drie losse pagina's die per ongeluk aan elkaar
   geplakt zijn, zeker nu elke kaart een schaduw heeft en dus al van de ondergrond af
   staat. Het ontwerp doet het andersom: één papier van boven tot onder, en wat nadruk
   nodig heeft wordt een kaart.

   De klasse .wit blijft bestaan voor andere schermen; alleen de homepage gebruikt hem
   niet meer. */

.wegingkaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw);
  padding: clamp(1.6rem, 1rem + 2vw, 2.75rem);
  max-width: 52rem;
  margin: 0 auto;
}
.wegingkaart .sectiekop { margin-bottom: .6rem; }
.wegingkaart .leidend { margin-bottom: 2rem; }
#rekenwijze .weging { margin-top: 0; max-width: none; }

/* Meer lucht tussen de blokken. De secties stonden op clamp(2.75rem … 5rem) en dat is
   krap voor kaarten die nu een schaduw dragen: die hebben ruimte nodig om als kaart te
   lezen en niet als een strook. */
body.thuis .blok { padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); padding-bottom: 0; }
body.thuis .blok:last-of-type { padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }

/* De streep boven elke sectie hoort bij de bandenopzet en niet bij losse kaarten op
   papier: hij liep dwars door de ruimte tussen twee blokken. */
body.thuis .blok { border-top: 0; }

/* De kop van een sectie krijgt lucht onder zich. Op de homepage stond de eerste kaart
   soms nog geen anderhalve regel onder de kop. */
body.thuis .blok > .sectiekop { margin-bottom: 1.8rem; }

/* De hero: de twee regels van de kop stonden op elkaar. Libre Baskerville heeft een
   hoge onderkast, dus 1.14 is daar krap; op de foto mag hij ruimer staan. En de zin
   eronder mag verder van de kop af. */
.hero h1 { line-height: 1.22; }
.hero .leidend { margin-top: 1.4rem; }
.hero .knoppen { margin-top: 2.2rem; }

/* ---------- de voet raakt de inhoud niet meer ----------
 *
 * Het slotblok liep tot tegen de voet aan: het beeld stopte en meteen daarna begon het
 * donkergroen, zonder een streep papier ertussen. Daardoor leek de voet aan de kaart
 * vast te zitten in plaats van eronder te liggen. */
body.thuis .sitevoet { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.sitevoet .voetrij { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }


/* ================================================================
   Ronde 5b: het gewaskaartje opgeruimd
   ================================================================

   Het kaartje was uit drie rondes op elkaar gestapeld: een kop met een schijfje, een
   naam van 1,75 rem, een vinkje, een balk, drie deelcijferrijen en dan het klepje. In
   een paneel van 27 rem duwde die naam het scorelabel van de regel af en stonden de
   onderdelen in vier verschillende marges.

   Nu is het één opzet: kop met rang, naam en score op één regel, de balk eronder, de
   kerncijfers als chipjes, en dan het klepje. Alles op dezelfde marge. */

.gewas {
  padding: 0 0 .1rem;
  border-radius: var(--rond-groot);
}

/* De kop loopt tot de rand en heeft een eigen vlak, zodat je bij het scrollen ziet waar
   een kaartje begint. */
.gewas .gkop {
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  flex-wrap: nowrap;
}
.gewas .gkop .rang {
  width: 1.5rem;
  height: 1.5rem;
  font-size: .78rem;
}
.gewas .gkop h3 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  /* Een lange gewasnaam mag afbreken en niet het label wegduwen. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.gewas .gkop .glabel {
  margin-left: auto;
  flex: none;
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--letter-mono);
  letter-spacing: .02em;
  color: var(--inkt-zacht);
}
.gewas.top .gkop .glabel { color: var(--gewas-inkt); }

/* Alles onder de kop op dezelfde marge, en met dezelfde afstand. */
.gewas > :not(.gkop):not(.gvoet) { margin-left: 1.1rem; margin-right: 1.1rem; }
.gewas > .gbalk { margin-top: .9rem; height: 10px; }

/* ---------- de kerncijfers ----------
 *
 * Wat er van het land af komt en wat het waard is, zonder het kaartje open te klappen.
 * Chipjes en geen tabel: in 27 rem breekt een tabel van vier kolommen op de tweede rij.
 * Het getal groot in de schreef, het woord klein ernaast, zoals in het ontwerp. */
.kerncijfers {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
  margin-bottom: .2rem;
}
.kerncijfers span {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  padding: .25rem .6rem;
  background: var(--vlak-diep);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond);
}
.kerncijfers b {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.kerncijfers i {
  font-style: normal;
  font-size: .82rem;
  color: var(--inkt-zacht);
}
/* Het bovenste kaartje krijgt de groene tint, zodat de chipjes daar niet wegvallen
   tegen het lichtgroene vlak eronder. */
.gewas.top .kerncijfers span { background: var(--vlak); border-color: var(--gewas-lijn); }

/* Het vinkje "Vergelijk" is een handeling en geen gegeven: klein, en rechts onderaan
   bij de andere handelingen in plaats van tussen de cijfers door. */
.gewas .vergelijkvink {
  margin-top: .8rem;
  font-size: .8rem;
}

/* ---------- de samenvattingsregel van het klepje ---------- */
.gklep { margin-top: .35rem; }
.gklep > summary {
  padding: .55rem 0 .5rem;
  font-size: .88rem;
}

/* De scoredelen staan nu in het klepje, bovenaan. Ze krijgen een lijn eronder zodat ze
   los staan van de zinnen die erop volgen. */
.gklepvak > .scoredelen {
  margin: .1rem 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--lijn-zacht);
}


/* ================================================================
   Ronde 5b: de laagkeuze in de balk bovenaan
   ================================================================

   Hij stond als los kastje rechtsboven over de foto. Naast het zoekveld hoort hij beter:
   het is hetzelfde soort handeling, je stelt de kaart in voordat je een perceel
   aanklikt, en de rechterbovenhoek was de enige plek waar hij níet in de weg stond in
   plaats van de plek waar hij thuishoort.

   De balk staat gecentreerd onder de kop, over de kaart, met dezelfde pilvorm en
   schaduw als het zoekveld ernaast. */

.laagkeuze {
  position: static;
  display: flex;
  flex-direction: row;
  gap: .15rem;
  flex: none;
  padding: .25rem;
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .laagkeuze { background: var(--vlak); }
}
.laagkeuze button {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  padding: .38rem .85rem;
  border: 0;
  border-radius: var(--rond-pil);
  background: transparent;
  color: var(--inkt-zacht);
  transition: background .18s ease, color .18s ease;
}
.laagkeuze button:hover { color: var(--inkt); background: var(--vlak-diep); }
.laagkeuze button.hier { background: var(--nadruk); color: var(--op-nadruk); }

/* De balk staat in het midden en niet meer tegen de linkerrand: zoeken plus drie
   knoppen is een geheel, en dat hoort onder de kop gecentreerd te staan. */
.kaartbalk {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  justify-content: center;
  max-width: calc(100% - 5.5rem);
  width: max-content;
  flex-wrap: nowrap;
}
/* Vast op 22 rem: met flex-shrink kroop het veld terug naar de breedte van de
   placeholder en stond er "Adres of postcode, bijvo" in. */
.kaartbalk .zoekveld { flex: 0 0 22rem; min-width: 8rem; max-width: 100%; }

/* Zweeft het paneel links, dan staat het midden van de kaart een halve paneelbreedte
   naar rechts. De balk schuift mee, anders staat hij half onder het paneel. */
@media (min-width: 64rem) {
  .werkblad.zwevend .kaartbalk {
    left: calc(50% + var(--paneelbreed) / 2 + .6rem);
    right: auto;
    max-width: calc(100% - var(--paneelbreed) - 4rem);
  }
}

/* De zin onder de balk, gecentreerd eronder. */
.laaguitleg {
  position: absolute;
  z-index: 12;
  top: 3.9rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(34rem, calc(100% - 3rem));
  width: max-content;
  margin: 0;
  padding: .45rem 1rem;
  font-size: .84rem;
  line-height: 1.45;
  text-align: center;
  color: var(--inkt-tekst);
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--rond-pil);
  box-shadow: var(--schaduw);
  white-space: normal;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .laaguitleg { background: var(--vlak); }
}
@media (min-width: 64rem) {
  .werkblad.zwevend .laaguitleg {
    left: calc(50% + var(--paneelbreed) / 2 + .6rem);
    max-width: min(34rem, calc(100% - var(--paneelbreed) - 4rem));
  }
}

/* Smal scherm: de balk is daar geen zwevende pil meer maar een gewone rij boven de
   kaart. Zoeken op de eerste regel, de drie knoppen eronder over de volle breedte. */
@media (max-width: 34rem) {
  .kaartbalk {
    left: 0;
    transform: none;
    max-width: none;
    width: auto;
    flex-wrap: wrap;
  }
  .laagkeuze { flex: 1 0 100%; }
  .laagkeuze button { flex: 1; text-align: center; padding: .38rem .4rem; font-size: .82rem; }
  .laaguitleg {
    position: static;
    transform: none;
    max-width: none;
    width: auto;
    margin: .5rem 0 0;
    text-align: left;
  }
}


/* ---------- het bouwplan en de analyses mogen de volle kolom hebben ----------
 *
 * .accountmain .instelvak staat op 34 rem, en dat klopt voor een formulier: een
 * invoerveld van 60 tekens breed leest niet. Maar het bouwplan is een raster van perceel
 * maal zes jaar, en dat werd daardoor in 544 pixels geperst met een schuifbalk eronder
 * terwijl er 1017 pixels beschikbaar was. Deze twee vakken zijn tabellen en geen
 * formulieren, dus ze krijgen de kolom die er is.
 */
.accountmain .instelvak.bouwplanvak,
.accountmain .instelvak.analysevak { max-width: none; }

/* Met de ruimte erbij past het raster zonder te schuiven, en dan mogen de kolommen ook
   ruimer. De naam van een perceel krijgt een vaste kolom zodat de jaren netjes onder
   elkaar staan bij meerdere percelen. */
.bouwplanraster {
  min-width: 0;
  grid-template-columns: minmax(8rem, 13rem) repeat(var(--jaren, 6), minmax(0, 1fr));
  gap: .45rem;
}
.bpvak { padding: .6rem .4rem; }

/* Onder de 60 rem staat de zijbalk boven de inhoud en is de kolom smal; daar mag hij
   weer schuiven, want zes jaar naast elkaar past daar echt niet. */
@media (max-width: 60rem) {
  .bouwplanraster { min-width: 30rem; }
}


/* De eerste en de laatste datum onder de grafiek staan gecentreerd in een kolom die
   smaller is dan de datum zelf. Op een telefoon met dertig dagen is die kolom elf pixels
   breed en stak "3 Sep" er vijfentwintig pixels buiten; de hele pagina schoof daardoor
   horizontaal. Ze lijnen nu uit op de rand waar ze bij horen. */
.grafiekdagen span:first-child { text-align: left; }
.grafiekdagen span:last-child { text-align: right; }
.grafiekdagen span { overflow: visible; white-space: nowrap; }


/* ---------- twee dingen die op een telefoon buiten beeld vielen ----------
 *
 * 1. De keuzelijst met gewassen in een groep. Een select is standaard zo breed als zijn
 *    langste optie, en "Selderij, bleek- en groen-, productie" is 509 pixels. Op een
 *    scherm van 375 duwde dat de hele pagina opzij.
 *
 * 2. De datums onder de staafgrafiek in het beheer. Die staan in een grid van dertig
 *    kolommen van 1fr, en 1fr is minmax(auto, 1fr): met white-space nowrap is die auto
 *    de volle tekstbreedte, dus de kolom kón niet krimpen en "4 Sep" rekte hem op naar
 *    dertig pixels. min-width: 0 haalt die ondergrens weg; de tekst mag daarna over zijn
 *    kolom heen schilderen en de rij klipt wat er buiten valt. De eerste en de laatste
 *    lijnen naar binnen uit, zodat er niets afvalt wat je moet kunnen lezen.
 */
.groepform select,
.groepform input[type=text],
.accountmain select { max-width: 100%; width: 100%; }

.grafiekdagen { overflow: hidden; }
.grafiekdagen span { min-width: 0; }


/* De slotkaart is een vlak met een eigen achtergrond, dus zijn padding-top zit bínnen de
   kaart en niet ervoor. Daardoor raakte de bovenrand van die kaart de onderkant van het
   blok erboven: de kaart met de weging plakte er precies tegenaan. Een sectie die zijn
   eigen vlak heeft, heeft een marge nodig en geen padding. Zelfde reden voor het
   pakkettenblok als de winkel openstaat. */
body.thuis .blok.slot { margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
body.thuis #pakketten { padding-top: clamp(3.5rem, 2rem + 4vw, 6rem); }

/* En de kaart met de weging krijgt onder zich net zoveel lucht als erboven, zodat hij
   midden tussen twee blokken staat en niet tegen het onderste aan. */
body.thuis #rekenwijze { padding-bottom: clamp(1rem, .5rem + 1vw, 1.5rem); }


/* ================================================================
   Ronde 5c: het gewaskaartje precies zoals het ontwerp het zet
   ================================================================

       84  Zomergerst                 12,5  ton ds/ha
           past hier het beste
       [============ scorebalk ============]
       [929 VEM] [63 g DVE] [158 g Ruw eiwit] [89 g Suiker]
       +  Zavel met kalk is precies waar gerst op wortelt.
       !  Komt water tekort in een gewone zomer.
       ────────────────────────────────
       Water                       68 mm tekort
       [====blauw====|====bleek====]
       Het blauw is wat dit perceel levert, het streepje …

   De score staat groot en links in de schreef, want dat is het antwoord op de vraag die
   de boer stelt. Het rangnummer als schijfje is weg: dat was een tweede getal naast de
   score en die twee verwarren, terwijl de volgorde in de lijst de rang al zegt. */

.gewas .gkop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: .6rem;
  row-gap: 0;
  padding: 1rem 1.1rem .85rem;
}
.gewas .gscore {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--gewas-inkt);
  font-variant-numeric: tabular-nums;
}
.gewas .gnaam { grid-column: 2; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.gewas .gkop h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}
.gewas .goordeel {
  font-size: .9rem;
  font-weight: 600;
  color: var(--inkt-zacht);
}
.gewas .goordeel.beste { color: var(--gewas-inkt); }
.gewas .gopbrengst {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.gewas .gopbrengsteenheid { font-size: .84rem; color: var(--inkt-zacht); }

/* Onder de 22 rem past de opbrengst niet meer naast de naam. Dan gaat hij eronder, bij
   de kerncijfers, in plaats van de naam plat te drukken. */
@media (max-width: 26rem) {
  .gewas .gkop { grid-template-columns: auto minmax(0, 1fr); }
  .gewas .gopbrengst { grid-column: 1; justify-self: start; font-size: 1.2rem; }
  .gewas .gopbrengsteenheid { grid-column: 2; justify-self: start; }
}

/* ---------- de afweging als één lijst ----------
 *
 * Stonden twee gekleurde vakken naast elkaar met de koppen "Wat helpt" en "Wat punten
 * kost". Die opzet is bedacht toen alles altijd zichtbaar was; in een klepje van 27 rem
 * worden het twee kolommen van tien rem waarin elke zin over vier regels breekt. */
.redenen.afweging {
  margin: .9rem 0 0;
  gap: .5rem;
  font-size: .95rem;
  line-height: 1.5;
}
.redenen.afweging li { gap: .6rem; }
.redenen.afweging li::before {
  flex: none;
  width: 1rem;
  text-align: center;
  font-weight: 700;
}

/* ---------- het waterblok ----------
 *
 * Een lijn erboven, het woord links en het tekort rechts, dan de balk over de volle
 * breedte en de uitleg eronder. Zoals in het ontwerp, en zonder het vak eromheen dat er
 * eerst omheen stond: in een kaart in een paneel is een derde rand te veel. */
.gewas .water {
  margin-top: .9rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--lijn-zacht);
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}
.gewas .water .watermaat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  font-size: .95rem;
  color: var(--inkt-tekst);
}
.gewas .waterstrook { margin: .5rem 0 .4rem; height: 12px; }
.gewas .watertekst { font-size: .9rem; color: var(--inkt-zacht); }

/* De zekerheid en de rest van het klepje in dezelfde rustige opmaak. */
.gewas .zekerheid {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--lijn-zacht);
}


/* De kop in drie kolommen en niet vier: score, naam, opbrengst. Getal en eenheid zaten
   in twee losse kolommen en namen samen honderd pixels van de naam af; in het bovenste
   kaartje bleef er 110 over en brak "Rietzwenkgras" middenin het woord af.

   De naam breekt nu alleen tussen woorden. anywhere stond er zodat een lange naam nooit
   uit de kaart loopt, maar dat maakte van elke krappe kolom een afbreekpartij; break-word
   doet hetzelfde alleen als het echt niet anders kan. */
.gewas .gkop { grid-template-columns: auto minmax(0, 1fr) auto; }
.gewas .gkop h3 { overflow-wrap: break-word; }
.gewas .gopbrengst {
  grid-column: 3;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.gewas .gopbrengst b {
  font-family: var(--letter-kop);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.gewas .gopbrengst i {
  font-style: normal;
  font-size: .84rem;
  color: var(--inkt-zacht);
  white-space: nowrap;
}

/* Het bovenste kaartje had dertig pixels extra binnenmarge, dus zijn kop was smaller dan
   die van de rest terwijl er juist de langste naam in staat. Alle kaartjes dezelfde. */
.gewas.top .gkop { padding: 1rem 1.1rem .85rem; }

@media (max-width: 26rem) {
  .gewas .gkop { grid-template-columns: auto minmax(0, 1fr); }
  .gewas .gopbrengst { grid-column: 1 / -1; margin-top: .3rem; }
}


/* Het bovenste kaartje had vijftien pixels binnenmarge op de kaart zelf, uit een ronde
   waarin het een apart uitgelicht blok was. Daardoor was zijn kop dertig pixels smaller
   dan die van de negen kaartjes eronder, terwijl er juist de langste gewasnaam in staat:
   "Rietzwenkgras" brak in twee. Alle kaartjes hebben nu dezelfde binnenruimte; dat het
   bovenste opvalt doet de groene tint en de rand al. */
.gewas.top { padding: 0 0 .1rem; }
.gewas.top > :not(.gkop):not(.gvoet) { margin-left: 1.1rem; margin-right: 1.1rem; }