:root{
  --bg:#ebf3ff; --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.82);
  --stroke:rgba(19,75,170,.16); --txt:#0b2447; --muted:#51627d; --accent:#3a83ff;
  --ring-blue:58 131 255; --ring-amber:242 176 30; --ring-green:23 189 138; --ring-vio:140 91 255; --ring-cyan:47 181 201; --ring-pink:255 99 160;
  --tile:rgba(255,255,255,.55); --shadow:0 10px 26px rgba(33,61,124,.16);
  --r-outer:24px; --grid-gap:clamp(14px,2vmin,18px);
  --tile-h:245px; --title-lift:-8px; --appbar-h:112px; --detail-head-h:64px;
  --drawer-w: min(320px, 88vw);

  /* Nieuwe thema-kleuren voor O/P/MIP chips */
  --chip-bg:#f6faff; --chip-br:rgba(19,75,170,.25);
  --chip-o:#18a877;      /* O  = groen */
  --chip-p:#7a4dff;      /* P  = paars */
  --chip-a:#ff7d66;      /* A  = rood/oranje */
  --chip-c:#ff63a0;      /* C  = pink */
  --chip-i:#2fb5c9;      /* I  = cyaan */
}
*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 85% -10%, #cde3ff 0%, rgba(205,227,255,0) 60%),
    radial-gradient(900px 600px at -10% 0%, #dfeaff 0%, rgba(223,234,255,0) 55%),
    linear-gradient(175deg,#eef5ff, #e7f0ff 55%, #e3eeff 100%);
  min-height:100vh;
}
body.no-scroll{ overflow:hidden }
[hidden]{display:none!important}

/* --- Liquid Glass header zonder extra inner/::before --- */
.appbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;

  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 40%),
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.12), transparent 60%),
    var(--tile);

  border-bottom: 1px solid var(--stroke);
  box-shadow: var(--shadow);

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  transform: translateZ(0);
  will-change: transform; /* iOS jump fix */
}

/* laat de content ACHTER de header doorlopen */
.content-scroll{ top: 0 !important; }
main{ padding-top: calc(var(--appbar-h) + 24px) !important; }

.appbar-inner{
  max-width:1200px; margin:0 auto; padding:12px clamp(14px,4vw,24px);
  display:grid; grid-template-columns:1fr minmax(320px,1.2fr) auto; gap:10px 14px; align-items:center
}
.brand{min-width:0}
.brand h1{font:800 20px/1 Outfit,Inter;margin:0}
.sub{font-size:12px;color:var(--muted);margin-top:2px}

/* Mobiel header layout */
@media (max-width:680px){
  .appbar-inner{
    grid-template-columns:1fr auto;
    grid-auto-rows:auto;
  }
  .brand{ grid-column:1 / 2; grid-row:1 }
  .hamb-btn{ grid-column:2 / 3; grid-row:1; justify-self:end }
  .search-wrap{ grid-column:1 / -1; grid-row:2 }
}

/* Search */
.search{position:relative}
.search input{
  width:100%; border:1px solid var(--stroke); outline:none; border-radius:16px;
  padding:14px 56px 14px 44px;
  background:var(--glass-strong);
  font-size:16px; font-weight:600; line-height:1.2; color:var(--txt);
  box-shadow:0 6px 16px rgba(61,121,224,.10);
  -webkit-appearance:none; appearance:none;
  position:relative; z-index:1;
}
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; width:0; height:0; margin:0; display:none; }
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.7}

/* Clear-knop */
.clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer;
  font-size:18px; line-height:1; padding:10px 12px;
  border-radius:10px; color:#5b6c86;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  z-index:10; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.clear-btn.show{ opacity:.98; pointer-events:auto; }

/* Desktop pill-tabs */
.pill-tabs{grid-column:1/-1; display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.pill{
  position:relative; border:1px solid var(--stroke); border-radius:999px;
  background:var(--glass-strong); padding:12px 14px; font-weight:800; font-size:13px;
  text-align:center; cursor:pointer
}
.pill:hover{background:#fff; box-shadow:0 6px 14px rgba(64,123,214,.10)}
.pill[aria-pressed="true"]{background:#fff}
.pill[aria-pressed="true"]::after{
  content:""; position:absolute; inset:-1px; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 2px rgba(var(--ring,58 131 255)/.18), 0 8px 18px rgba(var(--ring,58 131 255)/.14), 0 0 26px rgba(var(--ring,58 131 255)/.10);
}
.pill[data-filter="alles"]{--ring:var(--ring-blue)}
.pill[data-filter="favs"]{--ring:var(--ring-amber)}
.pill[data-filter="so"]  {--ring:var(--ring-green)}
.pill[data-filter="proc"]{--ring:var(--ring-vio)}
.pill[data-filter="mip"] {--ring:var(--ring-pink)}
.pill[data-filter="tools"]{--ring:var(--ring-cyan)}

/* Hamburger (mobiel) */
.hamb-btn{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--stroke); background:#fff; cursor:pointer; box-shadow:0 6px 14px rgba(64,123,214,.10)
}
.hamb-btn svg{width:22px; height:22px; opacity:.9}
@media (max-width:680px){ .hamb-btn{ display:flex } }

/* Side drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(9,19,33,.25); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:1890
}
.drawer-backdrop.show{ opacity:1; pointer-events:auto }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:var(--drawer-w);
  background:linear-gradient(180deg,#ffffff 0%, #f4f8ff 100%);
  border-left:1px solid var(--stroke);
  box-shadow:-18px 0 40px rgba(41,80,160,.18);
  transform:translateX(100%); transition:transform .22s ease; z-index:1895; display:flex; flex-direction:column
}
.drawer.show{ transform:translateX(0) }
.drawer-head{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--stroke); backdrop-filter:blur(8px) saturate(120%) }
.drawer-title{ font:800 16px Outfit,Inter }
.btn-close-pill{ appearance:none; border:1px solid var(--stroke); background:#fff; color:#0b2447; border-radius:999px; padding:10px 14px; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(64,123,214,.10) }

/* Drawer list */
.drawer-list{
  list-style:none; margin:0 auto; padding:20px 0;
  width:min(280px, 86%); display:grid; gap:6px;
  justify-items:center;
}
.drawer-list .item{
  position:relative; display:block; width:100%;
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px) saturate(110%);
  border:1px solid var(--stroke); border-radius:12px; padding:10px 12px;
  font:800 15px/1.22 Outfit,Inter; color:#0b2447; text-align:center; cursor:pointer;
  box-shadow:0 6px 14px rgba(64,123,214,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.drawer-list .item:hover, .drawer-list .item:focus{ background:#fff }
.drawer-list .item.active::after{
  content:""; position:absolute; inset:-1px; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 2px rgba(var(--ring,58 131 255)/.18), 0 8px 18px rgba(var(--ring,58 131 255)/.14), 0 0 26px rgba(var(--ring,58 131 255)/.10);
}
.drawer-list .item[data-filter="alles"]{ --ring:var(--ring-blue) }
.drawer-list .item[data-filter="favs"]{ --ring:var(--ring-amber) }
.drawer-list .item[data-filter="so"]  { --ring:var(--ring-green) }
.drawer-list .item[data-filter="proc"]{ --ring:var(--ring-vio) }
.drawer-list .item[data-filter="mip"] { --ring:var(--ring-pink) }
.drawer-list .item[data-filter="tools"]{ --ring:var(--ring-cyan) }

.drawer-sep{
  height:1px; width:100%; margin:10px 0;
  background:linear-gradient(90deg, transparent, rgba(19,75,170,.28), transparent);
  box-shadow:0 6px 14px rgba(64,123,214,.08), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius:999px; opacity:.9;
}

/* Main & grid (compact dichtvallen) */
main{ max-width:1200px; margin:0 auto; padding: calc(var(--appbar-h) + 10px) clamp(14px,4vw,24px) 40px; }
.grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--grid-gap);
  grid-auto-flow:row dense;
}
.empty-hint{grid-column:1/-1; text-align:center; color:#51627d; padding:24px 10px}

.tile{ grid-column:span 4; position:relative; border-radius:var(--r-outer); padding:3px; transition:transform .16s ease; scroll-margin-top: calc(var(--appbar-h) + 12px) }
.tile:hover{ transform:translateY(-2px) }
.tile.fav-on::before,.tile.fav-on::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none}
.tile.fav-on::before{ box-shadow:0 12px 36px hsla(var(--fav-h),90%,55%,.18), 0 0 40px hsla(var(--fav-h),90%,55%,.12) }
.tile.fav-on::after{ border:2px solid hsla(var(--fav-h),90%,55%,.85) }
.tile-inner{ height:var(--tile-h); border-radius:calc(var(--r-outer) - 3px); background:var(--tile); border:1px solid var(--stroke); box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr auto; backdrop-filter:blur(6px) saturate(110%) }
.tile-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 0 }
.badge{ font-weight:800; font-size:12px; padding:6px 10px; border-radius:12px; border:1px solid var(--stroke); background:#fff }
.fav-star{ appearance:none; border:1px solid var(--stroke); background:#fff; border-radius:12px; padding:6px 8px; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(54,103,194,.10) }
.fav-star[aria-pressed="true"]{ background:#fff5df; border-color:#e9d091 }
.tile-body{ padding:4px 16px 0; display:grid; place-items:center }
.tile-title{ font:800 clamp(16px,2.4vw,20px)/1.22 Outfit,Inter; letter-spacing:.25px; text-transform:uppercase; text-align:center }

/* Over panel */
.over-backdrop{ position:fixed; inset:0; background:rgba(9,19,33,.28); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1900 }
.over-backdrop.show{ opacity:1; pointer-events:auto }
.over-panel{ position:fixed; top:0; left:0; height:100%; width:min(520px,92vw); background:linear-gradient(180deg,#fff 0%,#f7fbff 100%); border-right:1px solid var(--stroke); box-shadow:24px 0 50px rgba(41,80,160,.18); transform:translateX(-100%); transition:transform .28s ease; z-index:1910; display:flex; flex-direction:column }
.over-panel.show{ transform:translateX(0) }
.over-head{ padding:12px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--stroke) }
.over-title{ font:800 16px Outfit,Inter }
.over-body{ padding:16px; overflow:auto }

/* Detail overlay */
.detail-backdrop{ position:fixed; inset:0; background:rgba(10,20,40,.15); backdrop-filter:blur(3px) saturate(110%); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:4000 }
.detail-backdrop.show{ opacity:1; pointer-events:auto }
.detail-panel{ position:fixed; inset:0; z-index:4001; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fff; opacity:0; transform:scale(.98); transition:opacity .25s ease, transform .25s ease }
.detail-panel.show{ opacity:1; transform:scale(1) }
.detail-box{ flex:1; display:flex; flex-direction:column; margin:1cm; width:calc(100% - 2cm); border-radius:20px; border:1px solid #fff; background:rgba(255,255,255,.95); box-shadow:0 18px 40px rgba(50,90,180,.12); overflow:hidden; position:relative }
.detail-head{ position:absolute; top:0; left:0; right:0; z-index:3; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--stroke) }
.detail-head::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--glass); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(64,123,214,.12) }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--chip-br); background:var(--chip-bg);
  color:#0b2447; font-weight:800; font-size:12px;
  box-shadow:inset 0 -2px 6px rgba(120,160,230,.15), 0 4px 14px rgba(50,100,200,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.chip-link{ cursor:pointer; text-decoration:none; }
.chip-link:hover{ transform: translateY(-1px); box-shadow:inset 0 -2px 6px rgba(120,160,230,.22), 0 8px 18px rgba(50,100,200,.12); }
.chip-link:active{ transform: translateY(0); }

/* Kleuraccent per type (alleen op data-ref, tools blijven neutraal) */
.chip-link[data-ref^="O"]{ border-color: color-mix(in srgb, var(--chip-o) 35%, #ffffff); background: linear-gradient(180deg, #f3fff9, #ebfff6); }
.chip-link[data-ref^="P"]{ border-color: color-mix(in srgb, var(--chip-p) 35%, #ffffff); background: linear-gradient(180deg, #f4efff, #eee9ff); }
.chip-link[data-ref^="A"]{ border-color: color-mix(in srgb, var(--chip-a) 35%, #ffffff); background: linear-gradient(180deg, #fff2ef, #ffeae6); }
.chip-link[data-ref^="C"]{ border-color: color-mix(in srgb, var(--chip-c) 35%, #ffffff); background: linear-gradient(180deg, #fff0f6, #ffe9f2); }
.chip-link[data-ref^="I"]{ border-color: color-mix(in srgb, var(--chip-i) 35%, #ffffff); background: linear-gradient(180deg, #effbff, #e8f8ff); }

/* Detail content */
.detail-title{ font:800 clamp(20px,2.6vw,26px) Outfit,Inter; text-transform:uppercase; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.detail-close{ appearance:none; border:1px solid var(--stroke); background:#fff; color:#0b2447; border-radius:999px; padding:10px 14px; font-weight:800; cursor:pointer }
.detail-scroll{ flex:1; overflow:auto; padding: calc(var(--detail-head-h) + 20px) 20px 20px; background:rgba(255,255,255,.95) }
.detail-content{ width:100%; background:transparent; border:none; box-shadow:none; border-radius:0; padding:0; font-size:16px; line-height:1.6 }
.sec{ background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98)); border-radius:14px; padding:14px 16px 16px; box-shadow:0 6px 16px rgba(60,110,200,.08) }
.sec h3{ background:transparent;}
.sec.info{ background:#eef2f6; border:1px solid #e1e7ef; box-shadow:0 8px 18px rgba(0,0,0,.05) }
.sec.info h3{ background:transparent; box-shadow:none; border-radius:0; padding:0; margin:0 0 8px }
.hr{ height:1px; background:linear-gradient(90deg, transparent, rgba(19,75,170,.28), transparent); margin:10px 0 12px }
.detail-content ol{ padding-left:1.2em; margin:0 }
.detail-content ol>li{ margin:10px 0; position:relative; }
.detail-content ol>li::marker{ font-weight:700 }
.detail-content ol ol{ list-style:lower-alpha; margin-top:6px }
.detail-content ol ol li{ margin:8px 0 }
.detail-content ol ol ol{ list-style:lower-roman }

/* Tooltip termen (ongewijzigd) */
.term{ color:#d1a953; border-bottom:2px dotted #d1a953; cursor:help; text-decoration:none; }
.popover{
  position:fixed; z-index:4010; max-width:min(520px,92vw);
  background:#fff7d6; border:1px solid #f0d98a; border-radius:16px;
  box-shadow:0 14px 32px rgba(0,0,0,.08); padding:12px 14px; color:#1b2230;
  will-change:left, top;
}
.pop-term{ font-weight:800; font-size:15px; line-height:1.15; color:#8b4a1f; margin-bottom:2px }
.pop-text{ font-size:14.5px; line-height:1.45 }

/* === NIEUW: Refs-row (geen stippellijn, wel duidelijke “attach”) === */
.has-refs{ position:relative; padding-bottom:.35rem; }
.has-refs .refs-row{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:6px;
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(240,246,255,.75), rgba(240,246,255,.55));
  border:1px solid rgba(50,90,180,.12);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 6px 14px rgba(50,90,180,.08);
  position:relative;
}

/* Anker-notch die naar de regel erboven wijst (modern, geen stippels) */
.has-refs .refs-row::before{
  content:"";
  position:absolute;
  top:-6px; left:18px;
  width:12px; height:12px;
  background:inherit;
  border-left:1px solid rgba(50,90,180,.12);
  border-top:1px solid rgba(50,90,180,.12);
  transform: rotate(45deg);
  border-radius:3px 0 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

/* Mini verbindingslijntje (heel subtiel, niet gestippeld) */
.has-refs::after{
  content:"";
  position:absolute;
  left:22px;
  bottom: calc(0.35rem + 16px + 6px); /* eindigt bij bovenkant refs-row::before */
  width:2px;
  height:10px;
  background:linear-gradient(180deg, rgba(50,90,180,.18), rgba(50,90,180,.00));
  border-radius:2px;
  pointer-events:none;
}

/* Refs chips binnen de rij: iets compacter */
.has-refs .refs-row .chip{
  padding:5px 9px;
  font-size:12px;
  box-shadow:inset 0 -2px 6px rgba(120,160,230,.12), 0 4px 10px rgba(50,100,200,.06);
}

/* Install & buttons */
.install-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.btn{
  appearance:none; border:1px solid var(--stroke); background:#fff; color:#0b2447;
  border-radius:999px; padding:10px 16px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 14px rgba(64,123,214,.10)
}
.btn[disabled]{ opacity:.8; filter:saturate(95%); background:#fff; border-color:var(--stroke) }
.help-hint{ font-size:14px; color:#51627d }
.steps{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px }
.step{ display:flex; gap:10px; align-items:flex-start; background:#f8fbff; border:1px solid #e3ecfa; padding:10px 12px; border-radius:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7) }
.icn{ width:20px; height:20px; flex:0 0 20px; opacity:.85 }
.hint-muted{ font-size:13px; color:#6c7a94; margin-top:6px }

/* Like-sectie */
.over-body .sec.like-sec{ gap:12px; margin-bottom:12px; margin-top:5px;}
.btn.thumb{ display:inline-flex; align-items:center; gap:8px; }
.btn.thumb.voted{ background:#fff5df; border-color:#e9d091; }

/* Mobile tweaks */
@media (max-width:680px){
  .pill-tabs{ display:none }
  .sec h3{ font-size:15px;}
  .btn{ padding:8px 12px; font-size:13px }
  .help-hint{ font-size:13px }
  .steps{ gap:6px }
  .step{ padding:8px 10px }
  .icn{ width:18px; height:18px }
  .hint-muted{ font-size:12px }
  .tile{ grid-column:1/-1 }
  .tile-title{ font-size:clamp(14px,4.4vw,18px) }
  :root{ --tile-h:220px }
  .detail-box{ margin:0; width:100%; border-radius:0 }
}

/* Focus */
.tile:focus-visible,.pill:focus-visible,input:focus-visible,.btn-close-pill:focus-visible,.detail-close:focus-visible,.btn:focus-visible,.drawer-list .item:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px
}

/* Scrollbars verbergen */
* { scrollbar-width: none; -ms-overflow-style: none }
*::-webkit-scrollbar { display: none }

/* Stabiliteit */
html, body { overflow-anchor: none }

/* === GLASS modifier voor .sec.info === */
.sec.info.glass{
  --gc-r: 255; --gc-g: 70; --gc-b: 70; /* default: rood */
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 220px at 22% -10%, rgba(255,255,255,.40), transparent 60%),
    linear-gradient(180deg, rgba(var(--gc-r), var(--gc-g), var(--gc-b), .30), rgba(var(--gc-r), var(--gc-g), var(--gc-b), .35)) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.sec.info.glass::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(260px 140px at 75% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(180px 120px at 0% 100%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: screen;
}
.sec.info.glass h3,
.sec.info.glass p{
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  margin:0;
}
.sec.info.glass h3{ font-size:.95rem; letter-spacing:.04em; opacity:.95; }
.sec.info.glass p{ margin-top:.35rem; line-height:1.35; }

/* Fallback zonder backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sec.info.glass{
    background: linear-gradient(180deg, rgba(var(--gc-r), var(--gc-g), var(--gc-b), .85), rgba(var(--gc-r), var(--gc-g), var(--gc-b), .88)) !important;
  }
}

/* === Floating Back Balloon === */
.float-back{
  position: fixed;
  left: clamp(12px, 2.8vw, 22px);
  bottom: clamp(12px, 2.8vw, 22px);
  z-index: 5000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0b1736;
  background:
    radial-gradient(600px 220px at 22% -10%, rgba(255,255,255,.50), transparent 60%),
    linear-gradient(180deg, rgba(232,240,255, .95), rgba(216,229,255, .95));
  box-shadow: 0 8px 24px rgba(41,77,176,.18), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.float-back:active{ transform: translateY(1px) scale(.99); }
.float-back .icn{ width: 18px; height: 18px; flex: 0 0 18px; }

@media (hover:hover){
  .float-back:hover{ box-shadow: 0 10px 28px rgba(41,77,176,.22), inset 0 1px 0 rgba(255,255,255,.7); }
}
body.detail-open.has-detail-back .float-back{ display: inline-flex; }

@media (max-width: 360px){
  .float-back span{ display:none; }
  .float-back{ padding: 10px; }
}

/* Alle afbeeldingen responsief maken */
img {
  max-width: 100%;
  height: auto;
  display: block; /* voorkomt rare witruimte bij inline images */
}

/* Als je het enkel wil beperken tot een bepaalde container/class */
.responsive-images img {
  max-width: 100%;
  height: auto;
}