:root {
  --steen: #a8543a;
  --steen-donker: #7d3b28;
  --snede: #d9a441;
  --hoek: #4c6b8a;
  --inkt: #1d1b19;
  --grijs: #6f6a65;
  --lijn: #ddd6cf;
  --vlak: #fbf9f6;
  --wit: #fff;
  --waarschuwing: #8a5a00;
  --winst: #2f6b3c;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--inkt);
  background: var(--vlak);
  line-height: 1.5;
}

h1 {
  font-size: 1.5rem;
  margin: 0;
}
h2 {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  letter-spacing: 0.01em;
}
h3 {
  font-size: 0.95rem;
  margin: 0;
}

.kop {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kop .onder {
  margin: 0.35rem 0 0;
  color: var(--grijs);
  max-width: 60ch;
  font-size: 0.9rem;
}
.kop-acties {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

main {
  padding: clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.paneel {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1rem clamp(1rem, 3vw, 1.5rem) 1.25rem;
}
.paneel-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.paneel-kop h2 {
  margin: 0;
}

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

label {
  display: block;
  font-size: 0.78rem;
  color: var(--grijs);
  margin-bottom: 0.2rem;
}

input,
select {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  background: var(--wit);
  color: var(--inkt);
}
input:focus,
select:focus {
  outline: 2px solid var(--hoek);
  outline-offset: 1px;
}
input[type='checkbox'] {
  width: auto;
}
.vink {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--inkt);
  margin-top: 1.1rem;
}

.knop {
  border: 1px solid var(--steen-donker);
  background: var(--steen);
  color: var(--wit);
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.knop:hover {
  background: var(--steen-donker);
}
.knop.stil {
  background: var(--wit);
  color: var(--inkt);
  border-color: var(--lijn);
}
.knop.stil:hover {
  background: var(--vlak);
}
.knop.klein {
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}

.hint {
  font-size: 0.82rem;
  color: var(--grijs);
  margin: 0 0 0.75rem;
}

.muur {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 0.85rem;
  background: var(--vlak);
}
.muur-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.openingen {
  margin-top: 0.75rem;
}
.opening-rij {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.4rem;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.kaart {
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  background: var(--vlak);
}
.kaart .waarde {
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kaart .naam {
  font-size: 0.75rem;
  color: var(--grijs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kaart.winst .waarde {
  color: var(--winst);
}

.melding {
  border-left: 3px solid var(--waarschuwing);
  background: #fff8ea;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  border-radius: 0 6px 6px 0;
  margin-top: 0.5rem;
}

.plan {
  margin-bottom: 1.5rem;
}
.plan-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.plan-kop .meta {
  font-size: 0.83rem;
  color: var(--grijs);
}
svg.legplan {
  width: 100%;
  height: auto;
  background: #f3efe9;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  display: block;
}

.legende {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--grijs);
  margin-top: 0.4rem;
}
.legende span::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  margin-right: 0.3rem;
  vertical-align: -1px;
  background: var(--kleur, var(--steen));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
th,
td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--lijn);
  font-variant-numeric: tabular-nums;
}
th {
  color: var(--grijs);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.3rem 0;
}

.voet {
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 2rem;
  color: var(--grijs);
  font-size: 0.8rem;
  max-width: 1180px;
  margin: 0 auto;
}

@media print {
  .kop-acties,
  #spec-paneel,
  #muren,
  #muur-toevoegen,
  .hint,
  .voet {
    display: none !important;
  }
  body {
    background: var(--wit);
  }
  .paneel {
    border: none;
    padding: 0;
    break-inside: avoid;
  }
  .plan {
    break-inside: avoid;
  }
}