@charset "utf-8";
/* =========================================================================
   DE IJSFEE — stylesheet
   Arkelstraat 11, Gorinchem · gelato, vino, cafe

   Opnieuw geschreven op 24 oktober 2026, en deze keer op de huisstijl die
   De IJsfee al had in plaats van op een palet dat ik zelf had bedacht.

   WAAR DE KLEUREN EN DE LETTER VANDAAN KOMEN
   Uit de oude site zelf. In de back-up staat per pagina de door Elementor
   gegenereerde css; daarin staat 428 keer Poppins en komen deze kleuren
   bovendrijven:

       #0C2D48   107x   diep marineblauw   -> de dragende kleur
       #B1D4E0   106x   ijsblauw           -> het accent
       #0C1935    85x   nog dieper blauw   -> donkere vlakken
       #0A0A0A    89x   bijna zwart        -> tekst
       #F4F1EA    24x   warm crème         -> rustige vlakken
       #FFB000    16x   amber              -> kleine nadruk, sterren

   Dat is geen willekeurige greep: het is een ijssalon, en blauw met crème
   is precies wat de zaak zelf al uitstraalde. De amarena-rode en
   pistachegroene versie die hier eerder stond, kwam uit het ijs in plaats
   van uit de huisstijl — en dat zag je.

   WAT ER VERDER MIS WAS, EN HIER IS OPGELOST
   Dit bestand verving een stylesheet van 167 kB die voor een taxibedrijf
   was gemaakt. Daar zaten drie problemen in die met omzetten niet weggaan:
     - 43 regels vroegen om Lato, dat niet geladen werd; die onderdelen
       vielen terug op system-ui terwijl de rest in een andere letter stond.
       Vandaar "verschillende fonts, groottes en diktes" op één pagina.
     - hetzelfde kopniveau stond op vier verschillende maten.
     - secties regelden hun eigen zijmarge, waardoor de linkerranden van
       kopbalk, hero en inhoud uiteenliepen zodra het scherm breder werd
       dan 1440.

   Hier geldt: één letterfamilie, één typeschaal, één container. Elke maat
   komt uit de tokens hieronder; er staat nergens een losse pixelwaarde
   voor een lettergrootte of een zijmarge.

   Het bestand dekt precies de klassen die scripts/schil.py en
   scripts/blokken.py uitschrijven. Niets meer, zodat er niets meeloopt dat
   niemand gebruikt.

   INHOUD
     1  tokens            11  stappen
     2  grondslag         12  beoordelingen
     3  container         13  openingstijden
     4  kopbalk           14  contactkaarten
     5  knoppen           15  instagram
     6  hero              16  vragen
     7  kerngetallen      17  formulier, slot, banner
     8  tekst + zijkaart  18  juridisch en fout
     9  kaartenrij        19  voettekst
    10  tegels, aanbod    20  beweging
   ========================================================================= */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  /* ---- kleur: de huisstijl van De IJsfee ---- */
  --merk:        #0C2D48;   /* marineblauw, dragend            */
  --merk-diep:   #0C1935;   /* donkerder, voor hover en vlakken */
  --merk-dieper: #081326;   /* de bodem van het nachtverloop   */
  --ijsblauw:    #B1D4E0;   /* het accent van de zaak          */
  --ijsblauw-op: #8FBCCD;   /* iets dieper, voor hover op licht */
  --ijsblauw-licht:#E7F2F6;

  --inkt:       #0A0A0A;
  --inkt-stil:  #55606B;
  --inkt-zacht: #8995A1;

  --papier:      #FFFFFF;
  --papier-warm: #F4F1EA;   /* crème uit de oude site          */
  --papier-koel: #F2F6F8;   /* een zweem ijsblauw              */
  --lijn:        #E3E3E3;
  --lijn-sterk:  #C9D3D9;

  --amber:       #FFB000;   /* alleen voor sterren en kleine nadruk */

  /* ---- letter: Poppins, net als de oude site ---- */
  --font-kop:   Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-tekst: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- typeschaal: vier kopniveaus, één tekstmaat, twee kleine maten ----
     De clamp zorgt dat er tussen telefoon en breedbeeld niets springt, en
     dat h2 op geen enkele breedte groter wordt dan h1. */
  --t-xxl:   clamp(2.2rem, 1.45rem + 3.2vw, 3.9rem);
  --t-xl:    clamp(1.85rem, 1.4rem + 2.0vw, 2.85rem);
  --t-l:     clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  --t-m:     clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  --t-body:  clamp(1rem, 0.97rem + 0.14vw, 1.06rem);
  --t-klein: 0.94rem;
  --t-mini:  0.8rem;

  --lh-kop:   1.16;
  --lh-tekst: 1.68;

  /* ---- ruimte ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 18px;
  --s5: 26px; --s6: 38px; --s7: 54px; --s8: 76px;

  --breed: 1200px;
  --rand:  clamp(20px, 4vw, 40px);
  --lees:  68ch;
  --gat:   clamp(18px, 2.2vw, 30px);
  --ritme: clamp(56px, 7vw, 104px);

  --r:       14px;
  --r-groot: 20px;
  --r-klein: 8px;
  --r-pil:   999px;

  /* Schaduw in plaats van een rand. De kleur volgt het marineblauw, niet
     een neutraal grijs: een koele schaduw onder een koel vlak. */
  --schaduw:    0 1px 2px rgba(12,45,72,.06), 0 10px 26px -18px rgba(12,45,72,.34);
  --schaduw-op: 0 2px 6px rgba(12,45,72,.09), 0 22px 48px -24px rgba(12,45,72,.42);

  --kleef: 86px;
}

/* ------------------------------------------------------------ 2 grondslag */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: var(--t-body);
  line-height: var(--lh-tekst);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

/* Elk pictogram in een blok. Zonder deze regel valt een svg zonder eigen
   klasse terug op 300x150 met een zwarte vulling. */
.ijs svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Koppen: Poppins 600. Eén gewicht voor alle niveaus; het verschil zit in
   de maat, niet in de dikte. Dat was precies wat er rommelig uitzag. */
.ijs h1, .ijs h2, .ijs h3, .ijs h4 {
  font-family: var(--font-kop);
  margin: 0;
  color: inherit;
  font-weight: 600;
  line-height: var(--lh-kop);
  letter-spacing: -.018em;
  text-wrap: balance;
}
.ijs p { margin: 0; }
.ijs ul, .ijs ol, .ijs dl, .ijs dd { margin: 0; padding: 0; list-style: none; }
.ijs li { margin: 0; }

.ijs-titel        { font-size: var(--t-xl); }
.ijs-titel-xl     { font-size: var(--t-xxl); letter-spacing: -.024em; }
.ijs h2.ijs-titel { font-size: var(--t-l); }
.ijs h3           { font-size: var(--t-m); letter-spacing: -.008em; }

.ijs-intro {
  font-size: clamp(1.04rem, 1rem + 0.3vw, 1.16rem);
  line-height: 1.6;
  color: var(--inkt-stil);
  max-width: var(--lees);
  margin-top: var(--s4);
}

/* De eyebrow: kleine kapitalen met een streepje in het ijsblauw ervoor. */
.ijs-kicker {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s3);
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1.3;
  color: var(--merk);
}
.ijs-kicker::before {
  content: ""; width: 24px; height: 3px; flex: none;
  border-radius: 3px; background: var(--ijsblauw);
}

.ijs-tussenkop {
  font-family: var(--font-kop); font-size: var(--t-m); font-weight: 600;
  margin: var(--s6) 0 var(--s3); letter-spacing: -.008em;
}

.ijs-noot, .ijs-gegevens-noot {
  font-size: var(--t-klein); line-height: 1.6; color: var(--inkt-stil);
  margin: var(--s4) 0 0; max-width: var(--lees);
}

.ijs-sr, .ijs-skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ijs-skip:focus {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: var(--s3) var(--s4); border-radius: var(--r-klein);
  background: var(--merk); color: #fff; text-decoration: none;
}
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--merk); outline-offset: 3px; border-radius: var(--r-klein);
}

/* ------------------------------------------------------------ 3 container */
.ijs {
  position: relative;
  padding-block: var(--ritme);
  background: var(--papier);
  color: var(--inkt);
}

/* De enige plek waar een zijmarge wordt gezet. Het maximum is de kolom plus
   tweemaal die marge, zodat de inhoud op 1440 en op 1920 even ver van de
   rand staat als de kopbalk. Hieraan hangt de hele uitlijning. */
.ijs-in {
  width: 100%;
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.ijs-in .ijs-in { max-width: none; padding-inline: 0; }

.ijs-v-zacht  { background: var(--papier-warm); }
.ijs-v-donker { background: var(--merk); color: #fff; }
.ijs-v-donker .ijs-intro  { color: rgba(255,255,255,.78); }
.ijs-v-donker .ijs-kicker { color: var(--ijsblauw); }
.ijs-v-donker .ijs-kicker::before { background: var(--ijsblauw); }

/* -------------------------------------------------------------- 4 kopbalk */
.ijs-header {
  padding-block: var(--s4);
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.ijs-header-in {
  width: 100%; max-width: calc(var(--breed) + 2 * var(--rand));
  margin-inline: auto; padding-inline: var(--rand);
  display: flex; align-items: center; gap: var(--s5);
}
.ijs-logo { flex: none; display: block; }
.ijs-logo img { height: 46px; width: auto; }

.ijs-nav { margin-inline: auto; }
.ijs-nav ul { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.ijs-nav a {
  display: block; padding: var(--s2) var(--s3); border-radius: var(--r-pil);
  font-size: var(--t-klein); font-weight: 500; text-decoration: none;
  color: var(--inkt-stil);
  transition: color .18s ease, background .18s ease;
}
.ijs-nav a:hover { color: var(--merk); background: var(--papier-koel); }
.ijs-nav a[aria-current="page"] { color: var(--merk); font-weight: 600;
                                   background: var(--ijsblauw-licht); }

.ijs-header-acties { display: flex; align-items: center; gap: var(--s3); flex: none; }
.ijs-header-tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-klein); font-weight: 600; text-decoration: none;
  white-space: nowrap; color: var(--merk);
}
.ijs-header-tel svg { width: 18px; height: 18px; }
.ijs-header-tel:hover { color: var(--merk-diep); }

@media (max-width: 1100px) {
  .ijs-header-in { flex-wrap: wrap; row-gap: var(--s3); }
  .ijs-nav { order: 3; width: 100%; margin-inline: 0; }
  .ijs-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                padding-bottom: 2px; }
  .ijs-nav ul::-webkit-scrollbar { display: none; }
  .ijs-nav a { white-space: nowrap; }
  .ijs-header-acties { margin-inline-start: auto; }
}
@media (max-width: 620px) {
  .ijs-header-tel span { display: none; }
  .ijs-logo img { height: 38px; }
}

.ijs-kruimels { padding-block: var(--s4) 0; background: var(--papier); }
.ijs-kruimels ol {
  width: 100%; max-width: calc(var(--breed) + 2 * var(--rand));
  margin-inline: auto; padding-inline: var(--rand);
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-size: var(--t-mini); color: var(--inkt-zacht);
}
.ijs-kruimels li + li::before { content: "›"; margin-inline-end: var(--s2); }
.ijs-kruimels a { text-decoration: none; }
.ijs-kruimels a:hover { color: var(--merk); text-decoration: underline;
                        text-underline-offset: 3px; }

/* -------------------------------------------------------------- 5 knoppen */
.ijs-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 14px 24px;
  border: 1.5px solid transparent; border-radius: var(--r-pil);
  font-family: var(--font-tekst); font-size: var(--t-klein);
  font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.ijs-knop:active { transform: translateY(1px); }
.ijs-knop svg { width: 18px; height: 18px; }

/* De naam -geel is historisch; dit is de hoofdknop. Marineblauw, want dat
   is de kleur waarmee de zaak zich presenteert. */
.ijs-knop-geel { background: var(--merk); color: #fff; }
.ijs-knop-geel:hover { background: var(--merk-diep); }

.ijs-knop-rand { border-color: var(--lijn-sterk); color: var(--merk); background: transparent; }
.ijs-knop-rand:hover { border-color: var(--merk); background: var(--papier-koel); }

.ijs-knop-sm { padding: 10px 18px; font-size: var(--t-mini); }

.ijs-v-donker .ijs-knop-geel { background: var(--ijsblauw); color: var(--merk-diep); }
.ijs-v-donker .ijs-knop-geel:hover { background: #fff; }
.ijs-v-donker .ijs-knop-rand { border-color: rgba(255,255,255,.4); color: #fff; }
.ijs-v-donker .ijs-knop-rand:hover { border-color: #fff; background: rgba(255,255,255,.12); }

.ijs-acties { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ----------------------------------------------------------------- 6 hero */
.ijs-hero {
  position: relative; isolation: isolate;
  padding-block: clamp(76px, 9vw, 140px) clamp(84px, 10vw, 150px);
  background: var(--merk-diep);
  color: #fff;
  overflow: hidden;
}
.ijs-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* De sluier. Hij stond zo donker dat de foto erachter verdween. Nu een
   verloop: links genoeg dekking om de tekst leesbaar te houden, rechts
   licht genoeg om te zien wat er op de foto staat. */
.ijs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(8,19,38,.86)  0%,
      rgba(8,19,38,.70) 38%,
      rgba(8,19,38,.34) 68%,
      rgba(8,19,38,.14) 100%);
}
.ijs-hero-tekst { max-width: 46rem; }
.ijs-hero .ijs-kicker { color: var(--ijsblauw); }
.ijs-hero .ijs-kicker::before { background: var(--ijsblauw); }
.ijs-hero .ijs-intro  { color: rgba(255,255,255,.88); }
.ijs-hero .ijs-knop-geel { background: var(--ijsblauw); color: var(--merk-diep); }
.ijs-hero .ijs-knop-geel:hover { background: #fff; }
.ijs-hero .ijs-knop-rand { border-color: rgba(255,255,255,.42); color: #fff; }
.ijs-hero .ijs-knop-rand:hover { border-color: #fff; background: rgba(255,255,255,.12); }

.ijs-hero-usps { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
                 margin-top: var(--s5); }
.ijs-hero-usps li {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-klein); font-weight: 500; color: rgba(255,255,255,.95);
}
.ijs-hero-usps svg { width: 18px; height: 18px; color: var(--ijsblauw); }

/* ---------------------------------------------------------- 7 kerngetallen */
/* De balk schuift met zijn bovenkant over de hero heen. Dat verbindt de twee
   zonder een extra scheidingslijn. */
.ijs-quickfacts {
  padding-block: 0; background: transparent;
  margin-top: calc(-1 * clamp(32px, 4vw, 56px));
}
.ijs-quickfacts ul {
  width: 100%; max-width: calc(var(--breed) + 2 * var(--rand));
  margin-inline: auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr));
}
.ijs-quickfacts ul > li {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s5);
  background: var(--papier); box-shadow: var(--schaduw-op);
}
.ijs-quickfacts ul > li:first-child {
  border-start-start-radius: var(--r-groot); border-end-start-radius: var(--r-groot);
}
.ijs-quickfacts ul > li:last-child {
  border-start-end-radius: var(--r-groot); border-end-end-radius: var(--r-groot);
}
.ijs-quickfacts ul > li + li::before {
  content: ""; position: absolute; inset-block: var(--s5); inset-inline-start: 0;
  width: 1px; background: var(--lijn);
}
.ijs-quickfacts svg { color: var(--merk); margin-top: 2px; }
.ijs-quickfacts span { display: grid; gap: 2px; min-width: 0; }
.ijs-quickfacts strong { font-size: var(--t-klein); font-weight: 600; }
.ijs-quickfacts small { font-size: var(--t-mini); color: var(--inkt-stil); line-height: 1.45; }
@media (max-width: 900px) {
  .ijs-quickfacts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ijs-quickfacts ul > li { border-radius: 0 !important; }
  .ijs-quickfacts ul > li:nth-child(odd)::before { display: none; }
}
@media (max-width: 520px) {
  .ijs-quickfacts ul { grid-template-columns: 1fr; }
  .ijs-quickfacts ul > li::before { display: none !important; }
}

/* ------------------------------------------------------ 8 tekst + zijkaart */
.ijs-tekst-in {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.ijs-tekst-main { min-width: 0; }
.ijs-tekst-body { margin-top: var(--s5); max-width: var(--lees); }
.ijs-tekst-body > p + p { margin-top: var(--s4); }
.ijs-tekst-body > ul { margin-top: var(--s3); display: grid; gap: var(--s2); }
.ijs-tekst-body > ul > li {
  position: relative; padding-inline-start: var(--s5); color: var(--inkt-stil);
}
.ijs-tekst-body > ul > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .7em;
  width: 9px; height: 3px; border-radius: 3px; background: var(--ijsblauw);
}
.ijs-tekst-body a { color: var(--merk); text-underline-offset: 3px;
                    text-decoration-color: var(--ijsblauw); }
.ijs-tekst-body a:hover { text-decoration-color: var(--merk); }
@media (max-width: 1000px) { .ijs-tekst-in { grid-template-columns: minmax(0, 1fr); } }

.ijs-zijkaart {
  background: var(--papier-koel); border-radius: var(--r-groot);
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--schaduw);
}
.ijs-zijkaart-kleef { position: sticky; top: calc(var(--kleef) + var(--s4)); }
@media (max-width: 1000px) { .ijs-zijkaart-kleef { position: static; } }
.ijs-zijkaart-kop { font-family: var(--font-kop); font-size: var(--t-m);
                    font-weight: 600; margin: 0 0 var(--s3); }
.ijs-zijkaart dl { display: grid; }
.ijs-zijkaart dl > div {
  display: grid; grid-template-columns: 20px 1fr; gap: 2px var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--lijn);
}
.ijs-zijkaart dl > div:last-of-type { border-bottom: 0; }
.ijs-zijkaart svg { width: 18px; height: 18px; grid-row: span 2; margin-top: 3px;
                    color: var(--merk); }
.ijs-zijkaart dt { font-size: var(--t-mini); color: var(--inkt-stil);
                   text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.ijs-zijkaart dd { font-size: var(--t-klein); font-weight: 600; line-height: 1.45; }

.ijs-zijcta {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--lijn-sterk);
  display: grid; gap: var(--s2);
}
.ijs-zijcta-kop   { font-weight: 600; font-size: var(--t-klein); }
.ijs-zijcta-tekst { font-size: var(--t-mini); color: var(--inkt-stil);
                    line-height: 1.5; margin-bottom: var(--s2); }

/* ------------------------------------------------------------ 9 kaartenrij */
.ijs-diensten-kop { max-width: var(--lees); }
.ijs-diensten-rij {
  display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr));
  gap: var(--gat); margin-top: clamp(28px, 3.6vw, 44px);
}
@media (max-width: 1000px) { .ijs-diensten-rij { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .ijs-diensten-rij { grid-template-columns: 1fr; } }

.ijs-kaart { background: var(--papier); border-radius: var(--r-groot); }

.ijs-dienst {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--schaduw);
  transition: box-shadow .22s ease, transform .22s ease;
}
.ijs-dienst:hover { box-shadow: var(--schaduw-op); transform: translateY(-3px); }
.ijs-dienst > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ijs-dienst-body {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: var(--s3); padding: clamp(20px, 2.2vw, 26px); flex: 1;
}
.ijs-dienst-ic {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-klein); background: var(--ijsblauw-licht); color: var(--merk);
}
.ijs-dienst-body > div { min-width: 0; display: grid; gap: var(--s2); align-content: start; }
.ijs-dienst-body p { font-size: var(--t-klein); color: var(--inkt-stil); line-height: 1.55; }
.ijs-dienst-meer {
  font-size: var(--t-mini); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--merk);
}
.ijs-dienst-pijl { font-size: 1.5rem; line-height: 1; color: var(--inkt-zacht);
                   transition: transform .22s ease, color .22s ease; }
.ijs-dienst:hover .ijs-dienst-pijl { transform: translateX(3px); color: var(--merk); }
.ijs-v-donker .ijs-dienst { background: rgba(255,255,255,.06); box-shadow: none; }
.ijs-v-donker .ijs-dienst p { color: rgba(255,255,255,.72); }
.ijs-v-donker .ijs-dienst-ic { background: rgba(255,255,255,.1); color: var(--ijsblauw); }
.ijs-v-donker .ijs-dienst-meer { color: var(--ijsblauw); }

/* ---------------------------------------------------- 10 tegels en aanbod */
.ijs-raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gat); margin-top: clamp(28px, 3.6vw, 44px);
}
@media (max-width: 1100px) { .ijs-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .ijs-raster { grid-template-columns: 1fr; } }

.ijs-tegel { box-shadow: var(--schaduw); }
.ijs-tegel-body { padding: clamp(20px, 2.2vw, 28px); display: grid; gap: var(--s3);
                  align-content: start; }
.ijs-tegel-body h3 a { text-decoration: none; }
.ijs-tegel-body h3 a:hover { color: var(--merk); text-decoration: underline;
                             text-underline-offset: 4px; }
.ijs-tegel-body p { font-size: var(--t-klein); color: var(--inkt-stil); line-height: 1.55; }
.ijs-tegel .ijs-dienst-ic { margin-bottom: var(--s1); }

/* De aanbodlijst: streepjes in het ijsblauw. */
.ijs-aanbod { display: grid; gap: var(--s2); }
.ijs-aanbod li {
  position: relative; padding-inline-start: var(--s4);
  font-size: var(--t-klein); line-height: 1.5; color: var(--inkt-stil);
}
.ijs-aanbod li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .66em;
  width: 9px; height: 3px; border-radius: 3px; background: var(--ijsblauw);
}

/* ------------------------------------------------------------- 11 stappen */
.ijs-stappen-rij {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 48px);
  margin-top: clamp(28px, 3.6vw, 44px); position: relative;
}
.ijs-stappen-rij::before {
  content: ""; position: absolute; z-index: 0;
  top: 22px; inset-inline: 16%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--ijsblauw) 0 7px,
                                                transparent 7px 14px);
}
.ijs-stap { position: relative; z-index: 1; min-width: 0; }
.ijs-stap-kop { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.ijs-stap-n {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: var(--merk); color: #fff;
  font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 7px var(--papier-warm);
}
.ijs-stap p { font-size: var(--t-klein); color: var(--inkt-stil); line-height: 1.6; }
@media (max-width: 900px) {
  .ijs-stappen-rij { grid-template-columns: 1fr; gap: var(--s5); }
  .ijs-stappen-rij::before {
    top: 14px; bottom: 14px; inset-inline: 22px auto; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--ijsblauw) 0 7px,
                                                   transparent 7px 14px);
  }
  .ijs-stap { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 var(--s3); }
  .ijs-stap-kop { display: contents; }
  .ijs-stap h3, .ijs-stap p { grid-column: 2; }
  .ijs-stap p { margin-top: var(--s2); }
}

/* ------------------------------------------------------- 12 beoordelingen */
.ijs-reviews-kop { display: flex; justify-content: space-between; align-items: flex-end;
                   gap: var(--s5); flex-wrap: wrap; }
.ijs-reviews-score {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); font-size: var(--t-klein); color: var(--inkt-stil);
}
.ijs-reviews-score strong { color: var(--inkt); font-size: 1.1rem;
                            font-variant-numeric: tabular-nums; }
.ijs-sterren { display: inline-flex; gap: 2px; }
.ijs-ster { width: 16px; height: 16px; fill: var(--lijn-sterk); stroke: none; }
.ijs-ster-aan { fill: var(--amber); }

.ijs-reviews-knoppen { display: flex; gap: var(--s2); }
.ijs-rondje {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--lijn-sterk); background: var(--papier);
  color: var(--merk); display: grid; place-items: center; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ijs-rondje svg { width: 18px; height: 18px; }
.ijs-rondje:hover:not(:disabled) { background: var(--papier-koel); border-color: var(--merk); }
.ijs-rondje:active:not(:disabled) { transform: scale(.94); }
.ijs-rondje:disabled { opacity: .3; cursor: default; }

.ijs-reviews-spoor {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(372px, 80vw);
  gap: var(--gat); margin: clamp(26px, 3.2vw, 36px) 0 0; padding: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.ijs-reviews-spoor::-webkit-scrollbar { display: none; }
.ijs-review {
  scroll-snap-align: start; background: var(--papier-koel);
  border-radius: var(--r-groot); padding: clamp(22px, 2.4vw, 28px);
  box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: var(--s3);
}
.ijs-review-kop { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--s3); }
.ijs-review-bron { font-size: var(--t-mini); letter-spacing: .08em;
                   text-transform: uppercase; color: var(--inkt-zacht); }
.ijs-review blockquote { margin: 0; flex: 1; }
.ijs-review blockquote p { font-size: var(--t-klein); line-height: 1.65; }
.ijs-review blockquote p::before { content: "\201C"; }
.ijs-review blockquote p::after  { content: "\201D"; }
.ijs-review-naam { font-weight: 600; font-size: var(--t-klein); color: var(--inkt-stil); }
.ijs-reviews-voet { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* ------------------------------------------------------ 13 openingstijden */
.ijs-tijden-rij {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gat); margin-top: clamp(26px, 3.2vw, 36px);
}
@media (max-width: 760px) { .ijs-tijden-rij { grid-template-columns: 1fr; } }
.ijs-tijdkaart {
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--schaduw);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
}
.ijs-tijdkaart dl { margin: 0; width: 100%; display: grid; }
.ijs-tijdkaart dl > div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 11px 0; border-bottom: 1px solid var(--lijn);
}
.ijs-tijdkaart dl > div:last-child { border-bottom: 0; }
.ijs-tijdkaart dt { font-size: var(--t-klein); color: var(--inkt-stil); }
.ijs-tijdkaart dd { font-size: var(--t-klein); font-weight: 600;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.ijs-tijdkaart-noot { margin: 0; font-size: var(--t-mini); color: var(--inkt-stil);
                      line-height: 1.55; }
.ijs-tijdkaart-uit { background: var(--papier-koel); }
.ijs-tijdkaart .ijs-dienst-ic { margin-bottom: var(--s1); }

/* ------------------------------------------------------ 14 contactkaarten */
.ijs-contact-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                   gap: var(--gat); }
@media (max-width: 900px) { .ijs-contact-rij { grid-template-columns: 1fr; } }
.ijs-contactkaart {
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--schaduw);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
}
.ijs-contactkaart h2 { font-family: var(--font-kop); font-size: var(--t-m);
                       font-weight: 600; }
.ijs-contactkaart address { font-style: normal; line-height: 1.6; }
.ijs-contactkaart dl { margin: 0; width: 100%; display: grid; }
.ijs-contactkaart dl > div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 9px 0; border-bottom: 1px solid var(--lijn);
}
.ijs-contactkaart dl > div:last-child { border-bottom: 0; }
.ijs-contactkaart dt { font-size: var(--t-klein); color: var(--inkt-stil); }
.ijs-contactkaart dd { font-size: var(--t-klein); font-weight: 600; text-align: end; }
.ijs-contactkaart a { color: var(--merk); }
.ijs-contact-sub { margin: var(--s2) 0 0; font-size: var(--t-mini);
                   letter-spacing: .1em; text-transform: uppercase;
                   color: var(--inkt-zacht); font-weight: 600; }
.ijs-contactkaart .ijs-dienst-ic { margin-bottom: var(--s1); }

/* ----------------------------------------------------------- 15 instagram */
.ijs-ig-kop { display: flex; justify-content: space-between; align-items: flex-end;
              gap: var(--s5); flex-wrap: wrap; }
.ijs-ig-raster {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  margin-top: clamp(26px, 3.2vw, 36px);
}
@media (max-width: 1100px) { .ijs-ig-raster { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 620px)  { .ijs-ig-raster { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ijs-ig-raster a {
  display: block; position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-klein); background: var(--papier-koel);
}
.ijs-ig-raster img { width: 100%; height: 100%; object-fit: cover;
                     transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.ijs-ig-raster a:hover img, .ijs-ig-raster a:focus-visible img { transform: scale(1.06); }
.ijs-ig-laag { position: absolute; inset: 0; display: grid; place-items: center;
               opacity: 0; background: rgba(12,25,53,.46); transition: opacity .25s ease; }
.ijs-ig-laag svg { width: 24px; height: 24px; stroke: #fff; }
.ijs-ig-raster a:hover .ijs-ig-laag,
.ijs-ig-raster a:focus-visible .ijs-ig-laag { opacity: 1; }

/* -------------------------------------------------------------- 16 vragen */
.ijs-faq-in {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.85fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 1000px) { .ijs-faq-in { grid-template-columns: 1fr; } }
.ijs-faq-kop { position: sticky; top: calc(var(--kleef) + var(--s4)); }
@media (max-width: 1000px) { .ijs-faq-kop { position: static; } }
.ijs-faq-kop .ijs-intro { font-size: var(--t-klein); }
.ijs-faq-kop a { color: var(--merk); text-underline-offset: 3px; }
.ijs-faq-lijst { display: grid; gap: var(--s3); align-content: start; }
.ijs-faq-lijst details {
  background: var(--papier-koel); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--schaduw);
}
.ijs-faq-lijst details[open] { background: var(--papier); box-shadow: var(--schaduw-op); }
.ijs-faq-lijst summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 56px; padding: var(--s3) var(--s5);
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--t-klein); line-height: 1.4; color: var(--merk);
}
.ijs-faq-lijst summary::-webkit-details-marker { display: none; }
.ijs-faq-lijst summary::after {
  content: ""; width: 10px; height: 10px; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease; color: var(--inkt-zacht);
}
.ijs-faq-lijst details[open] summary::after { transform: rotate(225deg) translate(-3px,-3px); }
.ijs-faq-lijst summary:hover { background: var(--ijsblauw-licht); }
.ijs-faq-a { padding: 0 var(--s5) var(--s5); max-width: var(--lees); }
.ijs-faq-a p { font-size: var(--t-klein); line-height: 1.65; color: var(--inkt-stil); }
.ijs-faq-a a { color: var(--merk); text-underline-offset: 3px; }

/* ------------------------------------------- 17 formulier, slot en banner */
.ijs-boekform { background: var(--papier-warm); }
.ijs-boekform [data-boeker] { margin-top: clamp(26px, 3.2vw, 36px); }

.ijs-cta { text-align: center; }
.ijs-cta .ijs-intro  { margin-inline: auto; }
.ijs-cta .ijs-acties { justify-content: center; }

.ijs-banner { background: var(--papier-warm); padding-block: 0; }
.ijs-banner-in {
  width: 100%; max-width: calc(var(--breed) + 2 * var(--rand));
  margin-inline: auto; padding-inline: var(--rand); padding-block: var(--ritme);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .ijs-banner-in { grid-template-columns: 1fr; } }
.ijs-banner-tekst { min-width: 0; }
.ijs-banner-beeld img { width: 100%; border-radius: var(--r-groot);
                        aspect-ratio: 4 / 3; object-fit: cover;
                        box-shadow: var(--schaduw-op); }
.ijs-banner-punten { display: grid; gap: var(--s2); margin-top: var(--s4); }
.ijs-banner-punten li {
  position: relative; padding-inline-start: var(--s4);
  font-size: var(--t-klein); line-height: 1.55; color: var(--inkt-stil);
}
.ijs-banner-punten li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .66em;
  width: 9px; height: 3px; border-radius: 3px; background: var(--ijsblauw);
}

/* --------------------------------------------- 18 juridisch en foutpagina */
.ijs-juridisch-in { max-width: calc(74ch + 2 * var(--rand)); }
.ijs-juridisch .ijs-tekst-body { margin-top: clamp(24px, 3vw, 34px); }
.ijs-juridisch-nav {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: clamp(34px, 4vw, 52px); padding-top: var(--s5);
  border-top: 1px solid var(--lijn);
}
.ijs-juridisch-nav a {
  font-size: var(--t-klein); padding: 8px 16px; border-radius: var(--r-pil);
  border: 1.5px solid var(--lijn); text-decoration: none; color: var(--merk);
  transition: border-color .18s ease, background .18s ease;
}
.ijs-juridisch-nav a:hover { border-color: var(--merk); background: var(--papier-koel); }

.ijs-fout { background: var(--papier-warm); padding-block: clamp(64px, 9vw, 120px); }

/* ----------------------------------------------------------- 19 voettekst */
.ijs-footer {
  background: linear-gradient(170deg, var(--merk) 0%, var(--merk-dieper) 100%);
  color: #fff;
  padding-block: clamp(48px, 6vw, 82px) var(--s5);
}
.ijs-footer-grid {
  display: grid; grid-template-columns: 1.7fr repeat(var(--k, 3), minmax(0, 1fr));
  gap: var(--s6) var(--s5); align-items: start;
}
@media (max-width: 1000px) { .ijs-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .ijs-footer-grid { grid-template-columns: 1fr; } }
.ijs-footer-merk img { height: 48px; width: auto; }
.ijs-footer-merk p { margin-top: var(--s3); font-size: var(--t-klein);
                     line-height: 1.6; color: rgba(255,255,255,.72); max-width: 40ch; }
.ijs-footer h3 {
  font-size: var(--t-mini); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ijsblauw);
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.ijs-footer-kolom ul { display: grid; gap: 2px; }
.ijs-footer-kolom a { display: block; padding: 5px 0; font-size: var(--t-klein);
                      color: rgba(255,255,255,.8); text-decoration: none; }
.ijs-footer-kolom a:hover { color: var(--ijsblauw); text-decoration: underline;
                            text-underline-offset: 3px; }
.ijs-footer-contact { margin-top: clamp(28px, 3.2vw, 44px); padding-top: var(--s5);
                      border-top: 1px solid rgba(255,255,255,.16); }
.ijs-footer-contact h3 { border: 0; padding: 0; }
.ijs-footer-contact address {
  font-style: normal; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  font-size: var(--t-klein); color: rgba(255,255,255,.82);
}
.ijs-footer-contact address > div { display: flex; align-items: center; gap: var(--s2);
                                    min-width: 0; }
.ijs-footer-contact strong { color: #fff; margin-inline-end: 4px; }
.ijs-footer-contact svg { width: 18px; height: 18px; color: var(--ijsblauw); }
.ijs-footer-contact a { color: inherit; text-decoration: none; overflow-wrap: break-word; }
.ijs-footer-contact a:hover { color: var(--ijsblauw); text-decoration: underline; }
.ijs-footer-sociaal { display: flex; gap: var(--s2); margin-top: var(--s4); }
.ijs-footer-sociaal a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); color: #fff;
  transition: background .18s ease, color .18s ease;
}
.ijs-footer-sociaal a:hover { background: var(--ijsblauw); color: var(--merk-diep); }
.ijs-footer-sociaal svg { width: 19px; height: 19px; }
.ijs-footer-onder {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5); margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--t-mini); color: rgba(255,255,255,.64);
}
.ijs-footer-onder nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.ijs-footer-onder a { color: inherit; text-decoration: none; }
.ijs-footer-onder a:hover { color: var(--ijsblauw); text-decoration: underline; }

/* Sectiehaken zonder eigen opmaak: ze krijgen hun ruimte van .ijs. Ze staan
   hier zodat scripts/controle.py streng kan blijven over klassen die
   nergens beschreven zijn — een haak zonder regels is iets anders dan een
   klasse die iemand vergeten is. */
.ijs-tekst, .ijs-faq, .ijs-stappen, .ijs-waarom, .ijs-diensten,
.ijs-tijden, .ijs-reviews, .ijs-ig, .ijs-contactblok, .ijs-juridisch { }

/* .ijs-diensten-in is de container van de kaartenrij; hij erft alles van
   .ijs-in en hoeft alleen te bestaan zodat de kop en de rij onder elkaar
   staan in plaats van naast elkaar. */
.ijs-diensten-in { display: block; }

/* ------------------------------------------------------------ 20 beweging */
@media (prefers-reduced-motion: no-preference) {
  .ijs-js-opkomst .ijs-op {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .ijs-js-opkomst .ijs-op-zichtbaar { opacity: 1; transform: none; }
}
@media print {
  .ijs-header, .ijs-footer, .ijs-acties, .ijs-reviews-knoppen { display: none; }
  .ijs { padding-block: var(--s5); }
}

/* =========================================================================
   21  TOKENS DIE HET FORMULIER NODIG HEEFT

   assets/boeker.css is een eigen bestand met een eigen naamgeving; het
   vraagt om --veld, --vlak, --gedempt, --fout en nog een stuk of twintig
   andere namen die in de oude stylesheet stonden. Die namen hier opnieuw
   definiëren is eerlijker dan boeker.css overschrijven: dat bestand bevat
   de hele meerstapslogica en die wil je niet aanraken voor een kleurnaam.

   Alles wijst door naar de tokens hierboven, dus het formulier volgt
   automatisch de huisstijl. Staat er een naam in boeker.css die hier
   ontbreekt, dan valt dat onderdeel terug op de browserstandaard — en dat
   is precies hoe een formulier er ineens uitziet alsof het van een andere
   site komt.
   ========================================================================= */
:root {
  /* vlakken en lijnen */
  --vlak:        var(--papier);
  --veld:        var(--papier-koel);
  --zacht:       var(--papier-warm);
  --gedempt:     var(--inkt-stil);
  --rand-sterk:  var(--lijn-sterk);
  --donker:      var(--merk-diep);

  /* het accent van het formulier volgt het merk, niet het ijsblauw: een
     invulveld met een lichtblauwe rand leest als uitgeschakeld */
  --accent:      var(--merk);
  --accent-op:   var(--merk-diep);
  --accent-rand: var(--merk);
  --accent-zacht:var(--ijsblauw-licht);

  /* terugkoppeling */
  --goed: #1C7C54;
  --fout: #B3261E;

  /* ringen rond een actief veld */
  --ring-binnen: 0 0 0 3px rgba(12,45,72,.16);
  --ring-donker: 0 0 0 3px rgba(177,212,224,.42);

  /* maten waar boeker.css naar vraagt, uit dezelfde schaal als de rest */
  --tekst-fs:      var(--t-body);
  --klein-fs:      var(--t-klein);
  --bijschrift-fs: var(--t-mini);
  --label-fs:      var(--t-mini);
  --kaart-fs:      var(--t-klein);
  --kaart-lh:      1.6;
  --eyebrow-fs:    var(--t-mini);
  --eyebrow-lh:    1.3;
  --eyebrow-fw:    600;
  --eyebrow-ls:    .14em;
  --h4-fs:         var(--t-m);
  --h4-lh:         1.3;
  --h5-fs:         1.02rem;
  --h5-lh:         1.35;
  --h2-fs:         var(--t-l);
  --h2-lh:         var(--lh-kop);
  --lh-krap:       1.35;
  --lh-strak:      1.2;

  /* beweging: één duur en één curve voor de hele site */
  --duur-1: .18s;
  --duur-2: .34s;
  --soepel: cubic-bezier(.22,.61,.36,1);

  --r-pil: 999px;
}