/* kweekr · huisstijl: bosgroen, bladgroen, lichtgroen en mint (zie logo/LEESMIJ) */
:root {
    --bosgroen: #1E4A2E;
    --bladgroen: #5DAA3C;
    --lichtgroen: #8FD16A;
    --mint: #EEF6E8;
    --tekst: #1f2a22;
    --grijs: #5f6b62;
    --lijn: #d5dfd2;
    --wit: #ffffff;
    --fout: #a61b1b;
    --fout-bg: #fbeaea;
    --ok-bg: #e6f3df;
    --info-bg: #eef2f7;
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--tekst);
    background: var(--wit);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1 { font-size: 1.6rem; margin: 0 0 .75rem; color: var(--bosgroen); }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; color: var(--bosgroen); }
a { color: var(--bosgroen); }
code { background: var(--mint); padding: 0 .3em; border-radius: 4px; font-size: .92em; }

/* Kop met menu */
.kop { background: var(--bosgroen); color: var(--wit); }
.kop__binnen {
    max-width: 1180px; margin: 0 auto; padding: .6rem 1rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.kop__logo img { display: block; height: 32px; width: auto; }
.kop__menu { display: flex; gap: 1rem; flex: 1; }
.kop__menu a { color: var(--wit); text-decoration: none; padding: .35rem .5rem; border-radius: 6px; }
.kop__menu a:hover, .kop__menu a:focus-visible { background: rgba(255, 255, 255, .14); }
.kop__gebruiker { display: flex; align-items: center; gap: .75rem; font-size: .92rem; }
.kop__gebruiker form { margin: 0; }

.inhoud { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.inleiding { color: var(--grijs); max-width: 70ch; }
.klein { font-size: .88rem; color: var(--grijs); }
.voet { text-align: center; font-size: .82rem; color: var(--grijs); padding: 1rem; }

/* Kale pagina's: installatie en inloggen */
body.kaal { background: var(--mint); }
.kaart {
    width: 100%; max-width: 720px; margin: 3rem auto 1rem; background: var(--wit);
    border-radius: 12px; padding: 2rem 2rem 1.5rem; box-shadow: 0 1px 3px rgba(30, 74, 46, .12);
}
.kaart__logo { display: block; height: 48px; width: auto; margin: 0 0 1.5rem; }

/* Formulieren en knoppen */
.formulier { display: grid; gap: .35rem; max-width: 420px; margin: 1rem 0; }
.formulier label { font-weight: 600; margin-top: .5rem; }
.formulier input {
    font: inherit; padding: .55rem .65rem; border: 1px solid var(--lijn); border-radius: 6px;
}
.formulier input:focus { outline: 2px solid var(--bladgroen); outline-offset: 1px; border-color: var(--bladgroen); }
.formulier .knop { margin-top: 1rem; justify-self: start; }
.knop {
    display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    background: var(--bosgroen); color: var(--wit); border: 0; border-radius: 6px; padding: .55rem 1.1rem;
}
.knop:hover, .knop:focus-visible { background: #163a23; }
.knop--licht { background: transparent; color: var(--wit); border: 1px solid rgba(255, 255, 255, .55); padding: .3rem .8rem; }
.knop--licht:hover { background: rgba(255, 255, 255, .14); }

/* Meldingen */
.melding { border-radius: var(--radius); padding: .65rem .9rem; margin: 0 0 1rem; }
.melding--ok { background: var(--ok-bg); }
.melding--fout { background: var(--fout-bg); color: var(--fout); }
.melding--info { background: var(--info-bg); }

/* Tabellen */
.tabel { border-collapse: collapse; width: 100%; font-size: .94rem; }
.tabel th, .tabel td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { background: var(--mint); color: var(--bosgroen); }
.tabel--controles tr.fout td { color: var(--fout); }
.tabel--controles .teken { font-weight: 700; }
.tabel--controles tr.goed .teken { color: var(--bladgroen); }

/* Installatiestappen */
.stappen { padding-left: 1.2rem; }
.stappen li { margin: .2rem 0; color: var(--grijs); }
.stappen li.klaar { color: var(--bladgroen); }
.stappen li.klaar::after { content: " ✓"; }
.stappen li.nu { color: var(--tekst); font-weight: 600; }

/* Startpagina */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.tegel { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--wit); }
.tegel h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.tegel p { margin: 0 0 .6rem; color: var(--grijs); font-size: .93rem; }
.tegel--later { background: #fafcf9; }
.label { display: inline-block; font-size: .78rem; font-weight: 600; background: var(--mint); color: var(--bosgroen); border-radius: 999px; padding: .1rem .55rem; }

@media (max-width: 640px) {
    .kaart { margin: 0; border-radius: 0; padding: 1.25rem 1rem; }
    .kop__gebruiker span { display: none; }
}