/* ==========================================================================
   AANPAKPAGINA'S
   Alleen de onderdelen die deze pagina's extra nodig hebben. Kleuren,
   letters, maten, knoppen, het streepje, de korrel, de vlekken, het
   werkraster, het contactblok en de voet komen uit assets/css/pankra.css.
   Hier staat geen nieuwe kleur en geen nieuwe lettermaat: alleen de maten
   die daar al als token staan. Wat op de homepage goed is, wordt hier
   hergebruikt en niet opnieuw bedacht.

   Ronde 4 (12 oktober 2026), na Lucas:
   - het streepje heeft de kleur van de kop, net als op de homepage;
   - alleen de paginatitel en "Wat kost jouw ..." krijgen een streepje;
   - vinkjes in een cirkel, dezelfde als in het offerteformat;
   - logo's van opdrachtgevers in het oranje, strak links uitgelijnd;
   - geen onderstreepte link als knop, maar de knoppen van de homepage;
   - de vlek alleen waar de homepage hem ook heeft;
   - achter de kop een muur van eigen werk uit deze hoek;
   - de foto bij de aanpak vaag over de hele breedte, zoals op de homepage.
   ========================================================================== */

/* De balk die zegt dat dit een proef is. Verdwijnt zodra het script zonder
   PROEF=1 draait. */
.proefbalk{position:fixed;left:0;right:0;bottom:0;z-index:250;margin:0;
  background:var(--orange);color:var(--anthracite);
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--tekst-3);line-height:1.3;
  padding:10px var(--gutter);text-align:center}

/* Zonder pankra.js wordt de kopbalk niet dicht bij het scrollen, dus hij is
   het meteen. */
header{background:var(--anthracite)}
.sublijst{border-radius:0 0 var(--rond) var(--rond)}

/* ---------- vlekken ----------
   Alleen waar de homepage ze ook heeft: grijs bij het werk, beige bij het
   voorbeeld (zoals bij de logo's) en oranje bij contact. */
.aanpak-hero,.aanpak-case,.aanpak-beeld,.aanpak-slot{position:relative;overflow:hidden;isolation:isolate}
.aanpak-beeld .vlek{opacity:.5;mix-blend-mode:screen}
.aanpak-case .vlek,.aanpak-slot .vlek{opacity:1}
.aanpak-case .wrap,.aanpak-beeld .wrap,.aanpak-slot .wrap{position:relative;z-index:2}

/* ---------- kop ----------
   Opgebouwd als de hero van de homepage: beeld over de hele breedte, een
   sluier eroverheen die naar onder dichtloopt, de titel onderaan. Waar daar
   de film staat, schuift hier ons eigen werk uit deze hoek langs. */
.aanpak-hero{min-height:clamp(520px,80vh,820px);display:flex;align-items:flex-end;
  background:var(--anthracite)}
.aanpak-hero .muur{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:12px;z-index:0;--tegel:clamp(120px,14vw,220px)}
.aanpak-hero .baan{overflow:hidden}
.aanpak-hero .band{display:flex;gap:12px;width:max-content;backface-visibility:hidden;
  animation:scroll 150s linear infinite}
.aanpak-hero .baan:nth-child(2) .band{animation-duration:190s;animation-direction:reverse}
.aanpak-hero .baan:nth-child(3) .band{animation-duration:170s}
.aanpak-hero .band img{width:var(--tegel);height:var(--tegel);object-fit:cover;flex:none;
  background:var(--anthracite-2)}
/* De sluier loopt van links dicht naar rechts open: links staat de tekst op
   rustig antraciet, rechts zie je het werk. Onderaan loopt hij dicht naar
   de volgende sectie. Op een telefoon staat de tekst over de hele breedte,
   dus daar is hij overal even dicht. */
.aanpak-hero .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(45,45,45,0) 55%,rgba(45,45,45,.9)),
    linear-gradient(90deg,rgba(45,45,45,.94),rgba(45,45,45,.86) 40%,rgba(45,45,45,.35) 78%,rgba(45,45,45,.25))}
@media(max-width:759px){.aanpak-hero .veil{background:rgba(45,45,45,.74)}}
.aanpak-hero .wrap{position:relative;z-index:2;width:100%;
  padding-block:calc(var(--balk) + clamp(34px,5vw,64px)) clamp(48px,7vw,96px)}
.aanpak-hero h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.005em;
  line-height:.88;font-size:var(--kop-2);margin:0 0 .3em;color:var(--orange);max-width:14ch}
.aanpak-hero .lede{font-size:var(--tekst-1);line-height:1.45;max-width:48ch;
  color:var(--beige-2);margin:0}
@media (prefers-reduced-motion:reduce){.aanpak-hero .band{animation:none}}

/* ---------- koppen ----------
   Twee maten, allebei uit pankra.css. De paginatitel en de slotvraag op
   --kop-2 met het streepje, zoals de sectiekoppen op de homepage. De rest op
   --kop-3, zoals de labels in de aanpak en de namen bij contact, zonder
   streepje. Het streepje heeft altijd de kleur van de kop zelf. */
.aanpak-blok h2,.aanpak-paar h2,.aanpak-case h2,.aanpak-beeld h2,.aanpak-slot h2{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.005em;
  line-height:.9;font-size:var(--kop-3);margin:0 0 .55em;color:var(--head)}

/* ---------- een blok tekst ---------- */
.aanpak-blok .wrap,.aanpak-paar .wrap,.aanpak-case .wrap,.aanpak-beeld .wrap{padding-block:clamp(40px,5.5vw,72px)}
.aanpak-blok p,.aanpak-paar p,.aanpak-case p{font-size:var(--tekst-2);line-height:1.5;max-width:60ch;margin:0 0 .8em}
.aanpak-blok p:last-child,.aanpak-paar p:last-child,.aanpak-case p:last-child{margin-bottom:0}

/* Zo pakken we het aan, met een foto van ons tweeen vaag over de hele
   breedte, zoals de teamfoto achter "Zo werkt het" op de homepage. De
   klasse .teamfoto komt uit pankra.css; hier de ruimte eromheen, zodat er
   genoeg foto te zien is, en een tikje meer dekking. */
.aanpak-foto{position:relative;overflow:hidden;isolation:isolate}
.aanpak-foto .wrap{position:relative;z-index:2;padding-block:var(--sectie)}
/* Op de homepage staat de foto op .045, net te voelen. Hier mag je ons zien,
   maar de tekst gaat voor: vaag, zwart-wit, en gemultiplyd op het beige. */
.aanpak-foto .teamfoto{opacity:.2;object-position:center 35%}

/* ---------- dit krijg je, en wat het kost ----------
   Naast elkaar vanaf tabletbreedte. Het vinkje is hetzelfde als in het
   offerteformat: een oranje lijn in een oranje cirkel. */
.paar{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px)}
@media(min-width:820px){.paar{grid-template-columns:1fr 1fr}}
.vinkjes{list-style:none;margin:0;padding:0}
.vinkjes li{display:flex;gap:14px;padding:5px 0;font-size:var(--tekst-2);line-height:1.5}
.vinkjes li::before{content:"";flex:0 0 22px;height:22px;margin-top:calc((1.5em - 22px) / 2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23F73C1C' stroke-width='1.6'/%3E%3Cpath d='M6.3 10.3l2.5 2.5 4.9-5.2' fill='none' stroke='%23F73C1C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}

/* ---------- het voorbeeld ----------
   Beeld links, tekst rechts. Het logo van de opdrachtgever in het oranje
   erboven, zodat het loskomt van de kop eronder. Alle logo's zijn strak
   bijgesneden en staan dus precies op de linkerlijn. De breedte staat per
   logo in de pagina (--w), zo gekozen dat ze ongeveer even zwaar ogen.
   Op Lucas' verzoek staan ze op 64 procent daarvan (--s): eerst 80, op 14
   oktober nog eens 80 procent daarvan, zodat het meer een stempeltje is. */
.case{display:grid;grid-template-columns:1fr;gap:clamp(22px,3.4vw,48px);align-items:center}
@media(min-width:760px){.case{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.case figure{margin:0}
.case figure img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;
  object-position:left center}
.case .logo{display:block;height:auto;width:calc(var(--w,200) * 1px * var(--s,.64));max-width:100%;
  margin:0 0 clamp(20px,2.4vw,30px)}
@media(max-width:759px){.case .logo{--s:.512}}

/* ---------- het werk uit deze hoek ----------
   Het raster van de homepage, met dezelfde tegels en dezelfde knop "Meer
   werk". Alle tegels staan in de pagina; wat nog dicht is heeft hidden. */
.aanpak-beeld .tile[hidden]{display:none}

/* ---------- vraag en antwoord ---------- */
.vragen{margin:0;max-width:66ch}
.vragen dt{font-family:var(--body);font-weight:700;font-size:var(--tekst-2);
  line-height:1.35;color:var(--kick);margin-top:18px}
.vragen dt:first-child{margin-top:0}
.vragen dd{margin:.25em 0 0;font-size:var(--tekst-2);line-height:1.5}

/* ---------- slot ---------- */
.aanpak-slot .wrap{padding-block:var(--sectie)}
.aanpak-slot h2.groot{font-size:var(--kop-2);max-width:16ch;margin-bottom:.3em}
.slotregel{font-size:var(--tekst-2);line-height:1.5;max-width:56ch;margin:0 0 clamp(22px,3vw,32px)}

/* Het formulier op het oranje vlak: velden met alleen een lijn eronder,
   labels in kapitalen zoals overal op de site. */
.aform{margin:0;max-width:820px}
.avelden{display:grid;grid-template-columns:1fr;gap:16px 22px}
@media(min-width:680px){.avelden{grid-template-columns:1fr 1fr}
  .avelden .breed{grid-column:1 / -1}}
/* Veldnamen in de letter van het menu (16 oktober 2026), niet meer in kleine
   kapitalen. */
.aform label{display:block;font-family:var(--body);font-weight:500;
  text-transform:none;letter-spacing:-.005em;font-size:var(--knop-tekst);
  line-height:1.3;color:var(--anthracite)}
.aform input,.aform textarea{display:block;width:100%;box-sizing:border-box;
  margin-top:6px;padding:9px 0;border:0;border-bottom:2px solid var(--anthracite);
  background:transparent;color:var(--anthracite);font-family:var(--body);
  font-size:var(--tekst-2);line-height:1.4;text-transform:none;letter-spacing:0;font-weight:400}
.aform textarea{resize:vertical;min-height:64px}
.aform input:focus,.aform textarea:focus{outline:none;border-bottom-color:var(--beige)}
.aform .btn{margin-top:clamp(22px,3vw,30px)}
.aform .btn[disabled]{opacity:.6}
.aform .btn[hidden]{display:none}
.hp{position:absolute;left:-9999px}
.mailnoot{margin:16px 0 0;font-size:var(--tekst-2);line-height:1.5;color:var(--anthracite)}
.mailnoot a{text-decoration:underline;text-underline-offset:3px}

/* Wil je liever mailen: een kop, en daaronder het contactblok van de
   homepage, met dezelfde foto's, socials en knoppen. */
.mailen{margin-top:clamp(56px,8vw,104px)}
.mailen h2{margin-bottom:clamp(20px,2.8vw,30px)}

/* De lijst op de voorstelpagina: naam vet, aantal beelden in het grijs. */
.lijstje span{color:var(--dim)}
.punten{list-style:none;margin:0;padding:0;max-width:68ch}
.punten li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:var(--tekst-2);line-height:1.5}
.sec-beige .punten li{border-color:rgba(45,45,45,.14)}