/* HIDDEN MOET HIDDEN ZIJN.
   De browser verbergt een element met het hidden-attribuut door er
   display:none op te zetten - maar elke eigen regel met display:flex of
   display:grid wint daarvan, want die is specifieker. Blokken die verborgen
   HEETEN staan dan gewoon in beeld: het logovoorbeeld in de wizard, de
   zakelijke velden, het mandjescherm. Deze ene regel dekt dat af, ook voor
   alles wat er later bijkomt. */
[hidden]{display:none !important}

/* =====================================================================
   NeonLED configurator.
   Alles zit in een begrensde kaart met witruimte eromheen, niet
   schermvullend. Preview links met vaste verhouding, bediening rechts.
===================================================================== */

:root{
  /* NeonLED Signs: zwart met geel, net als de rest van de site.
     Het origineel van neonled.be was een lichte kaart met magenta. Dat stond
     hier als een tang op een varken: de bezoeker komt van een zwarte pagina
     en kreeg dan een wit blok in het midden.

     --ind is de vulkleur, --ind-op de tekst DAAROP (zwart, want geel met wit
     erop leest niemand), --ind-tekst het geel dat als tekstkleur op zwart mag. */
  --ind:#ffff00;
  --ind-op:#000;
  --ind-tekst:#ffff00;
  --ind-donker:#e6e600;
  --ind-zacht:rgba(255,255,0,.12);
  --fg:#f4f4f5;
  --muted:#a1a1a1;
  --muted-2:#6b6b6b;
  --border:rgba(255,255,255,.12);
  --border-fel:rgba(255,255,0,.38);
  --bg:#000;
  --kaart:#0a0a0a;
  --kaart-2:#111113;
  --doek:#050505;
  --radius:16px;
  --radius-s:10px;
  --schaduw:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* LEESBAAR OP EEN TELEFOON
   Bijna alles in dit bestand staat in rem: 0.72rem hier, 0.83rem daar. Op een
   breed scherm leest dat prima, op een telefoon werd het knijpen - en op een
   telefoon wordt de helft van de borden besteld.

   Een lijst van vijftig losse font-size-regels overschrijven is vragen om er
   eentje te vergeten. In plaats daarvan draaien we aan de wortel: rem rekent
   vanaf de font-size van <html>, dus alles schaalt in een keer mee en de
   verhoudingen blijven precies zoals ze bedoeld waren.

   17px onder 900 breed, 17.5px op een echte telefoon. Meer dan dat en de
   knoppenrijen gaan afbreken. */
@media(max-width:900px){ html{font-size:17.5px} }
@media(max-width:560px){ html{font-size:18.5px} }

body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;
  padding:26px 22px 50px;
}
@media(max-width:560px){ body{padding:16px 13px 44px} }
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:var(--ind)}
h1,h2,h3{margin:0}

.omhulsel{max-width:1320px;margin:0 auto}

/* --------------------------------------------------------- paginakop */
.paginakop{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:18px;
}
.paginakop h1{font-size:1.55rem;letter-spacing:-.035em}
.paginakop p{margin:5px 0 0;color:var(--muted);font-size:.83rem}

/* Twee "tabs", maar het zijn er geen meer: links staat waar je bent
   (Tekst), rechts een gewone link naar /offerte/ voor wie zijn eigen logo
   in neon wil. Daarom span + a in plaats van twee buttons. */
.modus{display:flex;gap:4px;background:var(--kaart-2);border:1px solid var(--border);border-radius:12px;padding:4px}
.modus span,.modus a{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:9px;text-decoration:none;
  font-size:.86rem;font-weight:700;color:var(--muted);
  transition:background .15s,color .15s,box-shadow .15s;
}
.modus svg{width:15px;height:15px;flex:none}
.modus a:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.modus .modusaan{background:var(--kaart);color:var(--ind);box-shadow:0 1px 4px rgba(16,24,40,.12)}

/* -------------------------------------------------------------- raster */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:20px;align-items:start}
@media(max-width:1080px){.cfg{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- doek */
.doek{
  background:var(--doek);border-radius:var(--radius);
  box-shadow:var(--schaduw);overflow:hidden;
  position:sticky;top:22px;
}
/* HET DOEK LOOPT MEE OP EEN SMAL SCHERM
   Op een telefoon staan doek en paneel onder elkaar. Je koos dan een kleur of
   een lettertype terwijl je bord al lang boven je scherm uit gescrold was -
   je zag dus niet wat je aan het doen was, en dat is nu net het hele punt van
   een ontwerptool.

   position:sticky binnen .cfg doet precies wat je wil: het doek plakt
   bovenaan zolang je door de opties scrolt, en laat vanzelf los zodra .cfg
   op is. Daaronder loopt de pagina weer gewoon door. Geen javascript, geen
   scrollluisteraar die op oudere toestellen gaat haperen.

   Het doek wordt daarbij lager gemaakt: op volle hoogte zou hij het halve
   scherm opeten en zie je de opties niet meer waar het om begonnen was. */
@media(max-width:1080px){
  .doek{position:sticky;top:0;z-index:20;border-radius:0 0 var(--radius) var(--radius);
        box-shadow:0 16px 34px -26px rgba(9,5,15,.85)}
}
/* Liggend op een telefoon is er verticaal bijna niets: dan liever geen
   plakkend doek dan een doek waar niets meer onder past. */
@media(max-width:1080px) and (max-height:520px){
  .doek{position:static}
}

.doekbalk{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);
}
.schakels{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sch{display:inline-flex;align-items:center;gap:8px;color:var(--muted-2);font-size:.76rem;font-weight:600;cursor:pointer}
.sch input{
  appearance:none;width:34px;height:19px;border-radius:99px;
  background:rgba(255,255,255,.18);position:relative;transition:background .18s;flex:none;
}
.sch input::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--kaart);transition:transform .18s;
}
.sch input:checked{background:var(--ind)}
.sch input:checked::after{transform:translateX(15px)}

.doekacties{margin-left:auto;display:flex;gap:7px}

/* DE BALK BOVEN HET DOEK OP EEN TELEFOON

   Hier stonden vijf dingen naast elkaar: twee schakelaars, Reset, en drie
   knopjes. Op een smal scherm paste dat niet en brak de rij in tweeen, met
   de drie knopjes rechts op een eigen regel eronder. Dat maakte de balk
   dubbel zo hoog - en sinds het doek meeloopt tijdens het scrollen is die
   hoogte schermruimte die je niet hebt.

   De drie knopjes gaan daarom uit de rij en hangen in de rechterbovenhoek
   van het doek zelf. Ze staan nog op precies dezelfde plek in beeld, alleen
   een paar tellen lager, en de balk is weer een rij van niks. De tip
   ("Klik op een woord...") staat in het midden, dus ze zitten elkaar niet
   in de weg. */
@media(max-width:620px){
  .doekbalk{position:relative;flex-wrap:nowrap;gap:10px;padding:9px 12px}
  .schakels{gap:12px;flex-wrap:nowrap;min-width:0}
  .sch{font-size:.7rem;gap:7px}
  .doekacties{
    position:absolute;top:calc(100% + 9px);right:10px;z-index:6;
    margin-left:0;gap:6px;
  }
  .ico{width:32px;height:32px;background:rgba(12,8,18,.62);backdrop-filter:blur(4px)}
  .ico svg{width:15px;height:15px}
}
.ico{
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:9px;color:var(--muted-2);transition:background .15s,color .15s;
}
.ico:hover{background:rgba(255,255,255,.15);color:var(--fg)}
.ico.aan{background:var(--ind);border-color:var(--ind);color:var(--fg)}
.ico svg{width:16px;height:16px}

.tekst-knop{
  background:rgba(255,255,255,.08);color:var(--muted-2);
  border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:6px 11px;font-size:.72rem;font-weight:700;
}
.tekst-knop:hover{background:rgba(255,255,255,.16);color:var(--fg)}
.tekst-knop.donker{background:var(--kaart-2);color:var(--fg);border-color:var(--border)}
.tekst-knop.donker:hover{background:var(--border);color:var(--fg)}
.tekst-knop.breed{display:block;width:100%;margin-top:12px;padding:11px;background:var(--kaart-2);color:var(--ind);border-color:var(--border);text-align:center;text-decoration:none;box-sizing:border-box}

/* het podium: vaste verhouding, dus nooit schermvullend */
.podium{
  position:relative;width:100%;aspect-ratio:16/10;min-height:300px;
  display:grid;place-items:center;overflow:hidden;
}
/* Op een telefoon plakt het doek bovenaan (zie hierboven). Op volle hoogte
   zou hij dan het halve scherm opeten en zie je de opties niet meer waar
   het om begonnen was. Vandaar een lager doek daar.
   Deze regels staan NA de basisregel en niet bij de rest van het doek: ze
   wegen even zwaar, dus de laatste wint - stonden ze eerder, dan bleef die
   min-height:300px gewoon staan. */
@media(max-width:1080px){
  .podium{aspect-ratio:auto;height:min(34vh,270px);min-height:180px}
}
@media(max-width:600px){
  .podium{aspect-ratio:auto;height:min(32vh,240px);min-height:165px}
}

.achtergrond{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .3s}

.tip{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  background:var(--ind);color:var(--ind-op);border-radius:99px;padding:6px 15px;
  font-size:.73rem;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 24px -10px rgba(255,255,0,.9);transition:opacity .3s;
}
.tip.weg{opacity:0;pointer-events:none}

/* het bord zelf */
.bord{position:relative;z-index:3;display:grid;place-items:center;padding:6px}
.plaat{
  position:absolute;z-index:1;inset:-14px -20px;
  border-radius:3px;pointer-events:none;opacity:0;
  transition:background .2s,border-radius .2s,opacity .2s,inset .2s;
  /* Zo ziet acryl er tegen een donkere muur uit: een duidelijke rand die
     het licht vangt, een lichte vulling, en een glans langs de bovenkant.
     Eerst had ik dit zo subtiel gemaakt dat je de plaat niet meer zag -
     en dan kun je er ook niet tussen kiezen. */
  border:1.5px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -1.5px 0 rgba(255,255,255,.10),
    0 14px 38px -20px rgba(0,0,0,.95);
}
.plaat.zicht{opacity:1}

.neon{position:relative;z-index:2;text-align:center;line-height:1.14;white-space:pre;user-select:none}
.neon .rg{display:block}
.neon .wd{cursor:pointer;border-radius:5px;padding:0 .04em;transition:background .15s}
.neon .wd:hover{background:rgba(255,255,255,.10)}
.neon .wd.gekozen{background:rgba(255,255,255,.18);outline:2px dashed rgba(255,255,255,.5)}

/* maatpijlen */
.maat{position:absolute;z-index:4;color:rgba(255,255,255,.62);font-size:.66rem;font-weight:600;pointer-events:none;transition:opacity .2s}
.maat.uit{opacity:0}
.maat-b{left:0;right:0;bottom:-30px;display:flex;align-items:center;gap:7px}
.maat-b::before,.maat-b::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.4);position:relative}
.maat-b::before{box-shadow:2px -2px 0 -1px rgba(255,255,255,.4),2px 2px 0 -1px rgba(255,255,255,.4)}
.maat-b::after{box-shadow:-2px -2px 0 -1px rgba(255,255,255,.4),-2px 2px 0 -1px rgba(255,255,255,.4)}
.maat-b span{white-space:nowrap}
.maat-h{top:0;bottom:0;left:-38px;width:1px;display:flex;flex-direction:column;align-items:center;gap:7px}
.maat-h::before,.maat-h::after{content:"";flex:1;width:1px;background:rgba(255,255,255,.4)}
.maat-h span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}


.doekonder{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid rgba(255,255,255,.08);
}
.achterlijst{display:flex;gap:7px;flex:1;flex-wrap:wrap}
.achterknop{
  width:42px;height:30px;border-radius:7px;border:2px solid transparent;
  outline:1px solid rgba(255,255,255,.16);outline-offset:-1px;
  background-size:cover;transition:border-color .15s;
}
.achterknop.aan{border-color:var(--ind)}

/* -------------------------------------------------------------- paneel */
.paneel{background:var(--kaart);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:visible}
.paneel>.vak:last-of-type{border-bottom:0}
.paneel>.prijsblok:first-child{border-radius:var(--radius) var(--radius) 0 0}

/* DE PRIJSBALK.

   Hier stond linear-gradient(135deg, var(--ind-zacht), #f6f7ff). Dat komt uit
   het oorspronkelijke ontwerp van offer.neonled.be, en dat was een LICHTE
   pagina: een vleugje kleur dat naar bijna-wit uitloopt. Op ons zwarte paneel
   werd dat een grijswitte veeg over het duurste blok van de pagina - en de
   twee beloftes eronder ("Geen btw erbij", "Verzonden tussen...") staan in
   grijs, dus die waren op dat wit niet meer te lezen.

   Nu: bijna zwart met een gele gloed die vanuit de linkerbovenhoek wegvalt,
   en een gele lijn eronder. Zelfde idee - de balk springt eruit - maar dan in
   de taal van de site, en met tekst die je kunt lezen. */
.prijsblok{
  padding:18px 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,0,.16), rgba(255,255,0,.04) 45%, transparent 72%),
    var(--kaart-2);
  border-bottom:1px solid var(--border-fel);
}
.prijsrij{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
/* Het bedrag is het enige waar de klant echt naar kijkt, dus het krijgt de
   neonbehandeling van de site: geel met een zachte gloed eromheen. */
.prijs-groot{
  font-size:2rem;font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--ind-tekst);text-shadow:0 0 14px rgba(255,255,0,.45),0 0 38px rgba(255,255,0,.18);
}
.prijs-sub{color:var(--muted);font-size:.76rem;margin-top:4px;line-height:1.45}
/* De aanvraagstand: geen bedrag, dus ook geen neongloed die de aandacht naar
   een leeg vak trekt. Wel dezelfde plek en dezelfde hoogte, zodat het paneel
   niet opspringt zodra je van /ontwerpen/ naar de wizard gaat. */
.prijsblok--stil{background:var(--kaart-2)}
.prijs-groot--stil{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--fg);text-shadow:none}
/* DE BELOFTES ONDER DE PRIJS.

   Hier stond .btwvrij: een groen doosje met "geen btw / vrijstelling" dat
   rechts tegen het bedrag aan geplakt zat. Het viel meer op dan de prijs zelf
   en zei te weinig om te begrijpen. Vervangen door twee regels op volle
   breedte, in de rustige kleuren van het paneel - de prijs mag weer het
   opvallendste ding in dit blok zijn. */
.beloftes{margin-top:13px;display:grid;gap:8px}
.belofte{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:10px;padding:8px 11px;
}
.belofte>svg{flex:none;margin-top:2px;color:#4ade80}
.belofte>div{min-width:0}
.belofte b{display:block;font-size:.79rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.belofte span{display:block;color:var(--muted);font-size:.72rem;line-height:1.45;margin-top:1px}
/* Het tweede blokje gaat over tijd, niet over geld: een eigen kleur voorkomt
   dat het als een tweede prijsbelofte gelezen wordt. */
.belofte+.belofte>svg{color:var(--ind)}
.pluis{color:var(--ind);font-size:.74rem;font-weight:700;padding:9px 0 0;text-decoration:underline}
.opbouw{margin-top:9px;border-top:1px solid var(--border-fel);padding-top:9px;font-size:.77rem}
.opbouw .r{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.opbouw .r.tot{border-top:1px solid var(--border-fel);margin-top:5px;padding-top:6px;font-weight:800}
.opbouw .r span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

.vak{padding:20px;border-bottom:1px solid var(--border)}
.vak h2{display:flex;align-items:center;gap:9px;font-size:.94rem;letter-spacing:-.015em;margin-bottom:13px}
.vak h2 i{
  width:21px;height:21px;flex:none;display:grid;place-items:center;
  background:var(--ind);color:var(--ind-op);border-radius:6px;
  font-size:.68rem;font-weight:800;font-style:normal;
}
.telling{color:var(--muted);font-weight:500;font-size:.76rem}
.hint{color:var(--muted);font-size:.73rem;line-height:1.55;margin:9px 0 0}

/* tekstregels */
.regels{display:flex;flex-direction:column;gap:8px}
.regelrij{display:flex;gap:7px;align-items:center}
.regelrij input{
  flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-s);font:inherit;font-size:.9rem;
  /* Deze regel is specifieker dan de algemene veldregel onderaan dit bestand,
     dus zonder deze twee eigenschappen blijft het tekstvak wit. Precies het
     veld waar de klant als eerste in typt. */
  background:var(--kaart-2);color:var(--fg);
}
.regelrij input:focus{outline:none;border-color:var(--ind);box-shadow:0 0 0 3px rgba(255,255,0,.12)}
.regelrij .weg{width:30px;height:30px;flex:none;color:var(--muted-2);border-radius:7px;display:grid;place-items:center;font-size:1.05rem}
.regelrij .weg:hover{background:rgba(255,107,107,.14);color:#ff9b9b}
.regelknoppen{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;flex-wrap:wrap}
.uitlijn{display:inline-flex;gap:3px;background:var(--kaart-2);border-radius:8px;padding:3px}
.uitlijn button{width:32px;height:26px;border-radius:6px;color:var(--muted);font-size:.9rem}
.uitlijn button.aan{background:var(--kaart);color:var(--ind);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.waarschuw{background:rgba(255,169,77,.14);border:1px solid rgba(255,169,77,.45);color:#ffc078;border-radius:9px;padding:9px 11px;font-size:.74rem;line-height:1.5;margin:11px 0 0}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.chip{background:var(--kaart-2);border:1px solid transparent;color:var(--muted);border-radius:99px;padding:5px 11px;font-size:.72rem;font-weight:700}
.chip.aan{background:var(--kaart);border-color:var(--ind);color:var(--ind)}

.fontlijst{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:270px;overflow-y:auto;padding-right:3px}
.fontknop{
  border:1.5px solid var(--border);background:var(--kaart);border-radius:var(--radius-s);
  padding:11px 8px 8px;text-align:center;min-height:70px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;transition:border-color .15s,background .15s;
}
.fontknop:hover{border-color:var(--border)}
.fontknop.aan{border-color:var(--ind);background:var(--ind-zacht)}
.fontknop .vb{font-size:1.45rem;line-height:1.1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fontknop .nm{font-size:.64rem;color:var(--muted);font-weight:700}
.fontknop .waarsch{font-size:.58rem;color:#b45309}

/* kleuren */
.kleuren{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:400px){.kleuren{grid-template-columns:repeat(4,1fr)}}
.kleurknop{
  aspect-ratio:1;border-radius:10px;border:2px solid transparent;
  outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;
  position:relative;transition:transform .12s;
}
.kleurknop:hover{transform:scale(1.07)}
.kleurknop.aan{border-color:var(--ind);box-shadow:0 0 0 3px rgba(255,255,0,.16)}
.kleurknop.aan::after{
  content:"";position:absolute;inset:0;margin:auto;width:9px;height:5px;
  border-left:2.4px solid var(--kaart);border-bottom:2.4px solid var(--kaart);transform:rotate(-45deg) translate(1px,-2px);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55));
}

/* maatschuif */
.schuifblok{background:var(--kaart-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:13px 14px 10px;margin-bottom:12px}
.schuifblok input[type=range]{width:100%;accent-color:var(--ind);height:22px;background:transparent}
.schuifinfo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.78rem;color:var(--muted)}
.schuifinfo b{color:var(--fg);font-size:1.05rem}
.schuifprijs{font-weight:800;color:var(--ind);font-variant-numeric:tabular-nums}

.maten{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.maatknop{border:1.5px solid var(--border);background:var(--kaart);border-radius:9px;padding:8px 6px;font-size:.76rem;font-weight:700;transition:border-color .15s,background .15s}
.maatknop:hover{border-color:var(--border)}
.maatknop.aan{border-color:var(--ind);background:var(--ind-zacht);color:var(--ind)}
.maatinfo{margin-top:12px;background:var(--kaart-2);border:1px solid var(--border);border-radius:var(--radius-s);padding:11px 13px;font-size:.75rem;color:var(--muted);line-height:1.6}
.maatinfo b{color:var(--fg)}

/* achterplaten met tekening */
.platen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plaatknop{
  border:1.5px solid var(--border);background:var(--kaart);border-radius:var(--radius-s);
  padding:8px;text-align:center;transition:border-color .15s,background .15s;
}
.plaatknop:hover{border-color:var(--border)}
.plaatknop.aan{border-color:var(--ind);background:var(--ind-zacht)}
.plaatknop svg{width:100%;height:52px;display:block;border-radius:6px;background:#171b24}
.plaatknop b{display:block;font-size:.73rem;margin-top:6px}
.plaatknop small{display:block;font-size:.66rem;color:var(--muted)}
.plaatknop.aan small{color:var(--ind);font-weight:700}

/* rijen + selects */
.rij{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:.83rem;font-weight:600}
.rij select,.wz-veld select,.wz-veld input,.metcm input{
  padding:9px 11px;border:1px solid var(--border);border-radius:9px;
  font:inherit;font-size:.83rem;background:var(--kaart);color:var(--fg);
}
.rij select{flex:0 1 210px}
.vink{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:.83rem;cursor:pointer;font-weight:600}
.vink input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--ind)}
.vink small{display:block;color:var(--muted);font-size:.71rem;margin-top:2px;font-weight:500}

.inbegrepen{margin-top:15px;background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.32);border-radius:var(--radius-s);padding:11px 13px;font-size:.74rem;color:#8fe0ac;line-height:1.6}
.inbegrepen b{display:block;margin-bottom:2px}
.inbegrepen span b{display:inline}

.marge{background:#111827;color:#e5e7eb}
.marge h2{color:var(--fg)}
.marge h2 i{background:#374151}
.marge .r{display:flex;justify-content:space-between;padding:3px 0;font-size:.79rem}
.marge .r b{font-variant-numeric:tabular-nums}
.marge .goed{color:#4ade80}.marge .slecht{color:#f87171}

.afsluit{padding:20px}
.cta{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ind);color:var(--ind-op);border-radius:12px;padding:14px 18px;
  font-size:.92rem;font-weight:800;box-shadow:0 12px 28px -14px rgba(255,255,0,.9);
  transition:filter .15s,transform .1s;
}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(1px)}
.cta:disabled{background:#e4e7ee;color:#9aa2b1;box-shadow:none;cursor:not-allowed}
.klein{color:var(--muted);font-size:.71rem;text-align:center;margin:10px 0 0;line-height:1.5}

/* ------------------------------------------------------------- wizard */
.wizard{background:var(--kaart);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden}
.wz-kop{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wz-kop .tekst-knop{background:var(--kaart-2);color:var(--fg);border-color:var(--border)}
.stappen{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;flex:1}
.stappen li{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.76rem;font-weight:700;padding:6px 12px;border-radius:99px;background:var(--bg)}
.stappen li b{width:19px;height:19px;display:grid;place-items:center;background:#dfe2ea;color:#6b7280;border-radius:50%;font-size:.65rem}
.stappen li.aan{background:var(--ind-zacht);color:var(--ind)}
.stappen li.aan b{background:var(--ind);color:var(--ind-op)}
.stappen li.klaar b{background:#16a34a;color:var(--fg)}

.wz-body{padding:26px 22px;min-height:340px}
.wz-stap{display:none}
.wz-stap.aan{display:block}
.wz-stap h2{font-size:1.15rem;letter-spacing:-.02em}
.wz-stap h3{font-size:.9rem;margin-top:20px}
.wz-lead{color:var(--muted);font-size:.83rem;margin:6px 0 16px;line-height:1.6;max-width:62ch}

.dropzone{
  border:2px dashed var(--border);border-radius:var(--radius);background:var(--kaart);
  padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.dropzone:hover,.dropzone.over{border-color:var(--ind);background:var(--ind-zacht)}
.dropzone svg{width:34px;height:34px;color:var(--ind);margin-bottom:8px}
.dropzone b{display:block;font-size:.92rem}
.dropzone span{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}

.logovoorbeeld{display:flex;gap:16px;align-items:center;background:var(--kaart-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.logovoorbeeld img{width:96px;height:96px;object-fit:contain;background:var(--doek);border-radius:9px;flex:none}
.logovoorbeeld b{display:block;font-size:.88rem;word-break:break-all}
.logovoorbeeld span{display:block;color:var(--muted);font-size:.74rem;margin:2px 0 8px}
.logovoorbeeld .tekst-knop{background:var(--kaart-2);color:var(--fg);border-color:var(--border)}

.wz-textarea{width:100%;margin-top:12px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-s);font:inherit;font-size:.85rem;resize:vertical}
.wz-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:640px){.wz-raster{grid-template-columns:1fr}}
.wz-veld{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.wz-veld label{font-size:.79rem;font-weight:700}
.wz-veld label small{color:var(--muted);font-weight:500}
.wz-veld input,.wz-veld select,.wz-veld textarea{width:100%}
.metcm{display:flex;align-items:center;gap:7px}
.metcm input{width:130px}

.samenvatting{margin-top:20px;background:var(--kaart-2);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px;font-size:.8rem;line-height:1.7}
.samenvatting b{color:var(--fg)}
.samenvatting .sr{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
.samenvatting .sr b{color:var(--fg);text-align:right}

.wz-voet{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 22px;border-top:1px solid var(--border);background:var(--kaart);flex-wrap:wrap}
.wz-voet .tekst-knop{background:var(--kaart-2);color:var(--fg);border-color:var(--border)}
.wz-voet-rechts{display:flex;align-items:center;gap:14px;margin-left:auto}
.wz-richt{color:var(--muted);font-size:.78rem}
.wz-richt b{color:var(--fg);font-weight:800}
.wz-voet .cta{width:auto;padding:12px 26px}

/* ------------------------------------------------------- verkooppunten */
.punten{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;
}
@media(max-width:900px){.punten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.punten{grid-template-columns:1fr}}
.punt{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--kaart);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--schaduw);
}
.punt-ico{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:var(--ind-zacht);color:var(--ind);border-radius:9px;
}
.punt-ico svg{width:18px;height:18px}
.punt b{display:block;font-size:.83rem;margin-bottom:2px}
.punt span{color:var(--muted);font-size:.75rem;line-height:1.55}

.belregel{text-align:center;color:var(--muted);font-size:.8rem;margin:18px 0 0}

@media(max-width:520px){
  body{padding:16px 12px 40px}
  .fontlijst{grid-template-columns:1fr;max-height:230px}
  .vak,.afsluit,.prijsblok{padding:16px}
  .wz-body,.wz-kop,.wz-voet{padding-left:16px;padding-right:16px}
}

/* =====================================================================
   Leven in het paneel. Alles hieronder is gedrag, geen nieuwe structuur:
   zachte overgangen, een prijs die reageert als hij verandert, en
   secties die openvouwen in plaats van er als een muur bij te staan.
===================================================================== */

/* de prijs blijft in beeld terwijl je scrollt */
.prijsblok{position:sticky;top:0;z-index:6;backdrop-filter:blur(6px)}
.prijs-groot{transition:transform .25s cubic-bezier(.2,.9,.3,1.4),color .25s}
.prijs-groot.beweegt{transform:scale(1.06);text-shadow:0 0 18px rgba(255,255,0,.7),0 0 46px rgba(255,255,0,.3)}

/* vakken komen rustig binnen bij het laden */
.vak{animation:opkomst .45s both}
.vak:nth-of-type(1){animation-delay:.02s}
.vak:nth-of-type(2){animation-delay:.06s}
.vak:nth-of-type(3){animation-delay:.10s}
.vak:nth-of-type(4){animation-delay:.14s}
.vak:nth-of-type(5){animation-delay:.18s}
.vak:nth-of-type(6){animation-delay:.22s}
@keyframes opkomst{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* een kop die je kunt dichtklappen */
.vak h2{cursor:pointer;user-select:none;position:relative;padding-right:22px}
.vak h2::after{
  content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.vak.dicht h2::after{transform:translateY(-30%) rotate(-135deg)}
.vak .vakinhoud{overflow:hidden;transition:max-height .3s ease,opacity .2s}
.vak.dicht .vakinhoud{max-height:0 !important;opacity:0}

/* knoppen reageren */
.fontknop,.maatknop,.plaatknop,.kleurknop,.achterknop,.chip{
  transition:border-color .15s,background .15s,transform .12s,box-shadow .15s;
}
.fontknop:active,.maatknop:active,.plaatknop:active{transform:scale(.97)}
.fontknop.aan,.maatknop.aan,.plaatknop.aan{box-shadow:0 4px 14px -8px rgba(255,255,0,.7)}
.chip:active{transform:scale(.95)}

/* de schuif voelt als een schuif */
.schuifblok{transition:box-shadow .2s,border-color .2s}
.schuifblok:focus-within{border-color:var(--ind);box-shadow:0 0 0 3px rgba(255,255,0,.1)}
.schuifprijs{transition:transform .2s}
.schuifprijs.beweegt{transform:scale(1.08)}

/* eigen lettertype */
.eigenfont{
  display:flex;align-items:center;gap:11px;width:100%;margin-top:9px;
  border:1.5px dashed var(--border);border-radius:var(--radius-s);
  background:var(--kaart);padding:11px 13px;text-align:left;
  transition:border-color .15s,background .15s;
}
.eigenfont:hover{border-color:var(--ind);background:var(--ind-zacht)}
.eigenfont svg{width:19px;height:19px;flex:none;color:var(--ind)}
.eigenfont b{display:block;font-size:.79rem}
.eigenfont small{display:block;color:var(--muted);font-size:.69rem;margin-top:1px}

/* wat rustiger ademen tussen de blokken */
.vak{padding:22px 20px}
.vak+.vak{border-top:1px solid var(--border)}
.vak h2{margin-bottom:15px}
.kleuren{gap:9px}
.fontlijst{gap:8px}

/* wie bewegingen liever niet heeft, krijgt ze niet */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* maatknoppen met lettergrenzen */
.maten{grid-template-columns:1fr 1fr}
.maatknop{text-align:left;padding:9px 11px}
.maatknop b{display:block;font-size:.84rem}
.maatknop small{display:block;color:var(--muted);font-size:.66rem;margin-top:2px;font-weight:500}
.maatknop.aan small{color:var(--ind)}
.maatknop.kanniet{opacity:.42;cursor:not-allowed;background:var(--kaart)}
.maatknop.kanniet:hover{border-color:var(--border)}
.schuifinfo small{color:var(--muted);font-weight:500;font-size:.72rem}
.maatmelding{
  margin:11px 0 0;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;
  border-radius:9px;padding:9px 11px;font-size:.74rem;line-height:1.5;
}

/* =====================================================================
   Winkelmandje. Het mandje zelf is maar een tussenstap: afrekenen maakt
   er een gewone offerte van en stuurt je naar de bestaande checkout.
===================================================================== */
.mandjeknop{
  display:flex;align-items:center;gap:8px;
  background:var(--kaart);border:1.5px solid var(--border);border-radius:12px;
  padding:9px 14px;font-size:.83rem;font-weight:700;color:var(--fg);
  box-shadow:0 1px 3px rgba(16,24,40,.06);transition:border-color .15s,box-shadow .15s;
}
.mandjeknop:hover{border-color:var(--ind)}
.mandjeknop.vol{border-color:var(--ind);color:var(--ind)}
.mandjeknop svg{width:16px;height:16px}
.mandjeknop b{
  min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  background:var(--ind);color:var(--ind-op);border-radius:99px;font-size:.68rem;
}

.mandje-scherm{position:fixed;inset:0;z-index:60}
.mandje-achter{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);animation:vervaag .2s both}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.mandje{
  position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);
  background:var(--kaart);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);animation:schuif .25s both;
}
@keyframes schuif{from{transform:translateX(100%)}to{transform:none}}
.mandje-kop{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.mandje-kop h2{font-size:1.05rem}
.mandje-sluit{font-size:1.5rem;line-height:1;color:var(--muted);width:32px;height:32px;border-radius:8px}
.mandje-sluit:hover{background:var(--kaart-2);color:var(--fg)}

.mandje-lijst{flex:1;overflow-y:auto;padding:14px 20px}
.mandje-leeg{color:var(--muted);font-size:.85rem;text-align:center;padding:40px 10px;line-height:1.6}
.mandje-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.mandje-item:last-child{border-bottom:0}
.mandje-item img,.mandje-item .geenbeeld{
  width:96px;height:64px;object-fit:cover;border-radius:9px;flex:none;background:var(--doek);
}
.mi-tekst{flex:1;min-width:0}
.mi-tekst b{display:block;font-size:.86rem;margin-bottom:2px;word-break:break-word}
.mi-tekst span{display:block;color:var(--muted);font-size:.73rem;line-height:1.45}
.mi-onder{display:flex;align-items:center;gap:12px;margin-top:8px}
.mi-aantal{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.mi-aantal button{width:26px;height:26px;font-size:.9rem;color:var(--muted)}
.mi-aantal button:hover{background:var(--kaart-2);color:var(--fg)}
.mi-aantal b{min-width:22px;text-align:center;font-size:.78rem}
.mi-weg{font-size:.72rem;color:var(--muted);text-decoration:underline}
.mi-weg:hover{color:#dc2626}
.mi-prijs{font-weight:800;font-size:.86rem;white-space:nowrap;font-variant-numeric:tabular-nums}

.mandje-voet{padding:16px 20px 20px;border-top:1px solid var(--border);background:var(--kaart)}
.mandje-rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:.85rem}
.mandje-rij.klein{font-size:.76rem;color:var(--muted)}
.mandje-rij.tot{border-top:1px solid var(--border);margin-top:8px;padding-top:9px;font-size:1rem;font-weight:800}
.mandje-voet .cta{margin-top:12px}

.cta2{
  width:100%;margin-top:9px;padding:11px;border-radius:11px;
  background:var(--kaart-2);color:var(--fg);font-size:.85rem;font-weight:700;
  border:1px solid var(--border);transition:background .15s;
}
.cta2:hover{background:var(--border)}
.cta2:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:560px){
  .mandjeknop span{display:none}
  .mandje-item img,.mandje-item .geenbeeld{width:72px;height:52px}
}

/* eigen opties uit het adminpaneel */
.eigengroep{margin-top:16px}
.eigengroep h3{font-size:.83rem;margin-bottom:8px}
.eigenkaarten{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.eigenrijen{display:flex;flex-direction:column;gap:6px}
.eigenoptie{
  border:1.5px solid var(--border);background:var(--kaart);border-radius:var(--radius-s);
  padding:10px;text-align:left;transition:border-color .15s,background .15s;
}
.eigenoptie:hover{border-color:var(--border)}
.eigenoptie.aan{border-color:var(--ind);background:var(--ind-zacht)}
.eigenoptie img{width:100%;height:64px;object-fit:cover;border-radius:7px;margin-bottom:7px;display:block}
.eigenoptie b{display:block;font-size:.8rem}
.eigenoptie small{display:block;font-size:.72rem;color:var(--muted);font-weight:700;margin-top:1px}
.eigenoptie.aan small{color:var(--ind)}
.eigenoptie .eo-uitleg{display:block;font-size:.68rem;color:var(--muted);line-height:1.45;margin-top:4px;font-weight:400}

/* =======================================================================
   VERKOOPBALK EN DE DONKERE BAND ERONDER
   =======================================================================
   De pagina hield op na de ontwerptool: je zag een prijs en daarna wit. Wat
   er daarna kwam waren negen bijna identieke witte kaartjes, en dat leest als
   een willekeurige webshop in plaats van als een neonatelier.

   Nu: één donkere band met drie blokken die er elk anders uitzien. Het doek
   waarin de klant zijn bord ziet is al donker, dus de pagina loopt gewoon
   door in dezelfde sfeer.
   ======================================================================= */

/* --------------------------------------------------- balk bovenaan */
.verkoopbalk{
  position:sticky;top:0;z-index:60;
  background:#0d0d00;color:var(--fg);overflow:hidden;
  border-bottom:1px solid rgba(255,255,0,.28);
  /* De body heeft rondom een marge (26px boven, 22px opzij). Zonder deze
     regel begon de balk dus 26 pixels lager dan de bovenkant van het scherm
     en liep hij aan weerszijden 22 pixels tekort: een witte rand rondom een
     balk die juist van rand tot rand hoort te lopen. Hier maken we die marge
     ongedaan, zodat hij de volle breedte pakt en meteen bovenaan begint. */
  margin:-26px calc(50% - 50vw) 22px;
  width:100vw;
}
@media(max-width:640px){
  /* Daar is de marge van de body kleiner. */
  .verkoopbalk{margin:-16px calc(50% - 50vw) 16px}
}
/* Ingesloten in Shopify plakt sticky aan het kadertje in plaats van aan het
   scherm; daar staat hij dus gewoon bovenaan mee te scrollen. */
.verkoopbalk--embed{position:static}
.verkoopbalk::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,0,.16) 50%,transparent 62%);
  background-size:240% 100%;animation:vbGlans 9s linear infinite;
}
@keyframes vbGlans{from{background-position:130% 0}to{background-position:-130% 0}}
.vb-in{position:relative;max-width:1240px;margin:0 auto;padding:0 18px;display:grid}
.vb-zin{
  grid-area:1/1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 0;font-size:.83rem;line-height:1.35;
  opacity:0;transform:translateY(5px);transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.vb-zin.aan{opacity:1;transform:none}
.vb-zin b{font-weight:700;letter-spacing:-.01em}
.vb-sub{color:#c9b3d6;font-weight:400}
.vb-ico{display:inline-flex;flex:none;color:var(--ind)}
.vb-ico svg{width:15px;height:15px}
@media(max-width:640px){
  .vb-sub{display:none}
  .vb-zin{font-size:.76rem;padding:8px 0}
  .vb-zin b{line-height:1.3}
}
/* De balk blijft bovenaan plakken, dus een kop die daar net onder eindigt zou
   er half achter verdwijnen als je ergens naartoe springt. */
.nachtband .blokkop,.rail,.troeven,.vragen{scroll-margin-top:64px}

/* ------------------------------------------------------ de band zelf */
.nachtband{
  /* Loopt van rand tot rand, ook al staat de omhulsel in een kolom. */
  margin:56px calc(50% - 50vw) 0;padding:0 calc(50vw - 50%);
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(255,255,0,.13), transparent 60%),
    radial-gradient(70% 50% at 90% 100%, rgba(120,60,255,.12), transparent 60%),
    #100819;
  /* Stond op var(--kaart-2). Dat is #111113: een ACHTERGROND-kleur, geen
     tekstkleur. Overblijfsel van een ronde zoek-en-vervang toen de lichte
     huisstijl van offer.neonled.be naar zwart-geel ging. Gevolg: deze hele
     band - de drie stappen, de troeven en de vragen eronder - stond in
     bijna-zwart op donker en was letterlijk niet te lezen. */
  color:var(--fg);
}
.nachtband-in{max-width:1180px;margin:0 auto;padding:64px 0 56px}
.nachtband .blokkop{
  font-size:clamp(1.3rem,2.6vw,1.75rem);letter-spacing:-.025em;
  margin:0 0 26px;color:var(--fg);font-weight:800;
}

/* Alles binnen de band komt rustig in beeld. Geen scroll-luisteraar: de
   browser houdt zelf bij wanneer iets zichtbaar wordt. */
.onthul{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.onthul.in{opacity:1;transform:none}

/* ------------------------------------------- stappen: een rail */
.rail-in{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
}
.rail-stap{
  position:relative;padding:0 26px 6px 0;
  transition-delay:calc(var(--i) * 90ms);
}
.rail-stap + .rail-stap{padding-left:26px;border-left:1px solid rgba(255,255,255,.09)}
.rail-cijfer{
  display:block;font-size:2.6rem;line-height:1;font-weight:800;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,0,.55);
  margin-bottom:10px;letter-spacing:-.04em;
}
.rail-stap b{display:block;font-size:1.02rem;letter-spacing:-.015em;margin-bottom:6px;color:var(--fg)}
.rail-stap p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.65;max-width:34ch}
/* Op een telefoon staan de drie stappen onder elkaar. Ze stonden dan links
   uitgelijnd tegen de rand aan, terwijl de kop erboven en de knop eronder
   wel in het midden staan - dat leest als een kolom die scheef hangt.
   Nu staat alles gecentreerd, met de tekst in een leesbare kolombreedte in
   het midden in plaats van over de volle breedte. */
@media(max-width:820px){
  .rail-in{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center}
  .rail-stap,.rail-stap + .rail-stap{padding:0;border-left:0;text-align:center;max-width:38ch}
  .rail-stap + .rail-stap{border-top:1px solid rgba(255,255,255,.09);padding-top:22px}
  .rail-stap p{max-width:none;margin-inline:auto}
  .rail-cijfer{font-size:3rem}
}

/* --------------------------------- troeven: één vlak plus vijf regels */
.troeven{
  margin-top:52px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px;
  align-items:stretch;   /* het vlak links loopt mee met de lijst rechts, anders gaapt er een gat */
}
@media(max-width:900px){.troeven{grid-template-columns:minmax(0,1fr)}}
.troef-groot{
  display:flex;flex-direction:column;justify-content:center;
  border-radius:20px;padding:30px 28px;
  background:linear-gradient(160deg,rgba(255,255,0,.16),rgba(255,255,0,.04) 55%,transparent);
  border:1px solid rgba(255,255,0,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.troef-groot b{display:block;font-size:1.25rem;letter-spacing:-.02em;margin:14px 0 8px;color:var(--fg)}
.troef-groot p{margin:0;color:#d6c6e0;font-size:.92rem;line-height:1.65}
.troef-ico{display:inline-flex;color:var(--ind)}
.troef-ico svg{width:26px;height:26px}
.troef-ico.klein svg{width:18px;height:18px}
.troef-lijst{list-style:none;margin:0;padding:0}
.troef-lijst li{
  display:flex;gap:14px;align-items:flex-start;padding:15px 2px;
  border-top:1px solid rgba(255,255,255,.09);
}
.troef-lijst li:first-child{border-top:0;padding-top:2px}
.troef-lijst .troef-ico{margin-top:2px;flex:none}
.troef-lijst b{display:block;font-size:.94rem;color:var(--fg);margin-bottom:3px;letter-spacing:-.01em}
.troef-lijst span{display:block;color:var(--muted);font-size:.85rem;line-height:1.6}

/* --------------------------------------------------------- vragen */
/* Kop links, vragen rechts. Vroeger stond de lijst in een smalle kolom met
   een halve pagina leegte ernaast; zo vult hij de breedte zonder dat de
   regels onleesbaar lang worden. */
.vragen{
  margin-top:60px;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:26px 40px;
  align-items:start;
}
.vragen .blokkop{margin:0;position:sticky;top:78px}
@media(max-width:900px){
  .vragen{grid-template-columns:minmax(0,1fr)}
  .vragen .blokkop{position:static;margin-bottom:18px}
}
.vraaglijst{border-top:1px solid rgba(255,255,255,.11)}
.vraag{border-bottom:1px solid rgba(255,255,255,.11)}
.vraag summary{
  cursor:pointer;list-style:none;position:relative;
  padding:17px 44px 17px 0;font-weight:600;font-size:1rem;color:var(--fg);
  transition:color .16s ease;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--ind)}
/* Een plusje dat een minnetje wordt. Rustiger dan een pijl die ronddraait. */
.vraag summary::before,
.vraag summary::after{
  content:"";position:absolute;right:6px;top:50%;background:var(--ind);
  transition:transform .22s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
.vraag summary::before{width:13px;height:1.5px;transform:translateY(-50%)}
.vraag summary::after{width:1.5px;height:13px;right:11.75px;transform:translateY(-50%)}
.vraag[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.vraag[open] summary{color:var(--fg)}
.vraag p{margin:0;padding:0 40px 20px 0;color:var(--muted);font-size:.9rem;line-height:1.7;max-width:62ch}

.belregel{
  margin:40px 0 0;text-align:center;color:var(--muted);font-size:.88rem;
}
.belregel a{color:var(--ind);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,140,232,.4)}
.belregel a:hover{color:var(--fg);border-bottom-color:var(--fg)}

@media(prefers-reduced-motion:reduce){
  .verkoopbalk::after{animation:none}
  .vb-zin,.onthul,.vraag summary::before,.vraag summary::after{transition:none}
  .onthul{opacity:1;transform:none}
}

/* ------------------------------------------------------------ taalkiezer */
/* Vier pillen in één spoor. Op een breed scherm staat de taalnaam erbij; die
   schuift open zodra je er met de muis overheen gaat of hem met het
   toetsenbord bereikt, zodat de knop klein blijft maar wel duidelijk. */
.taalkiezer{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--kaart);border:1px solid var(--border);
  border-radius:999px;padding:3px;
}
.taalpil{
  display:inline-flex;align-items:center;gap:0;
  padding:6px 10px;border-radius:999px;text-decoration:none;
  font:700 .76rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;
  color:var(--muted);white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
/* Het vlaggetje. Vaste maat in px en niet in em: een vlag die meeschaalt met
   de letters wordt op de actieve pil net iets groter dan op de rest, en dan
   staat de hele rij te wiebelen. Het randje eromheen is nodig voor de
   Nederlandse en de Duitse vlag: die hebben een witte respectievelijk gele
   baan die anders wegvalt tegen een lichte achtergrond. */
.taalpil .vlag{
  width:17px;height:12px;border-radius:2px;margin-right:7px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);display:block;
}
.taalpil.aan .vlag{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.taalpil span{
  max-width:0;overflow:hidden;opacity:0;font-weight:600;letter-spacing:0;
  transition:max-width .22s cubic-bezier(.16,1,.3,1), opacity .18s ease, margin .22s ease;
}
/* Stond op #f4f5fa met donkerblauwe letters: het lichte ontwerp van
   offer.neonled.be. Op onze zwarte balk was dat een wit blokje. */
.taalpil:hover{background:var(--kaart-2);color:var(--fg)}
.taalpil:hover span,.taalpil:focus-visible span{max-width:98px;opacity:1;margin-left:7px}
/* De actieve pil is GEEL. Daar hoort zwarte tekst op, niet var(--fg) -
   dat is bijna wit, en wit op geel leest niemand. Dit is precies de
   reden dat er naast --ind ook een --ind-op bestaat: de kleur die je
   OP het geel zet. */
.taalpil.aan{
  background:var(--ind);color:var(--ind-op);
  box-shadow:0 6px 18px -10px rgba(255,255,0,.95);
}
.taalpil.aan:hover{background:var(--ind);color:var(--ind-op)}
.taalpil:focus-visible{outline:2px solid var(--ind);outline-offset:2px}
@media(max-width:560px){
  .taalpil{padding:6px 9px;font-size:.72rem}
  .taalpil:hover span,.taalpil:focus-visible span{max-width:0;opacity:0;margin-left:0}
}
@media(prefers-reduced-motion:reduce){.taalpil,.taalpil span{transition:none}}

/* =======================================================================
   USP-SLIDER
   =======================================================================
   Acht troeven die eindeloos voorbijschuiven, meteen onder de kop. Vaste rij
   kon niet: acht kaarten naast elkaar past niet op een scherm, en een rij van
   drie met pijltjes ernaast klikt niemand aan. Zo komt alles vanzelf voorbij
   terwijl je klant zit te ontwerpen.

   De truc: twee keer dezelfde rij achter elkaar. Op het moment dat de eerste
   rij helemaal weggeschoven is, staat de tweede precies waar de eerste begon,
   en springt de animatie terug zonder dat je iets ziet.
   ======================================================================= */
.uspband{
  margin:0 calc(50% - 50vw) 22px;width:100vw;overflow:hidden;
  /* Uitvloeiend aan beide kanten: kaarten die halverwege afgesneden worden
     zien er kapot uit, kaarten die vervagen zien er bedoeld uit. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.uspspoor{display:flex;width:max-content;animation:uspLoop 46s linear infinite}
.uspband:hover .uspspoor{animation-play-state:paused}   /* even stilzetten om te lezen */
@keyframes uspLoop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.uspgroep{display:flex;gap:12px;padding-right:12px}
.uspkaart{
  flex:none;width:246px;border-radius:14px;padding:15px 16px;
  border:1px solid var(--border);background:var(--kaart);
  display:flex;flex-direction:column;gap:3px;
}
.uspkaart b{font-size:.88rem;letter-spacing:-.012em;line-height:1.3}
.uspkaart span{color:var(--muted,#64748b);font-size:.78rem;line-height:1.5}
.uspico{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.uspico svg{width:17px;height:17px}
/* Vier tinten die om de beurt terugkomen, zodat het spoor kleur heeft zonder
   dat het een snoepwinkel wordt. */
.uspkaart.k0 .uspico{background:#ffe9fb;color:var(--ind)}
.uspkaart.k1 .uspico{background:#e7edff;color:#4338ca}
.uspkaart.k2 .uspico{background:#e9f9f0;color:#15803d}
.uspkaart.k3 .uspico{background:rgba(255,255,0,.14);color:var(--ind-tekst)}
/* Het icoon leeft: langzaam rond, en bij stilstand net iets groter. */
.uspkaart .uspico svg{animation:uspDraai 9s linear infinite;transform-origin:50% 50%}
.uspkaart.k1 .uspico svg{animation-duration:13s;animation-direction:reverse}
.uspkaart.k2 .uspico svg{animation-duration:17s}
.uspkaart.k3 .uspico svg{animation-duration:11s;animation-direction:reverse}
@keyframes uspDraai{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:640px){
  .uspband{margin:0 calc(50% - 50vw) 16px}
  .uspkaart{width:216px;padding:13px 14px}
}
@media(prefers-reduced-motion:reduce){
  .uspspoor{animation:none;flex-wrap:nowrap;overflow-x:auto}
  .uspkaart .uspico svg{animation:none}
}

/* De blokken "Zij kozen voor neon" en "Ons werk in actie" stonden hier eerst
   met hun eigen opmaak, in de donkere band. Ze zijn verhuisd naar
   includes/secties.php, waar ze wit met roze accenten staan en waar
   /offerte/ ze ook uit haalt - één bron voor allebei de pagina's. */


/* --------------------------------------------------- invulvelden
   Deze stonden op de standaard van de browser: een wit vlak met een blauwe
   rand, midden in een zwarte kaart. Op een telefoon zag je daardoor niet eens
   dat het veld al gevuld was. Eén regel voor alles waar een klant in typt. */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=url],select,textarea{
  background:var(--kaart-2);
  border:1px solid var(--border);
  color:var(--fg);
  border-radius:var(--radius-s);
  font:inherit;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--ind);box-shadow:0 0 0 3px rgba(255,255,0,.18);
}
/* Een bestandskiezer tekent zijn eigen knop; die volgt de tekstkleur niet. */
input[type=file]{color:var(--muted)}