:root{
    --bg:#f6f1ea;
    --surface:#fff;
    --surface-2:#efe6db;
    --text:#1f1a17;
    --muted:#646464;
    --line:#dccdbc;
    --primary:#7a4b2d;
    --primary-dark:#603720;
    --accent:#d3b08c;
    --shadow:0 18px 45px rgba(58,35,19,.08);
    --radius:22px;
    --radius-sm:16px;
    --container:1180px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth;
  /* Tells the browser your sticky header height for ALL anchor links */
    scroll-padding-top: 235px;
}

body{
    margin:0;
    font-family:Inter,system-ui,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.65
}

a{
    text-decoration:none;
    color:inherit
}

img{
    max-width:100%;
    display:block
}

main{
    min-height:60vh
}
.container{width:min(var(--container),calc(100% - 2rem));margin:0 auto}
.narrow{width:min(1000px,100%)}
.site-header{position:sticky;top:0;z-index:30;background:rgba(246,241,234,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(122,75,45,.08)}
.brand{display:flex;align-items:center;gap:.9rem}
.brand img{
    min-width:80px;
    
}
.nav-link,.mobile-link{padding:.72rem .9rem;border-radius:999px;color:var(--muted);font-weight:600;transition:.2s}

/*
 * Topbar above the header.
 * This bar cycles through short messages with a soft fade.
 */
.topbar {
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--primary);
    color: #f4eee7;
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
    position: relative;
}

.topbar .message-group {
    display: grid;
    width: 100%;
}

.topbar .message {
    grid-area: 1 / 1;
    min-height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    text-align: center;
    white-space: normal;
    opacity: 0;
    animation: topbar-fade 11s infinite;
    pointer-events: none;
}

.topbar .link-brown {
    color: #f4eee7;
}

.topbar .message a {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.topbar .message:nth-child(2) {
    animation-delay: 5.5s;
}

@keyframes topbar-fade {
    0%,
    45.45% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .topbar {
        font-size: 0.85rem;
    }

    .topbar .message {
        padding: 0 1rem;
    }
}


/* hoofdnavigatie */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.main-nav .nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  align-items: center;
}

.nav-logo{
  list-style:none;
}

.main-nav .nav-list a,
.main-nav .dropdown-toggle {
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.dropdown-toggle{
    background: none;
    font-family: Inter, system-ui, Arial, sans-serif;
    color: var(--text);
    line-height: 1.65;
    font-size: 16px;  
}
/* dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  list-style: none;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 16px;
  min-width: 180px;
  z-index: 1000;
}

.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  margin: 10px 0;
}

/* tonen op hover (desktop) */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* optionele klikfunctionaliteit (mobiel) */
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
}
.nav-link:hover,.mobile-link:hover,.dropdown-toggle.active{
    background:#7a4b2d;
    color:#f4eee7;
    box-shadow:var(--shadow)
}
.nav-link.active,
.mobile-link.active{
    background:rgba(122,75,45,.16);
    color:var(--primary);
    box-shadow:inset 0 0 0 1px rgba(122,75,45,.18);
    font-weight:800;
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.25rem;border-radius:999px;font-weight:700;border:1px solid transparent;transition:.2s;cursor:pointer}
.btn-small{padding:.75rem 1rem}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-secondary{background:transparent;border-color:var(--line)}
.btn-secondary:hover{background:var(--surface)}
.mobile-logo{display:none}
.menu-toggle{display:none;width:2.8rem;height:2.8rem;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:.55rem;cursor:pointer;position:relative;z-index:1002}
.menu-toggle span{display:block;height:2px;background:var(--text);margin:.32rem 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-toggle[aria-expanded="true"]{
    opacity:0;
    pointer-events:none;
}
.mobile-nav-backdrop{
    position:fixed;
    inset:0;
    background:transparent;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:998;
}
.menu-open .mobile-nav-backdrop{
    opacity:1;
    pointer-events:none;
}
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(92vw, 390px);
    max-width: 390px;
    height: 100vh;
    background: linear-gradient(180deg, #fff, #f6f1ea);
    border-left: 1px solid rgba(122,75,45,.12);
    box-shadow: -18px 0 50px rgba(31,26,23,.18);
    overflow-y: auto;
    display: none;
    flex-direction: column;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility .2s ease;
    padding: 1.15rem 1rem 0;
    box-sizing: border-box;

    transform: none;
    contain: layout paint;
}
.mobile-nav.open{
    display:flex;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.mobile-nav-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding-bottom:1rem;
    margin-bottom:1rem;
    border-bottom:1px solid rgba(122,75,45,.12);
}
.mobile-nav-title{
    margin:0;
    font-size:1rem;
    font-weight:800;
    color:var(--text);
}
.mobile-nav-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.75rem;
    height:2.75rem;
    border:none;
    border-radius:999px;
    background:rgba(122,75,45,.1);
    color:var(--primary);
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
}
.mobile-nav-social{
    position:sticky;
    left:0;
    right:0;
    bottom:0;
    margin-top:auto;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:1.35rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-top:1px solid rgba(122,75,45,.12);
    background:linear-gradient(180deg,rgba(246,241,234,.72),rgba(246,241,234,.9));
    backdrop-filter:blur(10px);
}
.mobile-nav-social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.9rem;
    height:2.9rem;
}
.mobile-nav-social-link img{
    width:1.2rem;
    height:1.2rem;
    display:block;
}
.mobile-nav-inner{display:flex;flex-direction:column;gap:.8rem;padding:0 0 10px;margin:0;width:100%}
.mobile-nav-inner li{padding:0;list-style:none}
.mobile-nav .dropdown{position:static}
.mobile-nav .dropdown-menu{
    position:static;
    display:none;
    min-width:0;
    margin-top:.6rem;
    padding:.45rem;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(122,75,45,.1);
    box-shadow:none;
    border-radius:16px;
}
.mobile-nav .dropdown.open > .dropdown-menu,
.mobile-nav .dropdown-toggle[aria-expanded="true"] + .dropdown-menu{display:grid;gap:.35rem}
.mobile-nav .dropdown-toggle{
    width:100%;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:none;
    margin:0;
    position:relative;
    padding-right:2.4rem;
}
.mobile-nav .dropdown-toggle::after{
    content:"+";
    position:absolute;
    right:.9rem;
    top:50%;
    transform:translateY(-50%);
    font-size:1.2rem;
    color:var(--primary);
}
.mobile-nav .dropdown.open > .dropdown-toggle::after{
    content:"-";
}
.mobile-nav .dropdown-toggle[aria-expanded="true"]::after{
    content:"-";
}
.mobile-nav .mobile-link,
.mobile-nav .dropdown-toggle{
    width:100%;
    display:block;
    padding:.72rem .85rem;
    border-radius:12px;
    background:rgba(255,255,255,.68);
    color:var(--text);
    font-weight:700;
    text-align:left;
    border:1px solid rgba(122,75,45,.08);
    line-height:1.25;
    box-sizing:border-box;
}
.mobile-nav .dropdown-toggle{
    display:flex;
    align-items:center;
    min-height:2.9rem;
}
.mobile-nav .mobile-link:hover,
.mobile-nav .dropdown-toggle:hover,
.mobile-nav .dropdown-toggle.active{
    background:rgba(122,75,45,.12);
    color:var(--text);
    box-shadow:none;
}
.mobile-nav .mobile-link.active{
    background:rgba(122,75,45,.18);
    color:var(--primary);
    border-color:rgba(122,75,45,.2);
    font-weight:800;
}
.mobile-nav .dropdown-toggle[aria-expanded="true"]{
    background:rgba(122,75,45,.16);
    color:var(--text);
}
.mobile-nav .dropdown.open > .dropdown-toggle{
    background:rgba(122,75,45,.16);
    color:var(--text);
}
.mobile-nav .dropdown-menu .mobile-link{
    background:transparent;
    border:none;
    padding:.58rem .75rem .58rem .9rem;
    font-weight:600;
    border-radius:10px;
    color:var(--muted);
}
.mobile-nav .dropdown-menu .mobile-link:hover,
.mobile-nav .dropdown-menu .mobile-link.active{
    background:rgba(122,75,45,.08);
    color:var(--text);
}
.m-inactive{
    display:block;
}
.hero{padding:4.5rem 0 3rem;background:radial-gradient(circle at top right,rgba(211,176,140,.3),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.45),rgba(246,241,234,.75))}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
.eyebrow{display:inline-block;margin:0 0 .85rem;padding:.38rem .8rem;border-radius:999px;background:rgba(122,75,45,.1);color:var(--primary);font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem}

.hero h1,
.page-hero h1{margin:.1rem 0 1rem;font-size:clamp(2.35rem,4vw,4.4rem);line-height:1.02}
.lead{font-size:1.14rem;color:var(--muted);max-width:65ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.hero-card,.content-card,.advice-box,.info-card,.contact-card{background:var(--surface);border:1px solid rgba(122,75,45,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:1.25rem}
.hero-visual{aspect-ratio:4/3;border-radius:18px;background:linear-gradient(135deg,rgba(122,75,45,.18),rgba(211,176,140,.5));position:relative;overflow:hidden}
.hero-bullets{margin:1rem 0 0;padding-left:1.2rem;color:var(--muted)}
.section{padding:4rem 0}
.section-alt{background:#f1e8dc;border-block:1px solid rgba(122,75,45,.09)}
.section-soft{background:#fffaf4;border-block:1px solid rgba(122,75,45,.08)}
.section-heading{max-width:780px;margin:0 auto 1.5rem;text-align:center}
.section-heading h2,.narrow h2{font-size:clamp(1.8rem,3vw,3rem);margin:0 0 .75rem}
.section-heading p,.narrow p{color:var(--muted)}
.cards-3,.cards-4,.content-grid,.contact-grid,.stats-grid{display:grid;gap:1.2rem}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.service-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(122,75,45,.08);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.22s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(58,35,19,.12)}
.service-card.featured{border-color:rgba(122,75,45,.15)}
.card-image{aspect-ratio:4/3;background:linear-gradient(135deg,rgba(122,75,45,.16),rgba(211,176,140,.55));position:relative}
.card-image:before{width:46%;height:46%;left:-8%;bottom:-10%;background:rgba(255,255,255,.38)}
.card-image:after{width:24%;height:24%;right:12%;top:14%;background:rgba(122,75,45,.23)}
.card-body{padding:1.25rem;display:flex;flex:1;flex-direction:column;gap:.65rem}
.card-body h3{margin:0;font-size:1.18rem}
.service-card .card-body h3 {
    /* Bepaal een minimale hoogte voor koppen in servicekaarten zodat de
       "Meer lezen"-knop op alle kaarten horizontaal uitlijnt. */
    min-height: 3.2rem;
}
.card-body p{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.7em}
.card-link{margin-top:auto;font-weight:700;color:var(--primary)}

.image-wrapper {
  width: 100%;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Brown-tinted link style for contextual links (e.g. orthopedische partners, ruitershop). */
.link-brown {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}
.content-grid{grid-template-columns:repeat(2,1fr)}
.content-card{padding:1.4rem}
.content-card h3{margin-top:0;font-size:1.3rem}
.card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1rem;
}
.card-actions .btn{
    text-align:center;
    white-space:normal;
}
.business-service-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.2rem;
    align-items:stretch;
}
.business-service-grid .content-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
}
.business-service-grid .content-card .muted{
    margin-top:auto;
}
.business-why-card{
    width:min(760px,calc(100% - 2rem));
}
.business-why-card .check-list{
    columns:2;
    column-gap:2rem;
}
.business-why-card .check-list li{
    break-inside:avoid;
}
.auto-key-highlight{
    background:#fffaf4;
    border-color:rgba(122,75,45,.22);
    box-shadow:0 18px 45px rgba(58,35,19,.12);
}
.auto-key-highlight h3{
    color:var(--primary-dark);
}
.auto-key-highlight p{
    color:var(--text);
}
.centered-feature{display:flex;justify-content:center}
.expectation-card{width:min(100%,560px)}
.partner-logo-card{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:1.2rem;
    padding:1rem;
    min-height:110px;
    background:rgba(122,75,45,.04);
    border:1px solid rgba(122,75,45,.1);
    border-radius:18px;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease
}
.partner-logo-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(58,35,19,.08);
    background:rgba(122,75,45,.06)
}
.partner-logo-card img{
    width:min(100%,260px);
    max-height:68px;
    object-fit:contain
}
.check-list,.link-list,.opening-list{margin:.75rem 0 0;padding-left:1.15rem}
.check-list li,.link-list li{margin:.45rem 1.4rem}
.opening-list{list-style:none;padding:0}
.opening-list li{display:flex;justify-content:space-between;gap:1rem;padding:.33rem 0;border-bottom:1px dashed rgba(122,75,45,.12)}
.advice-box{padding:1.5rem 1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;background:linear-gradient(135deg,#fff,#f8f2eb)}
.advice-box h2{margin:.2rem 0 .5rem}
.advice-box p{
    margin:0;
    color:var(--muted);
}

.advice-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:.8rem;
    white-space:nowrap;
}
.check-list{
    padding-left: 0px;
}
/*
 * Highlight telephone numbers and e-mail addresses in the contact cards and footer.
 * This uses the primary colour to draw attention without altering the overall colour scheme.
 */
.site-footer a[href^="tel"],
.site-footer a[href^="mailto"],
.contact-card a[href^="tel"],
.contact-card a[href^="mailto"],
.footer-copy a{
    /* Gebruik een lichtere, bruin getinte kleur voor telefoon- en e-maillinks
     * zodat ze beter contrasteren op de donkere footerachtergrond. */
    color: var(--accent);
    font-weight: 700;
}

.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat{padding:1.2rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid rgba(122,75,45,.08);text-align:center;box-shadow:var(--shadow)}
.stat strong{display:block;font-size:1.9rem}
.page-hero{padding:3.4rem 0 2.6rem}
.page-hero .container{max-width:900px}
.page-hero p{font-size:1.08rem;color:var(--muted);max-width:75%}
.hero-box p{color:#f4eee7}
.page-hero + .section{padding-top:2rem; padding-bottom:2rem}
.badge-links{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}

.contact-grid{grid-template-columns:1.1fr .9fr;align-items:stretch}
.contact-card{padding:1.4rem}
.contact-card h2,.contact-card h3{margin-top:0}
.contact-card form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:var(--text)}
.field textarea{min-height:10rem;resize:vertical}
.info-stack{display:grid;gap:1rem}
.muted{color:#989696}
.small{font-size:.95rem}

.site-footer{
    margin-top:2rem;
    padding:3rem 0 1.25rem;
    background:#432918;
    color:#f4eee7;
}

.site-footer a{
    color:#fff;
}

.footer-grid{
    display:grid;
    grid-template-columns:auto auto auto;
    gap:50px;
}

.footer-grid > div{
    min-width:0;
}

.footer-grid h3{
    margin:0 0 1rem;
}

.footer-info {
  margin:0;
}
.site-footer p{
    margin:.4rem 0 0;
}

.site-footer .link-list{
    list-style:none;
    padding:0;
    margin:.75rem 0 0;
}

.site-footer .link-list li{
    margin:.55rem 0;
}

.site-footer .link-list .footer-link-wide{
    display:inline-block;
    white-space:nowrap;
    font-size:.95rem;
    letter-spacing:0;
}

.sneaker-cleaning-mobile-note {
    display: none;
}

.mobile-context-note {
    display: none;
}

.sneaker-cleaning-desktop-note {
    display: block;
}

.mobile-show {
    display: none;
}

.desktop-show {
    display: block;
}
.site-footer .opening-list{
    list-style:none;
    padding:0;
    margin:.75rem 0 0;
}

.site-footer .opening-list li{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding:.4rem 0;
    border-bottom:1px dashed rgba(255,255,255,.08);
}

.badge-links{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1.25rem;
}

/*
 * Mobiele optimalisaties:
 *   - Verberg lange introductieteksten op kleine schermen.
 *     Dit geldt voor de lead-paragraaf in de hero, extra paragrafen in page-hero
 *     secties en toelichtende paragrafen in smalle containers. Hierdoor worden
 *     foto’s en tegels sneller zichtbaar op mobiel.
 */
@media (max-width: 768px) {
    /* Verberg de lead-paragraaf in de hero op de homepage */
    .hero .lead {
        display: none;
    }
    .hero .over-ons-hero-lead {
        display: block;
    }
    /* Verberg alle extra paragrafen na de eerste in page-hero secties */
    .page-hero .container p + p {
        display: none;
    }
    /* Verberg toelichtende paragrafen in smalle containers (zoals op home)
    .section .container.narrow p {
        display: none;
    }*/
    .over-ons-page .section .container.narrow p {
        display: block;
    }
    .business-collaboration-card p {
        display: block;
    }
    .sneaker-cleaning-mobile-note {
        display: block;
    }
    .mobile-context-note {
        display: block;
        width: min(var(--container), calc(100% - 2rem));
        margin: 1.25rem auto 0;
        color: var(--muted);
    }
    .mobile-context-note p {
        margin: .75rem 0 0;
    }
    .mobile-context-note p:first-child {
        margin-top: 0;
        color: var(--text);
    }
    .sneaker-cleaning-desktop-note {
        display: none;
    }
    .home-mobile-hidden-heading {
        display: none;
    }
    .mobile-hide-on-small {
        display: none;
    }
    .mobile-show-on-small .container.narrow p {
        display: block;
    }
    .page-hero + .mobile-hide-on-small + .section {
        padding-top: 1.75rem;
    }
    .mobile-show {
        display: block;
    }
    .desktop-show {
        display: none;
    }
}

.badge-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    background:transparent;
}

.badge-link img{
    width:80px;
    height:auto;
    display:block;
}

.footer-bottom{
    padding-top:1rem;
    margin-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.14);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:1rem;
    color:#f4eee7;
}

.footer-smalllinks{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    align-items:center;
}

.footer-copy{
    text-align:center;
    white-space:nowrap;
}

.footer-social{
    display:flex;
    gap:.85rem;
    align-items:center;
    justify-content:flex-end;
}

.footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.footer-social a[aria-label="Tiktok"],
.footer-social a[aria-label="Youtube"]{
    display:none;
}

.footer-social img{
    width:24px;
    height:24px;
    display:block;
}

/* Divider met Google‑beoordeling */
.rating-divider {
  background-color: var(--bg);           /* gebruik bestaande achtergrondkleur */
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  font-family: inherit;                  /* respecteer bestaand lettertype */
  color: var(--primary);                 /* bestaande tekstkleur */
}

.rating-divider .divider-line {
  flex: 1;
  height: 1px;
  background: var(--primary);
  opacity: 0.2;                          /* subtiel, niet te dominant */
}

.rating-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 0.5rem;
}

.rating-wrapper .rating-title {
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0;
}

.rating-wrapper .stars {
  display: flex;
  gap: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
}

.rating-wrapper .star {
  color: var(--accent);                  /* gebruik accentkleur voor sterren */
}

/* Halve ster: inkleuren van de linkerhelft */
.rating-wrapper .star.half {
  position: relative;
  overflow: hidden;
}
.rating-wrapper .star.half::before {
  content: '\\2605';
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  color: var(--accent);
  overflow: hidden;
}
.rating-wrapper .star.half {
  color: rgba(0,0,0,0.1);                /* rand van halve ster lichtgrijs */
}

.rating-wrapper .rating-count {
  font-size: 0.85rem;
  color: var(--primary);
  opacity: 0.7;
}

@media (max-width: 1180px){
    .main-nav,
    .nav-actions,
    .nav-announcement,
    .btn-small,
    .m-inactive{
        display:none;
    }
    .brand img{width:80px; min-width:40px}
    .menu-toggle,
    .mobile-logo{
        display:block;
    }
    .mobile-nav .dropdown:hover .dropdown-menu{
        display:none;
    }
    .mobile-nav .dropdown.open:hover > .dropdown-menu{
        display:grid;
    }
}

@media (max-width: 980px){
    .main-nav,.nav-actions,.nav-announcement,.btn-small,.m-inactive{display:none}
    .brand img{width:80px; min-width:40px}
    .menu-toggle,.mobile-logo{display:block}
    .mobile-nav .dropdown:hover .dropdown-menu{display:none}
    .mobile-nav .dropdown.open:hover > .dropdown-menu{display:grid}
    .hero-grid,.contact-grid,.footer-grid,.content-grid,.stats-grid{grid-template-columns:1fr}
    .page-hero{padding: 2rem 0 2rem;}
    .section{padding: 2rem 1em}
    .cards-3{grid-template-columns:repeat(2,1fr)}
    .cards-4{grid-template-columns:repeat(2,1fr)}
    .business-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .advice-box{flex-direction:column;align-items:flex-start}
    .nav-shell{
        justify-content:space-between
        
    }

    .footer-grid{
        gap:2rem;
    }

    .footer-bottom{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-smalllinks,
    .footer-social{
        justify-content:center;
    }

    .footer-copy{
        white-space:normal;
    }
    
    .fix{
        padding-left:0;
    }
    .footer-info{margin:0}

    /*
     * On screens narrower than 980px, reorder the contact page sections so
     * that visitors see de contactgegevens en openingstijden boven het
     * formulier. The info-stack container is moved ahead of the form
     * by setting its order to -1. Using flexbox on the parent grid
     * ensures a natural stacking on mobile.
     */
    .contact-grid{
        display:flex;
        flex-direction:column;
    }
    .contact-grid .info-stack{
        order:-1;
    }
}
@media (max-width: 640px){
    .container{width:min(var(--container),calc(100% - 1.2rem))}
    .hero{padding-top:2.75rem}
    .cards-3,.cards-4{grid-template-columns:1fr}
    .business-service-grid{grid-template-columns:1fr}
    .card-image{aspect-ratio:16/11}
    .nav-shell{padding:.8rem 0;justify-content:space-between}
    .mobile-nav{width:100%;max-width:none;padding:1rem .85rem 0}
    .hero h1,.page-hero h1{font-size:2.35rem}
    .business-why-card{width:min(var(--container),calc(100% - 1.2rem))}
    .business-why-card .check-list{columns:1}
    .card-actions .btn{width:100%}
    .hero-actions,.advice-actions{width:100%}
    .hero-actions .btn,.advice-actions .btn{flex:1 1 100%}
    html{scroll-padding-top: 145px}
}

html,
body {
    max-width: 100%;
}

.mobile-nav-inner.container {
    width: 100%;
    margin: 0;
}

.hero-box{
     max-width: 1000px; 
     background: #43291863; 
     color: #f4eee7; 
     padding: 5px 20px
}

.badge-pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-top:1rem;
    padding:.55rem .8rem;
    border-radius:999px;
    background:rgba(122,75,45,.1);
    color:var(--primary);
    font-weight:800;
    line-height:1.2;
}

.quick-choice-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    margin-top:1.2rem;
}

.quick-choice{
    display:block;
    padding:1rem;
    border:1px solid rgba(122,75,45,.12);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.72);
    font-weight:800;
    color:var(--primary);
}

@media (max-width: 640px){
    .quick-choice-grid{grid-template-columns:1fr}
}

.over-ons-highlight{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:2rem;
    align-items:center;
}

.over-ons-highlight__media{
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    background:rgba(122,75,45,.08);
}

.over-ons-highlight__media img{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}

.over-ons-highlight__body{
    padding:1.6rem;
    border-radius:var(--radius);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(122,75,45,.09);
}

.over-ons-highlight__body h2{
    margin:.2rem 0 .75rem;
    font-size:clamp(1.8rem,3vw,2.7rem);
}

.over-ons-highlight__body p{
    color:var(--muted);
}

.cookie-consent{
    position:fixed;
    left:50%;
    bottom:1.25rem;
    z-index:1200;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:1.2rem;
    align-items:center;
    width:min(920px,calc(100% - 2rem));
    padding:1rem;
    border:1px solid rgba(122,75,45,.16);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.96);
    box-shadow:0 22px 60px rgba(58,35,19,.18);
    color:var(--text);
    opacity:0;
    transform:translate(-50%, 1rem);
    transition:opacity .22s ease,transform .22s ease;
}

.cookie-consent.is-visible{
    opacity:1;
    transform:translate(-50%, 0);
}

.cookie-consent__content{
    display:grid;
    gap:.2rem;
}

.cookie-consent__settings{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem 1rem;
    margin-top:.7rem;
}

.cookie-consent__settings[hidden],
.cookie-consent__actions [hidden]{
    display:none;
}

.cookie-consent__settings label{
    display:flex;
    gap:.4rem;
    align-items:center;
    color:var(--text);
    font-size:.9rem;
    font-weight:700;
}

.cookie-consent__eyebrow{
    margin:0;
    color:var(--primary);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:0;
    text-transform:uppercase;
}

.cookie-consent h2{
    margin:0;
    font-size:1.05rem;
    line-height:1.25;
}

.cookie-consent p{
    margin:0;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.5;
}

.cookie-consent__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:.75rem;
}

.cookie-consent__link{
    color:var(--primary);
    font-weight:800;
    white-space:nowrap;
}

.cookie-consent__link:hover{
    color:var(--primary-dark);
}

.cookie-consent__accept{
    min-width:8.8rem;
    padding:.8rem 1rem;
}

.cookie-settings-link{
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
    text-decoration:underline;
}

.form-status{
    margin:0;
    padding:.85rem 1rem;
    border:1px solid #b42318;
    border-radius:.5rem;
    font-weight:700;
    line-height:1.5;
}

.form-status--error{
    background:#fff1f0;
    color:#9f1c13;
}

.form-status--warning{
    margin:1rem 0;
    border-color:#b7791f;
    background:#fff8e6;
    color:#7a4b14;
}

.form-trap{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.file-upload-help,
.file-upload-feedback{
    display:block;
    margin-top:.45rem;
    color:var(--muted);
    font-size:.85rem;
    font-weight:400;
    line-height:1.45;
}

.file-upload-list{
    display:grid;
    gap:.5rem;
    margin:.75rem 0 0;
    padding:0;
    list-style:none;
}

.file-upload-list li{
    display:flex;
    gap:.75rem;
    align-items:center;
    justify-content:space-between;
    padding:.55rem .7rem;
    border:1px solid rgba(122,75,45,.14);
    border-radius:.5rem;
    background:rgba(255,255,255,.7);
    font-size:.85rem;
    font-weight:500;
}

.file-upload-list span{
    min-width:0;
    overflow-wrap:anywhere;
}

.file-upload-list button{
    flex:0 0 auto;
    padding:.35rem .55rem;
    border:1px solid currentColor;
    border-radius:.4rem;
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font:inherit;
    font-weight:700;
}

@media (max-width: 768px){
    .over-ons-highlight{
        grid-template-columns:1fr;
        gap:1rem;
    }
    .over-ons-highlight__body{
        padding:1.25rem;
    }
    .cookie-consent{
        grid-template-columns:1fr;
        gap:1rem;
        bottom:.75rem;
        padding:.95rem;
    }
    .cookie-consent__actions{
        justify-content:space-between;
    }
}

@media (max-width: 460px){
    .cookie-consent__actions{
        align-items:stretch;
        flex-direction:column;
    }
    .cookie-consent__link{
        text-align:center;
    }
    .cookie-consent__accept{
        width:100%;
    }
}