/* Merklaag WKA klaar (M0235, merkstap Jan 26-10). Bron: concepts/onderaannemersdossier/merk/merk.css; komt ná site.css
   (pas_toe.py zet de link). Alleen vormgeving: geen tekst, prijs of belofte. Kleuren: primair #1c3d5a (navy), actie #b4430e
   (alleen de knop en "klaar" in het woordmerk), signaal #f08c2e (alleen decoratief, nooit als tekstkleur op wit). */
:root {
  --signaal: #f08c2e;
  --signaal-zacht: #fde6cf;
  --navy-diep: #14304a;
  --rand: #d5dde6;
  --ok: #1f7a4d;
  --let: #a15c00;
  --open: #1c5d99;
}

/* Kop: echt woordmerk, oranje signaalstreep bovenaan */
body { border-top: 4px solid var(--signaal); }
.top .wrap { min-height: 64px; }
.merk img { height: 36px; width: auto; }
@media (min-width: 960px) { .merk img { height: 42px; } .top .wrap { min-height: 72px; } }

/* Hero: bouwtekening-raster, vervaagd achter de tekst */
.hero {
  background-color: var(--zacht);
  background-image:
    radial-gradient(ellipse 70% 80% at 22% 35%, var(--zacht) 35%, rgba(238, 242, 246, 0) 75%),
    linear-gradient(rgba(28, 61, 90, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 61, 90, .075) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  background-position: 0 0, -1px -1px, -1px -1px;
}
h1 { font-weight: 800; letter-spacing: -.025em; color: var(--navy-diep); }
.hero .kaart { border-color: var(--rand); border-top: 4px solid var(--primair);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 36px rgba(20, 48, 74, .13); }
.prijs { color: var(--navy-diep); }

/* Productbeeld: het fictieve voorbeeld als dossierscherm met statusiconen */
.schets-blad { padding: 0; overflow: hidden; border-color: var(--rand);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 9px 9px 0 -1px #dfe6ee, 9px 9px 0 0 var(--rand), 0 18px 40px rgba(20, 48, 74, .14); }
.schets-kop { background: var(--primair); color: #fff; padding: 12px 16px; border-bottom: 0; gap: 16px; }
.schets-blad { transform: none; }
.schets-kop .schets-logo { height: 26px; width: auto; flex: none; margin-right: auto; border: 0; border-radius: 0; }
.schets-tag { color: #fff; background: rgba(255, 255, 255, .16); padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.schets dl { padding: 4px 16px 6px; }
.schets dl > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; border-bottom: 1px solid #e6ebf0; }
.schets dl > div::before { content: ""; grid-row: 1 / span 2; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%;
  background: #e3f1e9 center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.schets dl > div:nth-child(2)::before { background-color: #fbefdc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a15c00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.schets dl > div:nth-child(3)::before { background-color: #e2ecf6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c5d99' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h11m0 0-4-4m4 4-4 4M20 5v14'/%3E%3C/svg%3E"); }
.schets dt, .schets dd { grid-column: 2; }
.schets dl > div:last-child { border-bottom: 0; }
.schets dt { color: var(--navy-diep); }
.schets dl > div:nth-child(2) dt { color: var(--let); }
.hero-beeld figcaption { margin-top: 14px; }

/* Uitsnede in de bestelkaart (mobiel) */
.kaart-vb { border-top-color: var(--signaal); }

/* Secties: kop met signaalstreepje, stapnummers met ring */
section.blok h2::after, .slot h2::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--signaal); margin-top: 10px; }
.stappen li::before { background: var(--primair); box-shadow: 0 0 0 4px var(--signaal-zacht); }
.lijst3 .icon { color: var(--ok); }
.vlak { border-left: 4px solid var(--primair); }
.wie dl { border: 1px solid var(--rand); }

/* Slotblok en voet in navy */
.slot { background-color: var(--primair);
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px; }
.slot h2 { color: #fff; }
.slot .kaart { border: 0; }
footer { background: var(--navy-diep); color: #c9d4df; border-top: 0; }
footer a { color: #fff; }
footer :focus-visible { outline-color: #fff; }