/* Droppie materiaalchecker, huisstijl.
   Bron: C:\Users\A\dev\droppie-brandkit\src\tokens.json, plus de live pagina /nl/textiel als voorbeeld.
   Wat daar staat en hier is overgenomen:
     - kleurPAREN, niet losse kleuren: zalm+oranje is de basis, lichtpaars+petrol het tweede paar
     - de welles-kaart is GEVULD, de nietes-kaart is OMLIJND. Dat is het patroon van de stroompagina's
     - het geheel staat in een zalm vlak met grote ronde hoeken, zoals de secties op de site
     - koppen in Jt Gilboys, geen caps, alleen de letter O mag een hoofdletter zijn
     - vormen: ronde rechthoek, ruime radius, de druppelrichting uit het brandbook

   Kleur is nergens de enige drager, want Jack is kleurenblind. Elk antwoord verschilt op DRIE dingen:
   het woord (welles / niet hier / nietes), de vulling (gevuld, wit met streepjesrand, wit met
   dunne rand) en de kleur. Oranje tekst haalt op licht nooit genoeg contrast, dus bedragen en
   koppen staan in inkt of donker petrol; oranje is vlak- en accentkleur.

   De merkfonts worden hieronder als @font-face gedeclareerd, wijzend naar Droppie's eigen CDN.
   Niet ingesloten en niet gekopieerd, alleen verwezen. Zie het blok direct hieronder. */

/* De merkfonts komen van Droppie's EIGEN Webflow-CDN, dezelfde bestanden die godroppie.com al
   laadt. Er wordt dus niets verspreid en niets ingesloten: de widget verwijst naar het bestand dat
   de site zelf al publiek serveert. Beide URL's geven Access-Control-Allow-Origin: * (gecontroleerd
   13-08-2026), dus cross-origin laden mag. Op de Webflow-pagina zelf is dit een no-op, want daar
   staat het font al in de cache onder exact dezelfde URL. */
@font-face {
  font-family: Jtgilboys;
  src: url(https://cdn.prod.website-files.com/6613ae3a53cc4348eadb6d0e/661fa92789ad0b21eb71239d_JtGilboys-Regular.otf) format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hankengrotesk Variablefont Wght";
  src: url(https://cdn.prod.website-files.com/6613ae3a53cc4348eadb6d0e/661faa5f815ed95291da84af_HankenGrotesk-VariableFont_wght.ttf) format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

.dc {
  --dc-oranje: #ff6e41;
  --dc-petrol: #007887;
  --dc-donker: #00343b;
  --dc-zalm: #faebe1;
  --dc-lichtpaars: #e6e1ff;
  --dc-lichtblauw: #d2e6ff;
  --dc-wit: #fffaf6;
  --dc-inkt: #14100e;
  --dc-grijs: #5b524b;
  --dc-dof: #8a7f76;
  --dc-paars: #8773aa;
  --dc-rood: #c4432e;
  /* Twee kleuren die NIET in de brandkit staan, toegevoegd op 17-09-2026 voor punt 4 van de punchlist
     (verzoek van de designkant, akkoord Jack). Groen voor "hier kun je droppen" (chips en het vinkje),
     blauw voor de stip van een stroom zonder eigen brandbookkleur. De brandkit heeft alleen olijf
     a59b5a als "groen" en dat leest als bruin naast oranje. Contrast groen met witte tekst 5.32
     (rood is 5.01, petrol 5.20). Het blauw was eerst 3366cc (5.37); op 18-09-2026 op verzoek van de
     designkant het LICHTBLAUW uit de brandkit geworden, --dc-lichtblauw d2e6ff, dat hier al stond.
     Dat is een decoratieve stip naast de naam en geen tekst: contrast op de witte kaart 1.20, dus
     zichtbaar als kleurvlek maar niet als drager. De status staat toch al in woord en teken.
     KLEURENBLINDNOOT: groen (ja-chips) naast rood (nee-chips) is het paar dat Jacks regel normaal
     uitsluit; hij heeft dit op 17-09-2026 bewust zo gevraagd. Het vinkje en het kruisje in de chips
     zijn de tweede drager, dus de kleur staat er nooit alleen. Verander de tekens dus niet. */
  --dc-groen: #1f7a4d;
  --dc-lijn: rgba(20, 16, 14, .14);

  --dc-kop: Jtgilboys, "Jt Gilboys", "Hankengrotesk Variablefont Wght", ui-sans-serif, system-ui, sans-serif;
  font-family: "Hankengrotesk Variablefont Wght", "Hanken Grotesk", "HK Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--dc-inkt);
  /* Deze drie staan er omdat ze anders van de PAGINA komen. De gepubliceerde CSS van godroppie.com
     zet body{font-size:14px;line-height:20px}, en staat de Embed in een gecentreerde sectie dan
     centreert zonder text-align de hele widget mee: namen, teksten, alles. font-size hoort erbij,
     want line-height 1.5 rekent vanaf de font-size en die verschilde 14 tegen 16 px.
     Zonder deze drie ziet de widget op de Webflow-pagina er anders uit dan in de preview.
     Gemeten 14-08-2026 tegen godroppie-com.webflow.shared.9271df503.min.css. */
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  /* Een woord dat breder is dan zijn regel breekt af in plaats van uit het blok te lopen. Gemeten
     15-09-2026 met een geplakte zoekterm van vijfduizend tekens: de melding werd 40,554 px breed en de
     hele pagina scrolde horizontaal. word-break is de terugval voor iOS 15.0 tot 15.3, dat
     overflow-wrap: anywhere nog niet kent. Raakt gewone tekst niet: die past. */
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--dc-zalm);
  /* GEEN ronde hoeken meer, keuze van Jack 15-09-2026, op verzoek van het tech team dat de widget in
     de app inbouwt: "zou jij die rondingen er nog eruit kunnen halen". Stond op 32px (24px onder
     480px), het patroon van de zalm secties op de stroompagina's; dat patroon geldt dus niet meer
     voor dit blok. De kaarten, tegels en pillen BINNEN de widget houden hun eigen radius, alleen het
     omhullende vlak is recht. Daarmee sluit het ook op de website aan op een sectie erboven of
     eronder, want de achtergrond liep al over de volle breedte (afspraak met Jelle, 17-08-2026).
     De regel in .dc-app hieronder is daarmee overbodig geworden, maar blijft staan: wie de radius
     hier ooit terugzet, moet hem in de app niet stil terugkrijgen. */
  border-radius: 0;
  /* De ACHTERGROND loopt over de volle breedte, de INHOUD blijft op de contentbreedte van de site
     en lijnt dus uit met de rest van de pagina. Afspraak met Jelle, 17-08-2026.
     Dat gebeurt met zijpadding in plaats van een extra wikkel in de HTML: max() houdt op smalle
     schermen gewoon de normale padding aan, en duwt de inhoud op brede schermen naar het midden.
     Zet de embed dus in een sectie over de VOLLE breedte; de widget lijnt zichzelf uit. */
  --dc-content: 1180px;
  --dc-zij: 28px;
  padding: 30px 0 26px;
  padding-left: max(var(--dc-zij), calc((100% - var(--dc-content)) / 2));
  padding-right: max(var(--dc-zij), calc((100% - var(--dc-content)) / 2));
  width: 100%;
  max-width: none;
}
/* .dc ZELF moet er ook in: met width 100% kwam de padding er anders bovenop en liep het blok
   36px buiten zijn container. Gemeten op 13-08-2026. */
.dc, .dc *, .dc *::before, .dc *::after { box-sizing: border-box; }

.dc-top { margin: 0 0 26px; }
.dc-toprij { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.dc-logo { display: block; width: 124px; height: auto; order: 2; }
.dc-taal { order: 1; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--dc-wit); border: 1.5px solid var(--dc-lijn); border-radius: 100px;
  padding: 7px 16px; color: var(--dc-inkt); }
.dc-taal:hover { border-color: var(--dc-oranje); background: var(--dc-oranje); }
.dc-titel { font-family: var(--dc-kop); font-size: 34px; line-height: 1.1; margin: 0 0 8px;
  font-weight: 400; color: var(--dc-inkt); text-wrap: balance; }
.dc-sub { font-size: 16px; line-height: 1.5; margin: 0; color: var(--dc-grijs); max-width: 60ch; text-wrap: pretty; }
/* Beta-label rechtsboven (Jack, 15-09-2026). Wit met een petrol rand en inkt-tekst, zodat het op geen
   van de drie antwoordbadges lijkt; het woord is de drager, plus een regel uitleg eronder.
   wrap-reverse zet het label bij plaatsgebrek BOVEN de titel in plaats van eronder, en margin-left
   auto houdt het rechts. Op 375px staat het dus alleen op de eerste regel, rechts, en de titel eronder. */
.dc-titelrij { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; justify-content: space-between;
  gap: 10px 16px; margin: 0 0 8px; }
.dc-titelrij .dc-titel { flex: 1 1 280px; min-width: 0; margin: 0; }
.dc-beta { flex: none; margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dc-beta-pil { font-family: var(--dc-kop); font-size: 14px; line-height: 1.3; padding: 5px 14px; border-radius: 100px;
  background: var(--dc-wit); border: 1.5px solid var(--dc-petrol); color: var(--dc-inkt); }
.dc-beta-uitleg { font-size: 12px; line-height: 1.3; color: var(--dc-grijs); margin-top: 4px; }

.dc-bal { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 24px; }
.dc-veld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* font-weight expliciet: de gepubliceerde CSS van godroppie.com heeft label{font-weight:700}, en
   Jt Gilboys heeft geen bold. Zonder deze regel wordt het faux bold op de Webflow-pagina. */
.dc-lab { font-family: var(--dc-kop); font-size: 20px; line-height: 1.15; margin: 0; color: var(--dc-inkt); font-weight: 400; }
.dc-in, .dc-sel {
  width: 100%; font: inherit; font-size: 16px; padding: 15px 20px;
  border: 1.5px solid transparent; border-radius: 100px;
  background: var(--dc-wit); color: var(--dc-inkt);
}
/* Was --dc-dof (3.77 op wit, onder de norm). --dc-grijs haalt 7.36. */
.dc-in::placeholder { color: var(--dc-grijs); }
/* Safari tekent een type=search-veld als native "searchfield" en negeert dan padding, rand en
   ronding; het veld zou daar een klein systeemvakje zijn in plaats van de pil van 16px/15px/20px.
   textfield is de reset die normalize.css ook gebruikt: het veld wordt weer een gewoon tekstveld dat
   zich laat stylen, en behoudt zijn rol als zoekveld. Niet gemeten op een echte Safari (er is er hier
   geen), wel de standaardreparatie voor precies dit. Robuustheidsreview 15-09-2026. */
.dc-in { -webkit-appearance: textfield; appearance: textfield; }
.dc-in::-webkit-search-decoration { -webkit-appearance: none; }
/* -webkit-appearance ERBIJ: kaal `appearance` bestaat op iOS pas sinds 15.4, en zonder de prefix
   tekent iOS 15.0-15.3 zijn eigen pijl naast de twee gradient-driehoekjes hieronder.
   GEEN font-size-verkleining meer: de select erft de 16px van hierboven. Op 15px zoomt iOS bij
   focus de HELE pagina in en zoomt niet terug, en dat gold ook op de website; de app-modus had de
   reparatie al, de Webflow-bezoeker op een iPhone nog niet. */
.dc-sel { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--dc-grijs) 50%), linear-gradient(135deg, var(--dc-grijs) 50%, transparent 50%);
  background-position: right 22px center, right 17px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.dc-in:hover, .dc-sel:hover { border-color: var(--dc-oranje); }
.dc-in:focus, .dc-sel:focus { outline: 3px solid var(--dc-petrol); outline-offset: 2px; border-color: var(--dc-petrol); }

/* Focusring voor alle knoppen, in twee regels in plaats van :focus-visible alleen. Oude engines
   (iOS 15.0-15.3, een niet-bijgewerkte WebView) kennen :focus-visible niet en hadden dan GEEN
   enkele ring; die matchen nu de eerste regel en negeren de tweede (onbekende selector in :not()
   maakt daar de hele regel ongeldig), dus ouderwets een ring bij elke klik. Moderne engines krijgen
   met de tweede regel exact het oude gedrag: alleen een ring bij toetsenbordfocus. */
.dc-taal:focus, button.dc-badge:focus, .dc-wchip:focus, .dc-cat:focus, .dc-terugknop:focus, .dc-meerknop:focus,
.dc-retry:focus { outline: 3px solid var(--dc-petrol); outline-offset: 2px; }
.dc-taal:focus:not(:focus-visible), button.dc-badge:focus:not(:focus-visible),
.dc-wchip:focus:not(:focus-visible), .dc-cat:focus:not(:focus-visible),
.dc-terugknop:focus:not(:focus-visible), .dc-meerknop:focus:not(:focus-visible),
.dc-retry:focus:not(:focus-visible) { outline: none; }

.dc-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dc-kaart { border-radius: 24px; padding: 18px 22px; }
/* De kaart sinds 17-09-2026 (punchlist, punt 1): in de rij staat rechts van de naam alleen nog de
   PRIJS als label. De knop die de locatielijst opent staat onderaan de kaart (zie .dc-badge). */
.dc-rij { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: baseline; justify-content: space-between; }
.dc-naam { font-size: 18px; font-weight: 500; line-height: 1.3; }
/* Prijs als label: displayfont op zalm, geen rand, geen cursor, niets klikbaars. Nul ("geen
   vergoeding") krijgt een lijntje in plaats van een vlak, zodat het niet op een bedrag lijkt.
   line-height expliciet, want de normalize van Webflow zet font:inherit over alles. */
.dc-prijs { font-family: var(--dc-kop); font-size: 15px; font-weight: 400; line-height: 1.4; padding: 5px 16px;
  border-radius: 100px; white-space: nowrap; background: var(--dc-zalm); color: var(--dc-inkt); flex: none; }
.dc-prijs-nul { background: transparent; border: 1.5px solid var(--dc-lijn); color: var(--dc-grijs); }
/* De regel met het antwoord: een teken (vorm) en het woord ernaast. Het teken kleurt petrol bij ja
   en rood bij nee, maar het woord staat er altijd bij, dus de kleur draagt niets alleen. */
.dc-oordeel { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; font-weight: 500;
  line-height: 1.4; }
.dc-teken { font-size: 16px; font-weight: 700; line-height: 1; flex: none; }
.dc-oordeel-ja .dc-teken, .dc-oordeel-kies .dc-teken { color: var(--dc-groen); }
.dc-oordeel-elders .dc-teken, .dc-oordeel-nergens .dc-teken { color: var(--dc-rood); }
.dc-oordeel-onbekend .dc-teken { color: var(--dc-grijs); }
/* De knop onderaan die de locatielijst opent. Heet nog dc-badge, want alle tap-, focus- en
   hoverregels hieronder hangen aan die naam. Tekstletter, oranje, zonder chevron (punchlist punt 1);
   hover lichter oranje met transition (punt 4), zelfde recept als .dc-cat-meer. */
.dc-badge { font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; padding: 9px 18px; margin: 14px 0 0;
  border-radius: 100px; white-space: nowrap; border: none; background: var(--dc-oranje); color: var(--dc-inkt);
  cursor: pointer; display: inline-block; transition: filter .18s ease; }
.dc-badge:hover { filter: brightness(1.12) saturate(.85); }
.dc-kaart[data-mat] { cursor: pointer; }
.dc-kaart[data-mat]:hover .dc-badge { filter: brightness(1.12) saturate(.85); }
.dc-stroom { font-size: 13px; color: var(--dc-grijs); margin: 5px 0 0; display: flex; align-items: center; gap: 7px; }
.dc-stip { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.st-textiel { background: var(--dc-paars); }
.st-ewaste { background: var(--dc-petrol); }
.st-plastic { background: var(--dc-oranje); }
.st-statiegeld { background: #a59b5a; }
.st-overig { background: var(--dc-dof); }
/* Status-stippen (punchlist 17-09-2026, punt 4): st-uit is "kun je hier niet droppen" (grijs),
   st-blauw is "kun je wel droppen, stroom zonder eigen kleur". Zie stipKlasse() in checker.js. */
.st-uit { background: var(--dc-dof); }
.st-blauw { background: var(--dc-lichtblauw); }
.dc-tekst { font-size: 15px; margin: 12px 0 0; line-height: 1.5; text-wrap: pretty; }
.dc-detail { font-size: 14px; margin: 8px 0 0; color: var(--dc-grijs); line-height: 1.5; text-wrap: pretty; }
.dc-detail b { font-weight: 500; color: var(--dc-inkt); }

/* De vier antwoorden verschillen op RANDSTIJL (doorgetrokken petrol, gestreept oranje, dun grijs,
   gestippeld), naast het woord en het teken in .dc-oordeel. De paarse vulling van de welles-kaart is
   op 17-09-2026 weggehaald (punchlist, punt 4, akkoord Jack): alle kaarten zijn wit. Het patroon
   "welles gevuld" van de stroompagina's (zie de kop van dit bestand) geldt dus niet meer voor de
   kaarten; de drie dragers van het antwoord blijven overeind. */
.dc-ja { background: var(--dc-wit); border: 1.5px solid var(--dc-petrol); padding: 16.5px 20.5px; }
.dc-elders { background: var(--dc-wit); border: 2px dashed var(--dc-oranje); padding: 16px 20px; }
.dc-nee { background: var(--dc-wit); border: 1.5px solid var(--dc-lijn); padding: 16.5px 20.5px; }
.dc-kies, .dc-onb { background: var(--dc-wit); border: 1.5px dotted var(--dc-dof); padding: 16.5px 20.5px; }

/* Waar je het inlevert. Staat onder het bedrag en draagt zijn betekenis in tekst, niet in kleur:
   het label staat er voluit bij en de plek zelf is vet, dus het blijft leesbaar zonder kleurzicht. */
.dc-punt { margin: 10px 0 0; font-size: 14px; color: var(--dc-inkt); }
.dc-punt b { font-weight: 600; }

.dc-winkels { margin: 16px 0 2px; padding: 16px 0 0; border-top: 1.5px dashed var(--dc-lijn); }
.dc-wuitleg { font-size: 13px; color: var(--dc-grijs); margin: 0 0 12px; text-wrap: pretty; }
.dc-wstad + .dc-wstad { margin-top: 12px; }
.dc-wstad h5 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dc-grijs);
  margin: 0 0 7px; font-weight: 500; }
.dc-wchips { display: flex; flex-wrap: wrap; gap: 7px; }
.dc-wchip { font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 100px; padding: 7px 15px 7px 11px; border: 1.5px solid transparent; }
.dc-wchip:hover { border-color: var(--dc-inkt); }
.dc-w-ja { background: var(--dc-groen); color: #fff; }   /* groen in plaats van petrol, punt 4 */
.dc-w-nee { background: var(--dc-rood); color: #fff; }
.dc-wteken { font-size: 14px; font-weight: 700; line-height: 1; }
.dc-w-nee .dc-wteken { color: #fff; }
.dc-w-nee:hover { border-color: var(--dc-inkt); }

/* inline-block met verticale padding: de link was 17px hoog en het WCAG-tapdoel is 24px. */
.dc-link { color: var(--dc-inkt); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--dc-oranje); text-underline-offset: 3px;
  display: inline-block; padding: 4px 2px; }
.dc-link:hover { background: var(--dc-oranje); text-decoration-color: var(--dc-inkt); }
.dc-ruim { margin: 0 0 12px; }

/* min(250px, 100%): op een scherm van 280px is de inhoud 244px breed, en een vaste minmax(250px)
   duwt de tegel dan 6px de zijpadding in. Met min() krimpt hij tot wat er is. */
.dc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.dc-cat { background: var(--dc-wit); border: 2px solid transparent; border-radius: 24px; transition: border-color .18s ease;
  padding: 18px 22px; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; }
.dc-cat:hover { border-color: var(--dc-oranje); }
/* Spans en geen h4/p: binnen een button mag alleen phrasing content staan. Vandaar display:block. */
/* Naam links, aantal rechtsboven (punchlist 17-09-2026, punt 2). flex in plaats van een lopende regel:
   daarmee kan het aantal nooit meer als los woord onder de naam vallen, wat de harde spatie van
   16-09 nog met de hand tegenhield. align-items flex-start: wrapt de naam over twee regels, dan
   blijft het aantal bovenaan staan, rechts van de eerste regel. */
.dc-cat-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  font-family: var(--dc-kop); font-size: 18px; font-weight: 400; color: var(--dc-inkt); line-height: 1.25; }
.dc-cat-naam { min-width: 0; }
.dc-cat-kop .dc-stip { vertical-align: 2px; margin-right: 8px; }
.dc-cat-kop .dc-cat-n { font-family: inherit; font-size: 14px; color: var(--dc-grijs); white-space: nowrap; flex: none;
  padding-top: 3px; }
/* Een regel met een ellipsis (punchlist punt 2); de ", +111" is weg.
   width: 0 plus min-width: 100% is GEEN slordigheid maar de kern: een nowrap-regel heeft een
   min-content van zo'n 640px, en in een grid- of flexkolom (een Webflow-locatiepagina) neemt de
   kolom die min-content over. Gemeten 17-09-2026: de widget werd 1464px breed in een kolom van
   375px, terwijl hij in een blok-ouder (de testpagina, het harnas) gewoon paste. Met width: 0 telt
   de regel niet mee in de min-content en met min-width: 100% vult hij daarna alsnog de tegel.
   Acht varianten naast elkaar gemeten; alleen deze (en varianten die hem bevatten) losten het op. */
.dc-cat-lijst { display: block; font-size: 14px; color: var(--dc-grijs); line-height: 1.5; flex: 1;
  width: 0; min-width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-cat-meer { font-size: 13px; font-weight: 500; color: var(--dc-inkt);
  background: var(--dc-oranje); border-radius: 100px; padding: 7px 16px; align-self: flex-start;
  transition: filter .18s ease, background-color .18s ease, color .18s ease; }
/* Hover: LICHTER oranje in plaats van donker petrol (punchlist 17-09-2026, punt 4). Via filter en
   niet via een nieuwe hex: de brandkit heeft geen lichtoranje, en color-mix() kent iOS 15 niet.
   Twee losse regels, geen selectorlijst: een engine zonder :focus-visible gooit anders de HELE
   lijst weg en dan verdwijnt ook de hover-stand. :focus volstaat hier, het is decoratie. */
.dc-cat:hover .dc-cat-meer { filter: brightness(1.12) saturate(.85); }
.dc-cat:focus .dc-cat-meer { filter: brightness(1.12) saturate(.85); }

.dc-terug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.dc-terugknop { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--dc-wit); border: 1.5px solid var(--dc-lijn); border-radius: 100px;
  padding: 8px 16px; color: var(--dc-inkt); }
.dc-terugknop:hover { border-color: var(--dc-oranje); background: var(--dc-oranje); }
.dc-terugtekst { font-size: 14px; color: var(--dc-grijs); }

/* Toon-meer onder een lange lijst (16-09-2026). Zelfde vorm als de terugknop, want het is dezelfde
   soort handeling: een knop met een regel tekst ernaast die zegt waar je bent. De regel blijft staan
   als alles getoond is, dan zonder knop; hij is dan het antwoord op "heb ik nu alles?" en het doel
   waar de focus heen gaat zodra de knop verdwijnt. Vandaar tabindex="-1" in de HTML en geen
   focusring op de alinea zelf: die focus is voor een screenreader, niet voor de muis. */
.dc-meer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 0; }
.dc-meer:focus { outline: none; }
.dc-meerknop { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--dc-wit); border: 1.5px solid var(--dc-lijn); border-radius: 100px;
  padding: 8px 18px; color: var(--dc-inkt); }
.dc-meerknop:hover { border-color: var(--dc-oranje); background: var(--dc-oranje); }
.dc-meertekst { font-size: 14px; color: var(--dc-grijs); }

.dc-leeg { font-size: 15px; padding: 22px; background: var(--dc-wit); border-radius: 24px; margin: 0; line-height: 1.5; }
/* De probeer-opnieuw-knop in de foutmelding. Zelfde vorm als de terugknop; block, zodat hij onder
   de tekst staat en niet in de lopende zin hangt. */
.dc-retry { display: block; margin: 14px 0 0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--dc-wit); border: 1.5px solid var(--dc-lijn); border-radius: 100px;
  padding: 8px 18px; color: var(--dc-inkt); }
.dc-retry:hover { border-color: var(--dc-oranje); background: var(--dc-oranje); }
.dc-vt { font-size: 13px; color: var(--dc-grijs); margin: 22px 0 0; }
/* Melding dat de lijst is afgekapt. Zelfde toon als de ruim-zoekmelding, geen alarm. */
.dc-kap { margin: 0 0 14px; }
/* Alleen voor een screenreader. Niet display:none en niet visibility:hidden, want dan slaat een
   screenreader het over; dit is de gangbare clip-methode die wel wordt voorgelezen. */
.dc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 640px) {
  /* Alleen de verticale padding en de MINIMALE zijpadding; de horizontale wordt door de max()
     hierboven bepaald, dus die mag hier niet met een shorthand worden overschreven. */
  .dc { --dc-zij: 36px; padding-top: 38px; padding-bottom: 30px; }
  /* Tot 900px twee gelijke helften. De vaste 340px-kolom won daarvoor van de hoofdactie: op 640px
     was het zoekveld 162px tegen 340px voor de select, terwijl zoeken is waar de dropper begint.
     Een minmax zonder fr helpt daar niet, die pakt gewoon zijn maximum; vandaar 1fr 1fr. */
  .dc-bal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px 18px; }
}
/* Vanaf 900px is er ruimte zat: de select terug naar zijn vaste breedte, zoekveld krijgt de rest. */
@media (min-width: 900px) {
  .dc-bal { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 480px) {
  /* border-radius stond hier op 24px, zie de basisregel: het vlak is sinds 15-09-2026 recht. */
  .dc { --dc-zij: 18px; padding-top: 24px; padding-bottom: 20px; }
  .dc-titel { font-size: 27px; }
  .dc-sub { font-size: 15px; }
  .dc-kaart { border-radius: 20px; }
  /* Tot 17-09-2026 stond hier een regel die de badge onder 480px op een eigen regel zette
     (responsive audit 16-09, punt 4). De badge staat sindsdien onderaan de kaart en in de rij staat
     alleen nog het prijslabel; dat wrapt vanzelf onder de naam als het niet past. */
}

/* ================================================================ locatiemodus ==
   data-locatie="1" naast data-winkel op de div (punchlist 17-09-2026, punt 6): de widget als kolom op
   een locatiepagina. Het drop-point is daar een gegeven, dus de keuzelijst gaat weg en het zoekveld
   krijgt de hele balk. De knop en de locatielijst op de kaart blijven weg vanuit checker.js. */
.dc-locatie .dc-veld-winkel { display: none; }
.dc-locatie .dc-bal { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ app-modus ==
   De widget in een WebView binnen de Droppie-app. Aangezet met data-app="1" op de div, zie
   web/app.html en APP.md. Alles hieronder hangt aan .dc-app, dus de website verandert er niet van.

   Waarom elk van deze regels er staat, en niet "voor de zekerheid":

   1. GEEN KAART MAAR EEN SCHERM. Op de website is de checker een blok in een pagina, met ronde
      hoeken en een maximumbreedte. In de app is hij het hele scherm; ronde hoeken midden op een
      scherm zien er uit als een fout, en 1180px bestaat op een telefoon niet.
   2. DE VEILIGE ZONES HOREN IN DE PADDING. Met viewport-fit=cover loopt de pagina onder de notch en
      onder de home-indicator door. Zet je die ruimte als marge OM het blok, dan staat er een
      kleurloze strook boven en onder; in de padding houdt de zalm het hele scherm.
   3. TAPDOELEN 44px. Apple en Google houden allebei 44 respectievelijk 48 dp aan als minimum. Op de
      website mag een drop-pointchip 31px zijn omdat daar met een muis wordt gewezen; met een duim
      op een lijst van dertien chips is dat te klein.
   4. INVOERVELDEN MINSTENS 16px. iOS zoomt de HELE pagina in zodra een veld met een kleinere letter
      focus krijgt, en zoomt daarna niet vanzelf terug: de dropper zit dan vast in een uitvergroot
      scherm. De select stond op 15px en deed dat dus.
   5. GEEN HOVER-STANDEN. Op een touchscreen blijft een hover-stand na een tik hangen tot je ergens
      anders tikt, dus een aangetikte tegel houdt zijn oranje rand. In plaats daarvan een
      :active-stand, die verdwijnt wel weer.
   Kleur draagt ook hier niets alleen: aan de vormen, de woorden en de randstijlen verandert niets. */
.dc-app {
  border-radius: 0;
  /* max-width staat al op none in .dc; hier alleen de hoeken en de veilige zones. */
  /* Zonder deze twee zit de zalm alleen achter de inhoud en is de rest van het scherm wit zodra de
     lijst korter is dan het scherm (bijvoorbeeld bij de foutmelding). */
  min-height: 100%;
  padding: calc(22px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px))
           calc(26px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
}
/* De select staat sinds 19-08-2026 ook op de website op 16px (zie de basisregel), dus hier hoeft
   niets meer; iOS zoomt onder de 16px in bij focus en zoomt niet terug. */
/* 44px hoog met de bestaande radius van 100px: de pil wordt niet anders, alleen raakbaar. */
.dc-app button.dc-badge { min-height: 44px; display: inline-flex; align-items: center; }
.dc-app .dc-wchip { min-height: 44px; padding: 10px 18px 10px 14px; }
.dc-app .dc-terugknop, .dc-app .dc-retry, .dc-app .dc-meerknop { min-height: 44px; }
.dc-app .dc-cat-meer { min-height: 44px; display: inline-flex; align-items: center; }
.dc-app .dc-taal { min-height: 44px; display: inline-flex; align-items: center; }
.dc-app .dc-link { min-height: 44px; }
/* touch-action: manipulation haalt de 300 ms dubbeltik-vertraging weg die anders op elke knop zit.
   De tap-highlight gaat eraf omdat het een blauw vlak over de merkkleuren legt; de :active-standen
   hieronder nemen die terugkoppeling over, zodat er wel iets gebeurt bij een tik. */
.dc-app button, .dc-app a, .dc-app .dc-in, .dc-app .dc-sel, .dc-app .dc-kaart[data-mat] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Voor de HELE widget, niet alleen .dc-app: ook op godroppie.com op een telefoon blijft een
   hover-stand na een tik hangen tot de volgende tik ergens anders. De :active-standen daaronder
   geven de terugkoppeling die de hover daar niet kan geven. */
@media (hover: none) {
  .dc .dc-cat:hover { border-color: transparent; }
  .dc .dc-wchip:hover, .dc .dc-in:hover, .dc .dc-sel:hover { border-color: transparent; }
  .dc .dc-terugknop:hover, .dc .dc-taal:hover, .dc .dc-retry:hover,
  .dc .dc-meerknop:hover { background: var(--dc-wit); border-color: var(--dc-lijn); }
  .dc .dc-cat:hover .dc-cat-meer { background: var(--dc-oranje); color: var(--dc-inkt); filter: none; }
  .dc .dc-link:hover { background: transparent; }
  .dc .dc-kaart[data-mat]:hover .dc-badge { filter: none; }
}
.dc .dc-cat:active, .dc .dc-wchip:active, .dc button.dc-badge:active,
.dc .dc-terugknop:active, .dc .dc-taal:active, .dc .dc-retry:active,
.dc .dc-meerknop:active { filter: brightness(.93); }

/* Tapdoelen en tik-instellingen horen bij het AANWIJSAPPARAAT, niet bij de app-modus: een telefoon
   of tablet op godroppie.com wijst ook met een duim. Zelfde regels als .dc-app hierboven; die
   blijven staan voor een WebView die zich onverhoopt als fine pointer meldt. */
@media (pointer: coarse) {
  .dc button.dc-badge { min-height: 44px; display: inline-flex; align-items: center; }
  .dc .dc-wchip { min-height: 44px; padding: 10px 18px 10px 14px; }
  .dc .dc-terugknop, .dc .dc-retry, .dc .dc-meerknop { min-height: 44px; }
  .dc .dc-cat-meer { min-height: 44px; display: inline-flex; align-items: center; }
  .dc .dc-taal { min-height: 44px; display: inline-flex; align-items: center; }
  .dc .dc-link { min-height: 44px; }
  .dc button, .dc a, .dc .dc-in, .dc .dc-sel, .dc .dc-kaart[data-mat] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}