/* SuperDoggo — gedeelde stijl voor de interactieve webtools (Hulpmiddelen). */
:root{--paper:#EDF1E7;--card:#FFFFFF;--ink:#1E2B24;--muted:#5C6B61;--border:#E3E8DA;
--accent:#C7512A;--accent-ink:#A23F1F;--open:#2E8B57;--seasonal:#C98A2A;--closed:#C0392B;--blue:#3A6EA5;
--radius:16px;--shadow:0 6px 22px -10px rgba(30,43,36,.30);}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,sans-serif;line-height:1.55;
-webkit-font-smoothing:antialiased;background-image:radial-gradient(120% 60% at 50% -10%,#F4F7EF 0%,var(--paper) 55%);}
.wrap{max-width:760px;margin:0 auto;padding:0 22px;}
a{color:var(--accent);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;}
.skip{position:absolute;left:-9999px;}.skip:focus{left:8px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:10;}
header.top{padding:20px 0 6px;}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{width:28px;height:28px;color:var(--accent);}
.brand .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;}
.brand .tld{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--muted);margin-left:-3px;}
.backlink{font-weight:600;text-decoration:none;font-size:.92rem;}
.hero{padding:18px 0 6px;}
.eyebrow{font-family:"Space Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 10px;}
.lede{font-size:1.02rem;color:var(--muted);margin:0 0 6px;}
section{padding:14px 0;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px;}
label.fld{display:block;font-weight:700;font-size:.95rem;margin:2px 0 6px;}
.val{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--accent);font-size:1.3rem;margin-bottom:4px;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none;margin:6px 0 14px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{font:inherit;font-size:.9rem;font-weight:600;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;transition:background .12s;}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.result{background:color-mix(in srgb,var(--accent) 7%,#fff);border:1px solid color-mix(in srgb,var(--accent) 22%,#fff);border-radius:20px;padding:22px;text-align:center;margin:6px 0 4px;}
.resultnum{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.7rem;color:var(--accent);line-height:1;}
.resultsub{color:var(--muted);font-size:.95rem;margin-top:4px;}
.stbadge{display:inline-block;margin-top:12px;padding:5px 14px;border-radius:999px;font-weight:700;font-size:.85rem;}
/* hond-vs-mens tijdlijn */
.tl{margin:18px 0 4px;}
.tl .track{position:relative;height:14px;border-radius:7px;overflow:hidden;
background:linear-gradient(90deg,var(--open) 0 15%,var(--blue) 15% 24%,var(--accent) 24% 65%,var(--seasonal) 65% 100%);}
.tl .marker{position:absolute;top:-5px;width:4px;height:24px;background:var(--ink);border-radius:2px;transform:translateX(-2px);transition:left .15s;}
.tl .lbls{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-top:6px;}
.tl .zones{display:flex;font-size:.68rem;color:var(--muted);margin-top:2px;}
.tl .zones span{text-align:center;}
/* feitje / info */
.fact{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--blue) 8%,#fff);border:1px solid color-mix(in srgb,var(--blue) 24%,#fff);border-radius:12px;padding:12px 14px;margin-top:14px;color:#22405e;font-size:.95rem;}
.fact .emo{font-size:1.2rem;line-height:1.2;}
.note{background:color-mix(in srgb,#1F8A8A 8%,#fff);border:1px solid color-mix(in srgb,#1F8A8A 25%,#fff);border-radius:12px;padding:11px 14px;color:#1c5b5b;font-size:.88rem;margin-top:10px;}
.btn{font:inherit;font-weight:600;padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
footer{margin:30px 0 24px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:.84rem;}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;}}