@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Light.ttf"); font-weight: 300; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Medium.ttf"); font-weight: 500; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-SemiBold.ttf"); font-weight: 600; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Bold.ttf"); font-weight: 700; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-ExtraBold.ttf"); font-weight: 800; }

:root { --groen: #4cc083; --groen-d: #2f9a62; --donker: #1b2025; --inkt: #231f20; --grijs: #6e7672; --licht: #ebefed;
        --lijn: #d9dfdc; --geel: #ffcc1c; --rood: #c0392b; --rood-l: #fbe9e7; --oranje: #b4500f; --oranje-l: #fdf0e3; --wit: #fff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f6f8f7; color: var(--inkt); font: 300 15px/1.55 Montserrat, system-ui, sans-serif; }
a { color: var(--groen-d); }
b, strong { font-weight: 700; }
h1 { font-weight: 800; font-size: 30px; line-height: 1.1; margin: 0 0 6px; }
h2 { font-weight: 800; font-size: 20px; margin: 0 0 10px; }
h3 { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.sub { color: var(--grijs); margin: 0 0 18px; }
.klein { font-size: 13px; color: var(--grijs); }

/* kop */
.balk { background: var(--donker); color: #fff; }
.balk .w { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 58px; display: flex; align-items: center; gap: 22px; }
.balk .merk { font-weight: 800; font-size: 17px; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.balk .merk i { display: inline-block; width: 12px; height: 12px; background: var(--groen); border-radius: 0 6px 0 0; }
.balk nav { display: flex; gap: 18px; flex: 1; }
.balk nav a { color: #cfd6d2; text-decoration: none; font-weight: 500; font-size: 14px; }
.balk nav a:hover, .balk nav a.aan { color: #fff; }
.balk .ik { font-size: 13px; color: #cfd6d2; display: flex; gap: 12px; align-items: center; }
.balk form { margin: 0; }
.balk button { background: none; border: 1px solid #3a434b; color: #cfd6d2; border-radius: 0 10px 0 0; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }

/* kaarten en knoppen */
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 0 18px 0 0; padding: 20px 22px; margin-bottom: 18px; }
.rij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tussen { justify-content: space-between; }
.knop, button.knop { display: inline-block; background: var(--groen); color: #fff; border: 0; border-radius: 0 14px 0 0; padding: 10px 18px;
  font: 600 14px Montserrat, sans-serif; text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--groen-d); }
.knop.licht { background: var(--licht); color: var(--inkt); }
.knop.licht:hover { background: var(--lijn); }
.knop.gevaar { background: var(--rood-l); color: var(--rood); }
.knop.klein { padding: 6px 12px; font-size: 13px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* formulieren */
label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, textarea {
  width: 100%; border: 1px solid var(--lijn); border-radius: 0 10px 0 0; padding: 9px 11px; font: 300 14px/1.5 Montserrat, sans-serif; background: #fff; color: var(--inkt); }
textarea { min-height: 70px; resize: vertical; }
input[readonly], textarea[readonly] { background: var(--licht); color: var(--grijs); }
.veld { margin-bottom: 14px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.hint { font-size: 12.5px; color: var(--grijs); margin-top: 3px; }
fieldset { border: 1px solid var(--lijn); border-radius: 0 14px 0 0; padding: 12px 14px 4px; margin: 0 0 12px; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; }

/* meldingen */
.flits { padding: 11px 15px; border-radius: 0 12px 0 0; margin-bottom: 16px; background: #e6f6ee; color: #1d6b43; font-weight: 500; }
.flits.fout { background: var(--rood-l); color: var(--rood); }
.mld { font-size: 13px; padding: 5px 9px; border-radius: 0 8px 0 0; margin-top: 5px; }
.mld.fout { background: var(--rood-l); color: var(--rood); }
.mld.letop { background: var(--oranje-l); color: var(--oranje); }
.label { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 0 8px 0 0; background: var(--licht); }
.label.groen { background: #e6f6ee; color: #1d6b43; }
.label.geel { background: #fff4cc; color: #7a5b00; }
.label.rood { background: var(--rood-l); color: var(--rood); }

/* tabellen */
table.lijst { width: 100%; border-collapse: collapse; background: #fff; }
table.lijst th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--lijn); }
table.lijst td { padding: 10px; border-bottom: 1px solid var(--licht); vertical-align: top; }
table.lijst tr:hover td { background: #fafcfb; }
.scroll { overflow-x: auto; }

/* stappen van een offerte */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 22px; }
.stap { background: #fff; border: 1px solid var(--lijn); border-radius: 0 14px 0 0; padding: 12px 14px; }
.stap b { display: block; font-size: 13px; }
.stap span { font-size: 12.5px; color: var(--grijs); }
.stap.klaar { border-color: var(--groen); }
.stap.klaar b::before { content: "✓ "; color: var(--groen); }

/* tekst controleren */
.blok { border-left: 3px solid var(--groen); padding-left: 14px; margin-bottom: 26px; }
.blok.weg { opacity: .5; }
.pad { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #9aa39f; }
.check { background: #fde3d0; color: var(--oranje); font-weight: 600; }
.vast { position: sticky; bottom: 0; z-index: 5; background: #f6f8f7; padding: 12px 0; border-top: 1px solid var(--lijn); box-shadow: 0 -6px 12px rgba(246, 248, 247, .9); }

/* foto's */
.vlak { margin-bottom: 26px; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.keuze { border: 2px solid transparent; border-radius: 0 12px 0 0; overflow: hidden; background: #fff; padding: 0; cursor: pointer; text-align: left; }
.keuze img { display: block; width: 100%; height: 110px; object-fit: cover; }
.keuze small { display: block; padding: 4px 6px; font-size: 11px; color: var(--grijs); }
.keuze.aan { border-color: var(--groen); }
.voorstel { outline: 2px dashed var(--geel); outline-offset: -2px; }

/* inloggen */
.inlog { max-width: 400px; margin: 9vh auto; }
.inlog .kop { background: var(--groen); border-radius: 0 0 0 90px; padding: 34px 28px 40px; margin-bottom: 0; }
.inlog .kop h1 { margin: 0; }
.inlog .kop h1 span { color: #fff; }
.inlog form { background: #fff; padding: 24px 28px 28px; border: 1px solid var(--lijn); border-top: 0; }

@media (max-width: 720px) {
  .balk .w { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .balk nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  main { padding: 20px 16px 60px; }
  h1 { font-size: 24px; }
}