/* =========================================================
   DIGO – opgeschoonde responsive styles (één bron van waarheid)
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --maxw:900px;

  /* huisstijl paars */
  --purple:#9f74c8;        /* licht (DIGO) */
  --purple-deep:#642a79;   /* donker */

  /* body-gradient (grijs → lichtgrijs), subtiel */
  --bg-top:#b9b1bb;
  --bg-mid:#d9d2dc;
  --bg-bot:#eee8f1;

  /* masthead hoogtes */
  --mast-h:184px;
  --nav-h:40px;

  /* glass tokens (mobiel) */
  --glass-bg: rgba(255,255,255,.58);
  --glass-stroke: rgba(255,255,255,.55);
  --glass-shadow: 0 10px 28px rgba(0,0,0,.16);
  --glass-purple: rgba(159,116,200,.28);
  --ink: #1c1424;
  --ink-soft:#3b2b4e;
}

/* ====== Custom font: Felix Titling Regular ====== */
@font-face {
  font-family: 'FelixTitling';
  src: url('../font/Felix Titling Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}


/* ---------- basis ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font:13px Verdana, Geneva, Tahoma, sans-serif;
  color:#333; text-align:center; margin:0;
  background: linear-gradient(to bottom,var(--bg-top) 0%,var(--bg-mid) 45%,var(--bg-bot) 100%) fixed;
}
img{ max-width:100%; height:auto; display:block; border:0; }
h1{ font-size:24px; font-weight:400; color:#691d7c; margin:0 0 20px; }
b,strong{ color:#000; }

#container{ position:relative; width:var(--maxw); margin:0 auto; text-align:left; }

/* ============ MASTHEAD (hero + nav) ============ */
.mast{ position:relative; width:100%; }

/* paarse wings achter de foto */
.mast-bg{ height:var(--mast-h); background-color:var(--purple); }
.mast-inner{
  width:var(--maxw); height:100%; margin:0 auto; position:relative;
}
.mast-inner::before,
.mast-inner::after{
  content:""; position:absolute; top:0; bottom:0; width:200px; z-index:1; pointer-events:none;
}
.mast-inner::before{ left:0;  background:linear-gradient(to right, var(--purple), transparent); }
.mast-inner::after { right:0; background:linear-gradient(to left,  var(--purple), transparent); }

/* banner-foto in containerbreedte */
.mast-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}

/* branding over de foto */
.mast-brand{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  display:flex; align-items:flex-end; gap:14px; text-decoration:none; z-index:2;
}
.brand-logo{ width:150px; height:auto; }
.brand-text{ color:#fff; font-family:Helvetica, Arial, sans-serif; font-weight:700; line-height:1.05; display:flex; flex-direction:column; }
.brand-digo{ font-size:28px; letter-spacing:.5px; }
.brand-sub{ font-size:16px; opacity:.95; }

/* menubalk: licht → donker */
.mast-nav{
  height:var(--nav-h);
  background:linear-gradient(to bottom, var(--purple) 0%, var(--purple-deep) 100%);
  box-shadow: 0 -2px 0 rgba(255,255,255,.15) inset;
}
.mast-nav .inner{
  width:min(var(--maxw),100%); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:flex-end; gap:24px; padding:0 16px;
}
.mast-nav a{ color:#fff; text-decoration:none; font-size:14px; font-weight:500; white-space:nowrap; }
.mast-nav a:hover{ opacity:.85; }

/* mobiele header (hamburger) verbergen ≥720px */
@media (min-width:720px){ #header.mobile-only{ display:none !important; } }

/* =========================================================
   DESKTOP (≥980px) – 3 kolommen
   ========================================================= */
@media (min-width:980px){

  .drawer,.backdrop{ display:none !important; }

  /* Eén 1px rand om de grid, geen dubbele lijntjes */
  #page{
    display:grid;
    grid-template-columns:208px 211px 478px;
    grid-template-rows:205px auto;
    grid-template-areas:
      "leftcol  rightcol  slideshow"
      "leftcol  rightcol  contentcol";
    width:898px;
    margin:9px 0 0 0;
    border:1px solid #fff;
    border-bottom:0;
    gap:0;
    min-height:calc(100vh - var(--mast-h) - var(--nav-h) - 9px);
    background:#fff;
  }

  #leftcol{ grid-area:leftcol; width:208px; background:#fff; }

  #rightcol{
    grid-area:rightcol; width:211px;
    border-left:1px solid #fff;                 /* enige interne scheiding */
    background:linear-gradient(#9f74c8, #c39dda 45%, #decce7 100%);
    display:flex; flex-direction:column; min-height:100%;
  }
  #menu{ width:100%; margin-top:16px; }
  #menu a{ display:block; color:#fff; text-decoration:none; font-size:14px; padding:6px 20px 6px 6px; text-align:right; }
  #foto2{ margin-top:auto; }
  #foto2 img{ width:100%; height:auto; }

  /* slideshow houdt altijd 1px top/rechts; geen “wegvallende” lijn */
  #slideshow{
    grid-area:slideshow;
    width:100%; height:205px; position:relative; overflow:hidden; background:#000;
    border-left:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #fff;
    margin-top:-1px;                           /* trekt strak tegen bovenzijde */
    box-sizing:border-box;                     /* borders tellen mee */
  }
  #slideshow img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center; opacity:0; transition:opacity .8s ease;
  }
  #slideshow img.is-active{ opacity:1; }

  #contentcol{ grid-area:contentcol; width:478px; background:#fff; border-left:1px solid #fff; }
  #content{ width:438px; padding:12px 20px 20px; color:#333; }
  #content a{ color:#000; text-decoration:underline; }
  #content a:hover{ color:#691d7c; }

  #tekst{ margin-top:5px; font-size:12px; color:#666; line-height:22px; letter-spacing:.2px; padding-bottom:15px; }
}

/* =========================================================
   TABLET (720–979px)
   ========================================================= */
@media (min-width:720px) and (max-width:979px){

  .drawer,.backdrop{ display:none !important; }

  #container{ width:100%; max-width:100%; }
  #page{
    width:100%; max-width:900px; margin:9px auto 0;
    display:grid;
    grid-template-columns:211px 1fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "rightcol slideshow slideshow"
      "rightcol leftcol   leftcol"
      "rightcol contentcol contentcol";
    gap:0; border:1px solid #fff; border-bottom:0;
    min-height:calc(100vh - var(--mast-h) - var(--nav-h));
    background:#fff;
  }

  #rightcol{ grid-area:rightcol; display:flex; flex-direction:column;
    background:linear-gradient(#9f74c8, #c39dda 45%, #decce7 100%); }
  #menu{ width:100%; margin-top:16px; }
  #menu a{ display:block; color:#fff; text-decoration:none; font-size:14px; padding:6px 20px 6px 6px; text-align:right; }
  #foto2{ margin-top:auto; }
  #foto2 img{ width:100%; height:auto; }

  #slideshow{
    grid-area:slideshow; width:100%; aspect-ratio:477/205;
    position:relative; overflow:hidden; background:#000;
    border-left:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #fff;
    margin-top:-1px; box-sizing:border-box;
  }
  #slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  #leftcol{
    grid-area:leftcol;
    margin:10px 12px 12px 12px;
    background:#fff; border:1px solid #eee; border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    padding:12px; display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:start;
  }
  #leftcol #foto{ margin:0 !important; align-self:center; }
  #leftcol #foto img{ width:100%; height:130px; object-fit:cover; border-radius:12px; aspect-ratio:1/1; }
  #leftcol #tekst{ font-size:14px; line-height:1.55; color:#222; text-align:center; }

  #contentcol{ grid-area:contentcol; background:#fff; border-left:1px solid #fff; }
  #content{ width:auto; padding:12px 15px 20px; color:#333; }
  #content img, #content table{ max-width:100%; height:auto; }
  #content iframe{ width:100%; height:auto; aspect-ratio:425/350; min-height:280px; border:0; }
}

/* =========================================================
   MOBIEL (≤719px) – glass header + drawer + CTA + adresfooter
   ========================================================= */
@media (max-width:719px){
  /* verberg grote mast-foto/nav; we gebruiken de mobile header */
  .mast{ display:none !important; }

  /* glass header */
  #header{
    position:sticky; top:0; z-index:2000; min-height:56px;
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:linear-gradient(180deg, var(--glass-purple), rgba(100,42,121,.18));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom:1px solid var(--glass-stroke);
    box-shadow: var(--glass-shadow);
  }
  #header .logo-link #logo{ max-height:44px; width:auto; }
  .brand-title{ color:#fff; font-weight:800; font-size:16px; letter-spacing:.2px; font-family:Helvetica, Arial, sans-serif; }
  .hamb{ margin-left:auto; appearance:none; border:0; background:transparent; padding:6px; cursor:pointer; z-index:2100; }
  .hamb svg{ fill:#fff; }

  /* drawer glas */
  .drawer{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    background: var(--glass-bg); color: var(--ink);
    -webkit-backdrop-filter: blur(14px) saturate(140%);  backdrop-filter: blur(14px) saturate(140%);
    border-left:1px solid var(--glass-stroke); box-shadow:-10px 0 24px rgba(0,0,0,.18);
    transform:translateX(100%); transition:transform .25s ease; z-index:2200;
    display:flex; flex-direction:column;
  }
  .drawer[aria-hidden="false"]{ transform:translateX(0); }
  .drawer > header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px; font-weight:800; background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.22)); border-bottom:1px solid var(--glass-stroke); color:var(--ink); }
  .drawer a{ display:block; padding:10px 12px; border:1px solid rgba(0,0,0,.06); border-radius:10px; text-decoration:none; background:rgba(255,255,255,.65); color:var(--ink-soft); }
  .drawer a.strong{ font-weight:800; color:var(--ink); background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.62)); }
  .drawer .dd{ border:1px solid #eee; border-radius:10px; padding:6px 8px; }
  .drawer .dd > summary{ list-style:none; cursor:pointer; font-weight:600; padding:6px 8px; position:relative; padding-right:26px; }
  .drawer .dd > summary::-webkit-details-marker{ display:none; }
  .drawer .dd[open] > summary::after{ content:"▾"; opacity:.9; }
  .drawer .dd > summary::after{ content:"▸"; position:absolute; right:8px; top:50%; transform:translateY(-50%); opacity:.65; font-size:14px; }

  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .2s; z-index:2150; }
  .backdrop.show{ opacity:1; pointer-events:auto; }

  /* page flow */
  #container, #page{ width:100%; max-width:100%; margin:0 auto; border:0; }
  #page{ display:flex; flex-direction:column; gap:12px; padding:0 0 16px; background:#fff; }

  #rightcol, #foto2{ display:none !important; }

  #slideshow{ order:1; width:100%; position:relative; overflow:hidden; }
  #slideshow::before{ content:""; display:block; padding-bottom:42%; }
  #slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* Shoefresh kaart – glas */
  #leftcol{
    order:2; margin:12px 15px 15px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px) saturate(140%);  backdrop-filter: blur(8px) saturate(140%);
    border:1px solid var(--glass-stroke); border-radius:14px; box-shadow:var(--glass-shadow);
    padding:12px; display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center;
  }
  #leftcol #foto{ margin:0 !important; }
  #leftcol #foto img{ width:92px; height:92px; object-fit:cover; border-radius:12px; }
  #leftcol #tekst{ margin:0 !important; text-align:center; color:var(--ink); }
  #leftcol #tekst h4{ margin:.35em 0; line-height:1.35; }

  #contentcol{ order:3; width:100%; background:#fff; }
  #content{ width:auto; padding:12px 15px; color:#222; }
  #content img, #content table{ max-width:100%; height:auto; }
  #content iframe{ width:100%; height:auto; aspect-ratio:425/350; min-height:280px; border:0; }

  /* ruimte onderin voor CTA + footer (safe-area) */
  body{ padding-bottom: calc(64px + 64px + env(safe-area-inset-bottom)); }
  #page{ padding-bottom: calc(64px + 64px + 16px + env(safe-area-inset-bottom)); }

  /* CTA pill */
  .cta-mobile{
    position:fixed; left:50%; transform:translateX(-50%); bottom: calc(64px + 12px);
    z-index:2060; height:56px; line-height:56px; padding:0 22px; width:min(92%, 520px);
    border-radius:9999px; display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-weight:800; letter-spacing:.2px; font-size:16px; color:#fff;
    background: linear-gradient(180deg, #b892de 0%, var(--purple) 100%);
    box-shadow: 0 10px 24px rgba(89,0,120,.25), 0 2px 0 rgba(255,255,255,.35) inset;
    border:1px solid rgba(255,255,255,.45); -webkit-tap-highlight-color:transparent;
    backdrop-filter: saturate(140%) blur(2px);
  }
  .cta-mobile:active{ transform:translateX(-50%) translateY(1px) scale(.995); }

  /* adres-footer (glass) */
  .mobile-footer{
    position:fixed; left:0; right:0; bottom:0; min-height:64px; z-index:2055;
    display:flex; align-items:center; justify-content:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); text-align:center;
    background: linear-gradient(180deg, rgba(60,0,80,.55) 0%, rgba(40,0,60,.78) 100%);
    border-top:1px solid rgba(255,255,255,.18); box-shadow:0 -8px 22px rgba(0,0,0,.22);
    backdrop-filter: blur(10px) saturate(140%);
  }
  .mobile-footer address{ font-style:normal; color:#fff; width:100%; display:grid; gap:2px; line-height:1.35; font-size:13px; }
  .mobile-footer .adr-lines strong{ font-size:14px; font-weight:800; }
}

/* fallback als blur niet wordt ondersteund */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  @media (max-width:719px){
    #header{ background: linear-gradient(180deg, rgba(159,116,200,.55), rgba(100,42,121,.35)); }
    .drawer{ background: rgba(255,255,255,.92); }
    #leftcol{ background:#fff; }
    .mobile-footer{ background:linear-gradient(180deg, #5b3f70, #412a55); }
  }
}

/* ---------- 1) CTA & mobile footer verbergen buiten mobiel ---------- */
@media (min-width:720px){
  .cta-mobile,
  .mobile-footer{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* ---------- 2) Mobiele header: paarse glass look ---------- */
@media (max-width:719px){
  #header{
    position:sticky; top:0; z-index:2000; min-height:56px;
    display:flex; align-items:center; gap:10px; padding:10px 12px;

    /* meer paars, minder grijs */
    background:
      linear-gradient(180deg, rgba(159,116,200,.92) 0%, rgba(100,42,121,.78) 100%),
      radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 60%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);

    border-bottom:1px solid rgba(255,255,255,.35);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
  }
  /* wit logo/tekst/icoon */
  #header .logo-link #logo{ max-height:44px; width:auto; }
  .brand-title{ color:#fff; font-weight:800; font-size:16px; letter-spacing:.2px; }
  .hamb svg{ fill:#fff; opacity:.95; }
}

/* Fallback zonder blur: hou het paars */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  @media (max-width:719px){
    #header{
      background: linear-gradient(180deg, rgba(159,116,200,.95) 0%, rgba(100,42,121,.85) 100%);
    }
  }
}
/* Brandingtekst (logo) met Felix Titling */
.brand-text,
.brand-digo,
.brand-sub,
.brand-title{
  font-family: 'FelixTitling', 'Times New Roman', serif;
  font-weight: 400;          /* niet vet */
  text-transform: none;      /* geen uppercase force */
  letter-spacing: .3px;      /* subtiel, minder ‘blokkerig’ */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: left;
}



/* Toon uitsluitend DIGO overal */
.brand-sub{ display:none !important; }

/* DIGO in de mast (desktop/tablet) */
.mast-brand .brand-digo{
  font-family: 'FelixTitling', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 72px;          /* jouw 74px mag ook – kies wat het mooist uitlijnt met het logo */
  line-height: 1.05;
  letter-spacing: .02em;    /* subtiel, niet blokkerig */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mobiele header-tekst (glass header): ook alleen DIGO, geen transform */
#header .brand-title{
  font-family: 'FelixTitling', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;          /* 28–30px werkt fijn */
  letter-spacing: .25px;
  text-transform: none;     /* <-- belangrijk: NIET lowercase */
}

.mast-nav a{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;           /* net schwung zonder te zwaar */
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mast-nav a:hover{ opacity:.85; text-decoration:none; }

/* Hoe hoog DIGO moet staan (desktop + tablet) */
:root { --mast-brand-top: 0px; }  /* 12–24px werkt mooi */

/* Zorg dat de anchor absoluut binnen de mast wordt gepositioneerd */
@media (min-width:720px){
  .mast .mast-inner { position: relative; } /* containing block */

  .mast .mast-inner .brand-text{
    position: absolute;       /* niet static ⇒ top werkt nu */
    top: var(--mast-brand-top);   /* <-- let op: px! */
    left: 150px;
    transform: none;          /* overschrijft translateY(-50%) */
    z-index: 3;               /* boven fade-overlays en foto */
  }
}

/* overal: container max 900px gecentreerd */
#container{ width:100%; max-width:var(--maxw); margin:0 auto; }

/* TABLET (720–979px) – page exact even breed als mast */
@media (min-width:720px) and (max-width:979px){
  #page{
    width:100%;
    max-width:var(--maxw);     /* <- gelijk aan mast-inner */
    margin:9px auto 0;         /* netjes centreren */
  }
}

/* ===== Mobiel: drawer polish ===== */
@media (max-width:719px){

  .drawer-list{
    padding:12px 14px;
    display:grid;
    gap:10px;                           /* wat meer adem */
    background:transparent;             /* glas komt van .drawer */
  }

  /* Sectie-titel (bijv. ‘Hoofdmenu’, ‘Informatie’) */
  .drawer-section{
    margin:14px 2px 6px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6f5b86;
    opacity:.95;
  }

  /* Basis “knop” stijl voor alle items */
  .drawer a,
  .drawer .dd > summary{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.86);   /* niet transparant meer */
    color:var(--ink-soft);
    text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  }
  .drawer a:hover,
  .drawer .dd > summary:hover{
    background:rgba(255,255,255,.92);
  }
  .drawer a:active{ transform:translateY(1px); }

  /* Submenu (details) als één kaart met eigen achtergrond */
  .drawer .dd{
    margin:0; padding:0;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,.82);
  }
  .drawer .dd > summary{
    font-weight:800;
    cursor:pointer;
    position:relative;
    padding-right:32px;                 /* ruimte voor pijltje */
    border:0;                           /* border al op .dd */
    border-bottom:1px solid #eee;       /* scheiding met items */
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  }
  .drawer .dd > summary::after{
    content:"▸";
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    opacity:.65; font-size:14px;
  }
  .drawer .dd[open] > summary::after{ content:"▾"; opacity:.9; }

  /* Items binnen het submenu zijn echte knoppen */
  .drawer .dd a{
    margin:8px 8px;                     /* binnenruimte rondom */
    background:rgba(255,255,255,.96);
  }

  /* Visueel primair item */
  .drawer a.strong{
    font-weight:800; color:var(--ink);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
  }
}

/* Mast: inner en nav-inner houden dezelfde max-breedte */
.mast-inner{ width:var(--maxw); margin:0 auto; height:100%; position:relative; }
.mast-nav .inner{ width:min(var(--maxw),100%); margin:0 auto; }

/* Slideshow randen behouden (tablet én desktop) */
@media (min-width:720px){
  #slideshow{
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    border-right:1px solid #fff;
    margin-top:-1px;
    box-sizing:border-box;
  }
}
/* ===== Drawer close button – nette ronde X ===== */
@media (max-width:719px){
  .drawer > header{
    display:flex; align-items:center; justify-content:space-between;
  }

  .drawer > header .close{
    -webkit-appearance:none; appearance:none;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.85);
    width:36px; height:36px; border-radius:10px;
    display:inline-grid; place-items:center;
    cursor:pointer; color:var(--ink);
    box-shadow:0 1px 0 rgba(255,255,255,.65) inset;
  }
  .drawer > header .close:hover{ background:#fff; }
  .drawer > header .close:active{ transform:translateY(1px); }

  .drawer > header .close svg{
    width:20px; height:20px; fill:currentColor; /* X neemt tekstkleur over */
  }
}


  /* En set regels voor alle prijstabellen */
  article#content table.prijslijst {
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse !important;
    table-layout: auto;
  }
  article#content table.prijslijst th,
  article#content table.prijslijst td {
    border-bottom: 1px solid #e9e9e9;
    vertical-align: top;
  }
  article#content table.prijslijst th { 
    text-align: left; 
    font-weight: 600; 
    color: #222;
  }
  /* Witruimte tussen kolommen */
  article#content table.prijslijst .behandeling { 
    padding: .78rem 2rem .78rem 0.9rem; 
  }
  /* Prijs flush rechts, geen extra rechterpadding */
  article#content table.prijslijst .prijs { 
    padding: .78rem 0 .78rem 0; 
    text-align: right; 
    white-space: nowrap; 
    font-variant-numeric: tabular-nums; 
  }
  /* Subtiele zebra */
  article#content table.prijslijst tbody tr:nth-child(2n) { background: #fafafa; }

  @media (max-width: 640px){
    article#content table.prijslijst .behandeling { padding: .68rem 1.2rem .68rem .8rem; }
    article#content table.prijslijst .prijs { padding: .68rem 0; }
  }

