/* De D'Lyla-jas: de huisstijl van de statische site van D'Lylatrishia's (bron:
   bron/bouw-eigen-website.py, het CSS-deel) als jas van de bouwsite. Alles hangt
   onder .jas-dlylatrishias, zodat deze stylesheet niets buiten de site raakt (S12):
   wat in de bron op :root, body of main stond, staat hier op de wortel. Gewone CSS
   voor scripts/bouw-sjabloon-css.mjs: geen nesting en geen voorbewerking.
   Regelnummers in de commentaren zijn die van het bouwscript. */

/* Lettertypen (bron r476 t/m 478). Bodoni Moda en Jost vallen onder de SIL Open
   Font License 1.1; de licentie met de copyrightregels staat in
   /bouwsite/jas/dlylatrishias/fonts/OFL.txt. */
@font-face {
  font-family: "Bodoni Moda";
  src: url(/bouwsite/jas/dlylatrishias/fonts/bodoni-moda-normal.woff2) format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url(/bouwsite/jas/dlylatrishias/fonts/bodoni-moda-italic.woff2) format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url(/bouwsite/jas/dlylatrishias/fonts/jost-normal.woff2) format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Tokens (bron :root r479 t/m 491; de goudlijnen en het marmermasker uit de latere
   :root r1035 t/m 1039, die in de bron wint) plus de body-regel r495. */
.jas-dlylatrishias {
  color-scheme: light;
  --blush: #faf1f3;
  --blush-diep: #f4e3e8;
  --poeder: #e9c3cf;
  --roos: #bb5c7d;
  --roos-hover: #a44d6c;
  --diep: #834058;
  --pruim: #241820;
  --zacht: #6b4f5c;
  --goud: #c0912f;
  --goudlijn: linear-gradient(90deg, #faf2a9 0%, #f5e28a 12%, #ddbc5f 20%, #c89f3f 28%, #b78826 40%, #b58422 50%, #c29634 60%, #d6b254 68%, #f1d980 76%, #faf3a9 90%, #faf2a9 100%);
  --goudlijn-v: linear-gradient(180deg, #faf2a9 0%, #f5e28a 12%, #ddbc5f 20%, #c89f3f 28%, #b78826 40%, #b58422 50%, #c29634 60%, #d6b254 68%, #f1d980 76%, #faf3a9 90%, #faf2a9 100%);
  --marmer-masker: radial-gradient(50% 54% at 50% 48%, #000 0 62%, rgba(0, 0, 0, 0.82) 77%, rgba(0, 0, 0, 0.34) 90%, rgba(0, 0, 0, 0) 100%);
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;
  --rand: clamp(20px, 4.2vw, 56px);
  --grond: var(--blush);
  background: var(--blush);
  color: var(--pruim);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 820px) {
  .jas-dlylatrishias {
    --marmer-masker: radial-gradient(56% 50% at 50% 42%, #000 0 56%, rgba(0, 0, 0, 0.78) 74%, rgba(0, 0, 0, 0.3) 89%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Basis (bron r492 t/m 512). De html-regels gaan niet als html-regel mee: die raken
   de hele pagina en horen niet bij een jas. Smooth scroll blijft weg. De ruimte
   onder de plakkende kop bij een anker (bron r507, html{scroll-padding-top:96px})
   komt terug als scroll-margin-top op elk element met een id in de jas (K3): de
   browser houdt die afstand aan als hij naar dat element springt, en de regel
   blijft binnen .jas-dlylatrishias. */
.jas-dlylatrishias,
.jas-dlylatrishias *,
.jas-dlylatrishias *::before,
.jas-dlylatrishias *::after {
  box-sizing: border-box;
}
.jas-dlylatrishias main {
  overflow-x: clip;
}
.jas-dlylatrishias [id] {
  scroll-margin-top: 96px;
}
.jas-dlylatrishias img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* De bron zet alleen a{color:inherit}; de streep onder een link komt daar van de browser. De basis-CSS van de app
   (a{text-decoration:inherit}) haalt die weg, dus zet de jas hem terug (stap 3, taak 20, J7). Elke plek waar de bron
   text-decoration:none heeft (knop, boek, kop-nav, voet, kruimel, ander, ...) zet dat met een sterkere selector.
   */
.jas-dlylatrishias a {
  color: inherit;
  text-decoration: underline;
}
/* Een telefoonnummer nooit over twee regels. */
.jas-dlylatrishias a[href^="tel:"] {
  white-space: nowrap;
}
.jas-dlylatrishias [hidden] {
  display: none !important;
}
.jas-dlylatrishias button {
  font: inherit;
  color: inherit;
}
.jas-dlylatrishias ::selection {
  background: var(--poeder);
  color: var(--pruim);
}

/* Focusring (bron r504, r505): diep op licht, poeder op donker. */
.jas-dlylatrishias :focus-visible {
  outline: 2px solid var(--diep);
  outline-offset: 3px;
}
.jas-dlylatrishias .bouwsite-tint-donker :focus-visible {
  outline-color: var(--poeder);
}

/* Typografie: koppen in Bodoni, lopende tekst in Jost (bron r506 t/m 508). */
.jas-dlylatrishias h1,
.jas-dlylatrishias h2,
.jas-dlylatrishias h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.jas-dlylatrishias p {
  margin: 0;
  text-wrap: pretty;
}
.jas-dlylatrishias li {
  text-wrap: pretty;
}
.jas-dlylatrishias strong {
  font-weight: 600;
}
.jas-dlylatrishias .kop2 {
  font-size: clamp(2.1rem, 1.35rem + 2.3vw, 3.35rem);
  text-align: center;
}
.jas-dlylatrishias .kop2.links {
  text-align: left;
}
.jas-dlylatrishias .bouwsite-tint-donker .kop2 {
  color: var(--blush);
}
.jas-dlylatrishias .intro {
  max-width: 36em;
  margin: 18px auto 0;
  text-align: center;
  color: var(--zacht);
  font-size: 18px;
}
.jas-dlylatrishias .groot {
  max-width: 820px;
  margin-inline: auto;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem);
  line-height: 1.45;
}
.jas-dlylatrishias .tekstblok p {
  color: var(--zacht);
  font-size: clamp(16px, 1.9vw, 17.5px);
  line-height: 1.72;
  margin: 0 0 16px;
}
.jas-dlylatrishias .tekstblok h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  color: var(--pruim);
  margin: 34px 0 12px;
}
.jas-dlylatrishias .tekstblok h2:first-child {
  margin-top: 0;
}
/* Op donker is de zachte tekstkleur te zwak; daar wordt het blush (zoals de bron in de voet). */
.jas-dlylatrishias .bouwsite-tint-donker .intro,
.jas-dlylatrishias .bouwsite-tint-donker .tekstblok p,
.jas-dlylatrishias .bouwsite-tint-donker .tekstblok h2 {
  color: var(--blush);
}

/* Links in lopende tekst (bron r816): diep, halfvet, met een gouden onderstreping. */
.jas-dlylatrishias .bouwsite-opmaak a,
.jas-dlylatrishias .intro a,
.jas-dlylatrishias .antwoord a {
  color: var(--diep);
  font-weight: 600;
  text-decoration-color: var(--goud);
  text-underline-offset: 4px;
}
.jas-dlylatrishias .bouwsite-tint-donker .bouwsite-opmaak a,
.jas-dlylatrishias .bouwsite-tint-donker .intro a,
.jas-dlylatrishias .bouwsite-tint-donker .antwoord a {
  color: var(--blush);
}

/* Containers (bron r509, r1114, r1118). */
.jas-dlylatrishias .binnen {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.jas-dlylatrishias .binnen.smal {
  max-width: 760px;
}
.jas-dlylatrishias .binnen.prijs-kolom {
  max-width: calc(880px + 2 * var(--rand));
}

/* Iconen (bron r510, r511): lijntekeningen in de tekstkleur. */
.jas-dlylatrishias .ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.jas-dlylatrishias .ic.vol {
  fill: currentColor;
  stroke: none;
}

/* Knoppen (bron r516 t/m 532). Gewoon: .knop.roos (vol, roos). Licht: .knop.rand
   (lijn in diep). Op donker keert de lichte knop om naar blush. */
.jas-dlylatrishias .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 32px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 17px/1.1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.jas-dlylatrishias .knop .ic {
  width: 20px;
  height: 20px;
}
.jas-dlylatrishias .knop.roos {
  background: var(--roos);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.jas-dlylatrishias .knop.roos:hover {
  background: var(--roos-hover);
}
.jas-dlylatrishias .knop.rand {
  border-color: var(--diep);
  color: var(--diep);
}
.jas-dlylatrishias .knop.rand:hover {
  background: var(--diep);
  color: #fff;
}
.jas-dlylatrishias .bouwsite-tint-donker .knop.rand {
  border-color: var(--blush);
  color: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-donker .knop.rand:hover {
  background: var(--blush);
  color: var(--pruim);
}
.jas-dlylatrishias .tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--diep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--goud);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.jas-dlylatrishias .tekstlink:hover {
  text-decoration-color: var(--diep);
}
.jas-dlylatrishias .tekstlink .ic {
  width: 20px;
  height: 20px;
  color: var(--goud);
}
.jas-dlylatrishias .bouwsite-tint-donker .tekstlink {
  color: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-donker .tekstlink:hover {
  text-decoration-color: var(--blush);
}
.jas-dlylatrishias .boek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--diep);
  color: var(--diep);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.jas-dlylatrishias .boek:hover {
  background: var(--diep);
  color: #fff;
}
.jas-dlylatrishias .rond {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1.5px solid var(--diep);
  background: transparent;
  color: var(--diep);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.jas-dlylatrishias .rond:hover {
  background: var(--diep);
  color: #fff;
}
.jas-dlylatrishias .rond .ic {
  width: 20px;
  height: 20px;
}
.jas-dlylatrishias .sterren {
  display: inline-flex;
  gap: 3px;
  color: var(--goud);
}
.jas-dlylatrishias .sterren .ic {
  width: 17px;
  height: 17px;
}

/* Sectieritme (bron r604, r1162): een band krijgt ruime lucht boven en onder. */
.jas-dlylatrishias .band {
  padding-block: clamp(80px, 9vw, 128px);
}
.jas-dlylatrishias .band.krap {
  padding-block: clamp(26px, 4vw, 44px);
}

/* De vijf tinten op de sectie van een blok (bron r605 t/m 607 en het marmervlak
   r1059 t/m 1067). Elke tint zet ook --grond, zoals de banden in de bron. */
.jas-dlylatrishias .bouwsite-tint-gewoon {
  background: var(--blush);
  color: var(--pruim);
  --grond: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-poeder {
  background: var(--poeder);
  color: var(--pruim);
  --grond: var(--poeder);
}
.jas-dlylatrishias .bouwsite-tint-diep {
  background: var(--blush-diep);
  color: var(--pruim);
  --grond: var(--blush-diep);
}
.jas-dlylatrishias .bouwsite-tint-donker {
  background: var(--pruim);
  color: var(--blush);
  --grond: var(--pruim);
}
/* Marmer: blush met het marmerbeeld erachter, dat naar onder wegloopt, en een
   zachte waas zodat de tekst leesbaar blijft. Beide lagen zijn pseudo-elementen
   achter de inhoud; isolation houdt ze binnen de sectie. */
.jas-dlylatrishias .bouwsite-tint-marmer {
  position: relative;
  isolation: isolate;
  background: var(--blush);
  color: var(--pruim);
  --grond: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-marmer::before,
.jas-dlylatrishias .bouwsite-tint-marmer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(100%, max(560px, 52vw));
  z-index: -1;
  pointer-events: none;
}
.jas-dlylatrishias .bouwsite-tint-marmer::before {
  opacity: 0.9;
  background: url(/bouwsite/jas/dlylatrishias/marmer.webp) center / cover no-repeat;
  filter: saturate(0.84);
  -webkit-mask-image: linear-gradient(180deg, #000 0 46%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0 46%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0) 100%);
}
.jas-dlylatrishias .bouwsite-tint-marmer::after {
  background: radial-gradient(44% 30% at 50% 22%, rgba(250, 241, 243, 0.86), rgba(250, 241, 243, 0.5) 56%, rgba(250, 241, 243, 0) 88%);
}
@media (max-width: 820px) {
  .jas-dlylatrishias .bouwsite-tint-marmer::after {
    background: radial-gradient(80% 26% at 50% 18%, rgba(250, 241, 243, 0.86), rgba(250, 241, 243, 0.5) 60%, rgba(250, 241, 243, 0) 92%);
  }
}

/* ------------------------------------------------------------------ omlijsting (taak 3) */

/* Kop (bron r548 t/m 562): plakt bovenaan, half doorzichtig blush met een goudlijn
   eronder. Op de computer het menu links, het logo in het midden, de rest rechts. */
.jas-dlylatrishias .kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 241, 243, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.jas-dlylatrishias .kop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--goudlijn);
  opacity: 0.55;
  pointer-events: none;
}
.jas-dlylatrishias .kop-rij {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 28px;
  min-height: 84px;
}
/* Vaste plek per kolom, ook als het menu leeg is (de bron zet ze in die volgorde neer). */
.jas-dlylatrishias .kop-rij > * {
  grid-row: 1;
}
.jas-dlylatrishias .kop-rij > .kop-nav,
.jas-dlylatrishias .kop-rij > .kop-menu {
  grid-column: 1;
}
.jas-dlylatrishias .kop-rij > .kop-logo {
  grid-column: 2;
}
.jas-dlylatrishias .kop-rij > .kop-rechts,
.jas-dlylatrishias .kop-rij > .kop-bel {
  grid-column: 3;
}
.jas-dlylatrishias .kop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}
.jas-dlylatrishias .kop-nav a {
  padding: 8px 0;
  font: 500 16px/1.2 var(--sans);
  text-decoration: none;
  background: linear-gradient(var(--goud), var(--goud)) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.3s;
}
.jas-dlylatrishias .kop-nav a:hover {
  background-size: 100% 1.5px;
}
.jas-dlylatrishias .kop-nav a[aria-current="page"] {
  color: var(--roos);
}
.jas-dlylatrishias .kop-logo {
  display: block;
  text-decoration: none;
  transition: opacity 0.35s, visibility 0.35s;
}
.jas-dlylatrishias .kop-logo img {
  height: 52px;
  width: auto;
}
/* Zonder logo de naam als tekst, ongeveer zo breed als een logo; een lange naam breekt af in plaats van het menu
   ernaast in stukken te drukken (stap 3, taak 20, J3). */
.jas-dlylatrishias .kop-naam {
  display: block;
  max-width: 8.5em;
  font: 500 20px/1.1 var(--serif);
  white-space: normal;
  text-align: center;
}
/* Het eiland KopStand zet "verborgen" zolang het grote logo van de held in beeld is
   (bron r561, .js .kop:not(.toon-logo)). Zonder script of zonder held: altijd zichtbaar. */
.jas-dlylatrishias .kop-stand[data-logo="verborgen"] .kop-logo {
  opacity: 0;
  visibility: hidden;
}
.jas-dlylatrishias .kop-rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.4vw, 36px);
}
.jas-dlylatrishias .kop .knop {
  min-height: 46px;
  padding: 10px 24px;
}
/* Menuknop en belknop alleen op tablet en telefoon (bron r563 t/m 566). Het menu is
   een <details>: open en dicht zonder script, de summary is de ronde knop. */
.jas-dlylatrishias .kop-menu,
.jas-dlylatrishias .kop-bel {
  display: none;
}
.jas-dlylatrishias .menu-knop {
  list-style: none;
}
.jas-dlylatrishias .menu-knop::-webkit-details-marker {
  display: none;
}
.jas-dlylatrishias .menu-knop > span {
  display: grid;
}
.jas-dlylatrishias .menu-knop .ic-sluit,
.jas-dlylatrishias .kop-menu[open] .menu-knop .ic-menu {
  display: none;
}
.jas-dlylatrishias .kop-menu[open] .menu-knop .ic-sluit {
  display: grid;
}
.jas-dlylatrishias .menu-paneel {
  display: none;
}
/* Groepen in het menupaneel (bron r1085 t/m 1087). */
.jas-dlylatrishias .menu-groep {
  display: grid;
  gap: 2px;
  padding: 14px 0;
}
.jas-dlylatrishias .menu-groep > span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 4px;
}
.jas-dlylatrishias .menu-paneel a[aria-current="page"] {
  color: var(--roos);
  font-weight: 600;
}

/* Voet (bron r851 t/m 868). De grond van de bron (body blush) staat hier op de voet zelf: het gedeelde marmervlak
   loopt zo nooit door in de voet als het tweede marmerblok onderaan staat (herstelgolf A, controle 7 Klein 5). */
.jas-dlylatrishias .voet {
  position: relative;
  background: var(--blush);
  padding-block: clamp(64px, 7vw, 96px) 32px;
  font-size: 15.5px;
}
.jas-dlylatrishias .voet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--goudlijn);
  opacity: 0.6;
}
.jas-dlylatrishias .voet-rij {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 0.95fr 1.2fr;
  gap: 40px;
}
.jas-dlylatrishias .voet-logo {
  display: inline-block;
}
.jas-dlylatrishias .voet-logo img {
  width: 220px;
}
.jas-dlylatrishias .voet-naam {
  font: 500 1.75rem/1.1 var(--serif);
}
.jas-dlylatrishias .voet .tagline {
  margin-top: 14px;
  color: var(--zacht);
}
.jas-dlylatrishias .voet h2 {
  margin-bottom: 14px;
  font-size: 1.35rem;
}
.jas-dlylatrishias .voet ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.jas-dlylatrishias .voet a {
  text-decoration: none;
}
.jas-dlylatrishias .voet ul a {
  text-decoration: underline;
  text-decoration-color: rgba(192, 145, 47, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.jas-dlylatrishias .voet ul a:hover {
  text-decoration-color: var(--diep);
}
.jas-dlylatrishias .voet .mail {
  overflow-wrap: anywhere;
}
/* Openingstijden als lijst (bron r838 t/m 840; in de voet zonder maximumbreedte). */
.jas-dlylatrishias .uren {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  max-width: 340px;
  font-variant-numeric: tabular-nums;
}
.jas-dlylatrishias .uren li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.jas-dlylatrishias .uren li span:last-child {
  white-space: nowrap;
}
.jas-dlylatrishias .voet .uren {
  max-width: none;
}
.jas-dlylatrishias .socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.jas-dlylatrishias .route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--diep);
  font-weight: 600;
}
.jas-dlylatrishias .route .ic {
  color: var(--goud);
}
.jas-dlylatrishias .voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(131, 64, 88, 0.14);
  color: var(--zacht);
  font-size: 14px;
}
.jas-dlylatrishias .voet-onder a {
  color: var(--diep);
  text-decoration: underline;
  text-decoration-color: rgba(192, 145, 47, 0.7);
  text-underline-offset: 4px;
}
/* De juridische voetstrook van het platform (M17) staat in de onderregel op de plek
   van de juridische links van de bron. Haar eigen opmaak (Tailwind plus een inline
   rand of donkere balk) gaat hier uit, zodat ze eruitziet als de rest van de regel;
   de inline stijl wint alleen van !important. */
.jas-dlylatrishias .voet-onder > nav {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  text-align: left;
}
.jas-dlylatrishias .voet-onder > nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-start;
}
.jas-dlylatrishias .voet-onder > nav a {
  display: inline;
  min-height: 0;
  padding-inline: 0;
  font-size: 14px;
  letter-spacing: normal;
  opacity: 1 !important;
}
.jas-dlylatrishias .onderbalk {
  display: none;
}

/* Tablet en telefoon (bron r882 t/m 909): compacte kop met menuknop, logo en belknop,
   en de balk vast onderin. html.menu-open (de pagina vastzetten) gaat niet mee: dat
   raakt de hele pagina; het paneel scrolt zelf en houdt het scrollen binnen. */
@media (max-width: 1099px) {
  .jas-dlylatrishias .kop-rij {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    column-gap: 12px;
    min-height: 66px;
  }
  .jas-dlylatrishias .kop-nav,
  .jas-dlylatrishias .kop-rechts {
    display: none;
  }
  .jas-dlylatrishias .kop-menu {
    display: block;
  }
  .jas-dlylatrishias .kop-bel {
    display: inline-grid;
    justify-self: end;
  }
  .jas-dlylatrishias .kop-logo {
    justify-self: center;
  }
  .jas-dlylatrishias .kop-logo img {
    height: 40px;
  }
  /* Zonder logo staat de naam als tekst in de kop: die breekt hier af in plaats van de pagina
     breder te maken dan het scherm (stap 3, taak 20, J1). */
  .jas-dlylatrishias .kop-naam {
    display: block;
    font-size: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .jas-dlylatrishias .menu-paneel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 66px);
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px var(--rand) calc(26px + env(safe-area-inset-bottom, 0px));
    background: var(--blush);
    box-shadow: 0 30px 40px -30px rgba(36, 24, 32, 0.4);
  }
  .jas-dlylatrishias .menu-paneel a:not(.knop) {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid rgba(131, 64, 88, 0.12);
    font: 400 26px/1.2 var(--serif);
    text-decoration: none;
  }
  .jas-dlylatrishias .menu-paneel .knop {
    display: flex;
    margin-top: 22px;
  }
  /* De nav is het oriëntatiepunt; de wrapper van het eiland erin is de vaste balk,
     zodat de stand zonder :has() met een attribuut te lezen is. */
  .jas-dlylatrishias .onderbalk {
    display: block;
  }
  .jas-dlylatrishias .onderbalk .balk-stand {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 241, 243, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 rgba(192, 145, 47, 0.45);
  }
  .jas-dlylatrishias .onderbalk .knop {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding-inline: 14px;
    white-space: normal;
    text-align: center;
  }
  /* De ruimte onder de voet voor de balk (bron: body), alleen als de jas een balk heeft. */
  .jas-dlylatrishias:has(> .onderbalk) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .jas-dlylatrishias .voet-rij {
    grid-template-columns: 1.5fr 1fr 1.2fr;
  }
  .jas-dlylatrishias .voet-rij > :first-child {
    grid-column: 1 / -1;
  }
  /* De balk verschijnt pas als de knoppen in de held uit beeld zijn (bron r906 t/m 910).
     Het eiland OnderbalkNaHeld zet data-balk; zonder script staat de balk er gewoon. */
  .jas-dlylatrishias .onderbalk .balk-stand[data-balk="verborgen"] {
    transform: translateY(calc(100% + 2px));
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
  }
  .jas-dlylatrishias .onderbalk .balk-stand[data-balk="zichtbaar"] {
    transform: none;
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s linear 0s;
  }
  .jas-dlylatrishias .onderbalk .balk-stand[data-balk-direct] {
    transition: none !important;
  }
}
@media (max-width: 900px) {
  .jas-dlylatrishias .voet-onder {
    justify-content: flex-start;
  }
  .jas-dlylatrishias .voet-rij {
    grid-template-columns: 1fr 1fr;
  }
  /* De lange lijst links, openingstijden en contact rechts onder elkaar (bron r965 t/m 967). */
  .jas-dlylatrishias .voet-rij > :nth-child(2) {
    grid-row: span 2;
  }
}
@media (max-width: 560px) {
  .jas-dlylatrishias .voet-rij {
    grid-template-columns: 1fr;
  }
  .jas-dlylatrishias .voet-rij > :nth-child(2) {
    grid-row: auto;
  }
}
/* Raakvlakken op een telefoon minstens 24 px (bron r1203 t/m 1207, WCAG 2.2 AA). */
@media (max-width: 820px) {
  .jas-dlylatrishias .voet-rij ul:not(.uren) a,
  .jas-dlylatrishias .voet-onder a,
  .jas-dlylatrishias .voet-onder > nav a,
  .jas-dlylatrishias .voet a.mail {
    display: inline-block;
    padding-block: 5px;
  }
  .jas-dlylatrishias .voet a.route {
    padding-block: 5px;
  }
}

/* ------------------------------------------------------------------ bouwstenen A (taak 4) */
/* De selectoren komen uit de stylesheet van de gebouwde bronsite (welkom, held, pagina-kop,
   behandelpagina, lopende tekst). Elk blok staat in een sectie met de tintklasse; de
   achtergrond komt dus van de tint, niet van het blok zelf. */

/* Alleen voor schermlezers (labels bij de feiten in de behandelkop). */
.jas-dlylatrishias .verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Gouden kaders (bron .kader, .k1, .k2): twee scheve lijstjes die net buiten de hoeken doorlopen. */
.jas-dlylatrishias .kader {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jas-dlylatrishias .kader i {
  position: absolute;
  display: block;
}
.jas-dlylatrishias .kader .b,
.jas-dlylatrishias .kader .o {
  left: -20px;
  right: -20px;
  height: 1.5px;
  background: var(--goudlijn);
}
.jas-dlylatrishias .kader .l,
.jas-dlylatrishias .kader .r {
  top: -20px;
  bottom: -20px;
  width: 1.5px;
  background: var(--goudlijn-v);
}
.jas-dlylatrishias .kader .b {
  top: 0;
}
.jas-dlylatrishias .kader .o {
  bottom: 0;
}
.jas-dlylatrishias .kader .l {
  left: 0;
}
.jas-dlylatrishias .kader .r {
  right: 0;
}
.jas-dlylatrishias .k1 {
  transform: rotate(-0.9deg);
}
.jas-dlylatrishias .k2 {
  inset: 16px 12px;
  transform: rotate(0.75deg);
}
.jas-dlylatrishias .k2 .b,
.jas-dlylatrishias .k2 .o {
  left: -12px;
  right: -12px;
  height: 1px;
}
.jas-dlylatrishias .k2 .l,
.jas-dlylatrishias .k2 .r {
  top: -12px;
  bottom: -12px;
  width: 1px;
}
/* De lijnen van de held trekken zich bij het laden, alleen als de bezoeker beweging toestaat.
   Keyframes gelden voor de hele pagina; de naam draagt daarom de jas. */
@keyframes jas-dlylatrishias-trek-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes jas-dlylatrishias-trek-y {
  from {
    transform: scaleY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .jas-dlylatrishias .held .kader i {
    animation: 0.95s cubic-bezier(0.55, 0.1, 0.2, 1) both;
  }
  .jas-dlylatrishias .held .kader .b,
  .jas-dlylatrishias .held .kader .o {
    animation-name: jas-dlylatrishias-trek-x;
  }
  .jas-dlylatrishias .held .kader .l,
  .jas-dlylatrishias .held .kader .r {
    animation-name: jas-dlylatrishias-trek-y;
  }
  .jas-dlylatrishias .held .k1 .b {
    transform-origin: 0 50%;
    animation-delay: 0.1s;
  }
  .jas-dlylatrishias .held .k1 .r {
    transform-origin: 50% 0;
    animation-delay: 0.35s;
  }
  .jas-dlylatrishias .held .k1 .o {
    transform-origin: 100% 50%;
    animation-delay: 0.6s;
  }
  .jas-dlylatrishias .held .k1 .l {
    transform-origin: 50% 100%;
    animation-delay: 0.85s;
  }
  .jas-dlylatrishias .held .k2 .b {
    transform-origin: 100% 50%;
    animation-delay: 0.35s;
  }
  .jas-dlylatrishias .held .k2 .l {
    transform-origin: 50% 0;
    animation-delay: 0.6s;
  }
  .jas-dlylatrishias .held .k2 .o {
    transform-origin: 0 50%;
    animation-delay: 0.85s;
  }
  .jas-dlylatrishias .held .k2 .r {
    transform-origin: 50% 100%;
    animation-delay: 1.1s;
  }
}

/* Held (bron .held t/m .score en het marmer uit ronde 4). */
.jas-dlylatrishias .held {
  position: relative;
  padding: clamp(40px, 5.5vw, 80px) var(--rand) clamp(88px, 8vw, 120px);
  overflow-x: clip;
}
.jas-dlylatrishias .held-veld {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin-inline: auto;
  min-height: clamp(540px, calc(100svh - 250px), 660px);
  display: grid;
  place-items: center;
  padding: 64px clamp(24px, 7vw, 110px);
}
.jas-dlylatrishias .marmer {
  position: absolute;
  inset: -150px -230px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.88;
  background: url(/bouwsite/jas/dlylatrishias/marmer.webp) center / cover no-repeat;
  filter: saturate(0.84);
  -webkit-mask-image: var(--marmer-masker);
  mask-image: var(--marmer-masker);
}
.jas-dlylatrishias .marmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 42% at 50% 52%, rgba(250, 241, 243, 0.9), rgba(250, 241, 243, 0.55) 52%, rgba(250, 241, 243, 0) 84%);
}
.jas-dlylatrishias .held .kader {
  z-index: 1;
}
.jas-dlylatrishias .held .k1 .b,
.jas-dlylatrishias .held .k1 .o {
  height: 2px;
}
.jas-dlylatrishias .held .k1 .l,
.jas-dlylatrishias .held .k1 .r {
  width: 2px;
}
.jas-dlylatrishias .held-fotos {
  display: contents;
}
/* Oog en nagels hebben de grondkleur als achtergrond: zolang een foto laadt, lopen de
   kaderlijnen niet door een leeg vak. */
.jas-dlylatrishias .held-oog {
  position: absolute;
  z-index: 2;
  left: -56px;
  top: -40px;
  width: clamp(150px, 17vw, 240px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--grond);
  box-shadow: 0 0 0 1.5px var(--goud), 0 0 0 9px var(--grond), 0 0 0 10.5px rgba(192, 145, 47, 0.55), 0 30px 60px -28px rgba(36, 24, 32, 0.45);
}
.jas-dlylatrishias .held-oog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.jas-dlylatrishias .held-nagels {
  position: absolute;
  z-index: 2;
  right: -64px;
  bottom: -60px;
  width: clamp(180px, 20vw, 290px);
  aspect-ratio: 3 / 4;
  margin: 0;
  background: var(--grond);
}
.jas-dlylatrishias .held-nagels img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 34px 60px -30px rgba(36, 24, 32, 0.5);
}
.jas-dlylatrishias .held-nagels::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(192, 145, 47, 0.75);
  transform: rotate(1.6deg);
}
.jas-dlylatrishias .held-inhoud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 660px;
}
.jas-dlylatrishias .held-logo {
  width: min(480px, 100%);
  height: auto;
  margin-bottom: 26px;
}
.jas-dlylatrishias .held h1 {
  font-size: clamp(1.85rem, 1.2rem + 1.7vw, 2.75rem);
}
.jas-dlylatrishias .held .sub {
  margin-top: 16px;
  max-width: 30em;
  color: var(--zacht);
  font-size: clamp(17px, 1rem + 0.25vw, 19px);
  text-wrap: balance;
}
.jas-dlylatrishias .held .knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 30px;
}
.jas-dlylatrishias .score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--zacht);
  font-size: 15px;
}

/* Welkom met de feitenrij (bron .welkom, .feiten-rij): bovenaan geen lucht, die geeft de held al. */
.jas-dlylatrishias .welkom {
  padding: 0 var(--rand) clamp(80px, 9vw, 128px);
  text-align: center;
}
.jas-dlylatrishias .feiten-rij {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  color: var(--zacht);
  font-size: 16px;
}
/* Icoon midden op de eerste regel, ook als het adres doorloopt naar een tweede regel. */
.jas-dlylatrishias .feiten-rij li,
.jas-dlylatrishias .feiten-rij a {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}
.jas-dlylatrishias .feiten-rij a {
  text-decoration: underline;
  text-decoration-color: rgba(192, 145, 47, 0.7);
  text-underline-offset: 5px;
}
.jas-dlylatrishias .feiten-rij .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: calc((1lh - 20px) / 2);
  color: var(--goud);
}

/* Kruimelpad (bron .kruimel). */
.jas-dlylatrishias .kruimel ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--zacht);
}
.jas-dlylatrishias .kruimel li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--poeder);
}
.jas-dlylatrishias .kruimel a {
  color: var(--zacht);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.jas-dlylatrishias .kruimel a:hover {
  color: var(--roos);
  border-bottom-color: currentColor;
}

/* Paginakop (bron .blad-kop). De zachte gloed hoort bij de tint gewoon; op poeder, donker
   en marmer blijft de kop doorzichtig, zodat de tint (en het marmer) zichtbaar blijft. */
.jas-dlylatrishias .blad-kop {
  padding: clamp(34px, 6vw, 64px) 0 clamp(20px, 3vw, 34px);
}
.jas-dlylatrishias .bouwsite-tint-gewoon .blad-kop {
  background: radial-gradient(90% 120% at 50% 0%, var(--blush-diep), var(--blush) 62%, transparent);
}
/* Bron .blad-kop+.band: de band direct na de kop begint krapper. Elk blok staat in een eigen
   sectie, dus de buurregel loopt via die secties. */
.jas-dlylatrishias section:has(> .blad-kop) + section > .band:first-child {
  padding-top: clamp(34px, 4.5vw, 58px);
}
.jas-dlylatrishias .blad-kop h1 {
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.jas-dlylatrishias .blad-kop .sub {
  max-width: 62ch;
  margin: 0;
  color: var(--zacht);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.62;
  text-wrap: pretty;
}
/* Springknoppen naar de ankers op de pagina (bron .werk-chips, op de paginakop links uitgelijnd). */
.jas-dlylatrishias .werk-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 26px;
}
.jas-dlylatrishias .werk-chips a {
  padding: 9px 18px;
  border: 1px solid rgba(131, 64, 88, 0.3);
  border-radius: 999px;
  color: var(--diep);
  font-size: 15px;
  text-decoration: none;
  background: var(--grond);
}
.jas-dlylatrishias .werk-chips a:hover {
  border-color: var(--roos);
  color: var(--roos-hover);
}

/* Behandelkop (bron .beh-held): tekst links, rond beeld met kader rechts. De gloed hoort
   bij de tint gewoon, net als bij de paginakop. */
.jas-dlylatrishias .beh-held {
  padding: clamp(30px, 5vw, 58px) 0 clamp(24px, 4vw, 44px);
}
.jas-dlylatrishias .bouwsite-tint-gewoon .beh-held {
  background: radial-gradient(85% 130% at 22% 0%, var(--blush-diep), var(--blush) 60%, transparent);
}
/* Bron .beh-held+.band: de uitleg sluit dicht onder de behandelkop aan. */
.jas-dlylatrishias section:has(> .beh-held) + section > .band:first-child {
  padding-top: clamp(14px, 2vw, 26px);
}
/* De bron zet de groepen van Behandelingen in een band (.beh-groep+.beh-groep) en op wimperextensions de soorten in
   de band van de uitleg (.soorten). Hier is elk blok een eigen band: twee banden van de tint gewoon na elkaar sluiten
   dan aan met de marge van de bron in plaats van twee keer de volle bandruimte (stap 3, taak 20, J5). */
.jas-dlylatrishias section.bouwsite-tint-gewoon:has(> .band .beh-groep):has(+ section.bouwsite-tint-gewoon > .band .beh-groep) > .band {
  padding-bottom: 0;
}
.jas-dlylatrishias section.bouwsite-tint-gewoon:has(> .band .beh-groep) + section.bouwsite-tint-gewoon > .band:has(.beh-groep) {
  padding-top: clamp(40px, 5vw, 68px);
}
.jas-dlylatrishias section.bouwsite-tint-gewoon:has(> .band > .tekstblok):has(+ section.bouwsite-tint-gewoon > .band > .soorten) > .band {
  padding-bottom: 0;
}
.jas-dlylatrishias section.bouwsite-tint-gewoon:has(> .band > .tekstblok) + section.bouwsite-tint-gewoon > .band:has(> .soorten) {
  padding-top: clamp(52px, 6.5vw, 88px);
}
.jas-dlylatrishias .beh-held-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}
.jas-dlylatrishias .beh-held-tekst h1 {
  font-size: clamp(32px, 5.6vw, 54px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.jas-dlylatrishias .beh-held-tekst .sub {
  max-width: 52ch;
  margin: 0 0 20px;
  color: var(--zacht);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
}
.jas-dlylatrishias .beh-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.jas-dlylatrishias .beh-feiten li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(131, 64, 88, 0.14);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--diep);
}
.jas-dlylatrishias .beh-feiten .ic {
  width: 16px;
  height: 16px;
  color: var(--goud);
}
.jas-dlylatrishias .beh-held .knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.jas-dlylatrishias .beh-held-beeld {
  position: relative;
  margin: 0 auto;
  width: fit-content;
  padding: 26px;
}
.jas-dlylatrishias .beh-held-beeld img {
  display: block;
  width: clamp(210px, 30vw, 360px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 30px 60px -34px rgba(36, 24, 32, 0.55);
}
.jas-dlylatrishias .beh-held-beeld .kader .b,
.jas-dlylatrishias .beh-held-beeld .kader .o {
  left: -8px;
  right: -8px;
}
.jas-dlylatrishias .beh-held-beeld .kader .l,
.jas-dlylatrishias .beh-held-beeld .kader .r {
  top: -8px;
  bottom: -8px;
}
.jas-dlylatrishias .beh-held-beeld .k2 {
  inset: 12px 10px;
}

/* Lopende tekst in uitleg en lange tekst (bron .tekstblok). Een kop uit de opmaaktekst
   ("## ") wordt een h3 en krijgt hier de vorm van de bron-h2 (M7 rij 10). Alleen binnen de opmaak: het
   stuk tussenkop van de lange tekst (ook een h3) houdt de gewone kopmaat (controle taak 4, klein 3). */
.jas-dlylatrishias .tekstblok .bouwsite-opmaak h3 {
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  margin: 34px 0 12px;
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak > h3:first-child {
  margin-top: 0;
}
.jas-dlylatrishias .tekstblok .groot {
  max-width: none;
}
.jas-dlylatrishias .tekstblok .groot p {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.42;
  color: var(--diep);
}
.jas-dlylatrishias .tekstblok .accent p {
  margin: 28px 0;
  font: italic 400 clamp(20px, 2.4vw, 24px) / 1.4 var(--serif);
  color: var(--diep);
}
/* Lijsten in de opmaaktekst krijgen een gouden vinkje (bron .vinklijst, M7 rij 22). Het
   vinkje is een gedraaide hoek van twee randen, zodat er geen beeldbestand bij hoeft. */
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 13px;
  margin: calc((1lh - 13px) / 2 - 2px) 7px 0 8px;
  border-right: 1.8px solid var(--goud);
  border-bottom: 1.8px solid var(--goud);
  transform: rotate(45deg);
}
/* Een lijstregel met alleen een link naar bellen, WhatsApp, e-mail of Instagram krijgt het icoon van die link in plaats
   van het vinkje (bron: de contactlijst op de cursuspagina's, ic("tel") enz. per regel, 22 bij 22 in goud; stap 3,
   taak 20, J6). De klasse zet de jas op de regel (contactLijstKlasse in delen.tsx; geen :has() met een
   attribuut, lib/css-has-regels.test.ts). De tekeningen zijn die van iconen.tsx, als masker. */
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-tel::before,
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-wa::before,
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-mail::before,
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-insta::before {
  width: 22px;
  height: 22px;
  margin: calc((1lh - 22px) / 2) 0 0;
  border: 0;
  transform: none;
  background: var(--goud);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-tel::before {
  mask-image: url(/bouwsite/jas/dlylatrishias/ic-tel.svg);
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-wa::before {
  mask-image: url(/bouwsite/jas/dlylatrishias/ic-wa.svg);
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-mail::before {
  mask-image: url(/bouwsite/jas/dlylatrishias/ic-mail.svg);
}
.jas-dlylatrishias .tekstblok .bouwsite-opmaak ul li.lijst-insta::before {
  mask-image: url(/bouwsite/jas/dlylatrishias/ic-insta.svg);
}
/* Het lijst-stuk van de lange tekst blijft een gewone lijst (bron .tekstblok>ul). */
.jas-dlylatrishias .tekstblok > ul.lijst {
  list-style: disc; /* stap 3, taak 20, J6: de basis-CSS van de app zet none */
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--zacht);
  line-height: 1.7;
}
.jas-dlylatrishias .tekstblok > ul.lijst li {
  margin-bottom: 7px;
}
/* Kader in de lange tekst (bron .tekst-chip). */
.jas-dlylatrishias .tekst-kader {
  background: #fff;
  border: 1px dashed var(--poeder);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 24px;
}
.jas-dlylatrishias .tekstblok .tekst-kader p {
  margin: 0 0 10px;
  color: var(--zacht);
  font-size: 15px;
  line-height: 1.62;
}
.jas-dlylatrishias .tekstblok .tekst-kader p:last-child {
  margin-bottom: 0;
}
.jas-dlylatrishias .tekst-kader strong {
  color: var(--diep);
}
.jas-dlylatrishias .uitleg-beeld,
.jas-dlylatrishias .lezen-beeld {
  margin: 28px 0;
}
.jas-dlylatrishias .uitleg-beeld img,
.jas-dlylatrishias .lezen-beeld img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Herstel taak 14: mijn-verhaal en de algemene voorwaarden zoals de bron (mijn-verhaal.html r768 t/m r791,
   algemene-voorwaarden.html r685 t/m r695, privacyverklaring.html r813). */
/* Het gouden hartje achter de kop (bron .blad-kop h1 .hart). */
/* Inline achter de titel, zoals in de bron (de basis-CSS van de app zet svg op block; stap 3, taak 20, J8). */
.jas-dlylatrishias .blad-kop h1 .ic {
  display: inline;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.2em;
  color: var(--goud);
  vertical-align: 0.02em;
}
/* Een paginakop boven een smalle leeskolom staat even breed als die kolom (bron: de juridische pagina's zetten de
   blad-kop in binnen smal). */
.jas-dlylatrishias section:has(> .blad-kop):has(+ section > .band > .binnen.smal.tekstblok) .blad-kop > .binnen {
  max-width: 760px;
}
/* Op de pagina Prijzen staan paginakop, prijslijst en de uitleg eronder in een kolom (bron: blad-kop, lijst en
   "Goed om te weten" in binnen prijs-kolom; stap 3, taak 20, J9). */
.jas-dlylatrishias section:has(> .blad-kop):has(+ section > .band > .binnen.prijs-kolom) .blad-kop > .binnen,
.jas-dlylatrishias section:has(> .band > .binnen.prijs-kolom) + section > .band > .binnen.smal.tekstblok {
  max-width: calc(880px + 2 * var(--rand));
}
/* Het portret naast de tekst (bron .verhaal-rij en .verhaal-beeld): de foto blijft staan terwijl je leest en past
   altijd in beeld; het kader volgt ook de schermhoogte. De maten horen bij het portret van 994 bij 1846 (--r). De
   klasse fotokader staat erbij, zodat deze maten winnen van die van Kennismaking. */
.jas-dlylatrishias .verhaal-rij {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.jas-dlylatrishias .fotokader.verhaal-beeld {
  position: sticky;
  top: 116px;
  width: min(calc((100% + 72px) / 1.4), calc((100vh - 124px) / 2.5));
  width: min(calc((100% + 72px) / 1.4), calc((100svh - 124px) / 2.5));
  margin: 0 auto;
  --u: 0.2;
  --t: 0.1;
  --b: 0.2394;
  --r: 53.85%;
}
/* De scherpe foto in de verhouding van het portret, niet de 3:4 van Kennismaking. */
.jas-dlylatrishias .fotokader.verhaal-beeld .uitloop .scherp {
  aspect-ratio: 994 / 1846;
}
/* Het citaat (bron .verhaal-citaat): groot, cursief en gecentreerd tussen twee gouden lijnen. */
.jas-dlylatrishias .verhaal-citaat {
  margin: 38px 0 30px;
  text-align: center;
}
.jas-dlylatrishias .verhaal-citaat::before,
.jas-dlylatrishias .verhaal-citaat::after {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin-inline: auto;
  background: var(--goudlijn);
}
.jas-dlylatrishias .tekstblok .verhaal-citaat p {
  margin: 24px 0;
  font: italic 400 clamp(26px, 3.6vw, 38px) / 1.25 var(--serif);
  color: var(--pruim);
}
/* De groet (bron p.groet): elke regel apart, de handtekening in grote cursieve Bodoni. */
.jas-dlylatrishias .tekstblok .groet {
  margin: 0;
  color: var(--zacht);
}
.jas-dlylatrishias .groet span {
  display: block;
}
.jas-dlylatrishias .groet .handtekening {
  margin-top: 2px;
  font: italic 400 clamp(28px, 3.4vw, 34px) / 1.2 var(--serif);
  color: var(--diep);
}
/* Een artikel van de algemene voorwaarden (bron .artikel): een kleinere kop, de lijst er direct onder. */
.jas-dlylatrishias .tekstblok h2.artikel-kop {
  font-size: clamp(19px, 2.4vw, 23px);
  margin: 0 0 8px;
}
.jas-dlylatrishias .tekstblok > h2.artikel-kop + ul.lijst {
  margin: 0 0 26px;
}
.jas-dlylatrishias .tekstblok > h2.artikel-kop + ul.lijst li {
  margin-bottom: 6px;
}
/* Kleine tekst (bron .tekstblok .klein). */
.jas-dlylatrishias .tekstblok .klein p {
  font-size: 14px;
  color: var(--zacht);
}
/* Een link in een alinea van een Lange tekst of een Uitleg is in de bron een gewone link in de kleur en het gewicht
   van de tekst (bron a{color:inherit}; alleen intro, antwoord en vinklijst krijgen diep en halfvet). Gemeten op de
   algemene voorwaarden, de privacyverklaring en (herstelgolf A) de acht links op wimperextensions-delfzijl. */
.jas-dlylatrishias section[data-blok$="-lange-tekst"] .bouwsite-opmaak p a,
.jas-dlylatrishias section[data-blok$="-uitleg"] .bouwsite-opmaak p a {
  color: inherit;
  font-weight: inherit;
  text-decoration-color: currentColor;
  text-underline-offset: auto;
}
/* De slotlink van een Uitleg: een alinea met alleen een link, als laatste na een lijst (bron prijzen, "Goed om te
   weten": p > a.tekstlink na ul.vinklijst, TS21). Zelfde vorm als .tekstlink. */
.jas-dlylatrishias section[data-blok$="-uitleg"] .bouwsite-opmaak ul + p:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--diep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--goud);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s;
}
.jas-dlylatrishias section[data-blok$="-uitleg"] .bouwsite-opmaak ul + p:last-child > a:hover {
  text-decoration-color: var(--diep);
}
/* Tablet liggend: de kop is lager en onderin staat de vaste balk (bron r773). */
@media (min-width: 901px) and (max-width: 1099px) {
  .jas-dlylatrishias .fotokader.verhaal-beeld {
    top: 98px;
    width: min(calc((100% + 72px) / 1.4), calc((100vh - 176px - env(safe-area-inset-bottom, 0px)) / 2.5));
    width: min(calc((100% + 72px) / 1.4), calc((100svh - 176px - env(safe-area-inset-bottom, 0px)) / 2.5));
  }
}
/* Tablet en telefoon (bron r784 t/m r791): het portret boven de tekst. De bron heeft hier een eigen, krappere
   uitsnede (patricia-verhaal-telefoon.webp, 890 bij 1769); de jas benadert die met dezelfde foto: gemeten ligt de
   uitsnede 52 px van links en 21 px van boven in het portret, dus object-position 50% en 27,3%. */
@media (max-width: 900px) {
  .jas-dlylatrishias .verhaal-rij {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .jas-dlylatrishias .fotokader.verhaal-beeld {
    position: relative;
    top: auto;
    --u: 0.1268;
    --t: 0.0704;
    --b: 0.1606;
    --r: 50.31%;
    width: min(calc(100% / 1.2536), 300px);
    margin: 0 auto calc(var(--b) * min(100% / 1.2536, 300px));
  }
  .jas-dlylatrishias .fotokader.verhaal-beeld .uitloop .scherp,
  .jas-dlylatrishias .fotokader.verhaal-beeld .uitloop .waas {
    aspect-ratio: 890 / 1769;
    object-fit: cover;
    object-position: 50% 27.3%;
  }
}

/* Op donker (held, behandelkop, paginakop) is de zachte tekstkleur te zwak; het marmer
   van de held hoort bij licht en valt daar weg. */
.jas-dlylatrishias .bouwsite-tint-donker .marmer {
  display: none;
}
.jas-dlylatrishias .bouwsite-tint-donker .held .sub,
.jas-dlylatrishias .bouwsite-tint-donker .score,
.jas-dlylatrishias .bouwsite-tint-donker .blad-kop .sub,
.jas-dlylatrishias .bouwsite-tint-donker .beh-held-tekst .sub,
.jas-dlylatrishias .bouwsite-tint-donker .kruimel ol,
.jas-dlylatrishias .bouwsite-tint-donker .kruimel a {
  color: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-donker .werk-chips a {
  border-color: rgba(233, 195, 207, 0.5);
  color: var(--blush);
}

/* Smallere schermen: de foto's steken minder ver buiten het kader. */
@media (max-width: 1359px) {
  .jas-dlylatrishias .held-oog {
    left: -24px;
  }
  .jas-dlylatrishias .held-nagels {
    right: -20px;
  }
}
/* Tablet liggend en kleine laptop: tekst smaller, nagelfoto kleiner. */
@media (min-width: 901px) and (max-width: 1279px) {
  .jas-dlylatrishias .held-inhoud {
    max-width: 540px;
  }
  .jas-dlylatrishias .held-oog {
    left: -8px;
    top: -12px;
  }
  .jas-dlylatrishias .held-nagels {
    right: -4px;
    width: clamp(160px, 18vw, 220px);
  }
}
/* Tablet en telefoon: lichtere marmerrand; behandelkop in een kolom met het beeld boven. */
@media (max-width: 820px) {
  .jas-dlylatrishias .marmer {
    inset: -70px -90px;
  }
  .jas-dlylatrishias .marmer::after {
    background: radial-gradient(52% 34% at 50% 60%, rgba(250, 241, 243, 0.78), rgba(250, 241, 243, 0.4) 58%, rgba(250, 241, 243, 0) 90%);
  }
  .jas-dlylatrishias .beh-held-rij {
    grid-template-columns: 1fr;
  }
  .jas-dlylatrishias .beh-held-beeld {
    order: -1;
    padding: 18px;
  }
  .jas-dlylatrishias .beh-held-beeld img {
    width: min(58vw, 240px);
  }
  .jas-dlylatrishias .beh-held .knoppen {
    flex-direction: column;
    align-items: stretch;
  }
  .jas-dlylatrishias .beh-held .knoppen .tekstlink {
    align-self: center;
  }
}
/* Tablet staand en telefoon: de nagels rechtsboven over de hoek van het kader, het oog
   linksonder over de gouden lijn met de score ernaast. held-fotos houdt boven het logo
   de plek voor de nagels vrij. */
@media (max-width: 900px) {
  .jas-dlylatrishias .held {
    padding-top: clamp(52px, 7.2vw, 64px);
  }
  .jas-dlylatrishias .held-veld {
    --nagels: clamp(112px, 32vw, 200px);
    --oog: clamp(100px, 30vw, 150px);
    display: flow-root;
    place-items: normal;
    min-height: 0;
    padding: 0 18px 18px;
  }
  .jas-dlylatrishias .held .k1 .b,
  .jas-dlylatrishias .held .k1 .o {
    left: -14px;
    right: -14px;
  }
  .jas-dlylatrishias .held .k1 .l,
  .jas-dlylatrishias .held .k1 .r {
    top: -14px;
    bottom: -14px;
  }
  .jas-dlylatrishias .held .held-fotos {
    display: block;
    position: static;
    height: calc(var(--nagels) * 4 / 3 - 28px);
    margin-bottom: 16px;
  }
  .jas-dlylatrishias .held-nagels {
    top: -28px;
    right: -6px;
    bottom: auto;
    width: var(--nagels);
  }
  .jas-dlylatrishias .held-oog {
    left: -6px;
    top: auto;
    bottom: calc(40px - var(--oog) / 2);
    width: var(--oog);
  }
  .jas-dlylatrishias .held-inhoud {
    max-width: none;
  }
  .jas-dlylatrishias .held-logo {
    width: min(340px, 80%);
  }
  .jas-dlylatrishias .score {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: flex-start;
    margin: 34px 0 0 calc(var(--oog) + 2px);
    text-align: left;
  }
  /* De feiten onder elkaar met de iconen in een rechte lijn; het rijtje zelf in het midden. */
  .jas-dlylatrishias .feiten-rij {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 12px;
    text-align: left;
  }
}
@media (max-width: 760px) {
  .jas-dlylatrishias .held {
    padding: 50px 24px 64px;
  }
  .jas-dlylatrishias .held-veld {
    padding: 0 14px 18px;
  }
  .jas-dlylatrishias .held .k1 {
    inset: 0 -4px;
    transform: rotate(-0.9deg);
  }
  .jas-dlylatrishias .held .k1 .b,
  .jas-dlylatrishias .held .k1 .o {
    left: -9px;
    right: -9px;
  }
  .jas-dlylatrishias .held .k1 .l,
  .jas-dlylatrishias .held .k1 .r {
    top: -9px;
    bottom: -9px;
  }
  .jas-dlylatrishias .held .k2 {
    inset: 10px 8px;
    transform: rotate(0.7deg);
  }
  .jas-dlylatrishias .held-logo {
    width: min(290px, 80%);
  }
  .jas-dlylatrishias .held .knoppen {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .jas-dlylatrishias .held .knoppen .tekstlink {
    align-self: center;
  }
  .jas-dlylatrishias .score {
    margin-top: 48px;
  }
}
/* Op tablet en telefoon stoppen de lijnen in de hoek onder het oog en de hoek onder de
   nagels; de andere twee hoeken lopen door. Moet na het blok tot 760 px staan. */
@media (max-width: 900px) {
  .jas-dlylatrishias .held .k1 .b,
  .jas-dlylatrishias .held .k2 .b {
    right: 0;
  }
  .jas-dlylatrishias .held .k1 .r,
  .jas-dlylatrishias .held .k2 .r {
    top: 0;
  }
  .jas-dlylatrishias .held .k1 .o,
  .jas-dlylatrishias .held .k2 .o {
    left: 0;
  }
  .jas-dlylatrishias .held .k1 .l,
  .jas-dlylatrishias .held .k2 .l {
    bottom: 0;
  }
}

/* ------------------------------------------------------------------ bouwstenen B (taak 5) */

/* Behandelingen (bron r628 t/m r633, r1171 t/m r1174, r1183 t/m r1187). */
.jas-dlylatrishias .beh-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4.5vw, 64px) clamp(40px, 6vw, 96px);
  max-width: 1040px;
  margin: clamp(44px, 5vw, 72px) auto 0;
}
.jas-dlylatrishias .beh {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.jas-dlylatrishias .beh > div {
  padding-top: clamp(10px, 1.4vw, 22px);
}
.jas-dlylatrishias .medaillon {
  width: clamp(96px, 10vw, 132px);
  aspect-ratio: 1;
  margin: 8px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--goud), 0 0 0 7px var(--grond), 0 0 0 8px rgba(192, 145, 47, 0.55);
}
.jas-dlylatrishias .beh h3 {
  font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.85rem);
}
.jas-dlylatrishias .beh p {
  margin: 6px 0 12px;
  color: var(--zacht);
}
.jas-dlylatrishias .beh-beeld {
  display: block;
}
.jas-dlylatrishias .beh h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.jas-dlylatrishias .beh h3 a:hover {
  color: var(--roos);
  border-bottom-color: currentColor;
}
/* Zelfde gewicht als in de bron: .beh p wint het van marge en kleur, zoals op haar site. */
.jas-dlylatrishias .beh-prijs {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--goud);
  letter-spacing: 0.02em;
}
.jas-dlylatrishias .band-voet {
  margin: 30px 0 0;
  text-align: center;
}
.jas-dlylatrishias .beh-groep > .kop2 {
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
.jas-dlylatrishias .beh-groep .beh-rij {
  margin-inline: 0;
}

/* Looks (bron r659 t/m r680). De uitleg is hier een eigen vakje (div.look-uitleg) in
   plaats van de losse p van de bron; de voet zakt ook zonder uitleg naar onderen. */
.jas-dlylatrishias .look-rij {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(44px, 5vw, 64px);
}
.jas-dlylatrishias .look {
  display: flex;
  flex-direction: column;
  padding: 4px clamp(18px, 2.2vw, 32px);
}
.jas-dlylatrishias .look + .look {
  border-left: 1px solid rgba(192, 145, 47, 0.45);
}
.jas-dlylatrishias .look-foto {
  display: block;
  width: clamp(140px, 12vw, 168px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 12px auto 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px var(--goud), 0 0 0 9px var(--grond), 0 0 0 10.5px rgba(192, 145, 47, 0.55), 0 24px 48px -26px rgba(36, 24, 32, 0.45);
}
.jas-dlylatrishias .look h3 {
  min-height: 2.3em;
  font-size: 1.45rem;
}
.jas-dlylatrishias .volheid {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--zacht);
  font-size: 14.5px;
}
.jas-dlylatrishias .meter {
  display: inline-flex;
  gap: 6px;
}
.jas-dlylatrishias .meter i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--goud);
  border-radius: 50%;
}
.jas-dlylatrishias .meter i.aan {
  background: var(--goud);
}
.jas-dlylatrishias .look-uitleg {
  flex: 1;
  margin: 14px 0 22px;
  color: var(--zacht);
  font-size: 15.5px;
}
.jas-dlylatrishias .look-uitleg p + p {
  margin-top: 8px;
}
.jas-dlylatrishias .look-voet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(131, 64, 88, 0.16);
}
.jas-dlylatrishias .look-voet > div {
  display: grid;
  gap: 4px;
}
.jas-dlylatrishias .look-voet .prijs {
  font: 400 1.35rem/1 var(--serif);
  color: var(--diep);
  white-space: nowrap;
}
.jas-dlylatrishias .duur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--zacht);
  font-size: 14.5px;
  white-space: nowrap;
}
.jas-dlylatrishias .duur .ic {
  width: 15px;
  height: 15px;
  color: var(--goud);
}
.jas-dlylatrishias .bijvul {
  max-width: 760px;
  margin: clamp(48px, 5vw, 64px) auto 0;
  color: var(--zacht);
  text-align: center;
}
.jas-dlylatrishias .bijvul::before {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin: 0 auto 26px;
  background: var(--goudlijn);
}
.jas-dlylatrishias .bijvul strong {
  color: var(--pruim);
  font-weight: 600;
}
.jas-dlylatrishias .bijvul p + p {
  margin-top: 8px;
  font-size: 15px;
}

/* Tabbladen en veegpijlen (bron r683 t/m r704). Het eiland Tabbladen zet meer-l en
   meer-r op de strook, Veegpijlen op de veeg-wrapper (de bron zette ze op de rij). */
.jas-dlylatrishias .tabs-balk {
  position: relative;
  max-width: 980px;
  margin: clamp(36px, 4vw, 52px) auto 0;
}
.jas-dlylatrishias .tabs {
  position: relative;
  display: flex;
  justify-content: center;
  justify-content: safe center;
  gap: clamp(20px, 2.6vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 rgba(131, 64, 88, 0.18);
}
.jas-dlylatrishias .tabs::-webkit-scrollbar {
  display: none;
}
.jas-dlylatrishias .tab {
  position: relative;
  flex: none;
  padding: 14px 2px 16px;
  border: 0;
  background: none;
  color: var(--zacht);
  font: 500 16.5px/1.2 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.jas-dlylatrishias .tab:hover,
.jas-dlylatrishias .tab[aria-selected="true"] {
  color: var(--pruim);
}
.jas-dlylatrishias .tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--goud);
}
.jas-dlylatrishias .tab:focus-visible {
  outline-offset: -3px;
}
.jas-dlylatrishias .tabs.meer-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.jas-dlylatrishias .tabs.meer-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
  mask-image: linear-gradient(90deg, transparent, #000 56px);
}
.jas-dlylatrishias .tabs.meer-l.meer-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.jas-dlylatrishias .tabs-pijl,
.jas-dlylatrishias .veeg-pijl {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(131, 64, 88, 0.14);
  border-radius: 50%;
  background: #fff;
  color: var(--pruim);
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(36, 24, 32, 0.3);
}
.jas-dlylatrishias .tabs-pijl .ic,
.jas-dlylatrishias .veeg-pijl .ic {
  width: 18px;
  height: 18px;
}
.jas-dlylatrishias .tabs-pijl.links,
.jas-dlylatrishias .veeg-pijl.links {
  left: 0;
}
.jas-dlylatrishias .tabs-pijl.links .ic,
.jas-dlylatrishias .veeg-pijl.links .ic {
  transform: scaleX(-1);
}
.jas-dlylatrishias .tabs-pijl.rechts,
.jas-dlylatrishias .veeg-pijl.rechts {
  right: 0;
}
.jas-dlylatrishias .tabs.meer-l ~ .tabs-pijl.links,
.jas-dlylatrishias .tabs.meer-r ~ .tabs-pijl.rechts,
.jas-dlylatrishias .veeg.meer-l > .veeg-pijl.links,
.jas-dlylatrishias .veeg.meer-r > .veeg-pijl.rechts {
  display: grid;
}
.jas-dlylatrishias .veeg {
  position: relative;
}
/* Op de hoogte van het midden van de ronde foto (4 + 12 + 140 / 2 px, bron r944). */
.jas-dlylatrishias .veeg > .veeg-pijl {
  top: 86px;
}
/* Zonder JavaScript staan de panelen onder elkaar, elk met een eigen kop. */
.jas-dlylatrishias .tabbladen:not([data-tabs]) .tab-paneel + .tab-paneel {
  margin-top: clamp(36px, 4vw, 52px);
}
.jas-dlylatrishias .paneel-kop {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 1.45rem;
}

/* Prijslijst (bron r706 t/m r721, r1133 t/m r1139). */
.jas-dlylatrishias .lijst {
  max-width: 880px;
  margin: 10px auto 0;
}
.jas-dlylatrishias .regel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 28px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(131, 64, 88, 0.14);
}
.jas-dlylatrishias .regel h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}
.jas-dlylatrishias .regel .naam p {
  margin-top: 6px;
  color: var(--zacht);
  font-size: 15.5px;
}
.jas-dlylatrishias .regel .info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.jas-dlylatrishias .regel .duur {
  min-width: 7em;
}
.jas-dlylatrishias .regel .prijs {
  min-width: 5.4em;
  font: 400 1.3rem/1 var(--serif);
  color: var(--diep);
  text-align: right;
  white-space: nowrap;
}
.jas-dlylatrishias .regel.product {
  grid-template-columns: 1fr auto;
}
.jas-dlylatrishias .regel .prijs s {
  margin-right: 0.4em;
  font-size: 0.78em;
  color: var(--zacht);
  text-decoration-thickness: 1px;
}
.jas-dlylatrishias .actie {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border: 1px solid var(--goud);
  border-radius: 999px;
  background: #fff;
  color: var(--diep);
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.jas-dlylatrishias .lijst-noot {
  margin: 24px 0 6px;
  color: var(--zacht);
  font-size: 15.5px;
  text-align: center;
}
.jas-dlylatrishias .prijs-kolom .intro {
  margin-inline: 0;
  text-align: left;
}
.jas-dlylatrishias .prijs-kolom .tabs {
  justify-content: flex-start;
}
.jas-dlylatrishias .prijs-kolom .tab:first-child {
  padding-left: 0;
}
.jas-dlylatrishias .prijs-kolom .lijst-noot {
  text-align: left;
}

/* Cursussen (bron r811 t/m r825). */
.jas-dlylatrishias .cursus-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  max-width: 980px;
  margin: clamp(40px, 5vw, 60px) auto 0;
}
.jas-dlylatrishias .cursus-kaart {
  --grond: var(--blush);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(44px, 4.5vw, 64px) clamp(28px, 4vw, 52px);
  background: var(--blush);
  text-align: center;
}
.jas-dlylatrishias .cursus-kaart > :not(.kader) {
  position: relative;
}
.jas-dlylatrishias .cursus-kaart .k1 {
  inset: 12px;
}
.jas-dlylatrishias .cursus-kaart .k2 {
  inset: 18px 16px;
}
.jas-dlylatrishias .cursus-kaart .kader .b,
.jas-dlylatrishias .cursus-kaart .kader .o {
  left: -10px;
  right: -10px;
}
.jas-dlylatrishias .cursus-kaart .kader .l,
.jas-dlylatrishias .cursus-kaart .kader .r {
  top: -10px;
  bottom: -10px;
}
.jas-dlylatrishias .cursus-kaart h3 {
  font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.1rem);
}
.jas-dlylatrishias .cursus-feiten {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}
.jas-dlylatrishias .cursus-feiten div {
  padding: 0 28px;
}
.jas-dlylatrishias .cursus-feiten div + div {
  border-left: 1px solid rgba(192, 145, 47, 0.5);
}
.jas-dlylatrishias .cursus-feiten dt {
  color: var(--zacht);
  font-size: 14.5px;
}
.jas-dlylatrishias .cursus-feiten dd {
  margin: 4px 0 0;
  font: 400 1.5rem/1.2 var(--serif);
  color: var(--diep);
  white-space: nowrap;
}
.jas-dlylatrishias .cursus-noot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 28px;
  color: var(--zacht);
}
.jas-dlylatrishias .cursus-noot .ic {
  width: 20px;
  height: 20px;
  color: var(--goud);
}

/* Tot 900 px (bron r929 t/m r963): de rijen onder elkaar, de looks een veegstrook. */
@media (max-width: 900px) {
  .jas-dlylatrishias .beh-rij {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .jas-dlylatrishias .beh {
    gap: 22px;
  }
  .jas-dlylatrishias .medaillon {
    width: 84px;
  }
  .jas-dlylatrishias .look-rij {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand));
    padding: 0 calc(var(--rand) + 7%) 10px;
    scrollbar-width: none;
  }
  .jas-dlylatrishias .look-rij::-webkit-scrollbar {
    display: none;
  }
  .jas-dlylatrishias .look {
    flex: 0 0 100%;
    padding-inline: 22px;
    scroll-snap-align: center;
  }
  .jas-dlylatrishias .cursus-rij {
    grid-template-columns: 1fr;
  }
  .jas-dlylatrishias .regel {
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
  }
  .jas-dlylatrishias .regel .naam {
    grid-column: 1 / -1;
  }
  .jas-dlylatrishias .regel .info {
    justify-content: space-between;
    gap: 16px;
  }
  .jas-dlylatrishias .regel .prijs {
    min-width: 0;
    text-align: right;
  }
  .jas-dlylatrishias .regel .duur {
    min-width: 0;
  }
  .jas-dlylatrishias .regel.product .naam {
    grid-column: auto;
  }
  .jas-dlylatrishias .lijst-noot {
    text-align: left;
  }
  /* Bron #prijzen{text-align:left}: de kop van een prijstabel staat links, in lijn met de rijen (taak 20, J9). */
  .jas-dlylatrishias section[data-blok$="-prijstabel"] .kop2 {
    text-align: left;
  }
  .jas-dlylatrishias .tabs {
    justify-content: flex-start;
    gap: 26px;
    margin-inline: calc(-1 * var(--rand));
    padding-inline: var(--rand);
  }
}

/* Tablet (bron r971 t/m r973): twee looks naast elkaar, op de rand van de tekst. */
@media (min-width: 600px) and (max-width: 900px) {
  .jas-dlylatrishias .look-rij {
    padding-inline: var(--rand);
    scroll-padding-inline: var(--rand);
  }
  .jas-dlylatrishias .look {
    flex-basis: 46%;
    scroll-snap-align: start;
  }
}

/* Telefoon (bron r1035 t/m r1043): feiten dichter op elkaar, de oude actieprijs boven de nieuwe. */
@media (max-width: 560px) {
  .jas-dlylatrishias .cursus-feiten div {
    padding: 0 20px;
  }
  .jas-dlylatrishias .regel .prijs s {
    display: block;
    margin: 0 0 4px;
  }
}

/* Minder beweging (bron r1030). */
@media (prefers-reduced-motion: reduce) {
  .jas-dlylatrishias,
  .jas-dlylatrishias *,
  .jas-dlylatrishias *::before,
  .jas-dlylatrishias *::after {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ bouwstenen C (taak 6) */

/* Veelgestelde vragen (bron r828 t/m r837): kop en intro links, de vragen rechts. Elke vraag
   een <details>; het gouden plusje wordt een min als de vraag open staat. Alleen binnen
   .vragen, zodat het menu (ook een details) er niet door geraakt wordt. */
.jas-dlylatrishias .faq-rij {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.jas-dlylatrishias .faq-rij .intro {
  margin: 18px 0 0;
  text-align: left;
}
.jas-dlylatrishias .vragen details {
  border-bottom: 1px solid rgba(131, 64, 88, 0.16);
}
.jas-dlylatrishias .vragen details:first-of-type {
  border-top: 1px solid rgba(131, 64, 88, 0.16);
}
.jas-dlylatrishias .vragen summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 48px 22px 0;
  font: 400 1.3rem / 1.35 var(--serif);
  font-optical-sizing: auto;
}
.jas-dlylatrishias .vragen summary::-webkit-details-marker {
  display: none;
}
.jas-dlylatrishias .vragen summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(var(--goud), var(--goud)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--goud), var(--goud)) center / 1.5px 100% no-repeat;
  transition: background-size 0.25s;
}
.jas-dlylatrishias .vragen details[open] summary::after {
  background-size: 100% 1.5px, 1.5px 0;
}
.jas-dlylatrishias .vragen .antwoord {
  max-width: 60ch;
  padding: 0 48px 24px 0;
  color: var(--zacht);
}
.jas-dlylatrishias .vragen .antwoord .bouwsite-opmaak p + p,
.jas-dlylatrishias .vragen .antwoord .uren,
.jas-dlylatrishias .vragen .antwoord .diensten {
  margin-top: 12px;
}
.jas-dlylatrishias .bouwsite-tint-donker .vragen details {
  border-color: rgba(233, 195, 207, 0.28);
}
.jas-dlylatrishias .bouwsite-tint-donker .vragen .antwoord {
  color: var(--blush);
}

/* Fotoraster, de rij van de voorpagina (bron r636 t/m r642): vier vierkante foto's die
   verspringen, de links eronder in het midden. */
.jas-dlylatrishias .werk-rij {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
  margin-top: clamp(44px, 5vw, 64px);
}
.jas-dlylatrishias .werk-rij figure {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--poeder);
}
.jas-dlylatrishias .werk-rij figure:nth-child(4n + 2) {
  margin-top: 48px;
}
.jas-dlylatrishias .werk-rij figure:nth-child(4n + 3) {
  margin-top: 16px;
}
.jas-dlylatrishias .werk-rij figure:nth-child(4n + 4) {
  margin-top: 64px;
}
.jas-dlylatrishias .werk-rij img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jas-dlylatrishias .werk-voet {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 32px;
}
/* Fotoraster op ons werk (bron r649 t/m r656): per groep een kop links, drie kolommen
   foto's met het onderschrift eronder en de links met een pijl. */
.jas-dlylatrishias .werk-groep {
  scroll-margin-top: 96px;
}
.jas-dlylatrishias .werk-groep + .werk-groep,
.jas-dlylatrishias .werk-voet + .werk-groep {
  margin-top: clamp(64px, 7vw, 104px);
}
.jas-dlylatrishias .binnen > .kop2 + .werk-groep,
.jas-dlylatrishias .binnen > .intro + .werk-groep,
.jas-dlylatrishias .binnen > .werk-chips + .werk-groep {
  margin-top: clamp(44px, 5vw, 64px);
}
/* Onder een blokkop is de groepskop een h3: een maat kleiner dan de blokkop. */
.jas-dlylatrishias .werk-groep h3.kop2 {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
}
.jas-dlylatrishias .binnen > .kop2 ~ .werk-chips {
  justify-content: center;
}
.jas-dlylatrishias .portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(28px, 3vw, 40px) 0 0;
}
.jas-dlylatrishias .portfolio figure {
  margin: 0;
}
.jas-dlylatrishias .portfolio img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--poeder);
}
/* Nagels (vakje vierkant, bron r651 en r654): vier vierkante foto's naast elkaar. */
.jas-dlylatrishias .portfolio.nagels {
  grid-template-columns: repeat(4, 1fr);
}
.jas-dlylatrishias .portfolio.nagels img {
  aspect-ratio: 1;
}
.jas-dlylatrishias .portfolio figcaption {
  margin-top: 10px;
  color: var(--zacht);
  font-size: 15px;
  line-height: 1.45;
}
.jas-dlylatrishias .werk-verder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
}
.jas-dlylatrishias .bouwsite-tint-donker .portfolio figcaption {
  color: var(--blush);
}

/* Kennismaking (bron r766 t/m r808): portret in een fotokader dat uitloopt, rechts de tekst.
   De foto is groter dan het kader: binnen het kader scherp, daarbuiten loopt hij wazig door.
   --r is breedte gedeeld door hoogte; de scherpe foto wordt daarom op 3:4 gesneden, zodat
   het masker op het kader valt, ook als het portret een andere verhouding heeft. */
.jas-dlylatrishias .over-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.jas-dlylatrishias .fotokader {
  position: relative;
  display: flow-root;
  margin: 0;
  --u: 0.14;
  --t: 0.07;
  --b: 0.16;
  --r: 75%;
}
.jas-dlylatrishias .uitloop {
  position: relative;
  display: block;
  width: calc((1 + 2 * var(--u)) * 100%);
  margin: calc(var(--t) * -100%) calc(var(--u) * -100%) calc(var(--b) * -100%);
  --fx: calc(var(--u) / (1 + 2 * var(--u)) * 100%);
  --fy: calc(var(--t) * var(--r) / (1 + 2 * var(--u)));
  --fb: calc(100% - var(--b) * var(--r) / (1 + 2 * var(--u)));
}
.jas-dlylatrishias .uitloop img {
  position: relative;
  width: 100%;
}
.jas-dlylatrishias .uitloop .waas {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(0.85);
  -webkit-mask-image: var(--waas-x), var(--waas-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--waas-x), var(--waas-y);
  mask-composite: intersect;
  --waas-x: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--fx) * 0.3), rgba(0, 0, 0, 0.36) calc(var(--fx) * 0.62), rgba(0, 0, 0, 0.72) var(--fx), #000 calc(var(--fx) + 2%), #000 calc(100% - var(--fx) - 2%), rgba(0, 0, 0, 0.72) calc(100% - var(--fx)), rgba(0, 0, 0, 0.36) calc(100% - var(--fx) * 0.62), rgba(0, 0, 0, 0.1) calc(100% - var(--fx) * 0.3), transparent 100%);
  --waas-y: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.1) calc(var(--fy) * 0.5), rgba(0, 0, 0, 0.35) var(--fy), #000 calc(var(--fy) + 1.5%), #000 calc(var(--fb) - 1.5%), rgba(0, 0, 0, 0.75) var(--fb), rgba(0, 0, 0, 0.4) calc(var(--fb) + (100% - var(--fb)) * 0.4), rgba(0, 0, 0, 0.12) calc(var(--fb) + (100% - var(--fb)) * 0.75), transparent 100%);
}
.jas-dlylatrishias .uitloop .scherp {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  -webkit-mask-image: var(--scherp-x), var(--scherp-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--scherp-x), var(--scherp-y);
  mask-composite: intersect;
  --scherp-x: linear-gradient(90deg, transparent calc(var(--fx) - 2%), #000 calc(var(--fx) + 2%), #000 calc(100% - var(--fx) - 2%), transparent calc(100% - var(--fx) + 2%));
  --scherp-y: linear-gradient(180deg, transparent calc(var(--fy) - 1.5%), #000 calc(var(--fy) + 1.5%), #000 calc(var(--fb) - 1.5%), transparent calc(var(--fb) + 1.5%));
}
.jas-dlylatrishias .fotokader .k1 .b,
.jas-dlylatrishias .fotokader .k1 .o {
  height: 2px;
}
.jas-dlylatrishias .fotokader .k1 .l,
.jas-dlylatrishias .fotokader .k1 .r {
  width: 2px;
}
.jas-dlylatrishias .fotokader .k2 {
  inset: 12px 10px;
}
.jas-dlylatrishias .over-tekst .bouwsite-opmaak p {
  margin-top: 18px;
  color: var(--zacht);
  font-size: 18px;
}
.jas-dlylatrishias .citaat {
  margin: 30px 0 0;
  padding-left: 22px;
  border-left: 1.5px solid var(--goud);
}
.jas-dlylatrishias .citaat blockquote {
  margin: 0;
  font: italic 400 1.5rem / 1.4 var(--serif);
}
.jas-dlylatrishias .citaat figcaption {
  margin-top: 10px;
  color: var(--zacht);
  font-size: 15px;
}
.jas-dlylatrishias .vinklijst {
  list-style: none;
  padding: 0;
  margin: 28px 0 34px;
  display: grid;
  gap: 10px;
}
/* Het vinkje staat bij de eerste regel, ook als de tekst over twee regels loopt. */
.jas-dlylatrishias .vinklijst li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.jas-dlylatrishias .vinklijst .ic {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  margin-top: calc((1lh - 22px) / 2);
  color: var(--goud);
}
.jas-dlylatrishias .over-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Zonder vinklijst ervoor toch lucht boven de knoppen. */
.jas-dlylatrishias .over-tekst > :not(.vinklijst) + .over-knoppen {
  margin-top: 34px;
}
.jas-dlylatrishias .bouwsite-tint-donker .over-tekst .bouwsite-opmaak p,
.jas-dlylatrishias .bouwsite-tint-donker .citaat figcaption {
  color: var(--blush);
}

/* Lijst, de soortenband (bron r1151 t/m r1154): een kaartje per punt. */
.jas-dlylatrishias .soort-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.jas-dlylatrishias .soort {
  background: #fff;
  border: 1px solid rgba(131, 64, 88, 0.14);
  border-radius: 18px;
  padding: 22px 22px 24px;
}
.jas-dlylatrishias .soort h3 {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--pruim);
}
.jas-dlylatrishias .soort p {
  color: var(--zacht);
  font-size: 15px;
  line-height: 1.66;
}

/* Stappen (geen bronplek): een genummerde lijst met het nummer in goud, in Bodoni. */
.jas-dlylatrishias .stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: clamp(28px, 3vw, 40px) 0 0;
  display: grid;
  gap: 24px;
}
.jas-dlylatrishias .stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 16px;
}
.jas-dlylatrishias .stappen li::before {
  content: counter(stap);
  grid-row: span 2;
  font: 400 2.2rem / 1 var(--serif);
  color: var(--goud);
}
.jas-dlylatrishias .stappen h3 {
  font-size: 1.35rem;
}
.jas-dlylatrishias .stappen p {
  margin-top: 6px;
  color: var(--zacht);
}
.jas-dlylatrishias .bouwsite-tint-donker .stappen p {
  color: var(--blush);
}

/* Tussen tablet en breed scherm minder ver buiten het kader (bron r789). */
@media (min-width: 901px) and (max-width: 1229px) {
  .jas-dlylatrishias .fotokader {
    --u: 0.1;
  }
}
@media (max-width: 900px) {
  .jas-dlylatrishias .faq-rij,
  .jas-dlylatrishias .over-rij {
    grid-template-columns: 1fr;
  }
  /* Het kader smaller dan de kolom, zodat de foto die erbuiten doorloopt binnen het scherm
     valt; onder het kader ruimte voor het stuk dat eronder uitsteekt. */
  .jas-dlylatrishias .fotokader {
    --u: 0.12;
    width: min(calc(100% / 1.24), 460px);
    margin-inline: auto;
    margin-bottom: calc(var(--b) * min(100% / 1.24, 460px));
  }
  .jas-dlylatrishias .soorten > .kop2,
  .jas-dlylatrishias .soorten > .intro {
    text-align: left;
    margin-inline: 0;
  }
  .jas-dlylatrishias .binnen > .kop2 ~ .werk-chips,
  .jas-dlylatrishias .werk-groep:has(.portfolio) + .werk-voet {
    justify-content: flex-start;
  }
}
/* Tablet: vier naast elkaar, het verspringen in dezelfde verhouding tot de foto (bron r979). */
@media (min-width: 600px) and (max-width: 900px) {
  .jas-dlylatrishias .werk-rij figure:nth-child(4n + 2) {
    margin-top: 19%;
  }
  .jas-dlylatrishias .werk-rij figure:nth-child(4n + 3) {
    margin-top: 6%;
  }
  .jas-dlylatrishias .werk-rij figure:nth-child(4n + 4) {
    margin-top: 25%;
  }
}
/* Telefoon (bron r998 t/m r1005): twee kolommen, de rechter lager, om elke foto een dun
   scheef goudkader, om en om een andere kant op. */
@media (max-width: 599.98px) {
  .jas-dlylatrishias .werk-rij {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }
  .jas-dlylatrishias .werk-rij figure {
    position: relative;
    overflow: visible;
  }
  .jas-dlylatrishias .werk-rij figure:nth-child(n) {
    margin-top: 0;
  }
  .jas-dlylatrishias .werk-rij figure:nth-child(even) {
    transform: translateY(40px);
  }
  .jas-dlylatrishias .werk-rij img {
    position: relative;
    z-index: 1;
  }
  .jas-dlylatrishias .werk-rij figure::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(192, 145, 47, 0.75);
    transform: rotate(1.6deg);
  }
  .jas-dlylatrishias .werk-rij figure:nth-child(4n + 2)::after,
  .jas-dlylatrishias .werk-rij figure:nth-child(4n + 3)::after {
    transform: rotate(-1.6deg);
  }
}
@media (max-width: 760px) {
  .jas-dlylatrishias .fotokader .k1 .b,
  .jas-dlylatrishias .fotokader .k1 .o {
    left: -9px;
    right: -9px;
  }
  .jas-dlylatrishias .fotokader .k1 .l,
  .jas-dlylatrishias .fotokader .k1 .r {
    top: -9px;
    bottom: -9px;
  }
  /* Ons werk: twee naast elkaar, de eerste foto van een groep over de volle breedte;
     niet bij de nagels (bron r1024). */
  .jas-dlylatrishias .portfolio {
    grid-template-columns: 1fr 1fr;
  }
  .jas-dlylatrishias .portfolio:not(.nagels) figure:first-child {
    grid-column: 1 / -1;
  }
}
/* Nagels op tablet drie naast elkaar (bron r945), op de telefoon twee (bron r1036). */
@media (max-width: 900px) {
  .jas-dlylatrishias .portfolio.nagels {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .jas-dlylatrishias .portfolio.nagels {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------------ bouwstenen D (taak 7) */
/* Reviews (bron ronde f van 06-10: CSS r723 t/m r764, de veegstrook r934 t/m r976 en de
   telefoon r983 t/m r990). Links de langste review, rechts een veegstrook van bladen met de
   korte, de kolommen even breed. Onder de bladen twee gouden pijltjes: die zet het eiland
   Veegpijlen (S11), de bron noemt ze rev-nav. De bron verdeelt de korte in de browser over de
   bladen, de jas op de server (verdeelBladen in reviews.tsx). De kleuren van de bron gelden op
   donker; op een lichte tint krijgt de tekst de gewone kleuren, anders valt hij weg. */
.jas-dlylatrishias .rev-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin-top: 16px;
  color: var(--zacht);
  font-size: 15.5px;
}
.jas-dlylatrishias .rev-rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(40px, 4.5vw, 60px);
}
.jas-dlylatrishias .rev-rij.lang-kort {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1000px;
  margin-inline: auto;
}
/* Een enkele review: in het midden, zo breed als een leesregel. */
.jas-dlylatrishias .rev-rij.enkel {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
  margin-inline: auto;
}
/* De lange rekt niet mee, zo is zijn hoogte de maat. */
.jas-dlylatrishias .rev-rij.lang-kort > .review {
  align-self: start;
}
/* De rechterkolom is de wrapper van het eiland: de stapel met daaronder de pijltjes. */
.jas-dlylatrishias .rev-rij > .veeg {
  min-width: 0;
}
.jas-dlylatrishias .rev-stapel {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-left: 1px solid rgba(192, 145, 47, 0.45);
}
.jas-dlylatrishias .rev-stapel::-webkit-scrollbar {
  display: none;
}
.jas-dlylatrishias .rev-blad {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.jas-dlylatrishias .rev-blad .review {
  padding-block: 4px 20px;
}
.jas-dlylatrishias .rev-blad .review:last-child {
  padding-bottom: 4px;
}
.jas-dlylatrishias .rev-blad .review + .review {
  border-left: 0;
  padding-top: 0;
}
/* De lijn tussen de korte even breed als de tekst. */
.jas-dlylatrishias .rev-blad .review + .review::before {
  content: "";
  height: 1px;
  margin-bottom: 20px;
  background: rgba(192, 145, 47, 0.45);
}
.jas-dlylatrishias .review {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 4px clamp(20px, 2.6vw, 40px);
}
.jas-dlylatrishias .review + .review {
  border-left: 1px solid rgba(192, 145, 47, 0.45);
}
.jas-dlylatrishias .review .sterren .ic {
  width: 14px;
  height: 14px;
}
.jas-dlylatrishias .review blockquote {
  margin: 14px 0 0;
  white-space: pre-line;
  font: italic 400 1.05rem/1.62 var(--serif);
  color: var(--pruim);
}
.jas-dlylatrishias .review figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 18px;
  font-size: 14.5px;
}
.jas-dlylatrishias .review figcaption strong {
  color: var(--diep);
  font-weight: 600;
}
.jas-dlylatrishias .review figcaption time {
  color: var(--zacht);
}
.jas-dlylatrishias .bouwsite-tint-donker .rev-score,
.jas-dlylatrishias .bouwsite-tint-donker .review figcaption strong {
  color: var(--poeder);
}
.jas-dlylatrishias .bouwsite-tint-donker .review blockquote {
  color: var(--blush);
}
.jas-dlylatrishias .bouwsite-tint-donker .review figcaption time {
  color: #c9a3b0;
}
.jas-dlylatrishias .rev-google {
  margin-top: clamp(36px, 4vw, 52px);
  text-align: center;
}
/* De pijltjes (bron .rev-pijl): klein en rustig, een dun gouden rondje. Onder de bladen
   gelijk met de tekst (computer en tablet, het eiland om de stapel) of in het midden onder
   de strook (telefoon, het eiland om de hele rij). Is er meer dan je ziet, dan staan ze er
   allebei en is de kant waar niets meer komt vaag (bron aria-disabled). */
.jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl,
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl {
  top: calc(100% + 26px);
  margin-top: 0;
  border: 1px solid rgba(192, 145, 47, 0.75);
  background: none;
  box-shadow: none;
  color: var(--pruim);
  transition: background-color 0.2s, border-color 0.2s;
}
.jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl .ic,
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl .ic {
  width: 16px;
  height: 16px;
}
.jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl:hover,
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl:hover {
  border-color: var(--goud);
  background: rgba(192, 145, 47, 0.16);
}
.jas-dlylatrishias .bouwsite-tint-donker .rev-rij > .veeg > .veeg-pijl,
.jas-dlylatrishias .bouwsite-tint-donker .veeg > .rev-rij ~ .veeg-pijl {
  color: var(--blush);
}
.jas-dlylatrishias .rev-rij > .veeg:not(.meer-l) > .veeg-pijl.links,
.jas-dlylatrishias .rev-rij > .veeg:not(.meer-r) > .veeg-pijl.rechts,
.jas-dlylatrishias .veeg:not(.meer-l) > .rev-rij ~ .veeg-pijl.links,
.jas-dlylatrishias .veeg:not(.meer-r) > .rev-rij ~ .veeg-pijl.rechts {
  opacity: 0.35;
  cursor: default;
  background: none;
}
/* Onder de rechterkolom, gelijk met de tekst (bron rev-nav > div, padding-left). */
.jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl.links {
  left: calc(clamp(20px, 2.6vw, 40px) + 1px);
  right: auto;
}
.jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl.rechts {
  left: calc(clamp(20px, 2.6vw, 40px) + 47px);
  right: auto;
}
/* Telefoon: in het midden onder de strook (bron r988), onderin de ruimte die de wrapper dan krijgt. */
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl {
  top: auto;
  bottom: 0;
}
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl.links {
  left: calc(50% - 41px);
  right: auto;
}
.jas-dlylatrishias .veeg > .rev-rij ~ .veeg-pijl.rechts {
  left: calc(50% + 5px);
  right: auto;
}
.jas-dlylatrishias .veeg.meer-l > .rev-rij ~ .veeg-pijl,
.jas-dlylatrishias .veeg.meer-r > .rev-rij ~ .veeg-pijl {
  display: grid;
}
.jas-dlylatrishias .veeg.meer-l:has(> .rev-rij),
.jas-dlylatrishias .veeg.meer-r:has(> .rev-rij) {
  padding-bottom: 54px;
}

/* Afspraakblok (bron .cta, r842 t/m r848, r1013, r1014 en r1040): kop, zin en knoppen
   gecentreerd binnen twee schuine gouden kaders. */
.jas-dlylatrishias .cta {
  text-align: center;
}
.jas-dlylatrishias .cta-blok {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 64px);
}
.jas-dlylatrishias .cta-blok > :not(.kader) {
  position: relative;
}
.jas-dlylatrishias .cta-blok .k1 {
  inset: 0;
}
.jas-dlylatrishias .cta p {
  margin-top: 16px;
  font-size: 18px;
}
.jas-dlylatrishias .cta .knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

/* Contactkaarten (bron r1210 t/m r1221): drie witte kaarten naast elkaar, op een smal
   scherm onder elkaar. */
.jas-dlylatrishias .contact-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}
.jas-dlylatrishias .contact-kaart {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid rgba(131, 64, 88, 0.14);
  border-radius: 20px;
  color: var(--pruim);
}
.jas-dlylatrishias .contact-kaart h2 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.14;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.jas-dlylatrishias .contact-kaart ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--zacht);
  line-height: 1.8;
}
.jas-dlylatrishias .contact-kaart ul a {
  text-decoration-color: rgba(192, 145, 47, 0.7);
  text-underline-offset: 5px;
}
.jas-dlylatrishias .contact-kaart .mail {
  overflow-wrap: anywhere;
}
.jas-dlylatrishias .contact-kaart .uren {
  margin: 0;
}
.jas-dlylatrishias .contact-kaart .knop {
  justify-self: start;
}
.jas-dlylatrishias .contact-kaart .klein {
  margin: 0;
  font-size: 13px;
  color: var(--zacht);
}
.jas-dlylatrishias .bouwsite-tint-marmer .contact-kaart {
  box-shadow: 0 24px 50px -30px rgba(36, 24, 32, 0.4);
}
/* Het gedeelde marmervlak van de contactpagina (bron .marmer-vlak, r1066 t/m r1082):
   volgt een blok in tint marmer op een blok in tint marmer (paginakop en contactkaarten),
   dan loopt het marmer van het eerste door achter het tweede. Het eerste krijgt de hoogte
   van de bron, het tweede geen eigen lagen en geen eigen grond, en het blok daarna ligt
   weer boven het marmer. */
.jas-dlylatrishias .bouwsite-tint-marmer:has(+ .bouwsite-tint-marmer)::before,
.jas-dlylatrishias .bouwsite-tint-marmer:has(+ .bouwsite-tint-marmer)::after {
  height: max(560px, 52vw);
}
.jas-dlylatrishias .bouwsite-tint-marmer + .bouwsite-tint-marmer {
  background: transparent;
}
.jas-dlylatrishias .bouwsite-tint-marmer + .bouwsite-tint-marmer::before,
.jas-dlylatrishias .bouwsite-tint-marmer + .bouwsite-tint-marmer::after {
  content: none;
}
.jas-dlylatrishias .bouwsite-tint-marmer + .bouwsite-tint-marmer + section {
  position: relative;
}

/* Ook interessant (bron r1188 t/m r1201): witte kaarten met een rond beeld en de naam. */
.jas-dlylatrishias .ander-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.jas-dlylatrishias .ander {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 14px;
  background: #fff;
  border: 1px solid rgba(131, 64, 88, 0.14);
  border-radius: 18px;
  text-decoration: none;
  color: var(--diep);
  font-family: var(--sans);
  font-size: 15px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Dun randje, want een foto met een witte achtergrond loopt anders weg in de witte kaart. */
.jas-dlylatrishias .ander img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(131, 64, 88, 0.14);
}
.jas-dlylatrishias .ander:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -28px rgba(36, 24, 32, 0.5);
  color: var(--roos);
}

/* Tot 900 px (bron r934 t/m r939 en r958): de reviews een veegstrook, de buren kijken om de
   hoek; de kop van ook interessant links. */
@media (max-width: 900px) {
  .jas-dlylatrishias .rev-rij {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand));
    padding: 0 calc(var(--rand) + 7%) 10px;
    scrollbar-width: none;
  }
  .jas-dlylatrishias .rev-rij::-webkit-scrollbar {
    display: none;
  }
  .jas-dlylatrishias .review,
  .jas-dlylatrishias .rev-rij > .veeg {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .jas-dlylatrishias .rev-rij.lang-kort,
  .jas-dlylatrishias .rev-rij.enkel {
    max-width: none;
    margin-inline: calc(-1 * var(--rand));
  }
  .jas-dlylatrishias .rev-blad .review {
    flex: none;
  }
  .jas-dlylatrishias .review {
    padding-inline: 22px;
  }
  .jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl.links {
    left: 23px;
  }
  .jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl.rechts {
    left: 69px;
  }
  .jas-dlylatrishias .ander-band .kop2 {
    text-align: left;
  }
}
/* Tablet (bron r971 t/m r976): op de rand van de tekst; lang en kort passen naast elkaar,
   dus net als op de computer twee even brede kolommen. */
@media (min-width: 600px) and (max-width: 900px) {
  .jas-dlylatrishias .rev-rij {
    padding-inline: var(--rand);
    scroll-padding-inline: var(--rand);
  }
  .jas-dlylatrishias .review,
  .jas-dlylatrishias .rev-rij > .veeg {
    flex-basis: 46%;
    scroll-snap-align: start;
  }
  .jas-dlylatrishias .rev-blad .review {
    flex-basis: auto;
  }
  .jas-dlylatrishias .rev-rij.lang-kort {
    display: grid;
  }
}
/* Computer en tablet: de pijltjes onder de bladen, allebei zodra er meer is; ruimte eronder
   zoals de rev-nav van de bron (26 px plus 36 px), als padding zodat de marge van de
   Google-link er niet mee samenvalt. */
@media (min-width: 600px) {
  .jas-dlylatrishias .rev-rij > .veeg.meer-l > .veeg-pijl,
  .jas-dlylatrishias .rev-rij > .veeg.meer-r > .veeg-pijl {
    display: grid;
  }
  .jas-dlylatrishias .rev-rij:has(> .veeg.meer-l),
  .jas-dlylatrishias .rev-rij:has(> .veeg.meer-r) {
    padding-bottom: 62px;
  }
}
/* Telefoon (bron r983 t/m r990, ronde f): elke review een eigen kaart in de veegstrook van de
   rij; de pijltjes van het eiland om de hele rij staan in het midden eronder. */
@media (max-width: 599.98px) {
  .jas-dlylatrishias .rev-rij > .veeg,
  .jas-dlylatrishias .rev-stapel,
  .jas-dlylatrishias .rev-blad {
    display: contents;
  }
  .jas-dlylatrishias .rev-rij > .veeg > .veeg-pijl {
    display: none;
  }
  .jas-dlylatrishias .rev-blad .review {
    flex: 0 0 100%;
    padding: 4px 22px;
    border-left: 1px solid rgba(192, 145, 47, 0.45);
  }
  .jas-dlylatrishias .rev-blad .review + .review {
    border-left: 1px solid rgba(192, 145, 47, 0.45);
    padding-top: 4px;
  }
  .jas-dlylatrishias .rev-blad .review + .review::before {
    display: none;
  }
}
/* Telefoon: ook interessant als compacte regels met de foto links (bron r1196 t/m r1201). */
@media (max-width: 600px) {
  .jas-dlylatrishias .ander-rij {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .jas-dlylatrishias .ander {
    grid-template-columns: 64px 1fr;
    justify-items: start;
    align-items: center;
    gap: 16px;
    padding: 10px 18px 10px 10px;
    font-size: 16px;
  }
  .jas-dlylatrishias .ander img {
    width: 64px;
    height: 64px;
  }
}
/* De kaders van het afspraakblok op de telefoon dichter op de hoeken (bron r1013, r1014). */
@media (max-width: 760px) {
  .jas-dlylatrishias .cta-blok .k1 .b,
  .jas-dlylatrishias .cta-blok .k1 .o {
    left: -9px;
    right: -9px;
  }
  .jas-dlylatrishias .cta-blok .k1 .l,
  .jas-dlylatrishias .cta-blok .k1 .r {
    top: -9px;
    bottom: -9px;
  }
}
/* De knoppen van het afspraakblok onder elkaar (bron r1040). */
@media (max-width: 560px) {
  .jas-dlylatrishias .cta .knoppen {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-inline: auto;
  }
}