* {
            --sw: 100vw;
            --sh: 100vh;
            --fh: calc(var(--sh) * 0.024);
            --xy: calc(var(--sw) * 0.001);
            box-sizing: inherit;
            margin: inherit;
            padding: inherit;
        }
        html, body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        #menubar {
            position: absolute;
            left: 0;
            width: 100%;
            display: flex;
            align-items: flex-end;
            border-bottom: 1px solid #ddd;
            background: #ffffdd;
            z-index: 10;
            outline: 0;
        }
        .stb {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            z-index: 8000;
            background: rgba(0, 0, 0, 0.4);
        }
        #wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            background: #ffffdd;
            z-index: 9;
        }
        #content {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 0 solid black;
        }
        .inform {
            position: relative;
            left: 15%;
            width: 32%;
            text-align: center;
            line-height: 67%;
            border: 1px solid;
            background:transparent;
        }
        .menubar_item {
            position: absolute;
            height: 45%;
            z-index:11;
            padding: 0 0 3px 0;
            outline:0;
        }
        .back {
            left:2%;
            width:3%;
            height: 80%;
            visibility: visible;
        }
        .drop {
            left:    10%;
            width:   90%;
            height:  88%;
        }
        .msg {
            z-index:  15;
            left:    20%;
            width:   77%;
            height:  80%;
            margin:       0 0 3px 0;
            background: transparent;
            border:       1px solid;
            overflow:        hidden;
            visibility:      hidden;
        }
        #info {
            z-index:  12;
            left:    15%;
            width:   70%;
            height:  67%;
            line-height :       67%;
            text-align  :    center;
            font-size   :       80%;
            margin      : 0 0 3px 0;
            background: transparent;
            border      : 0 solid;
            overflow    :    hidden;
            visibility  :   visible;
        }
        .menu {
            position:absolute;
            display: flex;
            align-items: flex-end;
            padding: 0 0 2px 0;
            left:7%;
            width:7%;
            height: 80%;
            visibility: visible;
            z-index: 1002;
            outline:0;
        }

        .menu:focus { pointer-events:none; }
        .menu:focus-within { pointer-events:none; }

        .menu:focus .menu-dropdown,
        .menu:focus-within .menu-dropdown { opacity:1; visibility:visible; }

        .menu-dropdown {
            position: absolute;
            display: block;
            top: 100%;
            left: 0;
            width: auto;
            min-width: calc(var(--xy) * 450);
            margin: 0;
            padding: calc(var(--xy) * 10);
            border-radius: 0;
            border: 1px black solid;
            pointer-events: auto;
            z-index: 11;
            opacity: 0;
            visibility: hidden;
            /* transition: visibility 2s; */
            background: rgba(100,100,100,0.75);
        /*
            background: -moz-linear-gradient(top,  #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%);
            background: -webkit-linear-gradient(top,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
            background: linear-gradient(to bottom,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
        */
        }

        .menu-dropdown a {
            background: transparent;
            border: none;
            outline: 0;
            display: block;
            color: white;
            text-decoration: none;
            width: auto;
            padding: calc(var(--xy) * 5);
            text-align: left;
        }
        .menu-dropdown a:hover {
            background: #555;
        }

        /* Filterregel voor resultatenpagina */
        .menubar-block {
            display: flex;
            align-items: flex-end;
            flex: 1;
            min-width: 0;
            height: 100%;
        }
        #menubar-results-filter {
            position: relative;
            height: 100%;
            align-items: center; /* filterbar: geen bottom-align, voorkomt 'kleine' inputs */
            padding: calc(var(--xy) * 5) calc(var(--xy) * 10);
            gap: calc(var(--xy) * 10);
        }
        .filter-back {
            flex-shrink: 0;
            height: calc(100% - 4px);
            width: auto;
            margin: 0 0 0 calc(var(--xy) * 10);
            cursor: pointer;
            z-index: 12;
        }
        .filter-zoek {
            flex: 1;
            min-width: 0;
            height: calc(100% - 4px);
            margin: 0 0 0 calc(var(--xy) * 8);
            max-width: calc(100% - calc(var(--xy) * 12));
            padding: 0 calc(var(--xy) * 20);
            border: 1px solid #ccc;
            border-radius: calc(var(--xy) * 10);
            font-size: calc(var(--xy) * 35);
            line-height: 1;
        }
        .filter-dropdown-trigger {
            display: flex;
            align-items: center;
            height: calc(100% - 4px);
            padding: calc(var(--xy) * 5) calc(var(--xy) * 20);
            margin-right: 0;
            background: #1b7aba;
            color: white;
            border-radius: calc(var(--xy) * 10);
            cursor: pointer;
            user-select: none;
            font-size: calc(var(--xy) * 33);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .filter-dropdown-trigger:focus {
            outline: 1px solid #fff;
        }
        .filter-dropdown-arrow {
            margin-left: calc(var(--xy) * 10);
            font-size: calc(var(--xy) * 25);
        }
        .filter-dropdown-panel {
            position: absolute;
            top: 100%;
            right: calc(var(--xy) * 10);
            margin-top: calc(var(--xy) * 5);
            min-width: calc(var(--xy) * 550);
            max-width: calc(var(--sw) * 0.9);
            padding: calc(var(--xy) * 15) calc(var(--xy) * 30) calc(var(--xy) * 30); /* minder witruimte bovenaan */
            background: #fff;
            border: 1px solid #ccc;
            border-radius: calc(var(--xy) * 15);
            box-shadow: 0 calc(var(--xy) * 10) calc(var(--xy) * 30) rgba(0,0,0,0.15);
            z-index: 1003;
            display: none;
        }
        .filter-dropdown-panel.open {
            display: block;
        }
        .filter-section {
            margin-bottom: calc(var(--xy) * 15); /* minder ruimte tussen secties (boven 'Plaats') */
        }
        .filter-section:last-child {
            margin-bottom: 0;
        }
        .filter-section-title {
            font-size: calc(var(--xy) * 28);
            font-weight: bold;
            color: #666;
            margin-bottom: calc(var(--xy) * 15);
        }
        .filter-chip {
            display: inline-block;
            margin: calc(var(--xy) * 5);
            padding: calc(var(--xy) * 10) calc(var(--xy) * 25);
            border: 1px solid #ccc;
            background: #f5f5f5;
            border-radius: calc(var(--xy) * 40);
            font-size: calc(var(--xy) * 30);
            cursor: pointer;
        }
        .filter-chip:hover {
            background: #e8e8e8;
        }
        .filter-chip.active {
            background: #1b7aba;
            color: white;
            border-color: #1b7aba;
        }
        .filter-select {
            width: 100%;
            padding: calc(var(--xy) * 15) calc(var(--xy) * 20);
            border: 1px solid #ccc;
            border-radius: calc(var(--xy) * 10);
            font-size: calc(var(--xy) * 33);
        }        /* Feature-chips layout: "Alle" op eigen regel; rest 3 naast elkaar */
        .filter-features {
            --chip-gap: calc(var(--xy) * 10);
            display: flex;
            flex-wrap: wrap;
            gap: var(--chip-gap);
        }
        .filter-features .filter-section-title {
            flex: 0 0 100%;
            margin-bottom: 0;
        }
        .filter-features .filter-chip {
            margin: 0; /* gap verzorgt spacing */
            text-align: center;
            white-space: nowrap;
        }
        .filter-features .filter-chip[data-feature=""] {
            flex: 0 0 100%;
        }
        .filter-features .filter-chip:not([data-feature=""]) {
            flex: 1 1 calc((100% - (var(--chip-gap) * 2)) / 3);
        }