/* Handleidingen HISCON — zelfde kleuren en letter als de welkomstpagina
   (welkom/index.html). Geen JavaScript, geen externe bestanden. */
:root {
  --donker: #123f49;
  --accent: #27bdb0;
  --accent-donker: #1f9a90;
  --creme: #faf8f3;
  --tekst: #24343a;
  --zacht: #5a6b70;
  --kader: #e3f1ef;
  --lijn: #c9d3d4;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--tekst);
  font-family: "DejaVu Sans", Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}
.breed { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--accent-donker); }
a:hover, a:focus-visible { color: var(--donker); }

header { background: var(--donker); color: var(--creme); padding: 1.6rem 0 2rem; }
.kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.logo { display: block; height: 2.4rem; width: auto; }
.kruimel a { color: var(--creme); font-size: 0.9rem; text-decoration: none; border: 2px solid var(--accent); border-radius: 4px; padding: 0.35rem 0.9rem; }
.kruimel a:hover, .kruimel a:focus-visible { background: rgba(39, 189, 176, 0.15); }
.labels { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.2; }
.ondertitel { margin: 0.8rem 0 0; font-size: 1.05rem; }

main.breed { padding-top: 2rem; padding-bottom: 2rem; }
.inhoud { background: var(--kader); padding: 1rem 1.5rem; margin-bottom: 2rem; }
.inhoud h2 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--donker); }
.inhoud ol { margin: 0; padding-left: 1.3rem; }
.inhoud a { color: var(--donker); }

article h2 { color: var(--donker); font-size: 1.5rem; margin: 2.6rem 0 0.8rem; padding-top: 0.6rem; border-top: 3px solid var(--accent); }
article h2:first-child { margin-top: 0; }
article h3 { color: var(--accent-donker); font-size: 1.12rem; margin: 1.8rem 0 0.5rem; }
article p, article li { font-size: 0.97rem; }
article li { margin-bottom: 0.3rem; }
article em { color: var(--zacht); }
article code { background: var(--kader); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.9em; }

.tabel { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: #fff; }
th { background: var(--donker); color: var(--creme); text-align: left; padding: 0.5rem 0.8rem; }
td { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:nth-child(even) td { background: #f4f8f7; }

.intro { font-weight: 700; color: var(--donker); font-size: 1.05rem; margin: 0 0 1.5rem; }
.kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.kaarten a { display: block; height: 100%; text-decoration: none; background: #fff; border: 1px solid var(--lijn); border-top: 4px solid var(--accent); padding: 1rem 1.2rem; color: var(--tekst); }
.kaarten a:hover, .kaarten a:focus-visible { border-color: var(--accent); box-shadow: 0 2px 8px rgba(18, 63, 73, 0.12); }
.kaart-titel { display: block; font-weight: 700; color: var(--donker); font-size: 1.15rem; margin-bottom: 0.3rem; }
.kaart-tekst { display: block; font-size: 0.9rem; color: var(--zacht); }

footer { border-top: 1px solid var(--lijn); padding: 1rem 0 2rem; font-size: 0.8rem; color: var(--zacht); }
footer a { color: var(--donker); }

@media print {
  header { background: none; color: var(--donker); padding: 0; }
  .kruimel, .inhoud, footer { display: none; }
  .logo-link { display: none; }
  body { background: #fff; }
}