:root { color-scheme: light; font: 16px/1.5 'Segoe UI', sans-serif; color: #59392e; background: #f8eee2; }
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(16px, 3vw, 40px); }
header, main { max-width: 1500px; margin: auto; }
a { color: #804424; }
h1 { font: clamp(28px, 4vw, 42px) Georgia, serif; margin: 20px 0 8px; }
h2 { font: 23px Georgia, serif; margin-top: 0; }
header p { margin-top: 0; }
button, select, textarea, input { font: inherit; color: inherit; border: 1px solid #cfab8f; border-radius: 10px; background: #fffaf4; padding: 10px 12px; min-height: 44px; }
button { cursor: pointer; background: #f4d3ad; }
button:hover { background: #edc396; }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed=true] { background: #804424; color: #fffaf4; border-color: #804424; }
:focus-visible { outline: 3px solid #986637; outline-offset: 3px; }
.werkbalk { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 20px 0; }
.werkbalk label { display: grid; gap: 5px; }
select { width: min(300px, 100%); }
#opslag { flex-basis: 100%; margin: 0; font-size: 14px; }
.werkplek { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
aside { background: #fff7ec; padding: 22px; border: 1px solid #e4c9ae; border-radius: 18px; }
aside label, aside button { display: block; margin-top: 14px; }
aside button, textarea { width: 100%; }
textarea { resize: vertical; }
input[type=color] { width: 70px; padding: 5px; }
.uitleg, aside p { font-size: 14px; }
.notitiebord { min-width: 0; padding: 12px; border: 1px solid #dfc5a8; border-radius: 20px; background: #ecddc9; box-shadow: 0 8px 24px #59392e0d; }
.canvasBalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px 12px; }
.papierTitel { margin-right: auto; font: 19px Georgia, serif; }
.canvasBalk button { min-width: 44px; background: #fff8ed; }
#zoomWaarde { min-width: 48px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.papier { height: clamp(440px, 65vh, 800px); overflow: auto; background-color: #fffaf0; background-image: radial-gradient(#b59b7438 .8px, transparent .9px); background-size: 20px 20px; border: 1px solid #e4c9ae; border-radius: 5px; box-shadow: 0 2px 5px #59392e12; }
#tekening { min-height: 100%; display: grid; align-items: center; }
#tekening svg > rect:first-child { fill: transparent; }
.mindmapHulp { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e4c9ae; font-size: 14px; }
.mindmapHulp summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.mindmapHulp summary::-webkit-details-marker { display: none; }
.mindmapHulp summary span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #cfab8f; border-radius: 50%; }
.mindmapHulp[open] summary span { background: #f4d3ad; }
#tekening svg { display: block; margin-inline: auto; }
#tekening [role=button] { cursor: grab; outline: none; touch-action: none; user-select: none; }
#tekening [role=button]:active { cursor: grabbing; }
.nodeTekst { width: 100%; height: 100%; min-height: 0; padding: 4px; margin: 0; resize: none; border: 1px solid #986637; border-radius: 8px; font: 14px/18px 'Segoe UI', sans-serif; text-align: center; background: #fffaf4; color: #382b24; cursor: text; user-select: text; }
#tekening [role=button]:focus-visible rect { stroke: #59392e; stroke-width: 4; }
@media (max-width: 700px) {
    .werkplek { grid-template-columns: 1fr; }
    aside { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
    aside h2, aside p, aside label[for=tekst], aside textarea, .mindmapHulp { grid-column: 1 / -1; }
    aside label, aside button { margin: 0; }
    .papier { height: 55vh; min-height: 360px; }
    .papierTitel { width: 100%; }
}