@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree.woff2) format("woff2")}
:root{
  --bg:#FFFFFF; --paper:#F7F3EC; --ink:#111111; --muted:#5C5650; --line:#E3DDD2; --field:#FFFFFF;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --red:#E12A27; --on-red:#FFFFFF; --red-text:#C21F1C; --red-soft:#FCE4E3; --green:#1E7A44;
  color-scheme:only light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;line-height:1.1;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
a{color:inherit;text-underline-offset:3px}
::selection{background:var(--red-soft);color:var(--ink)}
input,textarea{caret-color:var(--red)}
.muted{color:var(--muted)}


.brand{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:-.01em}
.brand small{display:block;font:600 .8rem/1.2 Figtree,sans-serif;letter-spacing:.01em;margin-bottom:3px}

label{display:grid;gap:4px;font-size:.9rem;font-weight:600}
.req{color:var(--red-text)}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #D3CCBF;border-radius:12px;background:var(--field);font-weight:400;font-size:1rem}
textarea{resize:vertical}
form.stack{display:grid;gap:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{color:var(--red-text);font-weight:600;margin:0}
.err:empty{display:none}
.cta{border:0;border-radius:14px;background:var(--red);color:var(--on-red);padding:15px 18px;font-weight:700;font-size:1.05rem;box-shadow:0 6px 16px -6px rgba(225,42,39,.6);transition:transform .15s var(--ease-out),box-shadow .15s}
.cta:hover{filter:brightness(1.06)}
.cta:active{transform:translateY(1px) scale(.99);box-shadow:0 3px 8px -4px rgba(225,42,39,.6)}
.cta:disabled{opacity:.6;cursor:wait}
.ghost{border:1px solid #D3CCBF;background:transparent;border-radius:10px;padding:8px 14px;font-weight:600}
.small{padding:5px 10px;font-size:.88rem}
.nothing{background:var(--paper);border-radius:14px;padding:28px;color:var(--muted);margin:0}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:20;max-width:calc(100% - 32px);text-align:center}
@media (max-width:880px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[aria-invalid="true"]{border-color:var(--red-text);box-shadow:0 0 0 1px var(--red-text)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* iOS: tijd- en datumvelden niet breder laten worden dan hun vak */
input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;display:block;text-align:left;min-height:46px;line-height:1.2}
input::-webkit-date-and-time-value{text-align:left;margin:0}
select{min-height:46px}

.mt{margin-top:18px}
.unavailable{max-width:560px;margin:12vh auto;background:var(--paper);border-top:6px solid var(--red);border-radius:14px;padding:28px}
.unavailable h1{font-size:1.8rem;font-weight:800;margin-bottom:10px}
.unavailable p{margin:10px 0 0}
.unavailable .cta{display:inline-block;text-decoration:none;margin-top:8px}

/* Siteswitcher: hetzelfde blok op de garage, GoMobilhome en de broodjes (popover, werkt zonder JavaScript) */
.sw-knop{flex:none;display:grid;place-items:center;width:42px;height:42px;min-height:0;padding:0;margin:0;border-radius:11px;border:1.5px solid rgba(127,127,127,.45);background:transparent;color:inherit;cursor:pointer;anchor-name:--sw;transition:border-color .15s,background-color .15s}
.sw-knop:hover{border-color:currentColor}
.sw-knop svg{width:20px;height:20px}
.sw-paneel{position:absolute;position-anchor:--sw;inset:auto;top:anchor(bottom);left:anchor(left);margin:8px 0 0;width:min(348px,calc(100vw - 24px));padding:8px;border:0;border-radius:16px;background:#fff;color:#16191D;font-family:inherit;text-align:left;box-shadow:0 18px 44px rgba(17,18,20,.24),0 0 0 1px rgba(17,18,20,.06);transition:opacity .16s ease-out,transform .16s ease-out}
@starting-style{.sw-paneel:popover-open{opacity:0;transform:translateY(-4px)}}
@supports not (anchor-name:--sw){.sw-paneel{position:fixed;top:72px;left:12px}}
.sw-paneel .sw-titel{margin:6px 10px;font-size:.7rem;line-height:1.2;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5B5F66}
.sw-paneel .sw-lijst{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sw-paneel .sw-lijst a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;color:#16191D;font-weight:400;text-decoration:none;transition:background-color .15s}
.sw-paneel .sw-lijst a:hover,.sw-paneel .sw-lijst a[aria-current="page"]{background:#F3F2EF}
.sw-paneel .sw-lijst a:focus-visible{outline:2px solid #C21F1C;outline-offset:1px}
.sw-paneel .sw-lijst svg{width:38px;height:38px;flex:none}
.sw-paneel .sw-lijst b{display:block;font-size:.98rem;line-height:1.2;font-weight:700}
.sw-paneel .sw-lijst small{display:block;margin:2px 0 0;font-size:.84rem;line-height:1.3;font-weight:400;letter-spacing:0;text-transform:none;color:#5B5F66}
.sw-paneel .sw-hier{margin-left:auto;padding-left:8px;font-style:normal;font-size:.72rem;font-weight:700;color:#C21F1C;white-space:nowrap}
.merk-tegel{width:40px;height:40px;flex:none}