/* Spiegelproef bij kopers thuis (assets/glass-spiegel.js) */
.gf-spiegel{--gf-t:var(--ground-2)}
.section--beige .gf-spiegel{--gf-t:#fff}
.gf-spiegel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}
.gf-spiegel-eye{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.gf-spiegel-eye svg{width:16px;height:16px;color:var(--accent)}
.gf-spiegel-chips{position:relative;z-index:0;display:flex;height:36px;padding:3px;border-radius:999px;background:rgba(20,18,17,.06)}
.gf-spiegel:not(.is-live) .gf-spiegel-chips{visibility:hidden}
.gf-spiegel-chip{position:relative;height:44px;margin:-7px 0;padding:0 15px;border:0;background:none;color:var(--ink-2);font-size:13px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gf-spiegel-chip::before{content:"";position:absolute;inset:7px 0;z-index:-1;border-radius:999px;transition:background-color .2s,box-shadow .2s}
.gf-spiegel-chip[aria-pressed=true]{color:var(--ink)}
.gf-spiegel-chip[aria-pressed=true]::before{background:#fff;box-shadow:0 1px 2px rgba(20,18,17,.14)}
.gf-spiegel-chip:focus-visible{outline:0}
.gf-spiegel-chip:focus-visible::before{box-shadow:0 0 0 2px var(--accent)}
.gf-spiegel-stage{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--ground-2);container-type:inline-size;transition:height .25s ease;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.gf-spiegel-stage::after{content:"";position:absolute;inset:0;z-index:1;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
.gf-spiegel-img{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;transition:opacity .2s}
.gf-spiegel-img.is-on{opacity:1}
.gf-spiegel-hit{position:absolute;inset:0;z-index:2;border-radius:inherit;touch-action:pan-y pinch-zoom;outline:0}
.gf-spiegel-hit:focus-visible{border-radius:inherit;box-shadow:inset 0 0 0 2px var(--accent)}
.gf-spiegel-loupe{position:absolute;left:0;top:0;z-index:3;width:124px;height:124px;border-radius:50%;background:var(--ground-2) no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--accent),0 10px 30px rgba(20,18,17,.35);touch-action:pan-y pinch-zoom;opacity:0;pointer-events:none;transition:opacity .2s;will-change:transform}
.gf-spiegel-loupe::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.gf-spiegel.is-ready .gf-spiegel-loupe{opacity:1;pointer-events:auto}
@media (hover:hover){.gf-spiegel.is-ready .gf-spiegel-stage{cursor:none}}
.gf-spiegel.is-switch .gf-spiegel-loupe,.gf-spiegel.is-switch .gf-spiegel-tiles,.gf-spiegel.is-switch .gf-spiegel-cap{opacity:0}
.gf-spiegel-cue{position:absolute;left:12px;top:12px;z-index:4;padding:6px 10px;border-radius:999px;background:rgba(20,18,17,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.gf-spiegel.is-ready:not(.is-used) .gf-spiegel-cue{opacity:1}
.gf-spiegel-pill{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);padding:3px 8px;border-radius:999px;background:rgba(20,18,17,.7);color:#fff;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none}
.gf-spiegel-up .gf-spiegel-pill{top:12%;bottom:auto}
.gf-spiegel-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;container-type:inline-size;transition:opacity .2s}
.gf-spiegel-tile{display:grid;align-content:start;gap:8px;min-width:0;padding:8px;border:0;border-radius:var(--r-l);background:var(--gf-t);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .2s}
.gf-spiegel-tile[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--accent)}
.gf-spiegel-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-l)}
.gf-spiegel-tv{display:block;aspect-ratio:2;border-radius:12px;background:var(--line) no-repeat;background-size:625% auto;background-position:var(--x2) var(--y2)}
.gf-spiegel-tt{min-width:0;padding:0 2px 2px}
.gf-spiegel-tt b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.gf-spiegel-tt span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--ink-2);text-wrap:balance}
.gf-spiegel-cap{margin-top:20px;transition:opacity .2s}
.gf-spiegel-h{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.gf-spiegel-meta,.gf-spiegel-qs figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.gf-spiegel-meta b,.gf-spiegel-qs b{font-weight:600;color:var(--ink)}
.gf-spiegel-meta span,.gf-spiegel-qs span{white-space:nowrap}
.gf-spiegel-meta i,.gf-spiegel-qs i{flex-basis:100%;height:0}
.gf-spiegel-v{display:inline-flex;align-items:center;gap:3px}
.gf-spiegel-v svg{width:14px;height:14px;color:var(--ok,#166534)}
.gf-spiegel-q{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.gf-spiegel-list{margin-top:28px;container-type:inline-size}
.gf-spiegel-lh{font-size:14px;font-weight:600;color:var(--ink)}
.gf-spiegel-qs{display:grid;column-gap:24px;margin:10px 0 0;padding:0;list-style:none}
.gf-spiegel-qs li{padding:14px 0;border-top:1px solid var(--line)}
.gf-spiegel-qs figure,.gf-spiegel-qs blockquote{margin:0}
.gf-spiegel-qs p{font-size:15px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.gf-spiegel-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px}
.gf-spiegel-all svg{width:16px;height:16px}
@container (min-width:440px){.gf-spiegel-tile{display:flex;align-items:center;gap:12px}.gf-spiegel-tv{flex:none;width:72px;aspect-ratio:1;background-size:900% auto;background-position:var(--x1) var(--y1)}}
@container (min-width:520px){.gf-spiegel-loupe{width:188px;height:188px}.gf-spiegel-tv{width:88px}.gf-spiegel-qs{grid-template-columns:1fr 1fr}}
.gf-spiegel--compact{display:grid;grid-template-areas:"head" "media" "copy"}
.gf-spiegel-head{grid-area:head;margin-bottom:14px}
.gf-spiegel-media{grid-area:media;min-width:0}
.gf-spiegel-copy{grid-area:copy}
.gf-spiegel--compact .gf-spiegel-h{font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em}
.gf-spiegel--panel .gf-spiegel-side{margin-top:8px}
/* wide: the photo as large as the test footage, the two close-ups in a column beside it, the review below */
@media (min-width:768px){
  .gf-spiegel--panel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-template-areas:"stage tiles" "cap cap";column-gap:12px}
  .gf-spiegel--panel .gf-spiegel-stage{grid-area:stage}
  .gf-spiegel--panel .gf-spiegel-side{display:contents}
  .gf-spiegel--panel .gf-spiegel-tiles{grid-area:tiles;grid-template-columns:1fr;align-content:center;margin-top:0}
  .gf-spiegel--panel .gf-spiegel-cap{grid-area:cap;margin-top:14px}
  .gf-spiegel--panel .gf-spiegel-cap>*{max-width:62ch}
}
.gf-spiegel-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-2)}
@media (min-width:1024px){
  .gf-spiegel--compact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". media" "head media" "copy media" ". media";column-gap:clamp(40px,5.5vw,88px)}
  .gf-spiegel--compact .gf-spiegel-cap{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.gf-spiegel-stage{transition-duration:.25s!important}.gf-spiegel-img,.gf-spiegel-loupe,.gf-spiegel-tiles,.gf-spiegel-cap{transition-duration:.2s!important}.gf-spiegel-cue{transition-duration:.3s!important}}