/* ============================================================
   Beco Bouwgroep — contactpagina

   Twee kolommen: het formulier waar de meeste mensen voor komen,
   en ernaast de gegevens voor wie liever belt of langskomt. Onder
   de vouw staat wat er na het versturen gebeurt, zodat niemand
   zich hoeft af te vragen of het bericht is aangekomen.
   ============================================================ */

.con{padding-block:clamp(126px,15vh,190px) clamp(60px,8vw,100px)}

/* Het kruimelpad hoort bij de pagina, niet tegen het label van
   de sectie eronder geplakt.                                 */
.con .kruimels{margin-bottom:clamp(22px,3vw,34px)}

/* ── De kop ──────────────────────────────────────────────── */
.con-kop{max-width:56ch;margin-bottom:clamp(40px,5.5vw,74px)}
.con-kop .mini{margin-bottom:clamp(14px,1.8vw,22px)}
.con-kop h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:.96;
  letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.con-kop .kleurlijn{height:10px;width:min(300px,70%);margin-top:clamp(20px,2.6vw,30px)}
.con-kop p{margin-top:clamp(22px,3vw,32px);max-width:52ch;
  font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.66}

/* ── Formulier boven, gegevens eronder ───────────────────────
   De gegevens stonden rechts naast het formulier. Op een breed
   scherm duwde die kolom het formulier smaller en trok hij de
   aandacht weg van het enige wat hier telt. Nu staat het
   formulier alleen in het eerste scherm en volgt de rest daarna,
   voor wie liever belt of langskomt.                          */
.con-binnen{display:flex;flex-direction:column;
  gap:clamp(30px,4.5vw,64px)}

/* ── Het formulier ───────────────────────────────────────── */
.con-vorm{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.con-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px)}
@media(max-width:600px){.con-paar{grid-template-columns:1fr}}

.con-veld{display:flex;flex-direction:column;gap:8px}
.con-veld label{font-family:var(--disp);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--indigo-900)}
.con-veld label .los{font-family:var(--tekst);font-weight:400;
  letter-spacing:0;color:var(--grijs-400)}
.con-veld input,.con-veld textarea{
  font:inherit;font-size:16px;color:var(--indigo-900);
  padding:14px 16px;background:#fff;
  border:1px solid var(--lijn);border-radius:var(--rond-k);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.con-veld textarea{resize:vertical;min-height:150px;line-height:1.6}
.con-veld input::placeholder,.con-veld textarea::placeholder{color:var(--grijs-400)}
/* Geen gloed achter het veld tijdens het typen. Er moet wél te zien
   blijven waar je staat, ook voor wie met het toetsenbord werkt, dus
   de rand wordt op dat moment twee pixels dik en indigo. De
   binnenmarge gaat één pixel omlaag, zodat het vak precies even
   groot blijft en er niets verspringt bij het aanklikken.       */
.con-veld input:focus,.con-veld textarea:focus{outline:0;
  border-color:var(--indigo);border-width:2px;padding:13px 15px}
/* De browser mag zelf niets rood kleuren zolang er niets is
   ingediend; anders staat een leeg formulier meteen te schreeuwen. */
.con-vorm input:user-invalid,.con-vorm textarea:user-invalid{border-color:var(--dak)}

.con-veld .fout{font-size:13.5px;color:var(--dak);font-weight:500}
.con-veld .fout:empty{display:none}

/* Honeypot: staat er voor bots, niet voor mensen. Niet display:none,
   want dat slaan sommige bots juist over.                        */
.con-lokval{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.con-vorm .knop{align-self:flex-start;margin-top:6px}
.con-vorm .knop[disabled]{opacity:.55;cursor:progress;transform:none}
.con-kleine-letter{font-size:13.5px;line-height:1.6;color:var(--grijs-400);
  max-width:48ch}
.con-kleine-letter a:not(.knop):not(.knop-leeg){color:var(--indigo);text-decoration:underline;
  text-underline-offset:3px}

/* De melding na het versturen. Rustig, geen pop-up: hij komt op de
   plek waar de knop stond, dus je ziet hem zonder te scrollen.  */
.con-melding{padding:18px 22px;border-radius:var(--rond-k);
  font-size:15px;line-height:1.6;border:1px solid var(--lijn)}
.con-melding:empty{display:none}
/* Gelukt is groen, mislukt is rood, en de rand links maakt het
   verschil zichtbaar voor wie kleur moeilijk onderscheidt. Het stond
   eerder op de stielkleuren, en dak is magenta: dat las als een
   accent en niet als een fout.                                   */
.con-melding.gelukt{background:color-mix(in srgb,var(--gelukt) 12%,#fff);
  border-color:color-mix(in srgb,var(--gelukt) 55%,#fff);
  border-left:4px solid var(--gelukt);color:var(--indigo-900)}
.con-melding.mis{background:color-mix(in srgb,var(--mis) 10%,#fff);
  border-color:color-mix(in srgb,var(--mis) 50%,#fff);
  border-left:4px solid var(--mis);color:var(--indigo-900)}

/* ── De gegevens ernaast ─────────────────────────────────── */
/* Onder het formulier is dit een brede band in plaats van een
   smalle kolom: de regels staan naast elkaar zolang er plaats is. */
.con-gegevens{display:flex;flex-direction:column;gap:clamp(22px,3vw,32px);
  padding:clamp(26px,3vw,36px);background:var(--indigo);
  border-radius:var(--hoek) 0 var(--hoek) 0;color:#C7C8E4}
.con-gegevens h2{color:#fff;font-size:clamp(1.15rem,1.7vw,1.4rem);
  letter-spacing:-.03em}
.con-regel{display:flex;gap:14px;align-items:flex-start}
.con-regel .teken{flex:none;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;color:var(--goud);
  background:rgba(255,255,255,.08)}
.con-regel b{display:block;font-family:var(--tekst);font-size:11.5px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#8A8CB8;margin-bottom:4px}
.con-regel a,.con-regel span{color:#fff;font-size:16px;line-height:1.5}
.con-regel a{transition:color .2s var(--ease)}
.con-regel a:hover{color:var(--goud)}
.con-gegevens .kleurlijn{height:5px;width:100%}
.con-gegevens address{font-style:normal}
/* basis.css zet p{color:var(--tekst-kleur)} rechtstreeks op het
   element, en dat wint van de kleur die dit paneel doorgeeft. Op
   indigo werd die tekst daardoor bijna onleesbaar.             */
.con-gegevens p{color:#C7C8E4;font-size:15px;line-height:1.6}
.con-gegevens p a:not(.knop):not(.knop-leeg){color:#fff;text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color .2s var(--ease)}
.con-gegevens p a:not(.knop):not(.knop-leeg):hover{color:var(--goud);text-decoration-color:var(--goud)}

/* ── Wat er daarna gebeurt ───────────────────────────────────
   Geen sectiekop meer: de drie stappen zeggen zelf al wat ze zijn,
   en een label plus een titel plus een inleiding erboven zei het
   drie keer. Wat de kop deed, doet nu de witruimte: de stappen
   staan zo ver onder het formulier dat ze een eigen blok vormen
   in plaats van een staart aan de contactgegevens. De gekleurde
   bovenrand is de kleurlijn, uit elkaar getrokken over drie.    */
.con-daarna{padding-block:clamp(72px,10vw,140px) var(--blok)}
.con-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,32px)}
@media(max-width:820px){.con-stappen{grid-template-columns:1fr}}
.con-stap{padding-top:20px;border-top:2px solid var(--kleur,var(--lijn))}
.con-stap b{display:block;font-family:var(--disp);font-size:12px;
  letter-spacing:.2em;color:var(--indigo);margin-bottom:10px}
/* Zonder de kop erboven zijn dit de koppen onder de H1, dus h2. */
.con-stap h2{font-family:var(--disp);font-size:1.15rem;letter-spacing:-.02em;
  margin-bottom:8px}
.con-stap p{font-size:15px}

/* ══ HET FORMULIER, TWEEDE OPZET ═══════════════════════════════
   Weg van het lege tekstvak dat de bezoeker liet raden hoeveel hij
   moest vertellen, en weg van de rij verplichte velden ervoor. Wat
   moet: één vraag, een naam en een e-mailadres. Wat helpt maar niet
   moet, staat eronder als iets dat je erbij kunt halen. Alles wat
   een eigen scherm of een verplicht veld krijgt, leest als een eis,
   en dat is precies wat mensen doet afhaken.                    */

/* Wat de site al weet: de pagina waar de bezoeker vandaan kwam.

   Die melding staat niet meer in beeld. Het element blijft wel in de
   HTML, want de knop "Gaat over iets anders" is naar de startknoppen
   verhuisd en haalt zijn tekst hiervandaan: zo blijft het een gewoon
   data-cms-veld dat de klant kan aanpassen. De opmaak van de melding
   zelf is weg, want die tekende niets meer.                     */
.con-herkomst{display:none}

/* de starters: het lege vak is de echte drempel, niet het typen */
.con-los{font-size:12.5px;font-weight:600;color:var(--grijs-400);opacity:.85;
  flex:none;align-self:flex-start;margin:0}
/* Een label en wat eronder hoort, zijn samen één blok. Zo blijft de
   tussenruimte in het formulier overal dezelfde gap, zonder losse
   negatieve marges om dingen naar elkaar toe te trekken.       */
.con-start{display:flex;flex-direction:column;gap:10px}
/* In de knoppenrij staat het label naast de knoppen en hoort het
   verticaal gecentreerd; in de kolom van het formulier zou datzelfde
   align-self het midden op de pagina zetten.                     */
.con-erbij .con-los{align-self:center}
/* Het hidden-attribuut verliest van een display-regel, dus zeggen
   we het er expliciet bij. Wie via een vacature binnenkomt krijgt
   geen startknoppen over daken en vloeren te zien.             */
.con-starters[hidden],.con-los[hidden]{display:none}
.con-starters{display:flex;flex-wrap:wrap;gap:7px}
.con-starter{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--room);border:1px solid var(--lijn);border-radius:var(--pil);
  font:inherit;font-size:14px;font-weight:500;color:var(--indigo);cursor:pointer;
  text-align:left;line-height:1.25;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.con-starter:hover{transform:translateY(-2px);border-color:var(--indigo);background:#fff}
/* De knop die de gekozen stiel loslaat. Zelfde vorm als een
   startknop, maar zonder kleurblokje en in grijs: hij begint geen
   zin, hij haalt er een weg. */
.con-starter-terug{color:var(--grijs-600);border-style:dashed}
.con-starter-terug:hover{color:var(--indigo)}
.con-starter i{width:9px;height:9px;border-radius:3px 0 3px 0;flex:none;
  background:var(--kleur,var(--indigo))}

/* erbij halen, niet passeren */
.con-erbij{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* hidden verliest van display:flex, dus zeggen wij het erbij. */
.con-erbij[hidden]{display:none}
/* display uit een klasse wint van het hidden-attribuut van de
   browser, dus zonder deze regel staat de fotoknop er ook wanneer
   de CMS meldt dat foto's niet kunnen.                          */
.con-erbij button[hidden]{display:none}
.con-erbij button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  background:none;border:1px dashed var(--grijs-200);border-radius:var(--pil);
  font:inherit;font-size:13.5px;font-weight:600;color:var(--grijs-600);cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.con-erbij button:hover{border-color:var(--indigo);color:var(--indigo);background:var(--room)}
.con-erbij button[aria-expanded="true"]{border-style:solid;border-color:var(--indigo);
  color:var(--indigo);background:var(--room)}

/* De lade groeit van 0fr naar 1fr; de omslag draagt zelf geen marge,
   anders houdt een dichte lade toch hoogte over.                */
/* De knoppenrij en de drie laden vormen samen één blok. Een
   dichtgeklapte lade is nul pixels hoog, maar als los kind van het
   formulier kreeg hij van de flex-gap toch ruimte mee: het gat
   boven "Uw naam" was daardoor drie keer zo groot als elders.
   Binnen dit blok is er geen gap, en brengt een lade zijn eigen
   ruimte mee wanneer hij opengaat.                             */
.con-extra{display:flex;flex-direction:column;gap:0}
.con-lade{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease)}
.con-lade > div{overflow:hidden;min-height:0;padding:0;margin:0;
  visibility:hidden;transition:visibility .4s}
.con-lade.open{grid-template-rows:1fr}
.con-lade.open > div{visibility:visible}
/* De lade knipt zijn inhoud af, want dat is wat de uitklapanimatie
   laat werken. Zolang de voorstellenlijst openstaat mag dat niet,
   anders zie je er maar een streepje van. Alleen dan, en alleen op
   een open lade: bij het dichtklappen moet het knippen terug.   */
.con-lade.open.con-lade-vrij > div{overflow:visible}
.con-lade-in{padding-top:14px;display:flex;flex-direction:column;gap:11px}
/* De titel boven de gemeentezoeker en die boven de termijnknoppen
   zijn hetzelfde soort kopje, dus komen ze uit dezelfde regel. De
   tweede selector is er alleen om .con-veld label te overstemmen,
   dat anders met zijn hogere gewicht de inktkleur oplegt.       */
.con-vraagje,.con-veld label.con-vraagje{font-family:var(--disp);font-size:13.5px;
  font-weight:600;color:var(--indigo);letter-spacing:normal}

.con-chips{display:flex;flex-wrap:wrap;gap:8px}
.con-chip{padding:10px 16px;background:#fff;border:1.5px solid var(--lijn);
  border-radius:var(--pil);font:inherit;font-size:14.5px;font-weight:500;color:var(--indigo);
  cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),
  transform .25s var(--ease),color .25s var(--ease)}
.con-chip:hover{transform:translateY(-2px);border-color:var(--indigo)}
.con-chip[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}


/* Naam en e-mailadres naast elkaar, het nummer op een eigen regel
   over de volle breedte: het is niet verplicht en hoort dus niet in
   dezelfde rij te staan alsof het dat wel is.                    */
.con-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.con-paar{grid-template-columns:1fr}}

/* Bellen staat even groot naast versturen. Voor een aannemer is de
   telefoon nog altijd de kortste weg naar een antwoord, en goud is
   op deze site de kleur van "doe dit".                           */
.con-slot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.con-vorm .con-slot .knop{align-self:auto;margin-top:0;flex:1 1 220px;justify-content:center}
.con-bel{display:inline-flex;align-items:center;gap:10px;padding:17px 26px;
  border-radius:var(--pil);background:var(--goud);color:var(--indigo-900);
  font-weight:600;font-size:15px;white-space:nowrap;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.con-bel:hover{background:var(--goud-700);transform:translateY(-2px)}
@media(max-width:560px){
  .con-vorm .con-slot .knop,.con-bel{flex:1 1 100%;justify-content:center}
}


/* ══ HET FORMULIER ALS KAART ═══════════════════════════════════
   De kop met titel, kleurlijn en inleiding stond eerst boven het
   formulier en duwde het onder de vouw: op een telefoon zag je
   eerst een scherm tekst en dan pas waar je iets kon invullen. De
   titel staat nu in de kaart zelf, zodat het formulier het eerste
   is wat in beeld komt. Eén h1 blijft er wel, want een pagina
   zonder h1 is stuk voor zoekmachines en schermlezers.         */
.con{padding-block:clamp(104px,13vh,150px) clamp(60px,8vw,100px)}
.con-vorm{padding:clamp(22px,3vw,38px);background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--hoek) 0 var(--hoek) 0;
  box-shadow:0 34px 78px -44px rgba(20,21,60,.4)}
.con-vormkop h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.03;
  letter-spacing:-.042em;max-width:18ch}
/* Dezelfde maat als in elke hero: dit is de kop van de pagina, geen
   bijschrift. Stond op 7px hoog en 190px breed, ruim de helft van
   wat een hero draagt. */
.con-vormkop .kleurlijn{height:clamp(9px,1.1vw,13px);width:min(320px,74%);
  margin-top:clamp(20px,2.6vw,30px)}
.con-vormkop{margin:0}
/* De velden staan in de kaart, dus hun eigen vlak moet er net iets
   uit springen in plaats van er in weg te vallen.               */
.con-vorm input,.con-vorm textarea{background:var(--room)}
.con-vorm input:focus,.con-vorm textarea:focus{background:#fff}
.con-starter{background:#fff}
.con-starter:hover{background:var(--room)}

/* foto's meesturen */
.con-drop{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:clamp(20px,3vw,28px);text-align:center;
  border:2px dashed var(--grijs-200);border-radius:var(--rond-s) 0 var(--rond-s) 0;
  background:var(--room);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.con-drop:hover,.con-drop.sleep{border-color:var(--goud);background:#FFFDF5}
.con-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.con-drop .ring{display:grid;place-items:center;width:50px;height:50px;
  border-radius:var(--pil);background:var(--goud);color:var(--indigo-900);
  transition:transform .35s var(--ease)}
.con-drop:hover .ring{transform:scale(1.08) rotate(-4deg)}
.con-drop b{font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--indigo);
  letter-spacing:-.025em}
.con-drop span{font-size:13.5px;line-height:1.45;color:var(--grijs-600);max-width:44ch}
.con-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px}
.con-fotos:empty{display:none}
.con-foto{position:relative;border-radius:var(--rond-s) 0 var(--rond-s) 0;overflow:hidden;
  background:var(--grijs-100);aspect-ratio:4/3}
.con-foto img{width:100%;height:100%;object-fit:cover}
/* Een foto van een iPhone is een HEIC, en die tekent geen enkele browser
   buiten Safari. Het vak toont dan de bestandsnaam in plaats van een
   gebroken beeldje: de foto is wel degelijk goed doorgestuurd, en een
   kapot icoontje zou zeggen van niet.                              */
.con-foto.geen-voorbeeld{display:grid;place-items:center;padding:12px;
  background:var(--grijs-100);text-align:center}
.con-foto-naam{font-size:12px;line-height:1.4;color:var(--grijs-600);
  overflow-wrap:anywhere}
.con-foto button{position:absolute;top:7px;right:7px;width:28px;height:28px;
  border-radius:var(--pil);background:rgba(12,13,38,.72);color:#fff;display:grid;
  place-items:center;border:0;cursor:pointer;transition:background .25s}
.con-foto button:hover{background:var(--dak)}
/* zolang de foto onderweg is, blijft hij gedempt staan */
.con-foto.bezig{opacity:.5}
.con-foto.bezig::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--goud);animation:con-laden 1.1s linear infinite}
@keyframes con-laden{0%{width:8%}50%{width:70%}100%{width:100%}}
.con-foto.mis{outline:2px solid var(--dak);outline-offset:-2px}

/* Op een telefoon namen vier startknoppen vier regels en duwden ze
   het tekstvak onder de vouw. Iets krapper past er twee naast
   elkaar, en dan staat het vak waar het hoort: in beeld.       */
/* Op een telefoon namen vier startknoppen vier regels en duwden ze
   het tekstvak onder de vouw. Met flex-wrap sloeg dat om van twee
   naar vier rijen op vijftien pixels schermbreedte verschil, dus
   hier is het een vast raster van twee kolommen: altijd twee rijen,
   op elke telefoon dezelfde vorm.                               */
@media(max-width:560px){
  .con-vorm{padding:18px}
  .con-starters{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .con-starter{justify-content:flex-start;padding:10px 12px;font-size:13px;gap:7px;
    border-radius:var(--rond-s) 0 var(--rond-s) 0}
  .con-vormkop h1{font-size:clamp(1.55rem,7vw,2rem)}
}


/* ══ DE GEGEVENSBAND ═══════════════════════════════════════════
   Vijf regels naast elkaar op een breed scherm, twee op een tablet
   en onder elkaar op een telefoon. Zo blijft het één band en geen
   tweede kolom die om aandacht vraagt.                         */
.con-gegevens .con-regels{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(18px,2.4vw,26px)}

/* ══ POSTCODE- EN PLAATSZOEKER ═════════════════════════════════
   Het veld controleerde vroeger of de gemeente in ons werkgebied
   stond en zei anders "die staat niet in onze lijst". Dat sloeg
   nergens op zodra je een postcode typte, want die lijst bevatte
   alleen gemeentenamen, en het zette de bezoeker bovendien op het
   verkeerde been over waar Beco werkt. Er is nu geen oordeel meer,
   alleen voorstellen: postcode of plaats, uit de officiële lijsten
   van België, Nederland en Duitsland.                          */
/* De lijst hangt aan het invoervak, niet aan de hele veldgroep.
   Anders begint hij onder de uitleg eronder en schemert die tekst
   er doorheen.                                                  */
.con-zoekbox{position:relative}
.con-suggesties[hidden]{display:none}
.con-suggesties{position:absolute;left:0;right:0;top:100%;z-index:5;
  margin:6px 0 0;padding:6px;list-style:none;max-height:274px;overflow-y:auto;
  background:#fff;border:1px solid var(--lijn);border-radius:14px;
  box-shadow:0 26px 54px -26px rgba(20,21,60,.42);
  scrollbar-width:none}
.con-suggesties::-webkit-scrollbar{width:0}
.con-suggesties li{display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-radius:10px;font-size:15px;color:var(--inkt);cursor:pointer;
  transition:background .16s var(--ease)}
.con-suggesties li:hover,.con-suggesties li[aria-selected="true"]{background:var(--room)}
.con-suggesties b{font-family:var(--disp);font-weight:600;color:var(--indigo);
  min-width:4.6em;letter-spacing:-.01em}
.con-suggesties .land{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--grijs-400)}

/* ══ HET SOLLICITATIEBLOK ══════════════════════════════════
   Twee verplichte stukken naast elkaar, in dezelfde vorm als de
   fotodropzone maar altijd zichtbaar: wat verplicht is verstop je
   niet achter een knop die je moet opendoen. Zodra er een bestand
   gekozen is, kleurt het kader mee en staat de naam eronder.  */
.con-sollicitatie[hidden]{display:none}
.con-sollicitatie{display:flex; flex-direction:column;
  gap:clamp(14px,1.8vw,20px); margin-bottom:clamp(16px,2vw,22px)}
.con-stukken{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,14px)}
@media(max-width:560px){ .con-stukken{grid-template-columns:1fr} }
.con-stuk{display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:clamp(16px,1.8vw,22px); cursor:pointer;
  background:#fff; border:1px dashed var(--lijn);
  border-radius:var(--rond-s) 0 var(--rond-s) 0;
  transition:border-color .25s var(--ease), background .25s var(--ease)}
.con-stuk:hover{border-color:var(--indigo)}
.con-stuk input{position:absolute; width:1px; height:1px; opacity:0;
  clip:rect(0 0 0 0); overflow:hidden}
.con-stuk:focus-within{outline:2px solid var(--indigo); outline-offset:2px}
.con-stuk .ring{display:grid; place-items:center; width:34px; height:34px;
  border-radius:var(--pil); background:var(--room); color:var(--indigo)}
.con-stuk b{font-family:var(--disp); font-weight:600; font-size:14.5px;
  letter-spacing:-.02em; color:var(--indigo-900)}
.con-stuk [data-naam]{font-size:13px; color:var(--grijs-600);
  overflow:hidden; text-overflow:ellipsis; max-width:100%}
.con-stuk.gekozen{border-style:solid; border-color:var(--indigo); background:var(--room)}
.con-stuk.gekozen .ring{background:var(--indigo); color:#fff}

/* ══ DE BESTANDEN BIJ EEN SOLLICITATIE ═════════════════════
   Geen voorbeeldjes zoals bij foto's: een pdf heeft geen
   miniatuur, en de naam is hier wat telt.                     */
.con-bestanden{list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px}
.con-bestanden li{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; background:#fff; border:1px solid var(--lijn);
  border-radius:var(--rond-s) 0 var(--rond-s) 0; font-size:14px}
.con-bestanden span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.con-bestanden button{flex:none; font:inherit; font-size:13px; font-weight:600;
  color:var(--indigo); background:none; border:0; cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:3px}
.con-bestanden button:hover{color:var(--indigo-900)}