* { box-sizing: border-box !important; }

:root {
 --global-bgcolor: #ffffff;
 --navBarColor: #D0E6Cf;
 --greenMainColor: #3BAA35;
 --greenMainColorShade: #23661F;
 --orangeMainColor: #F39328;
 --orangeMainColorShade: #915818;
 --yellowMainColor: #FFDD0E;
 --yellowMainColorShade: #998600; /* Okergoud voor leesbare tekst op wit */

 --taupeMainColor: #8C8279;    /* Chique grijs-bruin */
 --taupeMainColorShade: #5D544A;  /* Donkere variant voor tekst/contrast */

 --steelMainColor: #547689;    /* Modern staalblauw */
 --steelMainColorShade: #2F424D;  /* Donker staal voor dark mode achtergronden */

 --redMainColor: #AA353B;
 --redMainColorShade: #752429;

 --blueMainColor: #69C9F3;
 --blueMainColorShade: #2C7DA0;
 
 --header-height-base: 100px; 
 --header-top-bar-height-base: 100px; 
 --logo-height-base: 80px; 
 --bottom-nav-height-base: 90px; 

 --header-height: var(--header-height-base);
 --header-top-bar-height: var(--header-top-bar-height-base);
 --logo-height: var(--logo-height-base);
 --bottom-nav-height: var(--bottom-nav-height-base);
 
 --header-height-desktop: calc(var(--header-height-base) * 1.8);
 --header-top-bar-height-desktop: calc(var(--header-top-bar-height-base) * 1.8);
 --logo-height-desktop: calc(var(--logo-height-base) * 1.5);
 --bottom-nav-height-desktop: calc(var(--header-top-bar-height-desktop) + 10px);

 --sticky-bar-height: 0px;
 --total-sticky-offset: 110px;

 --button-width: 24px;
 --space-left: 10px;
 --space-right: 10px;

 --max-width-content: 1280px;
}

:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] {
 --pico-primary: var(--greenMainColor);
 --pico-primary-background: var(--greenMainColorShade);
 --pico-primary-hover-background: #2e8a2a; /* Handmatige schaduw van groen */
 --pico-primary-inverse: $ffffff;

 --pico-secondary: var(--orangeMainColor);
 --pico-secondary-background: var(--pico-secondary-background);
 --pico-secondary-inverse: #000000; /* Zwart op oranje leest fijner */
  
 /* Markeer kleur voor de <mark> tags in tekst */
 --pico-mark-background-color: var(--yellowMainColor);
 --pico-mark-color: #000;

 /* Eigen utility kleuren voor Light Mode */
 --u-text-primary: var(--pico-primary);
 --u-text-green: var(--greenMainColorShade);
 --u-text-orange: var(--orangeMainColorShade);
 --u-bg-white: #ffffff;
 --u-bg-dark: #333333;
 --u-text-black: #000000;
 --u-text-white: #ffffff;

 --u-bg-green: var(--greenMainColor); 
 --u-text-on-green: #ffffff;
 
 --u-bg-orange: var(--orangeMainColor);
 --u-text-on-orange: #000000;  /* Zwart op oranje (beter leesbaar) */

 /* Taupe (Aards & Rustig) */
 --u-bg-taupe: var(--taupeMainColor);
 --u-text-taupe: var(--taupeMainColorShade); /* Donkerder voor leesbaarheid */
 --u-text-on-taupe: #ffffff;

 /* Yellow (Energiek & Opvallend) */
 --u-bg-yellow: var(--yellowMainColor);
 --u-text-yellow: var(--yellowMainColorShade); /* Oker voor leesbaarheid */
 --u-text-on-yellow: #000000; /* Zwart op geel leest het best */

 /* Steel (Zakelijk & Modern) */
 --u-bg-steel: var(--steelMainColor);
 --u-text-steel: var(--steelMainColor); 
 --u-text-on-steel: #ffffff;
 
 /* Red (Warm & Dringend) */
 --u-bg-red: var(--redMainColor);
 --u-text-red: var(--redMainColor); /* Het standaard rood is donker genoeg voor tekst */
 --u-text-on-red: #ffffff;

 /* Blue (Fris & Luchtig) */
 --u-bg-blue: var(--blueMainColor);
 --u-text-blue: var(--blueMainColorShade); /* Gebruik de donkere tint voor tekst! */
 --u-text-on-blue: #000000; /* Zwart leest het best op lichtblauw */

 /* Variabele voor blockquotes */
 --quote-bg: #f9f9f9;
 --laag-link-color: var(--greenMainColorShade);
 --laag-text-color: #000000;
}

:host(:not([data-theme=light])), :root:not([data-theme=light]), [data-theme=dark] {
 /* Primaire Actiekleur (Groen) */
 /* In dark mode mag de 'primary' vaak iets lichter/feller zijn dan de background */
 --pico-primary: var(--greenMainColor); 
 --pico-primary-background: var(--greenMainColor); 
 --pico-primary-hover-background: var(--greenMainColorShade);
 --pico-primary-inverse: #ffffff;

 /* Secundaire kleur (Oranje) */
 --pico-secondary: var(--orangeMainColor);
 --pico-secondary-background: var(--orangeMainColor);
 --pico-secondary-inverse: #000000;

 /* Markeringen (Iets dimmen in dark mode) */
 --pico-mark-background-color: #bfa500; /* Donkerder geel */
 --pico-mark-color: #fff;

 --navBarColor: #1B3319;
 /* Eigen utility kleuren voor Dark Mode (Overrides) */
 --u-text-primary: var(--pico-primary);
 --u-text-green: var(--greenMainColor); /* Feller voor leesbaarheid op zwart */
 --u-text-orange: var(--orangeMainColor);
 
 /* Zwart/Wit omdraaien */
 --u-bg-white: var(--pico-card-background-color); /* Wordt donkergrijs */
 --u-bg-dark: #111111; /* Wordt bijna zwart */
 --u-text-black: var(--pico-color); /* Wordt wit-grijs */
 --u-text-white: #ffffff;

 --u-bg-green: var(--greenMainColorShade); /* Iets donkerder groen voor rust aan de ogen */
 --u-text-on-green: #ffffff;
 
 --u-bg-orange: var(--orangeMainColor); /* Oranje blijft opvallen */
 --u-text-on-orange: #000000;

 /* Taupe (Dark Mode: donkerdere achtergrond, lichtere tekst) */
 --u-bg-taupe: var(--taupeMainColorShade); 
 --u-text-taupe: var(--taupeMainColor); 
 --u-text-on-taupe: #ffffff;

 /* Yellow (Dark Mode: Geel knalt eruit op zwart) */
 --u-bg-yellow: var(--yellowMainColor); 
 --u-text-yellow: var(--yellowMainColor); 
 --u-text-on-yellow: #000000;

 /* Steel (Dark Mode: diepe blauw-grijze achtergrond) */
 --u-bg-steel: var(--steelMainColorShade);
 --u-text-steel: var(--blueMainColor); /* Lichtblauw voor tekst leest fijner op zwart */
 --u-text-on-steel: #ffffff;

 /* Red (Dark Mode: donkerder vlak, lichtere tekst) */
 --u-bg-red: var(--redMainColorShade);
 --u-text-red: var(--redMainColor); /* Iets lichter rood valt meer op */
 --u-text-on-red: #ffffff;

 /* Blue (Dark Mode: donkerder vlak, felle tekst) */
 --u-bg-blue: var(--blueMainColorShade); 
 --u-text-blue: var(--blueMainColor); /* Het felle lichtblauw werkt top als tekst op zwart */
 --u-text-on-blue: #ffffff;

 --quote-bg: var(--pico-card-sectioning-background-color);
 --laag-link-color: var(--greenMainColor);
 --laag-text-color: #ffffff;
}


html, body {
 width: 100%;
 margin:0;
 padding: 0;
 overflow-x: clip;
}

html {
 scroll-behavior: smooth;
 scroll-padding-top: var(--total-sticky-offset, 100px);
}

img, iframe {
 max-width: 100%;
}

body { 
 padding-bottom: calc(var(--bottom-nav-height) + 10px);
}

#dagje-weg-content {
 display: flex;
 flex-direction: column;
 width: 100%;
 overflow: visible !important;
}

.dwContainer {
 display: flex;
 flex-direction: column;
}

.cmsoverlay {
 display:none;
}

#main-site-header {
 order: -1;
 width: 100%;
 display: flex;
 flex-direction: row !important;
 align-items: flex-end !important;
 background: var(--pico-background-color);
 border-bottom: 1px solid var(--pico-muted-border-color);
 min-height: var(--header-height);
 position: sticky !important;
 top: 0 !important;
 z-index: 1100;
 height: var(--header-height);
 overflow: visible;
 padding: 0;
}

#main-site-header .header-container {
 display: flex !important;
 flex-direction: row !important;
 justify-content: flex-start !important;
 align-items: center !important;
 padding: 0 var(--space-left) !important;
 height: var(--header-height);
 width: auto !important;
 padding: 0 10px !important;
 gap: 0;
 margin: 0 auto !important;
}


.header-tools {
 position: fixed !important;
 bottom: 0 !important;
 left: 0 !important;
 width: 100% !important;
 height: var(--bottom-nav-height) !important;
 background: var(--pico-background-color);
 border-top: 1px solid var(--pico-muted-border-color);
 display: flex !important;
 justify-content: space-around !important;
 gap: 0 !important;
 align-items: center !important;
 z-index: 3000 !important;
 //padding-bottom: env(safe-area-inset-bottom) !important;
 padding: 0 5px !important;
}

/* --- Navigatie Tooltips (Header Tools) --- */

/* 1. BASIS & MOBIEL (De Standaard) */

/* CRUCIAAL: Maak de knoppen even hoog als de balk. 
 * Hierdoor is 'bottom: 100%' altijd precies de bovenrand van de balk. */
.header-tools .tool-icon {
 position: relative;
 overflow: visible;
 height: 100%;  /* Vul de volledige hoogte van de nav-bar */
 display: flex; /* Flexbox om icoon weer te centreren */
 flex-direction: column; 
 flex: 1 1 20%;
 text-align: center;
 justify-content: center; /* Verticaal centreren */
 align-items: center;  /* Horizontaal centreren */
 padding: 5px 0 !important;
}

/* --- Master Index Links Dashboard --- */
.master-index-links {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 20px;
 padding-bottom: 15px;
 border-bottom: 1px solid var(--pico-muted-border-color);
}

.menu-btn-main {
 display: flex !important;
 align-items: center;
 padding: 12px 15px;
 background-color: var(--greenMainColor) !important;
 border: none !important;
 border-radius: 12px;
 text-decoration: none !important;
 gap: 15px;
}

.menu-btn-main i:first-child {
 font-size: 24px;
 color: #fff !important;
}

.btn-text {
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}

.btn-title {
 font-weight: 800;
 font-size: 1rem;
 color: #fff !important;
}

.btn-sub {
 font-size: 0.75rem;
 color: rgba(255, 255, 255, 0.9) !important;
}

.menu-btn-main .arrow {
 color: #fff !important;
 font-size: 20px;
}

/* --- Dark Mode Robuustheid --- */
:host(:not([data-theme=light])) .menu-btn-main,
:root:not([data-theme=light]) .menu-btn-main,
[data-theme=dark] .menu-btn-main {
 background-color: var(--greenMainColorShade) !important;
}

.menu-btn-main:hover {
 background-color: var(--greenMainColorShade) !important;
}

/* --- Verbeterde Service Link (Contact) --- */
.menu-service-links {
 margin-bottom: 20px;
}

.service-item {
 display: flex !important;
 align-items: center;
 gap: 12px;
 padding: 12px 15px;
 background: var(--pico-card-sectioning-background-color); /* Iets meer body dan alleen een link */
 border-radius: 8px;
 text-decoration: none !important;
 color: var(--pico-color) !important;
 font-weight: 600;
 font-size: 0.9rem;
}

.service-item i {
 color: var(--orangeMainColor);
 font-size: 20px;
}

.service-item:hover {
 background-color: var(--navBarColor) !important;
 border-left: 4px solid var(--orangeMainColor); /* Oranje accent bij hover */
 padding-left: 11px; /* Padding-correctie voor de border */
 transition: all 0.2s ease;
}

/* --- Service links in de Menu Overlay --- */
.menu-service-links {
 margin-bottom: 20px;
 padding: 0 5px;
}

.menu-service-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 0.85rem;
 color: var(--pico-muted-color);
 text-decoration: none;
 padding: 8px 0;
 border-bottom: 1px dashed var(--pico-muted-border-color);
}

.menu-service-links a i {
 font-size: 1.1rem;
 color: var(--orangeMainColor);
}

.menu-service-links a:hover {
 color: var(--pico-color);
}

.nav-tooltip {
 position: absolute;
 width: max-content;
 max-width: 200px;
 background-color: #333;
 color: #fff;
 text-align: center;
 font-size: 0.75rem;
 font-weight: 500;
 line-height: 1.3;
 padding: 6px 10px;
 border-radius: 4px;
 z-index: 4000;
 
 /* Standaard verborgen */
 visibility: hidden;
 opacity: 0;
 transition: all 0.2s ease-in-out;
 pointer-events: none;
 text-transform: none;

 /* POSITIE MOBIEL: Boven de knop */
 bottom: 100%;   /* Dit is nu exact de bovenrand van de balk */
 top: auto;   
 left: 50%;
 
 /* Marge zorgt dat hij LOS komt van de rand */
 margin-bottom: 12px; 
 
 /* START ANIMATIE MOBIEL: Iets lager beginnen */
 transform: translateX(-50%) translateY(10px);
}

/* PIJLTJE MOBIEL: Onderaan de tooltip, wijst naar beneden */
.nav-tooltip::after {
 content: "";
 position: absolute;
 border-width: 6px;
 border-style: solid;
 top: 100%; 
 left: 50%;
 margin-left: -6px;
 border-color: #333 transparent transparent transparent;
}

/* INTERACTIE MOBIEL */
.tool-icon:hover .nav-tooltip,
.tool-icon:focus .nav-tooltip,
.tool-icon:focus-within .nav-tooltip {
 visibility: visible;
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}

/* --- RANDGEVALLEN MOBIEL (Eerste/Laatste icoon) --- */

/* Eerste icoon (Links): Uitlijnen op links */
.header-tools .tool-icon:first-child .nav-tooltip {
 left: 0;
 /* Reset de horizontale center-transformatie */
 transform: translateX(0) translateY(10px);
}
.header-tools .tool-icon:first-child:hover .nav-tooltip {
 transform: translateX(0) translateY(0);
}
/* Pijltje corrigeren voor links */
.header-tools .tool-icon:first-child .nav-tooltip::after {
 left: 24px; /* Ongeveer het midden van het icoon */
 margin-left: 0;
}

/* Laatste icoon (Rechts): Uitlijnen op rechts */
.header-tools .tool-icon:last-child .nav-tooltip {
 left: auto;
 right: 0;
 transform: translateX(0) translateY(10px);
}
.header-tools .tool-icon:last-child:hover .nav-tooltip {
 transform: translateX(0) translateY(0);
}
/* Pijltje corrigeren voor rechts */
.header-tools .tool-icon:last-child .nav-tooltip::after {
 left: auto;
 right: 18px; 
 margin-left: 0;
}

.tool-icon.tooltip-dismissed .nav-tooltip {
 visibility: hidden !important;
 opacity: 0 !important;
 transform: none !important; /* Voorkom animatie-restjes */
 transition: none !important; /* Verdwijn direct, zonder vertraging */
}

.logo img {
 max-height: var(--logo-height);
 width: auto;
 display: block;
}

/* 1. Basis styling voor de icon-buttons */
#main-site-header a.tool-icon,
#main-site-header button.tool-icon {
 color: var(--orangeMainColor);
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 padding: 0 !important;
 margin: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 cursor: pointer;
 text-decoration: none !important;
 outline: none !important;
 -webkit-tap-highlight-color: transparent;
}

#main-site-header .tool-icon .material-icons,
#main-site-header .tool-icon .tool-label
{
 color: inherit/* !important*/;
 transition: color 0.2s ease;
}

/* 2. Hover en states (Prio 1) */
#main-site-header .tool-icon:hover,
#main-site-header .tool-icon:hover .material-icons
{
 color: var(--pico-primary-underline);/* !important;*/
 opacity: 0.8;
}

/* Herstelt de icoonkleur direct bij sluiten menu */
body:not(.menu-open, .searchbar-open) #main-site-header .tool-icon .material-icons, 
body:not(.menu-open, .searchbar-open) #main-site-header .tool-icon .tool-label
{
 color: var(--orangeMainColor)/* !important*/;
 opacity: 1 !important;
}

.tool-label { 
 font-size: 9px;
 font-weight: 700; 
 text-transform: uppercase; 
 line-height: 1;
 margin-top: 2px;
 letter-spacing: 0.2px;
}

/* Badge voor verlanglijstje */
.badge {
 position: absolute;
 top: 2px;
 right: 2px;
 background: var(--pico-primary);
 color: white;
 font-size: 9px;
 padding: 2px 5px;
 border-radius: 10px;
}

/* De nav container */
#bp.breadcrumb-scroll {
 flex: 1 !important;
 min-width: 0 !important;
 background: transparent !important;
 border: none !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow-x: auto !important;
 display: block !important;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}
#bp.breadcrumb-scroll::-webkit-scrollbar { display: none; }

/* De lijst zelf */
#bp.breadcrumb-scroll ul {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 margin: 0 !important;
 padding: 0 !important;
 list-style: none !important;
 gap: 10px;
}

#bp.breadcrumb-scroll ul.reverse-list {
 flex-direction: row-reverse !important;
 justify-content: flex-end !important;
}

/* De lijstitems */
#bp.breadcrumb-scroll li {
 display: inline-flex !important;
 margin: 0 !important;
}

/* De links als chips */
#bp.breadcrumb-scroll a,
#bp.breadcrumb-scroll > ul > li > span {
 display: flex;
 align-items: center;
 padding: 6px 14px;
 background: var(--pico-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 50px;
 font-size: 13px;
 text-decoration: none;
 white-space: nowrap;
 color: var(--pico-color);
 box-shadow: none !important;
 width: max-content;
 transition: background 0.2s;
}

#bp.breadcrumb-scroll a:hover {
 background: var(--pico-secondary);
 color: black;
}

/* Styling voor het actieve item */
#bp.breadcrumb-scroll li.active span {
 background-color: var(--pico-primary) !important;
 color: var(--pico-primary-inverse) !important;
 border-color: var(--pico-primary) !important;
 font-weight: 700;
 cursor: default;
 box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
#bp.breadcrumb-scroll li.active a {
 background-color: var(--pico-secondary);
 color: black;
}
#bp.breadcrumb-scroll li.active a:hover {
 background-color: var(--pico-primary) !important;
 color: var(--pico-primary-inverse) !important;
}

/* De Zoek-overlay */
.search-overlay {
 position: fixed;
 top: auto;
 left: 0;
 width: 100%;
 bottom: var(--bottom-nav-height);
 border-top: 2px solid var(--orangeMainColor);
 border-bottom: none;
 background: var(--pico-background-color);
 z-index: 120; /* Hoger dan het broodpad */
 padding: 10px 15px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);

 display: block !important;
 visibility: hidden;
 opacity: 0;
 transform: translateY(100%);
 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

.search-overlay input:is(:active,:focus) {
 border: 1px solid var(--pico-secondary) !important;
 --pico-box-shadow: 0;
}

.search-overlay.is-open {
 visibility: visible;
 opacity: 1;
 transform: translateY(0);
}

/* De input-wrapper styling (icoontjes binnenin) */
.search-input-wrapper {
 position: relative;
 display: flex;
 align-items: center;
}

.search-input-wrapper input {
 margin-bottom: 0 !important;
 padding-right: 110px !important; /* Ruimte voor 3 icoontjes */
}

/* De icoontjes (reset Pico buttons) */
.search-icon-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: transparent !important;
 border: none !important;
 color: var(--pico-muted-color) !important;
 padding: 5px !important;
 margin: 0 !important;
 width: var(--button-width) !important;
}

.clear-btn { right: 80px; }
.search-btn { right: 10px; border-left: 1px solid var(--pico-muted-border-color) !important; }
.close-overlay-btn { right: 45px; border-radius: 0; }

#mobileFilterToggle {
 display: flex;
 width: 100%;
 margin: 0;
 align-items: center;
 justify-content: center;
 gap: 8px;
}


main {
 display: grid;
 grid-template-columns: 100%;
 min-height: 100vh;
}

#ptXL { order: 3; }

aside {
 /* De kern-styling van een Pico kaart */
 margin-bottom: var(--pico-block-spacing-vertical);
 padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
 border-radius: var(--pico-border-radius);
 background: var(--pico-card-background-color);
 box-shadow: var(--pico-card-box-shadow);
 display: block;
}
/* Zorg dat de header en footer binnen de aside ook 'meeliften' */
aside > header,
aside > footer {
 margin-top: calc(var(--pico-block-spacing-vertical) * -1);
 margin-bottom: var(--pico-block-spacing-vertical);
 margin-inline: calc(var(--pico-block-spacing-horizontal) * -1);
 padding: calc(var(--pico-block-spacing-vertical) / 2) var(--pico-block-spacing-horizontal);
 background-color: var(--pico-card-sectioning-background-color);
}
aside > footer {
 margin-top: var(--pico-block-spacing-vertical);
 margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
}

h1 {
 font-size: 1.8rem;
 font-weight: 800;
 padding: 1rem 15px 0.5rem 15px;
 margin: 0;
 margin-top: 10px !important;
 line-height: 1.1;
 color: var(--greenMainColorShade);
 scroll-margin-top: var(--total-sticky-offset);
}

/* Nieuwe Categorie Navigatie */
#cl {
  order: 2; /* Zelfde groep als carousel (mobiel), dus volgorde in HTML bepaalt plek */
  display: flex;
  flex-wrap: wrap; /* Zorgt dat items naar de volgende regel gaan als het niet past */
  gap: 10px; /* Ruimte tussen de knoppen */

  width: 100%;
  padding: 0 15px; /* Beetje afstand van de randen */
  margin: 10px 0;
  box-sizing: border-box;
}

#cl header {
  width: 100%; /* Dwingt de header op een eigen regel */
  margin-bottom: 5px;
}

#cl .subheader {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 0;
}

/* Styling van de links (Chips style) */
#cl a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pico-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 50px; /* Mooie ronde 'chip' vorm */
  text-decoration: none;
  color: var(--pico-color);
  font-size: 0.95rem;
  font-weight: 500;
  width: fit-content; /* Past breedte aan op inhoud */
  transition: background 0.2s, transform 0.2s;
}

#cl a:hover {
  background: var(--pico-secondary-background);
  transform: translateY(-2px); /* Subtiel lift effect */
  color: black;
}

#cl i {
  color: var(--orangeMainColor);
}

.searchResults {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 1.5rem;
 align-items: stretch;
}

.searchResults > header {
 grid-column: 1 / -1;
 margin-bottom: 1rem;
}

.searchResults article.result-card,
.searchResults aside.result-card {
 display: flex;
 flex-direction: column;
 margin-bottom: 0; /* Pico articles hebben vaak een bottom margin die we hier niet willen */
 height: 100%;
 overflow: hidden;
}

.searchResults > header .subheader,
.uitagenda-section > header .subheader {
 font-size: 1.1rem;
 font-weight: 700 !important;
 text-transform: uppercase;
 color: var(--pico-muted-color);
 border-left: 4px solid var(--orangeMainColor);
 padding: 5px 0 5px 15px;
 margin: 1.5rem 0 1rem 15px;
}

#menuLayer {
 position: fixed !important;
 top: auto !important;
 bottom: var(--bottom-nav-height);
 left: 0;
 background: var(--pico-background-color);
 z-index: 2000 !important;
 width: 100%;
 height: 0; 
 overflow: hidden;
 transition: height 0.3s ease-in-out;
 border-top: 1px solid var(--pico-muted-border-color);
 border-bottom: none !important;
 box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
 display: flex !important; /* Forceer blok ipv grid/flex van Pico */
 flex-direction: column;
}
#menuLayer.is-open {
 height: calc(100vh - var(--header-height) - var(--bottom-nav-height)) !important;
 bottom: var(--bottom-nav-height) !important;
 overflow-y: auto;
}
#menuLayer .menu-header {
 display: flex !important;
 flex-direction: row !important;
 justify-content: space-between !important;
 align-items: center !important;
 width: 100% !important;
 padding: 10px 15px !important;
 background: var(--pico-secondary-background);
 border-bottom: 1px solid var(--pico-muted-border-color);
 box-sizing: border-box !important;
 height: 60px;
}
#menuLayer .menu-header h2.header {
 margin: 0 !important;
 flex: 1 !important; /* Neemt alle beschikbare ruimte links van de knop in */
 font-size: 1.2rem !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
#menuLayer .menu-content {
 display: grid;
 grid-template-columns: 100%;
 padding: 15px 15px 0 15px !important;
 overflow-y: auto;
 flex: 1;
 min-height: 0;
}
#menuLayer .group-content {
 display: grid !important;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
 gap: 10px !important;
 padding: 10px 0 20px 0 !important;
}

#menuLayer .button {
 all: unset;
 display: flex !important;
 flex-direction: row !important; /* Dwing horizontale uitlijning */
 align-items: center !important;
 justify-content: flex-start !important;
 background: var(--pico-background-color) !important;
 border: 1px solid var(--pico-muted-border-color) !important;
 padding: 8px 12px !important;
 border-radius: 10px !important;
 cursor: pointer;
 text-decoration: none !important;
 overflow: hidden !important;
 box-sizing: border-box !important;
 gap: 10px !important; /* Ruimte tussen icoon, tekst en badge */
}
/* De naam-span moet de ellipsis regelen */
#menuLayer .button .name {
 flex: 1 !important; /* Neemt alle beschikbare ruimte in het midden op */
 min-width: 0 !important; /* Nodig voor ellipsis */
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 display: flex !important;
 align-items: center;
 justify-content: space-between;
 font-size: 0.9rem;
 margin: 0 !important;
 padding: 0 !important;
}
/* De badge styling: deze komt visueel achter de naam */
#menuLayer .badge {
position: static !important; /* Forceer uit de absolute flow */
 display: inline-block !important;
 background-color: var(--pico-secondary-background) !important;
 color: var(--pico-muted-color) !important;
 font-size: 0.7rem !important;
 font-weight: 600 !important;
 padding: 2px 6px !important;
 border-radius: 8px !important;
 margin-left: 8px;
 border: 1px solid var(--pico-muted-border-color) !important;
 flex-shrink: 0 !important; /* Zorg dat het getal nooit wordt ingedrukt */
}

#menuLayer .button img,
#menuLayer .button i,
#menuLayer .button div,
#menuLayer .button [class^="icon-"],
#menuLayer .button [class^="dw-icon-"]
{
 background-color: var(--greenMainColor) !important; 
 padding: 6px !important;
 border-radius: 50% !important;
 width: 32px !important;
 height: 32px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 margin-right: 12px !important;
 object-fit: contain;
 color: #ffffff !important;
}

/* Hover effect voor de badge */
#menuLayer .button:hover .badge {
 background-color: var(--pico-primary);
 color: white;
 border-color: var(--pico-primary);
}

/* --- EXTRA: DE SLUITKNOP IN HET MENU --- */
#menuLayer .close-menu-btn {
 all: unset; /* Reset Pico button */
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 40px !important;
 height: 40px !important;
 cursor: pointer;
 color: var(--pico-muted-color);
 transition: color 0.2s ease;
}
#menuLayer .close-menu-btn:hover {
 color: var(--pico-primary);
}
#menuLayer .close-menu-btn .material-icons {
 font-size: 24px;
}

.menu-filter-wrapper {
 order: 2;

 position: sticky;
 top: auto;
 bottom: 0;
 z-index: 20;

 background: var(--pico-background-color);
 border-top: 1px solid var(--pico-muted-border-color);
 border-bottom: none;

 width: 100%;
 margin: 0;
 padding: 15px;
}

#rubriekFilter {
 margin-bottom: 0 !important;
 border-radius: 20px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' fill='currentColor' opacity='0.5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: 10px center;
 padding-left: 40px !important;
}

.result-card header,
.tip-carousel figure.uitstapje {
 position: relative !important;
 padding: 0; 
 overflow: hidden;
}

.result-card img {
 width: 100%;
 aspect-ratio: 16 / 9; /* Alle foto's in de lijst even groot */
 object-fit: cover;
 transition: transform 0.3s ease;
}
aside.result-card.ad {
 text-align: center;
}
aside.result-card img {
 aspect-ratio: initial;
}

.result-card:hover header img {
 transform: scale(1.05); /* Subtiele zoom bij hover */
}

.result-card .card-body {
 flex-grow: 1;
 padding: 1rem;
 color: #000;
}

.result-card h3 {
 font-size: 1.25rem;
 margin-bottom: 0.5rem;
}
.result-card .card-text {
 line-height: 1.5;
 font-size: 0.95rem;
}

aside.result-card .cntsteunad {
 min-width: 300px;
 width: 100% !important;
}
aside.result-card .cntsteunad picture img {
 width: 300px;
 height: 650px;
 object-fit: contain; /* Zorgt dat de banner volledig zichtbaar blijft */
 transition: transform 0.4s ease;
}
aside.result-card:hover .cntsteunad img {
 transform: scale(1.03);
}

.result-card.ad {
 grid-column: span 1;
}
/* De footer van je result-card */
.result-card footer {
 display: flex;
 background: transparent;
 border-top: 1px solid var(--pico-muted-border-color);
 align-items: center; /* Zorgt dat alles verticaal in het midden staat */
 justify-content: flex-start; /* Standaard alles links */
 gap: 0.5rem; /* Ruimte tussen de icoontjes */
 flex-wrap: wrap;
 padding: 0.75rem 1rem;
 background-color: var(--pico-card-sectioning-background-color);
}
.elders {
 width: 100%;
 margin-top: 0;
 margin-bottom: 0.75rem; /* Ruimte tussen de tekst en de icoontjes */
 font-size: 0.85rem;
 line-height: 1.4;
 color: var(--pico-muted-color);
}
/* De links in de elders tekst iets subtieler maken */
.elders a {
 color: #a65e00;
 font-weight: 600;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.elders a:hover {
 color: #7d4600;
}
.result-card footer a.button, 
.result-card footer .loveit {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 padding: 0;
 margin: 0;
 border-radius: 50%; /* Maakt ze mooi rond */
 border: 1px solid var(--pico-muted-border-color);
}
.result-card footer a.website-link {
 margin-left: auto; /* De 'magic trick' om deze link helemaal naar rechts te duwen */
 font-size: 0.85rem;
 text-decoration: none;
 color: #2d8229 !important; /* var(--pico-secondary); */
 font-weight: 600;
 white-space: nowrap; /* Voorkomt dat de link over twee regels breekt */
 overflow: hidden;
 text-overflow: ellipsis; /* Voegt puntjes toe als de link te lang is */
 max-width: 40%;
 text-align: right;
 display: inline-block;
}
.result-card footer .material-icons {
 font-size: 24px;
 line-height: 1;
}

/* Specifieke positie op de detailpagina: zwevend boven de figcaption */
.tip-carousel .type-badge {
 bottom: 60px; 
}

/* --- UX2026: Metadata Chips (vroeger <mark>) --- */
.type-badge {
 position: absolute;
 bottom: 12px;
 z-index: 50;
 padding: 4px 10px;
 border-radius: 4px;
 font-size: 0.7rem;
 font-weight: 800;
 text-transform: uppercase;
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 border: 1px solid rgba(255, 255, 255, 0.2);
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 color: #ffffff !important;
 transition: all 0.2s ease;
 white-space: nowrap;
}

/* De categorie (bv Zwembaden) - RECHTS */
.category-badge {
 right: 12px;
 background: rgba(0, 0, 0, 0.65) !important;
}

/* De status (bv Tijdelijke activiteit) - LINKS */
.main-badge {
 left: 12px;
 background-color: var(--greenMainColorShade) !important;
}

:root[data-theme='dark'] .main-badge,
[data-theme='dark'] .main-badge {
 background-color: var(--greenMainColor) !important;
}

/* --- DE CRUCIALE FIX VOOR DETAILPAGINA --- */
/* Lift beide badges boven de figcaption uit op de detailpagina */
.tip-carousel .type-badge {
 bottom: 60px !important;
}

/* 3. Card Body Toegankelijkheid (Light Mode: Diepzwart) */
.result-card .card-body {
 background-color: var(--pico-card-background-color) !important;
 padding: 15px !important;
}

.result-card .card-text,
.result-card .card-text span[itemprop="description"] {
 margin-top: 8px;
 font-size: 0.95rem;
 line-height: 1.5;
}

/* Locatie-markering in de tekst */
.card-text mark[itemprop="address"] {
 all: unset;
 display: inline-flex;
 align-items: center;
 font-weight: 700;
 font-size: 0.85rem;
 color: var(--pico-muted-color) !important;
 margin-bottom: 5px;
 width: 100%;
}

.card-text mark[itemprop="address"]::before {
 content: 'place';
 font-family: 'Material Icons';
 margin-right: 5px;
 color: var(--orangeMainColor);
 font-size: 1.1rem;
}

/* Dwing beschrijving op nieuwe regel voor rust */
.card-text .description-body,
.card-text span[itemprop="description"] {
 display: block;
}

/* Hover-interactie op kaarten */
.result-card:hover .type-badge {
 transform: translateY(-2px);
}
.result-card:hover .category-badge {
 background-color: var(--greenMainColor) !important;
}


/* Interactie: Badge kleurt mee met de kaart-hover in zoekresultaten */
.result-card:hover .type-badge {
 background: var(--greenMainColor);
 border-color: var(--greenMainColor);
 transition: all 0.2s ease;
}

aside.ad footer {
 padding: 1rem;
 background-color: var(--pico-card-sectioning-background-color);
 display: block; /* Geen flexbox hier */
}

/* De link die zich gedraagt als een knop */
aside.ad footer a[role="button"] {
 display: block;
 width: 100%;
 background-color: var(--blueMainColor);
 color: #082d3e !important;
 font-weight: 700;
 border: none;
 text-align: center;
 padding: 0.75rem 1rem;
 margin: 0;
 border-radius: var(--pico-border-radius);
 border: 1px solid rgba(0,0,0,0.1);
 text-decoration: none;
 margin: auto;
}

aside.ad footer a[role="button"]:hover {
 background-color: #0044cc;
 filter: brightness(1.1);
}

.card-gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1.5rem;
 width: 100%;
}
.carousel-wrapper {
 position: relative; /* Zodat de pijlen absoluut gepositioneerd kunnen worden */
 grid-column: 1;
 width: 100%;
 overflow: hidden;
 order: 1;
 margin-top: 0;
 min-width: 0;
 max-width: 100vw;
}
.carousel-container {
 display: flex;
 align-items: stretch;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch; /* Verbeterde scrollprestaties op iOS */
 gap: 0; /* Ruimte tussen de kaarten */
  
 /* Optioneel: scrollbar verbergen */
 scrollbar-width: none; /* Voor Firefox */
 -ms-overflow-style: none;
 box-sizing: border-box;
}
.carousel-container::-webkit-scrollbar {
 display: none; /* Voor Chrome/Safari */
}
.carousel-item {
 display: flex;
 flex-direction: column;
 flex: 0 0 85%; /* Belangrijk: Dwingt de breedte. Hier is 85% van de containerbreedte voor mobiel */
 height: auto;
 scroll-snap-align: start; /* Zorgt dat het item netjes op de startpositie 'snapt' */
 margin: 0;
}
.carousel-item .tile-content {
 display: flex;
 flex-direction: column;
 flex: 1;
}
.carousel-item article {
 display: flex;
 flex-direction: column;
 flex: 1;
 height: 100%;
 box-shadow: none;
 margin-bottom: 0;
}
.carousel-item article.tile-content a {
 display: flex;
 flex-direction: column;
 height: 100%;
 text-decoration: none;
}
.carousel-item article.tile-content picture {
 flex-shrink: 0;
}
.carousel-item article.tile-content h2 {
 font-size: 0.9rem;
 flex-grow: 1;
 display: flex;
 align-items: center;
 margin-bottom: var(--pico-block-spacing-vertical);
 padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
 border-radius: var(--pico-border-radius);
 background: var(--pico-card-background-color);
 box-shadow: var(--pico-card-box-shadow)
}
.carousel-item picture img {
 width: 100%;
 height: auto;
 display: block;
 object-fit: cover;
}
.arrow-left, .arrow-right {
 display: none; /* Standaard uit op mobiel */
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 100; /* Hoger dan badges */
 border-radius: 50%;
 padding: 0;
 width: 48px;
 height: 48px;
 line-height: 0;
 opacity: 0.9;
 
 /* Gebruik thema-variabelen voor basis (Light Mode) */
 background: var(--pico-card-background-color) !important;
 color: var(--pico-contrast-color) !important; 
 border: 1px solid var(--pico-muted-border-color) !important;
 box-shadow: var(--pico-card-box-shadow);
 transition: all 0.2s ease;
}
:root[data-theme='dark'] .arrow-left,
:root[data-theme='dark'] .arrow-right,
[data-theme='dark'] .arrow-left,
[data-theme='dark'] .arrow-right {
 background-color: var(--pico-card-background-color) !important;
 color: #ffffff !important; /* Witte pijl in dark mode */
 border-color: rgba(255, 255, 255, 0.2) !important;
}
/* Hover-effecten voor beide modi */
.arrow-left:hover, .arrow-right:hover {
 opacity: 1;
 transform: translateY(-50%) scale(1.1);
 background-color: var(--greenMainColor) !important;
 color: #ffffff !important;
 border-color: var(--greenMainColor) !important;
}

.arrow-left svg, .arrow-right svg {
 width: 28px;
 height: 28px;
 stroke-width: 3px; 
 stroke: currentColor; /* Volgt de 'color' van de knop */
}

#uitgelicht {
 order: 1;
}
#uitgelicht a {
 text-decoration: none;
 font-size: 0.8rem;
 font-weight: bold;
}

#filterLayer {
 order: 5;
 margin-bottom: 1rem;
}

/* Filter Styling */
#filterLayer article {
 display: none; 
 opacity: 0; 
 transition: opacity 0.3s ease-in-out; 
 margin-top: 1rem;
 border: 1px solid var(--pico-muted-border-color);
 background: var(--pico-card-background-color);
 width: 100%;
}
#filterLayer.is-open article { 
 display: block; 
 opacity: 1; 
}
#filterLayer summary {
 display: list-item;
 cursor: pointer;
 font-weight: 600;
 color: var(--greenMainColor);
 padding: 0.5rem 0;
}
#filterLayer summary::after {
 float: right;
}
#filterLayer details {
 border-bottom: 1px solid var(--pico-muted-border-color);
 margin-bottom: 0;
 scroll-margin-top: var(--total-sticky-offset);
}
#filterLayer details[open] {
 background-color: rgba(0,0,0,0.02);
 border-radius: var(--pico-border-radius);
 padding-bottom: 0.5rem;
}
#filterLayer details[open] summary ~ * {
 animation: sweep .3s ease-in-out;
}
#filterLayer details p.help-text {
 font-size: 0.85rem;
}

/* Chips Styling */
#filterSummaryContent {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 background: var(--pico-code-background-color);
 padding: 8px;
 border-radius: 8px;
 margin-top: 5px;
 display: none;
}

#filterSummaryBar {
 position: -webkit-sticky;
 position: sticky !important;
 top: var(--header-height) !important;
 z-index: 99;
 display: none;
 width: 100%;
 background: var(--pico-background-color);
 border-bottom: 1px solid var(--pico-muted-border-color);
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 order: 1;
}

.filter-chip {
 display: inline-flex;
 align-items: center;
 background-color: var(--pico-primary);
 color: var(--pico-primary-inverse);
 padding: 2px 8px 2px 12px;
 border-radius: 20px;
 font-size: 0.85rem;
}
.filter-chip i {
 font-size: 18px;
 margin-left: 6px;
 cursor: pointer;
}

/* Knop die in de chip-balk verschijnt na wijziging */
.chip-apply-btn {
 margin-top: 8px;
 width: 100%;
 font-size: 0.8rem !important;
 padding: 4px 8px !important;
 background-color: var(--orangeMainColor) !important;
 border: none !important;
 color: white !important;
 border-radius: var(--pico-border-radius);
 animation: fadeIn 0.3s ease-in;
}

#mobileFilterToggle { 
  display: flex;
  width: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sticky-bar {
 position: sticky;
 position: -webkit-sticky;
 top: var(--header-height);
 z-index: 99;
 background-color: var(--pico-background-color);
 width: 100%;
 padding: 8px 0;
 border-bottom: 1px solid var(--pico-muted-border-color);
 order: 4;
 display: block !important;
}

.animate-in {
 animation: fadeInUp 0.4s ease-out forwards;
}

.province-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0 1rem;
}
/* Scrollbox voor lange lijsten */
.filter-scroll-box {
 max-height: 200px;
 overflow-y: auto;
 padding-right: 0.5rem;
}
/* Budget velden compact maken */
.budget-inputs input {
 margin-bottom: 0.5rem;
}
/* Material icons uitlijnen in knoppen */
#filterLayer footer button {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 font-size: 0.9rem;
}

.searchResults {
 order: 6;
}

.button-cta {
 background-color: var(--orangeMainColor) !important;
 border-color: var(--orangeMainColor) !important;
 color: #fff !important;
}
.button-cta:hover {
 filter: brightness(1.1);
}

.button-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 padding: 0;
 margin: 0;
 border-radius: 50%;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 color: var(--pico-color);
 transition: background 0.2s, color 0.2s;
 cursor: pointer;
 text-decoration: none;
}
.result-card footer .button-icon,
.result-card footer .website-link {

}
.result-card footer .button-icon:hover {
 background-color: var(--pico-primary-hover-background);
 color: #fff !important;
 border-color: var(--pico-primary-hover-background);
 transform: translateY(-2px);
}
.result-card footer .button-icon.whatsapp:hover {
 background-color: #25D366; /* WhatsApp Groen */
 border-color: #25D366;
}
.button-icon.whatsapp {
 background-color: #25D366 !important; /* WhatsApp groen */
 border: none !important;
 color: #ffffff !important; /* Wit icoon op groene achtergrond */
 border-color: #25D366 !important;
 width: 40px;
 height: 40px;
}
.button-icon.whatsapp svg {
 width: 24px; /* Iets groter dan de andere iconen */
 height: 24px;
 display: block;
 transform: scale(1.1);
}
/* Hover effect voor WhatsApp */
.button-icon.whatsapp:hover {
 background-color: #20ba5a !important;
 transform: scale(1.1);
}
/* Zorg dat de andere iconen (360, hartje) hun Pico-stijl behouden */
.button-icon:not(.whatsapp) {
 color: var(--pico-color);
 background: var(--pico-card-background-color);
}
.button-icon.mailto {
 display: none;
}

/* Algemene Pagination Styling */
.pagination {
 grid-column: 1 / -1; /* Pak de volle breedte in het grid */
 display: flex;
 flex-direction: column;
 align-items: center;

 max-width: 100%;
 width: 100;
 margin: 20px 0;
 padding: 0 10px;
 box-sizing: border-box;
}

.pagination ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding: 0;
 list-style: none;
 gap: 5px;
}

.pagination a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 5px;
 text-decoration: none;
 color: var(--pico-color);
}

.pagination h2 a {
 display: initial;
 border: initial;
}

.pagination li.active a {
 background-color: var(--orangeMainColor);
 color: white;
 border-color: var(--orangeMainColor);
}

/* Specifiek: Verberg header bij de bovenste pagination */
.pagination-top header {
 display: none;
}

/* Specifiek: Toon header bij de onderste pagination (standaard gedrag, maar voor zekerheid) */
.pagination-bottom header {
 display: block;
 width: 100%;
 text-align: center;
 margin-bottom: 10px;
}

.pagination-bottom .subheader {
 font-size: 1.1rem;
 font-weight: 700;
 text-transform: uppercase;
 color: var(--pico-muted-color);
 margin: 0;
}

/* Styling voor de sliders om te matchen bij DagjeWeg stijl */
input[type=range] {
 -webkit-appearance: none; 
 background: transparent; 
}

input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 24px;
 width: 24px;
 border-radius: 50%;
 background: var(--orangeMainColor);
 cursor: pointer;
 margin-top: -10px; 
 box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 4px;
 cursor: pointer;
 background: var(--pico-muted-border-color);
 border-radius: 2px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
 background: var(--greenMainColor);
}

/* Zorgt dat de slider er 'inactief' uitziet zolang er niet aan gezeten is */
input[type=range].untouched {
 opacity: 0.5; /* Maak hem grijs/doorzichtig */
 filter: grayscale(100%);
}

/* Zodra hij gebruikt is, wordt hij weer normaal (door JS wordt de class weggehaald) */
input[type=range] {
 opacity: 1;
 transition: opacity 0.3s ease;
}

/* --- Tip Detailpagina Layout --- */

/* Basis layout (Mobiel) */
.tip-container {
 display: flex;
 flex-direction: column;
 gap: 2rem;
 padding: 0 15px;
 grid-column: 2;
 order: 3;
 margin: 0 auto;
 max-width: 100vw;
 width: 100%;
 box-sizing: border-box;
}

.tip-content {
 max-width: min(100vw, var(--max-width-content));
 min-width: 0;
 width: 100%;
 order: 1;
}

.tip-container h2.subheader {
 color: var(--greenMainColorShade);
}

/* Header tweaks */
#ptXL .meta-info { color: var(--pico-muted-color); font-size: 0.9rem; margin-bottom: 5px; }
#ptXL .rating-badge { color: var(--orangeMainColor); font-weight: bold; margin-top: 5px;}

.tip-carousel {
 margin-bottom: 20px;
}

.tip-carousel .carousel-container {
 padding-right: 20px;
 gap: 10px;
 /*flex: 0 0 90% !important;
 width: 90%;
 margin-right: 0;*/
}

.tip-carousel .carousel-item {
 flex: 0 0 90% !important;
 width: 90%;
 margin-right: 0;
}

.tip-carousel .carousel-item:only-child {
 flex: 0 0 100% !important;
 width: 100% !important;
}
.tip-carousel:has(.carousel-item:only-child) .arrow-left,
.tip-carousel:has(.carousel-item:only-child) .arrow-right {
 display: none !important;
}
.tip-carousel:has(.carousel-item:only-child) .type-badge {
 right: 50%;
 bottom: 50%;
 transform: translateX(50%);
}

.tip-carousel .carousel-item img {
 width: 100%;
 height: 250px;
 object-fit: cover;
 border-radius: var(--pico-border-radius);
}

.tip-carousel figure.uitstapje {
 margin: 0;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
}

/* Zorg dat de afbeelding de container vult */
.tip-carousel figure img {
 width: 100%;
 height: 300px;
 object-fit: cover;
 object-position: top center;
 border-radius: var(--pico-border-radius);
 display: block;
}

.tip-carousel figcaption {
 /* --- INSTELLINGEN --- */
 --f-size: 0.9rem;
 --l-height: 1.5;
 --lines: 2;
 --pad-y: 10px;
 --border: 1px;
 
 /* --- BEREKENING HOOGTE --- */
 /* Teksthoogte + Padding + Border - 2px correctie */
 /* Die -2px zorgt dat de 3e regel écht niet zichtbaar is */
 height: calc(
  (var(--f-size) * var(--l-height) * var(--lines)) 
  + (var(--pad-y) * 2) 
  + var(--border) 
  - 5px
 );
 
 /* Zorg dat alles wat hierbuiten valt ECHT weg is */
 overflow: hidden; 
 
 /* --- TEKST STIJL --- */
 font-size: var(--f-size);
 line-height: var(--l-height);
 font-weight: 500;
 
 /* --- LINE CLAMP (De 3 puntjes ...) --- */
 display: -webkit-box;
 -webkit-box-orient: vertical;   
 -webkit-line-clamp: var(--lines);
 line-clamp: var(--lines);

 /* --- DECORATIE --- */
 padding: var(--pad-y) 15px;
 background: var(--pico-card-background-color);
 color: var(--pico-color);
 border: 1px solid var(--pico-muted-border-color);
 border-top: none; 
 border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
 box-shadow: var(--pico-card-box-shadow);
 box-sizing: border-box;
}

/* Redactietekst */
.redactietekst .lead { font-size: 1.1rem; font-weight: 500; color: #333; }
.redactietekst h3 { color: var(--greenMainColorShade); margin-top: 1.5rem; }
.redactietekst ul { padding-left: 20px; }
.redactietekst .video-container {
 position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 20px 0; border-radius: var(--pico-border-radius);
}
.redactietekst .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.redactietekst form.review-form button[type=submit] { margin-top: 20px !important; }

/* --- Praktische Info Grid (In de hoofdkolom) --- */
.practical-info-grid {
 display: grid;
 grid-template-columns: 1fr; /* Mobiel: onder elkaar */
 gap: 20px;
 margin-bottom: 30px;
 order: 3;
 width: 100%;
}

/* FORCEER VERTICALE UITLIJNING IN CARDS */
.tip-container .card,
nav.card {
 display: flex !important;
 flex-direction: column !important; /* Header boven, inhoud onder */
 align-items: stretch !important;
 width: 100% !important;
 box-sizing: border-box;
}

/* Zorg dat de header in de card ook meewerkt */
.tip-container .card header,
nav.card header {
 width: 100%;
 margin-bottom: 10px; /* Herstel eventuele margin */
}

nav.card.info-card {
 display: flex !important;
 flex-direction: column !important;
 width: 100%;
}
nav.card.info-card header {
 width: 100%;
}

/* --- FIX: Reset Pico's horizontale menu gedrag voor nav cards --- */

/* 1. Dwing de lijst (ul) weer naar normaal blok-gedrag (onder elkaar) */
nav.card ul,
nav.card ul.link-list {
 display: block !important; /* Pico maakt hier flex-row van, wij willen block */
 width: 100% !important;
 padding: 0 !important;
 margin: 0 !important;
}

/* 2. Dwing de lijst-items (li) om de volle breedte te pakken */
nav.card li {
 display: block !important; /* Pico maakt hier vaak inline-flex van */
 width: 100% !important;
 padding: 0 !important;  /* Reset eventuele padding van Pico menubalken */
 margin: 0 !important;
}

/* 3. Specifieke fix voor de link-list binnen een nav */
/* Omdat link-list flex gebruikt voor de icoontjes in de <a>, 
 * moeten we zeker weten dat de <a> zelf zich goed gedraagt */
nav.card ul.link-list li a {
 width: 100% !important;
 box-sizing: border-box !important;
}

.review-section {
 order: 4;
}
/* Review Sectie */
.review-summary {
 display: flex;
 align-items: center;
 gap: 15px;
 background: var(--pico-card-background-color);
 padding: 15px;
 border-radius: var(--pico-border-radius);
 border: 1px solid var(--pico-muted-border-color);
}
.review-summary .score {
 font-size: 2rem;
 font-weight: 800;
 color: #fff;
 background: var(--greenMainColor);
 padding: 10px;
 border-radius: 10px;
 line-height: 1;
}

/* Sidebar Cards */
.tip-sidebar {
 order: 2;
 margin-bottom: 0;
}
.tip-sidebar .card,
.practical-info-grid .card{
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 padding: 15px;
 margin-bottom: 20px;
 box-shadow: var(--pico-card-box-shadow);
}

/* Zorg dat de kaarten in dit grid even hoog zijn */
.practical-info-grid .card {
 height: 100%; 
 margin-bottom: 0; /* Margin wordt nu geregeld door de grid-gap */
}


.tip-sidebar header { margin-bottom: 15px; border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: 10px; }
.tip-sidebar header h3 { margin: 0; font-size: 1.1rem; color: var(--pico-color); }

/* --- Age Checker Card Styling --- */
.age-groups {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 10px;
}

.age-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
 flex: 1 1 60px; /* Zorgt voor gelijke verdeling */
}

/* De Badge cirkel */
.age-badge {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 0.85rem;
 border: 2px solid var(--pico-muted-border-color);
 background-color: var(--pico-card-sectioning-background-color);
 color: var(--pico-muted-color);
 transition: all 0.3s ease;
}

.age-label {
 font-size: 0.7rem;
 font-weight: 600;
 color: var(--pico-muted-color);
 text-transform: uppercase;
 text-align: center;
}

/* Actieve status: Kleur geven (DagjeWeg Groen) */
.age-item.active .age-badge {
 background-color: var(--greenMainColor);
 border-color: var(--greenMainColorShade);
 color: #ffffff;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.age-item.active .age-label {
 color: var(--greenMainColorShade);
}

/* Inactieve status: Subtiel grijs/doorgestreept gevoel */
.age-item.inactive {
 opacity: 0.4;
}
.age-item.inactive .age-badge {
 background-color: transparent;
 border-style: dashed;
}


/* --- Globale Call-to-Action (CTA) Button --- */
.cta-button {
 /* 1. Verwijder de standaard link-styling (de onderstreping) */
 text-decoration: none !important;
 border-bottom: none !important;
 
 /* 2. Opvallende Kleuren (DagjeWeg Oranje) */
 background-color: var(--orangeMainColor) !important;
 border-color: var(--orangeMainColor) !important;
 color: #000000 !important; /* Altijd witte tekst */
 
 /* 3. Uitlijning (Zorgt dat icoon en tekst mooi in het midden staan) */
 display: flex !important;
 align-items: center;
 justify-content: center;
 gap: 10px; /* Ruimte tussen icoon en tekst */
 
 /* 4. Typografie en Vorm */
 font-weight: 800 !important; /* Lekker dikgedrukt */
 border-radius: var(--pico-border-radius);
 cursor: pointer;
 box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtiele schaduw voor diepte */
 
 /* Zorg voor soepele overgangen */
 transition: transform 0.2s ease, filter 0.2s ease;
 padding: 12px;
}

/* Hover effect: Geen lijn, maar iets lichter en komt omhoog */
.cta-button:hover {
 text-decoration: none !important;
 filter: brightness(1.1); /* Maakt de oranje kleur iets feller */
 transform: translateY(-2px); /* Knop komt iets omhoog */
 color: #000000 !important;
 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Active effect: Als je klikt */
.cta-button:active {
 transform: translateY(0);
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.action-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.action-grid .button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: 8px 12px !important; font-size: 0.85rem !important; font-weight: 600; text-align: left; text-decoration: none !important; border-bottom: 1px solid var(--pico-muted-border-color) !important; box-shadow: none !important; gap: 10px; }
/* Zorg dat het icoontje niet te klein of te groot wordt */
.action-grid .button i,
.action-grid .button .material-icons {
 font-size: 1.1rem !important;
 line-height: 1;
 color: var(--orangeMainColor); /* Of de kleur van je thema */
 flex-shrink: 0; /* Voorkomt dat icoon geplet wordt bij lange tekst */
}

/* Hover effect voor interactie */
.action-grid .button:hover {
 background-color: var(--pico-secondary-background);
 color: var(--pico-color);
 transform: translateX(5px); /* Leuk effectje: schuift iets naar rechts */
 transition: transform 0.2s ease;
 border-color: var(--orangeMainColor) !important;
}

.action-grid .button.text-muted {
 color: var(--pico-muted-color) !important;
 font-weight: 400;
 font-size: 0.8rem !important;
}
.action-grid .button.text-muted i {
 color: var(--pico-muted-color) !important; /* Grijs icoontje */
}
.action-grid .button.text-muted:hover {
 color: var(--pico-color) !important; /* Wordt donkerder bij hover */
}

/* --- Link List (Voor interne navigatie) --- */
.link-list {
 list-style: none !important;
 padding: 0;
 margin: 0;
}

.link-list li {
 list-style: none !important;
 border-bottom: 1px solid var(--pico-muted-border-color);
 margin: 0;
}

.link-list li:last-child {
 border-bottom: none;
}

.link-list a {
 display: flex;
 align-items: center;
 padding: 12px 10px;
 min-height: 48px;
 text-decoration: none;
 color: var(--pico-color);
 transition: background-color 0.2s, color 0.2s;
 font-size: 0.95rem;
 gap: 5px;
 font-weight: 500;
}

/* Icoontje links */
.link-list a i:first-child, 
.link-list a .material-icons:first-child {
 color: var(--greenMainColor); /* Of orange, afhankelijk van je smaak */
 margin-right: 12px;
 font-size: 1.1rem;
 width: 20px; /* Vaste breedte voor uitlijning */
 text-align: center;
}
.link-list a.secondary i:first-child, 
.link-list a.secondary .material-icons:first-child {
 color: var(--orangeMainColor) !important;
}

/* Pijltje rechts */
.link-list a .arrow {
 margin-left: auto; /* Duwt pijl naar rechts */
 color: var(--pico-muted-color);
 font-size: 0.9rem;
 transition: transform 0.2s;
}

.link-list a.secondary .arrow {
 color: var(--orangeMainColor) !important;
 opacity: 0.7;
}

/* Hover Effecten */
.link-list a:hover {
 color: var(--greenMainColorShade);
}

.link-list a:hover .arrow {
 transform: translateX(4px); /* Pijltje schuift op */
 color: var(--greenMainColor);
}

.link-list a.secondary:hover {
 color: var(--orangeMainColorShade) !important;
}

.link-list a.secondary:hover i:first-child {
 color: var(--orangeMainColorShade) !important;
}

/* 2. Styling voor 'Secondary' (Oranje) links */
/* We moeten specifiek zijn om de standaard kleur te overschrijven */
.link-list a.secondary {
 color: var(--orangeMainColor) !important;
 font-weight: 600;
}


/* Map Preview */
.map-preview { position: relative; margin-bottom: 10px; border-radius: var(--pico-border-radius); overflow: hidden; height: 150px; }
.map-preview img { width: 100%; height: 100%; object-fit: cover; }
.map-overlay-btn {
 position: absolute; bottom: 10px; right: 10px;
 background: rgba(255,255,255,0.9); padding: 5px 10px;
 border-radius: 20px; text-decoration: none; font-size: 0.8rem; color: #000;
 font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Openingstijden Lijst */
.opening-list { list-style: none; padding: 0; margin: 0; }
.opening-list li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.opening-list li.open span:last-child { color: var(--greenMainColor); font-weight: 600; }
.opening-list li.closed span:last-child { color: var(--redMainColor); font-weight: 600; }
.opening-list li.sometimes span:last-child { color: var(--redOrangeColor); font-weight: 600; text-align:right; }

/* Accessibility list */
.accessible-list { list-style: none; padding: 0; margin: 0; }
.accessible-list li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.accessible-list li.open span:last-child { color: var(--greenMainColor); font-weight: 600; }
.accessible-list li.closed span:last-child { color: var(--redMainColor); font-weight: 600; }

/* Prijslijst */
.price-list { list-style: none; padding: 0; margin: 0 0 10px 0; }
.price-list li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--pico-muted-border-color); }


/* Advertentie */
.ad-container { text-align: center; margin-top: 20px; margin-bottom: 20px; }
.steunad-link { display: block; background: #0044cc; color: #fff; text-decoration: none; border-radius: 5px; overflow: hidden; font-weight: bold; }
.steunad-link img { display: block; width: 100%; }
.steunad-link span { display: block; padding: 5px; }
.ad-placeholder { margin: auto; }
/* Container voor de advertentie label tekst */
.ad-label {
 text-align: center;
 margin-bottom: 4px; /* Ruimte tussen label en banner */
 line-height: 0;  /* Voorkomt dat de paragraaf extra hoogte inneemt */
 display: block; /* Ook span centreren */
}

/* De link zelf omvormen tot een sjiek 'badge' */
.ad-label a {
 display: inline-block;
 
 /* Het 'Zwarte Kader' effect */
 background-color: #444; /* Donkergrijs is vaak sjieker dan hard zwart (#000) */
 color: #fff !important; /* Forceer witte tekst */
 
 /* Typografie voor een strakke uitstraling */
 font-size: 9px;
 text-transform: uppercase; /* Hoofdletters ogen netter */
 letter-spacing: 1px; /* Letters iets uit elkaar */
 font-weight: 600;
 text-decoration: none !important; /* Geen onderstreping */
 
 /* Vormgeving */
 padding: 3px 8px;
 border-radius: 4px; /* Licht afgeronde hoekjes */
 
 /* Interactie */
 transition: background-color 0.2s ease;
 
 height: initial;
 width: initial;
}

/* Hover effect: iets donkerder maken */
.ad-label a:hover {
 background-color: #000;
 color: #fff !important;
}



/* CONTAINER */
.sticky-order-below-filter {
  position: sticky;
  background-color: var(--global-bgcolor);
  padding-bottom: 10px;
	
  top: var(--total-sticky-offset);
  z-index: 10;
  order: 4;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* DE KNOPPEN (<a> elementen) */
.sticky-order-below-filter a {
  /* Structuur & Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex: 1 1 auto; 
  
  background-color: var(--orangeMainColor);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  
  padding: 12px 16px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  transition: background-color 0.2s ease, transform 0.1s;
}
.sticky-order-below-filter a:hover {
  background-color: var(--orangeMainColorShade);
  text-decoration: none;
}
.sticky-order-below-filter a:last-child {
  background-color: var(--greenMainColor);
}
.sticky-order-below-filter a:last-child:hover {
  background-color: var(--greenMainColorShade);
}

/* Zorg dat map controls netjes staan */
.gm-style .gmnoprint {
 margin: 10px !important;
}

#geoSearchForm {
 order: 4;
 padding: 0 15px;
 grid-column: 2;
}

#geoSearchForm button[type=submit] {
 width: 100%;
 position: sticky;
 bottom: var(--bottom-nav-height);
}

gmp-advanced-marker,
gmp-pin {
 /* Reset de Pico variabele */
 --pico-background-color: transparent !important;
 --pico-border-color: transparent !important;

 /* Forceer de achtergrond en rand direct op transparant */
 background-color: transparent !important;
 border: none !important;
 box-shadow: none !important;
}


/* --- Redactie Profiel met Datums --- */

.article-meta {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 margin: 10px 10px 0 10px;
 padding: 8px 16px;
 background-color: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 50px; /* Chip vorm */
 width: fit-content;
 max-width: 100%; /* Voorkom dat hij buiten beeld loopt op mobiel */
}

.author-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: var(--navBarColor);
 color: var(--greenMainColorShade);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.author-details {
 display: flex;
 flex-direction: column; /* Mobiel: Naam boven, datums onder */
 line-height: 1.3;
}

/*
.author-info {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 5px;
}
*/

.author-name {
 font-weight: 700;
 font-size: 0.95rem;
 color: var(--pico-color);
}

.author-role {
 font-size: 0.75rem;
 color: var(--pico-muted-color);
 text-transform: uppercase;
 font-weight: 600;
}

/* Datums styling */
.meta-dates {
 font-size: 0.75rem;
 color: var(--pico-muted-color);
 display: flex;
 align-items: center;
 gap: 6px;
}

.meta-dates i {
 font-size: 0.8em; /* Icoontje iets kleiner */
 margin-right: 2px;
}

.date-separator {
 color: var(--pico-muted-border-color);
 font-size: 0.8em;
}

.modified-wrapper {
 color: var(--orangeMainColor); /* Update valt iets meer op */
 font-weight: 500;
 display: inline-flex;
 align-items: center;
}

/* Review Form Styling */
.review-form .form-group {
 margin-bottom: 20px;
}

.review-form label {
 display: block;
 margin-bottom: 8px;
 font-weight: 600;
}

/* Range Sliders styling */
.range-wrapper {
 display: flex;
 align-items: center;
 gap: 15px;
}

.range-wrapper input[type=range] {
 flex-grow: 1; /* Neemt alle ruimte in */
 cursor: pointer;
 accent-color: var(--orangeMainColor); /* Gebruikt je huisstijl kleur indien ingesteld, anders oranje */
 height: 8px;
}

/* Het cijfer naast de slider */
.range-wrapper output {
 font-weight: 800;
 font-size: 1.2rem;
 color: var(--pico-primary); /* Of groen/oranje */
 min-width: 30px;
 text-align: right;
}

/* Sub-ratings iets compacter */
.sub-ratings-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 15px;
 margin-bottom: 20px;
}

/* Honeypot verbergen (beter dan inline styles) */
.honey-pot {
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 height: 0;
 width: 0;
 z-index: -1;
}

.item-title {
 margin-top: 30px;
 margin-bottom: 15px;
 border-bottom: 1px solid var(--pico-muted-border-color) !important;
 padding-bottom: 5px;
}

/* --- Review Filter Bar --- */
.filter-bar {
 margin-bottom: 20px;
}

.filter-label {
 display: block;
 font-size: 0.9rem;
 font-weight: 600;
 margin-bottom: 8px;
 color: var(--pico-muted-color);
}

.filter-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 8px; /* Iets kleiner op mobiel */
}

.filter-btn {
 background-color: var(--greenMainColor);
 border: 1px solid var(--greenMainColorShade);
 color: var(--pico-color);
 padding: 6px 14px;
 border-radius: 50px;
 font-size: 0.85rem;
 cursor: pointer;
 transition: all 0.2s ease;
 font-weight: 500;
}

.filter-btn:hover {
 background-color: var(--pico-secondary-background);
 border-color: var(--pico-muted-border-color);
 background-color: var(--navBarColor);
}

.filter-btn.active {
 background-color: var(--orangeMainColor);
 border-color: var(--orangeMainColorShade);
 color: black;
}

/* --- Review Card Design (Mobile First) --- */
.review-card {
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 padding: 15px; /* Compactere padding op mobiel */
 margin-bottom: 20px;
 box-shadow: var(--pico-card-box-shadow);
 transition: transform 0.2s ease;
 
 /* Zorg dat header, body etc onder elkaar staan */
 display: flex;
 flex-direction: column;
}

/* --- 1. Header (Titel, Score, Datums) --- */
.review-header {
 display: flex;
 flex-direction: column; /* Mobiel: Alles onder elkaar */
 gap: 10px;
 margin-bottom: 15px;
 border-bottom: 1px solid var(--pico-muted-border-color);
 padding-bottom: 15px;
}

/* Titel en Score Groep */
.review-title-group h3 {
 margin: 0 0 5px 0;
 font-size: 1.2rem;
 color: var(--greenMainColorShade);
 line-height: 1.2;
}

.review-score-visual {
 display: flex;
 align-items: center;
 gap: 2px;
}

.score-icon {
 width: 20px; /* Iets kleiner op mobiel */
 height: 20px;
}

.score-number {
 font-weight: 800;
 font-size: 1rem;
 margin-left: 8px;
 color: var(--pico-color);
}

/* Datum Groep (Mobiel: links uitgelijnd, naast elkaar of onder elkaar) */
.review-meta-top {
 display: flex;
 flex-direction: row; /* Mobiel: datums naast elkaar als het past */
 flex-wrap: wrap;
 gap: 15px;
 font-size: 0.8rem;
 color: var(--pico-muted-color);
 border-top: 1px dashed var(--pico-muted-border-color); /* Scheidingslijntje op mobiel */
 padding-top: 10px;
}

.meta-row {
 display: flex;
 align-items: center;
 gap: 5px;
}

.visit-date {
 color: var(--pico-color);
 font-weight: 500;
}
.visit-date i { color: var(--orangeMainColor); }


/* --- 2. Body (De tekst) --- */
.review-body {
 font-style: italic;
 color: #444;
 margin-bottom: 20px;
 line-height: 1.5;
 font-size: 0.95rem;
}


/* --- 3. Sub-scores Grid --- */
.review-subscores {
 display: grid;
 /* Mobiel: 1 kolom (alles onder elkaar) voor rustig beeld */
 grid-template-columns: 1fr; 
 gap: 8px;
 margin-bottom: 20px;
 background: var(--pico-card-sectioning-background-color);
 padding: 12px;
 border-radius: 8px;
}

.subscore-item {
 display: flex;
 align-items: center;
 font-size: 0.8rem;
}

.subscore-item .label {
 width: 100px; /* Vaste breedte labels */
 font-weight: 600;
 color: var(--pico-muted-color);
}

.subscore-item .bar {
 flex-grow: 1;
 height: 6px;
 background-color: #e0e0e0;
 border-radius: 3px;
 margin: 0 10px;
 position: relative;
 overflow: hidden;
}

.subscore-item .bar::after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: var(--w);
 background-color: var(--greenMainColor);
 border-radius: 3px;
}

.subscore-item .value {
 font-weight: bold;
 width: 20px;
 text-align: right;
}

/* --- 4. Footer --- */
.review-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 10px;
 border-top: 1px dashed var(--pico-muted-border-color);
 font-size: 0.85rem;
}

.reviewer-info {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.reviewer-name {
 font-weight: 700;
 color: var(--pico-color);
}

.review-tag {
 background-color: var(--pico-primary-background);
 color: #fff;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 0.7rem;
 text-transform: uppercase;
 font-weight: 600;
}

.edit-link {
 font-size: 0.8rem;
 color: var(--pico-muted-color);
 text-decoration: none;
}
.edit-link:hover { text-decoration: underline; }


/* Autocomplete Styling */
.autocomplete-wrapper {
 position: relative;
 width: 100%;
}

.autocomplete-results {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 z-index: 1000;
 max-height: 250px;
 overflow-y: auto;
 display: none; /* Standaard verborgen */
}

.autocomplete-results.visible {
 display: block;
}

.autocomplete-item {
 padding: 10px;
 cursor: pointer;
 border-bottom: 1px solid #eee;
 color: #333;
}

.autocomplete-item:last-child {
 border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.focused {
 background-color: #f0f0f0;
}

/* --- Artikel Opmaak Modernisering (Mobile First) --- */
.artikel #introduction,
.artikel #bdy,
.artikel .bdy2,
.artikel h2 {
 padding: 0 20px 0 20px;
}

/* 1. De Streamer (Blockquote) */
.artikel blockquote {
 font-family: Georgia, serif;
 font-size: 1.2rem; /* Iets kleiner op mobiel */
 font-style: italic;
 line-height: 1.4;
 color: var(--pico-color);
 border-left: 4px solid var(--orangeMainColor);
 background: var(--quote-bg);
 margin: 20px 0;
 padding: 15px 20px;
 border-radius: 0 10px 10px 0;
 position: relative;
}

/* Groot aanhalingsteken */
.artikel blockquote::before {
 content: '\201C';
 position: absolute;
 top: -10px;
 left: 5px;
 font-size: 3rem;
 color: var(--orangeMainColor);
 opacity: 0.3;
 font-family: sans-serif;
}

/* 2. Footer URL lijst */
.artikel nav.urls {
 margin-top: 30px;
 padding-top: 20px;
 border-top: 1px solid var(--pico-muted-border-color);
}

.artikel nav.urls h3 {
 font-size: 1rem;
 text-transform: uppercase;
 color: var(--pico-muted-color);
 margin-bottom: 10px;
}

.artikel nav.urls ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 /* Mobiel: 1 kolom (auto-fill regelt dit vaak al, maar 1fr is veilig) */
 grid-template-columns: 1fr; 
 gap: 10px;
}

.artikel nav.urls li { margin: 0; }

.artikel nav.urls li a {
 display: block;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 padding: 12px;
 border-radius: var(--pico-border-radius);
 text-decoration: none;
 color: var(--pico-color);
 font-weight: 600;
 transition: transform 0.2s, border-color 0.2s;
 height: 100%;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 3. Navigatie Pijlen (Zijkant) */
.nav-indicator {
 display: none; 
}

/* --- Artikel Header & Uitlijning --- */

/* 1. De Container (De chip) */
.artikel .article-meta {
 /* Layout & Positie */
 display: inline-flex; 
 align-items: center;  
 justify-content: center;
 
 /* Breedte & Marges (Vervangt jouw oude rule) */
 width: fit-content;   
 max-width: 100%;   
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 
 /* Volgorde in header */
 order: 1;
 
 /* Ruimte tussen Avatar en Tekst */
 gap: 12px;   
}

/* 2. De Inhoud (Naam + Datum) */
.artikel .article-meta .author-details {
 display: flex;
 flex-direction: column;  /* MOBIEL: Onder elkaar */
 align-items: flex-start; /* Links uitlijnen (netter in een stapel) */
 justify-content: center;
 
 line-height: 1.3;
 text-align: left;  
}

/* 3. De Naam */
.artikel .author-info {
 font-weight: 700;
 color: var(--pico-color);
 display: flex;
 align-items: center;
 white-space: nowrap;
}

/* Het puntje (•) verbergen op mobiel */
.artikel .author-info .meta-divider {
 display: none; 
}

/* 4. De Datum */
.meta-dates {
 font-size: 0.85em;
 color: var(--pico-muted-color);
 display: flex;
 align-items: center;
 white-space: nowrap;  /* Voorkomt dat de datum breekt */
}

/* 5. De Break (Deze MOET blijven staan!) */
/* Forceert de H1 naar de volgende regel */
.artikel #ptXL .article-meta::after {
 content: "";
 display: block;
 width: 100%;
}


/* Zorg dat de header in een artikel netjes links uitlijnt met de content/foto */
.artikel #ptXL {
 padding-left: 0 !important;
 padding-right: 0 !important;
 margin-left: 0 !important;
 max-width: 100% !important;
 
 margin-bottom: 20px !important;
 
 /* De truc: We maken er een row van die mag 'omvouwen' */
 display: flex;
 flex-direction: row; 
 flex-wrap: wrap;
 
 /* Alles centreren */
 justify-content: center;
 align-items: center;
 text-align: center;
 
 /* Ruimte tussen de elementen (vooral tussen de twee badges) */
 gap: 10px; 
}


.artikel #ptXL h1 {
 flex-basis: 100%; /* Forceer eigen regel */
 margin-top: 0 !important;
 margin-bottom: 5px !important;
 line-height: 1.1;
 padding-left: 0;
 text-align: center;
 order: 2;
}

.artikel #ptXL h2 {
 flex-basis: 100%; /* Forceer eigen regel */
 margin-top: 15px !important; /* Beetje afstand van de badges */
 margin-bottom: 0 !important;
 font-size: 1.3rem;
 color: var(--pico-muted-color);
 font-weight: 500;
 text-align: center;
 order: 4;
}

.artikel figcaption {
 margin-bottom: 30px !important; /* Meer ruimte richting de samenvatting */
 font-style: italic;
 color: var(--pico-muted-color);
 font-size: 0.9rem;
 border-bottom: 1px solid var(--pico-muted-border-color);
 padding-bottom: 10px;
 
 /* Reset de berekening van hoogte voor deze specifieke caption als dat nodig is */
 height: auto !important; 
 -webkit-line-clamp: unset !important;
 line-clamp: unset !important;
}

/* 3. Samenvatting (Lead) opvallend maken */
#summary {
 font-size: 1.15rem; /* Groter dan broodtekst */
 line-height: 1.6;
 font-weight: 500;
 color: var(--pico-color);
 
 /* Kadering */
 background-color: var(--pico-card-sectioning-background-color); /* Lichte tint */
 border-left: 5px solid var(--orangeMainColor); /* Oranje accentlijn */
 padding: 20px 25px;
 border-radius: 0 8px 8px 0;
 
 margin-bottom: 30px; /* Ruimte tot de volgende kop */
}

/* De tags/markeringen in de summary netjes houden */
#summary mark {
 background-color: transparent;
 color: var(--greenMainColor);
 font-weight: 700;
 padding: 0;
 margin: 0;
 border: none;
 font-size: 1em; /* Gewoon meeschalen */
}

.artikelType {
 /* Positie in de flex-header */
 order: 3;
 
 /* Opmaak (Badges look) */
 display: inline-flex;
 align-items: center;
 background-color: var(--greenMainColor);
 color: #ffffff;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 padding: 4px 10px;
 border-radius: 4px;
 letter-spacing: 0.5px;
 
 /* Zorg dat hij niet de hele breedte pakt */
 width: auto; 
}

.aantalXGelezen {
 /* Positie in de flex-header (naast artikelType) */
 order: 3;
 
 /* Opmaak (Subtiele tekst) */
 display: inline-flex;
 align-items: center;
 color: var(--pico-muted-color);
 font-size: 0.85em;
 font-weight: 500;
 
 /* Zorg dat hij niet de hele breedte pakt */
 width: auto;
}

/* Voeg een oog-icoontje toe voor de duidelijkheid via CSS */
.aantalXGelezen::before {
 content: '\e8f4'; /* Material Icon code voor 'visibility' */
 font-family: 'Material Icons';
 margin-right: 5px;
 font-size: 1.1em;
 vertical-align: middle;
}

/* --- Summary Tags (Rubrieken) --- */
.artikel p mark {
 background-color: var(--pico-card-background-color); /* Wit/Lichtgrijs */
 border: 1px solid var(--pico-muted-border-color);
 color: var(--pico-color); /* Gewone tekstkleur */
 
 font-size: 0.85rem;
 font-weight: 600;
 padding: 3px 10px;
 border-radius: 50px; /* Mooie ronde 'chips' */
 margin-right: 5px;
 margin-bottom: 5px;
 display: inline-block;
 text-decoration: none;
 transition: all 0.2s ease;
}

/* Omdat het straks linkjes worden, alvast een hover-effect */
.artikel p mark:hover {
 border-color: var(--orangeMainColor);
 color: var(--orangeMainColor);
 background-color: #fff;
 cursor: pointer;
}

/* --- Infobox / De Laag --- */
.laag {
 background-color: var(--navBarColor); /* Je zachte groen/grijze tint */
 border-left: 5px solid var(--greenMainColor); /* Groene accentlijn */

 color: var(--laag-text-color);
 
 padding: 20px 25px;
 margin: 30px 0;
 border-radius: 0 8px 8px 0;
}

.laag h2 {
 margin-top: 0;
 font-size: 1.2rem;
 color: var(--laag-link-color);
}

.laag ul, .laag p {
 margin-bottom: 0;
 padding-left: 20px;
 color: var(--laag-text-color);
}

.laag li {
 margin-bottom: 8px;
 line-height: 1.5;
}

/* Zorg dat linkjes in de laag goed zichtbaar zijn */
.laag a {
 color: var(--laag-link-color);
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
 font-weight: 600;
}

.laag a:hover {
 color: var(--u-text-black);
}

/* Fix voor de nav.urls (Lees ook...) op desktop */
.artikel nav.urls {
 display: flex;
 flex-direction: column; /* Dwingt header BOVEN de lijst */
 width: 100%;
}

.artikel nav.urls header,
.artikel nav.urls h3 {
 width: 100%;
 margin-bottom: 15px;
}

/* --- Prijsvragen Overzicht --- */

.prijsvragen-container {
 padding: 20px 15px;
 background-color: var(--pico-card-sectioning-background-color); /* Licht achtergrondje om het blok te kaderen */
 border-radius: var(--pico-border-radius);
 margin-bottom: 30px;
}

.prijsvragen-header {
 text-align: center;
 margin-bottom: 25px;
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
}

.prijsvragen-header h2 {
 color: var(--orangeMainColor); /* Prijsvragen = Feest = Oranje */
 margin-bottom: 10px;
 font-size: 1.6rem;
}

.prijsvragen-grid {
 display: grid;
 /* Mobiel: 1 kolom. Vanaf tablet: 2 kolommen. Desktop: max 3 */
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
 gap: 20px;
}

/* De Kaart */
.prijsvraag-card {
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 overflow: hidden;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 height: 100%; /* Zorgt dat ze even lang zijn */
 display: flex;
 flex-direction: column;
}

.prijsvraag-card:hover {
 transform: translateY(-5px); /* Komt omhoog */
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 border-color: var(--orangeMainColor);
}

.prijsvraag-link {
 text-decoration: none;
 color: inherit;
 display: flex;
 flex-direction: column;
 height: 100%;
}

/* Afbeelding */
.prijsvraag-image {
 position: relative;
 padding-top: 56.25%; /* 16:9 ratio */
 overflow: hidden;
 background-color: #eee;
}

.prijsvraag-image img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s ease;
}

.prijsvraag-card:hover .prijsvraag-image img {
 transform: scale(1.05); /* Zoom effect */
}

/* Badge (Optioneel) */
.prijsvraag-badge {
 position: absolute;
 top: 10px;
 left: 10px;
 background-color: var(--orangeMainColor);
 color: #000;
 font-weight: 700;
 font-size: 0.75rem;
 padding: 4px 10px;
 border-radius: 4px;
 text-transform: uppercase;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tekst inhoud */
.prijsvraag-content {
 padding: 20px;
 display: flex;
 flex-direction: column;
 flex-grow: 1; /* Duwt footer naar beneden */
 text-align: center;
}

.prijsvraag-content h3 {
 font-size: 1.1rem;
 margin: 0 0 15px 0;
 color: var(--pico-color);
 font-weight: 700;
 line-height: 1.3;
}

/* Nep knop voor duidelijkheid */
.cta-fake-button {
 margin-top: auto; /* Duwt knop naar onderkant */
 display: inline-block;
 padding: 8px 20px;
 background-color: var(--greenMainColor);
 color: #fff;
 border-radius: 50px;
 font-weight: 600;
 font-size: 0.9rem;
 transition: background-color 0.2s;
 align-self: center;
}

.prijsvraag-card:hover .cta-fake-button {
 background-color: var(--greenMainColorShade);
}

main:has(.prijsvragen-container) #ptXL,
main:has(.prijsvraag-detail-container) #ptXL
{
 order: -1;
}

/* --- Individuele Prijsvraag Pagina --- */

.prijsvraag-detail-container {
 padding: 20px;
 background: var(--pico-card-background-color);
 border-radius: var(--pico-border-radius);
 border: 1px solid var(--pico-muted-border-color);
 margin-bottom: 30px;
}

/* Introductie */
.prijsvraag-intro {
 font-size: 1.05rem;
 line-height: 1.6;
 margin-bottom: 25px;
}
.highlight-text {
 font-weight: 700;
 color: var(--greenMainColorShade);
 margin-top: 15px;
}

/* Hero Card (Foto met tekst) */
.prijsvraag-hero-card {
 position: relative;
 border-radius: var(--pico-border-radius);
 overflow: hidden;
 margin-bottom: 30px;
 box-shadow: var(--pico-card-box-shadow);
}
.prijsvraag-hero-card img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}
.prijsvraag-hero-card:hover img {
 transform: scale(1.03);
}
.hero-overlay {
 background: rgba(0, 0, 0, 0.7);
 color: #fff;
 padding: 15px 20px;
 font-size: 0.95rem;
 line-height: 1.4;
}

/* Actie Blok */
.prijsvraag-action {
 text-align: center;
 background-color: var(--pico-card-sectioning-background-color);
 padding: 25px;
 border-radius: var(--pico-border-radius);
 margin-bottom: 30px;
}

.partner-link {
 font-size: 0.9rem;
 color: var(--pico-muted-color);
 margin-bottom: 20px;
}
.partner-link a {
 color: var(--greenMainColor);
 font-weight: 700;
 text-decoration: underline;
}

.prijsvraag-steps {
 list-style: none; /* Geen standaard nummers */
 padding: 0;
 margin: 20px 0;
 counter-reset: step-counter;
 display: inline-block;
 text-align: left;
}
.prijsvraag-steps li {
 counter-increment: step-counter;
 margin-bottom: 10px;
 position: relative;
 padding-left: 35px;
 font-weight: 500;
}
.prijsvraag-steps li::before {
 content: counter(step-counter);
 position: absolute;
 left: 0;
 top: 0;
 width: 24px;
 height: 24px;
 background-color: var(--orangeMainColor);
 color: #fff;
 border-radius: 50%;
 text-align: center;
 line-height: 24px;
 font-size: 0.8rem;
 font-weight: bold;
}

/* De Grote Knop (gebruikt ook .cta-button style) */
.cta-button.large {
 font-size: 1.2rem !important;
 padding: 15px 40px !important;
 margin: 10px 0;
 display: inline-flex !important;
}

.expiry-date {
 font-size: 0.85rem;
 color: var(--pico-muted-color);
 margin-top: 15px;
 font-style: italic;
}

/* Footer & Voorwaarden */
.prijsvraag-footer {
 border-top: 1px solid var(--pico-muted-border-color);
 padding-top: 20px;
}

.back-link {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 text-decoration: none;
 font-weight: 600;
 color: var(--pico-color);
 margin-bottom: 20px;
}
.back-link:hover {
 color: var(--orangeMainColor);
}

.terms-box {
 font-size: 0.85rem;
 color: var(--pico-muted-color);
 background: #f9f9f9; /* Heel licht grijs */
 padding: 15px;
 border-radius: 4px;
}
.terms-box h4 {
 margin: 0 0 5px 0;
 font-size: 0.9rem;
}
.terms-box .badge {
 position: static !important;
 display: inline-block

 background-color: var(--pico-muted-color);
 color: #fff;
 padding: 2px 6px;
 border-radius: 4px;
 font-size: 0.7rem;
 text-transform: uppercase;

 vertical-align: middle;
 margin-bottom: 2px;
}

/* Dark Mode aanpassingen */
:host(:not([data-theme=light])), :root:not([data-theme=light]), [data-theme=dark] {
 .terms-box {
  background: #222;
 }
}

/* --- Utilities --- */
.text-center {
 text-align: center !important;
}

.fg-primary { color: var(--u-text-primary) !important; }
.fg-secondary { color: var(--pico-secondary) !important; }
.fg-muted { color: var(--pico-muted-color) !important; }

.fg-green { color: var(--u-text-green) !important; }
.fg-orange { color: var(--u-text-orange) !important; }

.fg-white { color: var(--u-text-white) !important; }
.fg-black { color: var(--u-text-black) !important; }

.mt-10 { margin-top: 10px; }

/* Achtergrondkleuren */
.bg-primary {
 background-color: var(--pico-primary) !important;
 color: var(--pico-primary-inverse) !important;
}

.bg-secondary {
 background-color: var(--pico-secondary-background) !important;
 color: var(--pico-color) !important;
}

.bg-green {
 background-color: var(--u-bg-green) !important;
 color: var(--u-text-on-green) !important;
}

.bg-orange {
 background-color: var(--u-bg-orange) !important;
 color: var(--u-text-on-orange) !important;
}

.bg-white {
 background-color: var(--u-bg-white) !important;
 color: var(--u-text-black) !important; /* Zwarte tekst op 'wit' vlak */
}

.bg-dark {
 background-color: var(--u-bg-dark) !important;
 color: #ffffff !important;
}

.bg-taupe {
 background-color: var(--u-bg-taupe) !important;
 color: var(--u-text-on-taupe) !important;
}
.fg-taupe, .u-text-taupe {
 color: var(--u-text-taupe) !important;
}

.bg-yellow {
 background-color: var(--u-bg-yellow) !important;
 color: var(--u-text-on-yellow) !important;
}
.fg-yellow, .u-text-yellow {
 color: var(--u-text-yellow) !important;
}

.bg-steel {
 background-color: var(--u-bg-steel) !important;
 color: var(--u-text-on-steel) !important;
}
.fg-steel, .u-text-steel {
 color: var(--u-text-steel) !important;
}

.bg-red {
 background-color: var(--u-bg-red) !important;
 color: var(--u-text-on-red) !important;
}
.fg-red, .u-text-red {
 color: var(--u-text-red) !important;
}

.bg-blue {
 background-color: var(--u-bg-blue) !important;
 color: var(--u-text-on-blue) !important;
}
.fg-blue, .u-text-blue {
 color: var(--u-text-blue) !important;
}

/* --- Aria Describedby Hulpteksten --- */
.input-help-text {
 display: block;
 font-size: 0.8rem;
 color: var(--pico-muted-color);
 background-color: var(--pico-card-sectionning-background-color); /* Lichtgrijze achtergrond */
 border-radius: 4px;
 
 /* Standaard verborgen instellingen */
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 margin-top: 0;
 padding: 0 10px;
 
 /* Animatie voor het uitklappen */
 transition: all 0.3s ease-in-out;
 border-left: 3px solid var(--orangeMainColor); /* Herkenbaar accent */
}

/* =========================================
 * TIP DETAIL: STICKY ACTION BAR (UX2026)
 * ========================================= */

.sticky-action-bar {
 position: fixed !important;
 /* Plakt direct onder de site header */
 top: var(--header-height, 60px) !important; 
 left: 0;
 width: 100% !important;
 z-index: 1050; /* Net onder de site-header (1100) */
 background: var(--pico-background-color) !important;
 margin: 0 !important;
 padding: 10px 5px !important;
 border-radius: 0 !important;
 border-bottom: 1px solid var(--pico-muted-border-color) !important;
 box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* Verberg de kaart-header op mobiel voor meer ruimte */
.sticky-action-bar header {
 display: none !important;
}

/* De grid wordt een horizontale rij knoppen */
.sticky-action-bar .action-grid {
 display: flex !important;
 flex-direction: row !important;
 justify-content: space-around;
 gap: 5px !important;
 margin-top: 0 !important;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.sticky-action-bar .action-grid::-webkit-scrollbar {
 display: none;
}

/* Compacte knoppen met icoon boven tekst */
.sticky-action-bar .action-grid .button {
 all: unset; 
 flex: 1 1 auto;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 text-align: center !important;
 padding: 5px 2px !important;
 gap: 4px !important;
 min-width: 60px;
 cursor: pointer;
 font-size: 8px !important;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--pico-color) !important;
 line-height: 1.1;
}

.sticky-action-bar .action-grid .button i,
.sticky-action-bar .action-grid .button .material-icons {
 font-size: 20px !important;
 color: var(--orangeMainColor) !important;
 margin: 0 !important;
}

/* Content offset: voorkom dat de bar de titel (H1) afdekt op mobiel */
.tip-container {
 margin-top: calc(var(--action-bar-height, 0px) + 10px);
}


:host(:not([data-theme=light])) .sticky-action-bar,
:root:not([data-theme=light]) .sticky-action-bar,
[data-theme=dark] .sticky-action-bar {
 background: var(--pico-background-color) !important;
 border-color: var(--pico-muted-border-color) !important;
}



/* =========================================
 * UITAGENDA SECTIE (Minimalistisch & Compact)
 * ========================================= */

.uitagenda-section {
 order: 2;
 margin-bottom: 30px;
 grid-column: 2; 
 width: 100%;
}

/* --- 1. Header Layout (Strakke rij) --- */
.agenda-header {
 display: flex;
 flex-direction: row;  /* Altijd naast elkaar (ook op mobiel) */
 align-items: center;  /* Verticaal centreren */
 justify-content: space-between; /* Titel links, knop rechts */
 margin-bottom: 15px;
 width: 100%;
}

.agenda-header .subheader {
 margin-bottom: 0;
 border-left: 4px solid var(--greenMainColor);
 padding-left: 10px;
 line-height: 1.1;
 
 /* Zorg dat de titel niet tegen de knop aan loopt bij smalle schermen */
 padding-right: 15px; 
}

.agenda-header .subheader a {
 text-decoration: none !important;
 border-bottom: none !important;
 color: inhert;
}

.agenda-header .subheader a:hover {
 text-decoration: none !important;
 border-bottom: none !important;
 color: var(--greenMainColorShade);
}

/* De Plus Knop */
.add-event-btn {
 text-decoration: none;
 color: var(--greenMainColor);
 font-size: 1.6rem; /* Lekker groot icoon */
 line-height: 1;
 
 display: flex;
 align-items: center;
 justify-content: center;
 
 /* Zorg voor een goed klikbaar gebied (44px is de norm voor touch) */
 width: 44px; 
 height: 44px; 
 
 /* Voorkom dat hij kleiner wordt gedrukt door een lange titel */
 flex-shrink: 0;
 
 transition: color 0.2s, transform 0.2s;
}

.add-event-btn:hover {
 color: var(--greenMainColorShade);
 transform: scale(1.1); /* Klein pop-effectje bij hover */
}


/* --- 2. Scroll Container --- */
.calendar-scroll-container {
 display: flex;
 gap: 10px; 
 overflow-x: auto;
 padding-bottom: 10px;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 
 /* Zorg dat de eerste kaart niet tegen de rand plakt op mobiel */
 padding-left: 2px; 
}

/* --- 3. De Kalender Kaart --- */
.calendar-card {
 flex: 0 0 125px; /* Compacte breedte mobiel */
 display: flex;
 flex-direction: column;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 overflow: hidden;
 scroll-snap-align: start;
 transition: transform 0.2s, box-shadow 0.2s;
 text-align: center;
}

.calendar-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 border-color: var(--greenMainColor);
}

/* Bovenkant (Dag) */
.cal-head {
 background-color: var(--greenMainColor);
 color: #fff;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 0.75rem; 
 padding: 3px 5px;
 letter-spacing: 0.5px;
}

/* Middenstuk (Body) */
.cal-body {
 padding: 0 5px 8px 5px;
 flex-grow: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start; 
}

/* --- De Datum Link (Klikbaar) --- */
.date-link {
 text-decoration: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 margin-bottom: 8px;
 padding-bottom: 5px;
 border-bottom: 1px dashed var(--pico-muted-border-color);
 transition: transform 0.2s ease;
}

/* Hover Effect op de Datum */
.date-link:hover .day-number,
.date-link:hover .month-row,
.date-link:focus-visible .day-number,
.date-link:focus-visible .month-row {
 color: var(--laag-link-color); /* Kleurt mee met thema */
}

/* Focus */
.date-link:focus-visible {
 outline: none;
 background-color: var(--navBarColor);
 border-radius: 4px;
}

/* Cijfer & Maand */
.day-number {
 font-size: 2rem;
 font-weight: 800;
 line-height: 1;
 color: var(--pico-color);
 margin-bottom: 0;
 transition: color 0.2s;
}

.month-row {
 font-size: 0.75rem;
 color: var(--pico-muted-color);
 text-transform: uppercase;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: 4px;
 transition: color 0.2s;
}

.arrow-indicator {
 font-size: 1.2em;
 line-height: 0.8;
 margin-bottom: 1px; 
 font-weight: 400;
}

/* --- 4. Event Lijstje (Items) --- */
.event-list {
 width: 100%;
 text-align: left;
 display: flex;
 flex-direction: column;
 gap: 3px; 
 max-height: 95px; /* Max hoogte voor ~3-4 items */
 overflow: hidden;
 position: relative;
}

/* Fade-out effectje */
.event-list::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 15px;
 background: linear-gradient(to bottom, rgba(255,255,255,0), var(--pico-card-background-color));
 pointer-events: none;
}

/* Item styling */
.event-item {
 display: block;
 font-size: 0.7rem;
 line-height: 1.3;
 color: var(--pico-color);
 background: var(--pico-card-sectioning-background-color);
 padding: 3px 5px;
 border-radius: 3px;
 text-decoration: none;
 
 /* Afkappen */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 transition: all 0.2s;
}

/* Hover/Focus met variabele (donker in Light, fel in Dark) */
.event-item:hover,
.event-item:focus-visible {
 background-color: var(--navBarColor); 
 color: var(--laag-link-color); /* Variabele voor contrast */
 outline: none;
}

/* Verberg alles na 4 items */
.event-list .event-item:nth-child(n+1) {
 display: none;
}

/* --- Awards Pagina Styling (Mobile First) --- */

.awards-container {
 display: flex;
 flex-direction: column;
 width: 100%;
 padding: 0 15px; /* Afstand van de schermrand op mobiel */
 margin: 0 auto;
 box-sizing: border-box;
 /* Zorg dat de volgorde op mobiel klopt: header eerst */
 order: 3; 
}

/* De introductietekst */
.awards-intro .redactietekst {
 font-size: 1rem;
 line-height: 1.6;
 margin-bottom: 20px;
}

/* Het Grid voor de tegels */
.award-grid {
 display: grid;
 /* Mobiel: 2 kolommen naast elkaar */
 grid-template-columns: 1fr 1fr; 
 gap: 15px;
 margin-top: 20px;
 margin-bottom: 40px;
}

/* De Tegel */
.province-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 text-align: center;
 
 background-color: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 padding: 20px 10px;
 
 text-decoration: none;
 color: var(--pico-color);
 
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Hover Effect: De kaart komt omhoog */
.province-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 15px rgba(0,0,0,0.1);
 border-color: var(--orangeMainColor);
 text-decoration: none;
}

/* Icoon cirkel */
.province-icon {
 background-color: var(--navBarColor); /* Zacht groen */
 width: 70px;
 height: 70px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 15px;
 transition: background-color 0.2s;
}

.province-card:hover .province-icon {
 background-color: #fff;
}

.province-icon img {
 width: 48px;
 height: 48px;
 object-fit: contain;
}

/* Provincie naam */
.province-name {
 font-weight: 700;
 font-size: 1rem;
 text-transform: capitalize;
 margin-bottom: 15px;
 display: block;
}

/* Nep button */
.fake-btn {
 display: inline-block;
 padding: 6px 12px;
 font-size: 0.75rem;
 color: var(--pico-primary-inverse);
 background-color: var(--greenMainColor);
 border-radius: 50px;
 font-weight: 600;
 transition: background-color 0.2s;
 white-space: nowrap;
}

.province-card:hover .fake-btn {
 background-color: var(--orangeMainColor);
 color: #000;
}

/* --- Genomineerden Grid (Stem Pagina) --- */

.nominees-grid {
 display: grid;
 /* Mobiel: 1 kolom voor maximale impact van de foto's */
 /* Wil je er 2 naast elkaar op mobiel? Gebruik dan 1fr 1fr */
 grid-template-columns: 1fr; 
 gap: 20px;
 margin-top: 20px;
 margin-bottom: 40px;
}

.nominee-card {
 display: flex;
 flex-direction: column;
 background-color: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 text-decoration: none;
 color: var(--pico-color);
 overflow: hidden; /* Zodat foto niet buiten de bocht vliegt bij zoom */
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.nominee-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.15);
 border-color: var(--orangeMainColor);
 text-decoration: none;
}

/* Afbeelding container */
.nominee-image {
 position: relative;
 width: 100%;
 /* Aspect ratio vastzetten voorkomt verspringen */
 aspect-ratio: 4 / 3; 
 overflow: hidden;
 background-color: #eee;
}

.nominee-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.4s ease;
}

.nominee-card:hover .nominee-image img {
 transform: scale(1.05); /* Subtiele zoom bij hover */
}

/* Content (Tekst + Knop) */
.nominee-content {
 padding: 15px;
 display: flex;
 flex-direction: column;
 align-items: center; /* Centreren */
 justify-content: space-between;
 flex-grow: 1; /* Zorgt dat kaarten even lang lijken */
 text-align: center;
 gap: 15px;
}

.nominee-title {
 font-size: 1.1rem;
 font-weight: 700;
 margin: 0;
 line-height: 1.3;
}

/* De 'Stem Nu' Knop */
.vote-button {
 background-color: var(--orangeMainColor);
 color: var(--u-text-on-orange); /* Zwart (#000) volgens je variabelen */
 font-weight: 800;
 text-transform: uppercase;
 font-size: 0.9rem;
 padding: 10px 20px;
 border-radius: 50px;
 display: inline-flex;
 align-items: center;
 gap: 5px;
 transition: background-color 0.2s, transform 0.2s;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.nominee-card:hover .vote-button {
 background-color: #ffaa3d; /* Iets lichter oranje */
 transform: scale(1.05);
}

.fluid-container {
 display: grid;
}
.fluid-container #ptXL {
 grid-column: 1 !important;
 grid-row: none;
}


/* --- Dashboard & Statistieken --- */

.stats-dashboard {
 display: grid;
 /* Mobiel: Alles onder elkaar met ruimte ertussen */
 grid-template-columns: 1fr; 
 gap: 20px;
 margin-bottom: 30px;
 width: 100%;
}

.stat-card {
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 padding: 20px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 font-size: 0.9rem;
 line-height: 1.5;
}

.stat-card strong {
 display: block;
 font-size: 1.1rem;
 margin-bottom: 10px;
 color: var(--greenMainColorShade);
 border-bottom: 2px solid var(--orangeMainColor);
 padding-bottom: 5px;
}

/* Desktop Grid layout */
@media (min-width: 992px) {
 .stats-dashboard {
  /* De verdeling 40% - 30% - 30% vertaald naar Grid 'fractions' */
  grid-template-columns: 4fr 3fr 3fr; 
  gap: 30px;
 }
}

/* --- Bezoekers Lijst (Log view) --- */

/* Maak de container wat rustiger */
.listview {
 border-bottom: 1px solid var(--pico-muted-border-color);
 transition: background-color 0.2s;
}

.listview:hover {
 background-color: var(--navBarColor); /* Zacht groen bij hover */
}

.list-content {
 padding: 12px 15px;
 font-size: 0.9rem;
 line-height: 1.6;
 color: var(--pico-color);
 word-wrap: break-word; /* Voorkom dat lange URLS de layout breken */
}

/* Linkjes in de lijst */
.list-content a {
 color: var(--greenMainColor);
 text-decoration: none;
 font-weight: 600;
}
.list-content a:hover {
 text-decoration: underline;
}

/* --- Tags / Badges in de lijst (vervanging van inline styles) --- */

/* Basis stijl voor alle tags */
.log-tag, 
.list-content span[style] { /* Vangt ook de oude inline styles af als fallback */
 display: inline-block;
 padding: 2px 8px !important;
 border-radius: 4px;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 margin: 0 2px;
 
 /* Standaard reset van de harde kleuren uit de oude HTML */
 color: #fff !important; 
 background-color: #555 !important;
}

/* Specifieke kleuren (als je classes toevoegt in de HTML generator) */
.log-tag.blue { background-color: var(--blueMainColor) !important; color: #000 !important; }
.log-tag.green { background-color: var(--greenMainColor) !important; }
.log-tag.orange { background-color: var(--orangeMainColor) !important; color: #000 !important; }

/* Als je de inline styles NIET verwijdert, forceert deze CSS ze naar een moderne look: */
.list-content span[style*="background-color:#000"] {
 background-color: var(--pico-secondary-background) !important;
 color: var(--pico-color) !important;
 border: 1px solid var(--pico-muted-border-color);
}

/* --- Explorer Pagina (Rubrieken) --- */
.rubrieken-container {
 width: 100%;
 max-width: var(--max-width-content);
 margin: 0 auto;
 padding: 0 15px;
 grid-column: 2;
 order: 3;
 overflow: visible !important;
 position: relative;
}

/* 1. Smart Search Box */
.explorer-search-box {
 background-color: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 padding: 20px;
 margin-bottom: 30px;
 box-shadow: var(--pico-card-box-shadow);
}

.search-intro .lead {
 text-align: center;
 margin-bottom: 20px;
 font-weight: 600;
}

.search-grid {
 display: grid;
 grid-template-columns: 1fr; /* Mobiel: onder elkaar */
 gap: 15px;
}

.input-group {
 position: relative;
 display: flex;
 flex-direction: column;
 width: 100%;
}

.input-group label {
 font-size: 0.85rem;
 font-weight: 700;
 margin-bottom: 5px;
 color: var(--greenMainColorShade);
}

.input-group label i {
 margin-right: 5px;
 color: var(--orangeMainColor);
}

.input-group input,
.input-group select {
 width: 100%;
 padding: 12px;
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 4px;
 font-size: 1rem;
}

.input-group button.cta-button {
 width: 100%;
 margin: 0;
}

/* --- Geoptimaliseerde Wis-knop (X) --- */
/* --- Fix voor de Wis-knop (X) centrering --- */

.input-wrapper {
 position: relative;
 width: 100%;
 /* Zorg dat de wrapper alleen de hoogte van de input box aanneemt */
 display: flex;
}

.input-wrapper input {
 /* CRUCIAAL: Verwijder de marge die de wrapper 'stretcht' */
 margin-bottom: 0 !important; 
 padding-right: 44px !important; /* Ruimte voor de X */
}

.clear-input-btn {
 position: absolute;
 right: 4px;
 top: 0;
 /* De knop wordt nu exact even hoog als het invoerveld zelf */
 height: 100%; 
 width: 40px;
 
 display: none; /* Wordt 'flex' via JS */
 align-items: center;
 justify-content: center;
 
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 margin: 0 !important;
 color: var(--pico-muted-color) !important;
 cursor: pointer;
 z-index: 10;
}

.clear-input-btn i,
.clear-input-btn .material-icons {
 font-size: 24px !important;
 /* Voorkom dat de tekst-line-height de verticale uitlijning verstoort */
 line-height: 0 !important; 
 display: block;
}

/* Fix voor dark mode contrast */
[data-theme=dark] .clear-input-btn {
 color: var(--pico-muted-color) !important;
}


/* --- Autocomplete Dropdown --- */
.autocomplete-dropdown {
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-top: none;
 z-index: 1000;
 max-height: 350px;
 overflow-y: auto;
 overflow-x: hidden;
 display: none;
 box-shadow: 0 8px 16px rgba(0,0,0,0.15);
 border-radius: 0 0 8px 8px;
}

.autocomplete-dropdown::-webkit-scrollbar {
 width: 8px;
}
.autocomplete-dropdown::-webkit-scrollbar-thumb {
 background: var(--pico-muted-border-color);
 border-radius: 4px;
}

.autocomplete-dropdown div {
 padding: 12px 15px;
 cursor: pointer;
 border-bottom: 1px solid var(--pico-muted-border-color);
 color: var(--pico-color); /* Gebruik thema-tekstkleur */
 font-size: 0.95rem;
 transition: background-color 0.1s;
}

/* Hover met de muis */
.autocomplete-dropdown div:hover {
 background-color: var(--navBarColor);
 color: var(--greenMainColorShade);
}

/* Toetsenbord focus (Pijltjestoetsen) */
.autocomplete-dropdown div.selected {
 background-color: var(--greenMainColor);
 color: #ffffff !important;
}

/* Dark mode specifieke tweak als de tekst onleesbaar blijft */
:host(:not([data-theme=light])) .autocomplete-dropdown div:hover,
:root:not([data-theme=light]) .autocomplete-dropdown div:hover, 
[data-theme=dark] .autocomplete-dropdown div:hover {
 color: #ffffff;
 background-color: var(--greenMainColorShade);
}


/* 2. Visual Categories */
.category-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* Mobiel: 3 op een rij (kleintjes) */
 gap: 10px;
 margin-bottom: 30px;
}

.cat-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-decoration: none;
 color: var(--pico-color);
 padding: 10px;
 background: var(--pico-card-sectioning-background-color);
 border-radius: 8px;
 transition: transform 0.2s;
 text-align: center;
}

.cat-card:hover {
 transform: translateY(-3px);
 background: #fff;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 text-decoration: none;
}

.cat-icon {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 8px;
 color: #fff;
 font-size: 24px;
}

.cat-card span {
 font-size: 0.8rem;
 font-weight: 600;
}

/* 3. Theme Grid */
.theme-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin-bottom: 30px;
}

.theme-card {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 15px;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 8px;
 text-decoration: none;
 color: var(--pico-color);
 font-weight: 600;
 font-size: 0.9rem;
}

.theme-card:hover {
 border-color: var(--orangeMainColor);
 color: var(--orangeMainColor);
 text-decoration: none;
}

.city-index summary {
 cursor: pointer;
 color: var(--greenMainColor);
 font-weight: 700;
 margin-bottom: 10px;
}
.city-columns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 5px;
 font-size: 0.8rem;
}
.city-columns a {
 color: var(--pico-muted-color);
 text-decoration: none;
}
.city-columns a:hover {
 text-decoration: underline;
}

/* --- Context Filter Chips --- */
.search-context-selector {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
 justify-content: center; /* Centreren staat mooi boven de balk */
}

.context-chip {
 cursor: pointer;
 position: relative;
}

/* Verberg de echte radio button */
.context-chip input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

/* De stijl van de chip */
.context-chip span {
 display: inline-block;
 padding: 8px 16px;
 background-color: var(--pico-card-background-color); /* Wit/Grijs */
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 50px; /* Pil-vorm */
 font-size: 0.9rem;
 font-weight: 600;
 color: var(--pico-muted-color);
 transition: all 0.2s ease;
 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Hover state */
.context-chip:hover span {
 border-color: var(--greenMainColor);
 color: var(--greenMainColor);
}

/* Checked state (De actieve filter) */
.context-chip input[type="radio"]:checked + span {
 background-color: var(--greenMainColor);
 color: #fff;
 border-color: var(--greenMainColor);
 box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Focus state voor toegankelijkheid */
.context-chip input[type="radio"]:focus + span {
 outline: 2px solid var(--orangeMainColor);
 outline-offset: 2px;
}

/* Zorg dat deze blokken netjes binnen de container vallen */
.visual-categories,
.theme-block {
 width: 100%;
 max-width: var(--max-width-content);
 margin: 0 auto 30px auto;
 padding: 0 15px; /* Belangrijk: Padding links/rechts op mobiel! */
 box-sizing: border-box;
}

/* Volgorde op mobiel: Search -> Visuals -> Themes */
.explorer-search-box { order: 1; }
.visual-categories   { order: 2; }
.theme-block   { order: 3; }

/* Thema blok header styling */
.theme-block header h2 {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 15px;
 color: var(--greenMainColorShade);
}


/* =========================================
 * WAT TE DOEN / EDITORIAL PAGINA (UX2026)
 * ========================================= */
.editorial-container {
 grid-column: 2;
 order: 3;
 width: 100%;
 max-width: var(--max-width-content);
 margin: 0 auto;
 padding: 0 15px;
 overflow: visible !important;
}

/* 1. Time Planner Navigation (Chips) */
.time-planner-nav {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 justify-content: center;
 margin-top: 40px;
 margin-bottom: 40px;
}

.plan-chip {
 padding: 10px 20px;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 50px;
 text-decoration: none;
 color: var(--pico-color);
 font-weight: 700;
 font-size: 0.9rem;
 transition: all 0.2s ease;
 box-shadow: var(--pico-card-box-shadow);
}

.plan-chip.active {
 background: var(--greenMainColor);
 color: #fff !important;
 border-color: var(--greenMainColor);
}

.plan-chip.highlight {
 border-color: var(--orangeMainColor);
 color: var(--orangeMainColorShade);
}

.plan-chip:hover {
 background: var(--navBarColor);
 transform: translateY(-2px);
}

/* 2. Hero Section (Het grote uithangbord) */
.editor-hero {
 margin-bottom: 50px;
}

.hero-card {
 display: grid;
 grid-template-columns: 1fr;
 background: var(--pico-card-background-color);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 text-decoration: none !important;
 color: var(--pico-color);
 transition: transform 0.3s ease;
}

.hero-card:hover {
 transform: translateY(-5px);
}

.hero-image { 
 position: relative; 
 height: 300px; 
 width: 100%;
}

.hero-image img { 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 display: block;
}

.hero-badge { 
 position: absolute; 
 top: 20px; 
 left: 20px; 
 background: var(--orangeMainColor); 
 color: #000 !important; 
 font-weight: 800; 
 padding: 6px 14px; 
 border-radius: 4px; 
 text-transform: uppercase;
 font-size: 0.75rem;
 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-content { padding: 30px; }
.hero-content h2 { color: var(--greenMainColorShade); margin-bottom: 15px; font-size: 1.8rem; line-height: 1.2; }
.hero-content p { font-size: 1rem; color: var(--pico-muted-color); margin-bottom: 25px; line-height: 1.6; }
.hero-content .read-more { color: var(--greenMainColor); font-weight: 800; text-transform: uppercase; font-size: 0.9rem; }


/* 3. Sectie Headers (Tussen de grids) */
.section-header {
 margin-bottom: 25px;
 border-bottom: 2px solid var(--navBarColor);
 padding-bottom: 10px;
 width: 100%;
}

.section-header h2 {
 font-size: 1.4rem;
 color: var(--greenMainColorShade);
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0;
}

.section-header h2 i {
 color: var(--orangeMainColor);
}

/* 4. Editorial Grid & Cards */
.editorial-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 25px;
 margin-bottom: 50px;
}

.edit-card {
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 12px;
 overflow: hidden;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 display: flex;
}

.edit-card a { 
 text-decoration: none !important; 
 color: inherit !important; 
 display: flex; 
 flex-direction: column; 
 height: 100%; 
 width: 100%;
}

.edit-card:hover { 
 transform: translateY(-8px); 
 box-shadow: 0 12px 24px rgba(0,0,0,0.12); 
 border-color: var(--greenMainColor);
}

.card-img { position: relative; height: 200px; flex-shrink: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-img .label { 
 position: absolute; 
 bottom: 12px; 
 left: 12px; 
 background: var(--greenMainColor); 
 color: #fff; 
 font-size: 0.7rem; 
 padding: 4px 10px; 
 border-radius: 4px; 
 font-weight: 700; 
 text-transform: uppercase; 
}

.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.3; color: var(--greenMainColorShade); }
.card-body p { font-size: 0.9rem; color: var(--pico-color); line-height: 1.5; margin-bottom: 0; }

/* 5. Auteur Badges */
.author-tag {
 font-size: 0.75rem;
 color: var(--pico-muted-color);
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 gap: 6px;
}

.author-tag strong { color: var(--greenMainColorShade); }

.author-tag::before { 
 content: 'edit'; 
 font-family: 'Material Icons'; 
 font-size: 1rem; 
 color: var(--orangeMainColor); 
}

/* 6. Toegankelijke Winactie Card */
.edit-card.winactie {
 background-color: var(--orangeMainColor);
 border: none;
}

.edit-card.winactie .card-body {
 align-items: center;
 text-align: center;
 padding: 35px 25px;
 color: #000 !important;
}

.win-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.win-header i { font-size: 3rem; color: #000; }
.win-label { text-transform: uppercase; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; }

.edit-card.winactie h3 { color: #000 !important; font-weight: 900; margin-bottom: 12px; font-size: 1.4rem; }
.edit-card.winactie p { color: #000 !important; font-weight: 600; margin-bottom: 25px; opacity: 0.9; }

.cta-fake-btn {
 background-color: #000;
 color: #fff !important;
 padding: 12px 30px;
 border-radius: 50px;
 font-weight: 800;
 text-transform: uppercase;
 font-size: 0.85rem;
 margin-top: auto;
 box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 display: inline-block;
 text-decoration: none;
}

:host(:not([data-theme=light])) .edit-card.winactie, 
:root:not([data-theme=light]) .edit-card.winactie, 
[data-theme=dark] .edit-card.winactie { background-color: var(--orangeMainColor); }

:host(:not([data-theme=light])) .edit-card.winactie, 
:root:not([data-theme=light]) .edit-card.winactie, 
[data-theme=dark] .edit-card.winactie * { color: #000 !important; }

:host(:not([data-theme=light])) .card-body h3,
:root:not([data-theme=light]) .card-body h3,
[data-theme=dark] .card-body h3 { color: var(--greenMainColor); }


/* --- City Index Index Page (UX2026) --- */

.city-index-container {
 grid-column: 2;
 order: 3;
 width: 100%;
 max-width: var(--max-width-content);
 margin: 0 auto;
 padding: 0 15px 50px 15px;
}

.index-letter-section {
 display: flex;
 flex-direction: column;
 margin-bottom: 40px;
 position: relative;
}

/* De grote letter aan de zijkant of bovenkant */
.sticky-letter {
 position: sticky;
 top: var(--total-sticky-offset);
 background-color: var(--greenMainColor);
 color: #fff;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 8px;
 font-weight: 900;
 font-size: 1.5rem;
 z-index: 10;
 margin-bottom: 15px;
 box-shadow: var(--pico-card-box-shadow);
}

/* Het grid voor de links */
.city-grid {
 display: grid;
 grid-template-columns: 1fr; /* Mobiel: 1 kolom */
 gap: 8px;
 width: 100%;
}

.city-link {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 16px;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 8px;
 text-decoration: none !important;
 color: var(--pico-color);
 transition: all 0.2s ease;
}

.city-link:hover {
 border-color: var(--greenMainColor);
 background-color: var(--navBarColor);
 transform: translateX(5px);
}

.city-name {
 font-weight: 600;
 font-size: 0.95rem;
}

.city-count {
 font-size: 0.75rem;
 color: var(--pico-muted-color);
 background: var(--pico-card-sectioning-background-color);
 padding: 2px 8px;
 border-radius: 4px;
}

/* Highlight voor steden met veel uitjes (bv > 15) */
.city-link.highlight {
 border-left: 4px solid var(--orangeMainColor);
}

.city-link.highlight .city-name {
 color: var(--greenMainColorShade);
}

/* Dark Mode Overrides */
:host(:not([data-theme=light])) .city-link:hover,
:root:not([data-theme=light]) .city-link:hover,
[data-theme=dark] .city-link:hover {
 background-color: var(--greenMainColorShade);
 color: #fff !important;
}

/* --- Alphabet Jump Nav (Correctie voor In-Page placement) --- */

.alphabet-nav {
 position: sticky;
 /* Plakt onder de site-header */
 top: var(--header-height); 
 /* Dwing de navigatie in de middelste grid-kolom op desktop */
 grid-column: 2; 
 
 background: var(--pico-background-color);
 z-index: 100;
 padding: 15px 0;
 margin-bottom: 20px;
 border-bottom: 1px solid var(--pico-muted-border-color);
 width: 100%;
 /* Zorg dat de navigatie niet buiten de containerbreedte breekt */
 max-width: var(--max-width-content);
 margin-left: auto;
 margin-right: auto;
}

.alphabet-scroll {
 display: flex;
 /* Op mobiel links uitlijnen voor swipe, op desktop centreren */
 justify-content: flex-start;
 gap: 6px;
 overflow-x: auto;
 white-space: nowrap;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 padding: 2px 0;
}

.alphabet-scroll::-webkit-scrollbar {
 display: none;
}

.alphabet-scroll a {
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 34px;
 height: 34px;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: 8px;
 text-decoration: none !important;
 color: var(--pico-color);
 font-weight: 700;
 font-size: 0.9rem;
 transition: all 0.2s ease;
}

.alphabet-scroll a:hover {
 background: var(--orangeMainColor);
 color: #000 !important;
 border-color: var(--orangeMainColor);
 transform: translateY(-2px);
}


/* Aria-help: Als de input ervoor focus heeft of je hovert erover, 
 * klap dan de hulptekst uit die er direct achter staat (+) 
 */
/* --- Verbeterde Helptekst Leesbaarheid --- */
.input-help-text {
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 z-index: 90;
 
 /* Contrastrijkere kleuren: Lichtgrijze achtergrond met donkere tekst */
 background-color: #f8f9fa; 
 color: #333333; 
 
 font-size: 0.8rem;
 line-height: 1.4;
 border: 1px solid var(--pico-muted-border-color);
 border-left: 4px solid var(--orangeMainColor); /* Oranje accent behouden */
 border-radius: 0 0 4px 4px;
 
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 transition: all 0.2s ease-in-out;
 pointer-events: none;
 box-sizing: border-box;
}

/* Dark Mode correctie voor helptekst */
:host(:not([data-theme=light])) .input-help-text, 
:root:not([data-theme=light]) .input-help-text,
[data-theme=dark] .input-help-text {
 background-color: #1a1a1a;
 color: #eeeeee;
 border-color: #333;
}


/* =========================================
 * MAIN SITE FOOTER (UX2026)
 * ========================================= */
/* =========================================
 * MAIN SITE FOOTER (UX2026 - Fixed Structure)
 * ========================================= */

#main-site-footer {
 display: block; /* Gewoon een blok onder de grid */
 width: 100%;
 background-color: var(--pico-card-sectioning-background-color);
 border-top: 1px solid var(--pico-muted-border-color);
 margin-top: 0; /* Sluit direct aan */
 padding-bottom: calc(var(--bottom-nav-height) + 20px); /* Ruimte voor mobiele nav */
 position: relative;
 z-index: 10;
}

/* Advertentie container */
.footer-ad-container {
 padding: 20px 15px;
 text-align: center;
 border-bottom: 1px solid var(--pico-muted-border-color);
 background-color: var(--pico-background-color);
}

/* Inhoud centreren */
.footer-content {
 padding: 30px 15px;
 max-width: var(--max-width-content); /* Lijn uit met de rest van de site */
 margin: 0 auto;
 width: 100%;
}

/* Het Grid met de grote knoppen */
.footer-nav-grid {
 display: grid;
 grid-template-columns: 1fr 1fr; /* Mobiel: 2 kolommen */
 gap: 15px;
 margin-bottom: 30px;
}

.footer-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 15px;
 background: var(--pico-card-background-color);
 border: 1px solid var(--pico-muted-border-color);
 border-radius: var(--pico-border-radius);
 text-decoration: none;
 color: var(--pico-color);
 transition: all 0.2s ease;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.footer-card i {
 font-size: 24px;
 color: var(--greenMainColor);
 margin-bottom: 8px;
}

.footer-card span {
 font-size: 0.9rem;
 font-weight: 600;
}

.footer-card:hover {
 transform: translateY(-3px);
 border-color: var(--greenMainColor);
 color: var(--greenMainColorShade);
 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Branding */
.footer-branding {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 15px;
 text-align: center;
 color: var(--pico-muted-color);
}

.footer-branding img { opacity: 0.8; }
.legal-text p { margin: 0 0 5px 0; font-size: 0.85rem; font-weight: 600; }
.legal-links { font-size: 0.8rem; }
.legal-links a { color: var(--pico-muted-color); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; color: var(--pico-color); }

/* Dark Mode */
:host(:not([data-theme=light])) .footer-card, 
:root:not([data-theme=light]) .footer-card,
[data-theme=dark] .footer-card {
 background-color: var(--pico-background-color);
}

/* Activeren */
.input-wrapper:focus-within + .input-help-text,
.input-wrapper:hover + .input-help-text,
input:focus + .input-help-text,
input:hover + .input-help-text,
select:focus + .input-help-text,
select:hover + .input-help-text,
.input-help-text:hover {
 max-height: 120px; /* Iets meer ruimte voor tekst */
 opacity: 1;
 padding: 10px 15px;
 margin-top: 2px;
 margin-bottom: 10px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 pointer-events: auto;
}



@keyframes fadeInUp {
 from {
  opacity: 0;
  transform: translateY(-10px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes sweep {
 0% {opacity: 0; transform: translateY(-5px)}
 100% {opacity: 1; transform: translateY(0)}
}


@media screen and (min-width: 768px) {
 .carousel-item {
  flex: 0 0 calc(90% - 12px);
 }

 .arrow-left, .arrow-right {
  display: flex; 
  align-items: center;
  justify-content: center;
 }

 .arrow-left {
  left: 10px; /* Klein beetje afstand van de rand */
 }

 .arrow-right {
  right: 10px;
 }
  
 /* Hover effectje voor de klikbaarheid */
 .arrow-left:hover, .arrow-right:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
 }

 .button-icon.whatsapp {
  display: none;
 }
 .button-icon.mailto {
  display: flex;
 }

 #filterLayer .grid {
   grid-template-columns: 1fr;
   gap: 0.5rem;
 }

 .article-meta {
  padding-right: 20px; /* Iets meer lucht rechts */
 }
 
 .author-details {
  flex-direction: row;
  align-items: center;
  gap: 10px;
 }
 
 /* Scheidingslijn tussen Info en Datums op desktop */
 .author-info::after {
  content: "•";
  color: var(--pico-muted-border-color);
  margin-left: 5px;
 }

 .practical-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }

 .sub-ratings-grid {
  grid-template-columns: 1fr 1fr; /* 2 kolommen op desktop */
 }
 
 .review-card {
  padding: 25px; /* Meer lucht */
 }

 .review-header {
  display: grid;
  /* Kolom 1: Neemt alle ruimte (Titel/Score) | Kolom 2: Past zich aan inhoud aan (Datum) */
  grid-template-columns: 1fr auto; 
  /* Rij 1: Titel | Rij 2: Score */
  grid-template-rows: auto auto;
  
  column-gap: 30px; /* Veilige afstand tussen tekst en datum */
  row-gap: 8px;  /* Ruimte tussen titel en score */
  align-items: start;
  
  /* Reset oude flex eigenschappen */
  flex-direction: unset;
  justify-content: unset;
  gap: unset; /* We gebruiken nu column/row-gap */
 }

 /* 1. Titel: Links Boven */
 .review-title-group {
  grid-column: 1;
  grid-row: 1;
 }
 .review-title-group h3 {
  font-size: 1.4rem;
  margin: 0;
 }

 /* 2. Score: Links Onder (onder de titel) */
 .review-score-visual {
  grid-column: 1;
  grid-row: 2;
 }

 /* 3. Datums: Rechts (over de hele hoogte) */
 .review-meta-top {
  grid-column: 2;
  grid-row: 1 / span 2; /* Span over 2 rijen zodat hij mooi rechts blijft staan */
  
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Rechts uitlijnen */
  text-align: right;
  
  /* Zorg dat de datum nooit geplet wordt door een lange titel */
  min-width: max-content; 
  
  /* Reset mobiele styles */
  border-top: none;
  padding-top: 0;
  gap: 5px;
 }
 
 /* Subscores layout (ongewijzigd, maar voor volledigheid) */
 .review-subscores {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 30px;
  padding: 20px;
 }

 .artikel nav.urls { margin-top: 40px; }
 .artikel nav.urls h3 { font-size: 1.1rem; margin-bottom: 15px; }
 
 .artikel nav.urls ul {
  /* Vanaf tablet: automatisch meerdere kolommen */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
 }
 
 .artikel nav.urls li a { padding: 15px; }
 
 .artikel nav.urls li a:hover {
  transform: translateY(-3px);
  border-color: var(--orangeMainColor);
  color: var(--orangeMainColor);
 }

 .artikel blockquote {
  font-size: 1.4rem;
  margin: 30px 0;
  padding: 20px 30px;
  border-left-width: 5px;
 }
 .artikel blockquote::before {
  font-size: 4rem;
  left: 10px;
 }

 .city-grid {
  grid-template-columns: repeat(2, 1fr);
 }

}

@media (min-width: 992px) {
 /* 1. Variabelen overschrijven voor desktop */
 :root {
  --header-height: var(--header-height-desktop);
  --header-top-bar-height: var(--header-top-bar-height-desktop);
  --logo-height: var(--logo-height-desktop);
  --bottom-nav-height: var(--bottom-nav-height-desktop);
 }

/* 2. Grid Layout & Content Centrering */
 .dwContainer {
  display: grid !important;
  grid-template-columns: 1fr minmax(300px, var(--max-width-content)) 1fr !important;
  gap: 0 40px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  position: relative;
 }
 #dagje-weg-content { display: contents !important; }
 #mobileFilterToggle { display: none; }

 /* 3. HEADER, LOGO & TOOLS */
 #main-site-header {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
order: unset;

  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important; 
  height: var(--header-height) !important;
  z-index: 1100 !important; 
  background: var(--pico-background-color); 

  position: sticky !important;
  top: 0 !important;
 }

#dagjeweg-content,
.cmsoverlay,
#filterLayer {
 grid-row-start 2 !important;
}
.cmsoverlay {
 display: initial;
}

 /* Hogere z-index + background zodat zoekbalk erachter verdwijnt */
 #main-site-header .header-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 40px;
  position: relative !important;
  width: 100% !important;
  max-width: var(--max-width-content) !important;
  margin: 0 auto !important;
  padding: 0 10px !important;
  height: 100%;
  z-index: 1101 !important; 
  background: var(--pico-background-color); 
 }

 .logo img {
  max-height: var(--logo-height);
  padding: 5px 0; 
 }
 .logo { margin-right: 0 !important; }

 .header-tools {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 20px;
  justify-content: flex-start !important;
  z-index: auto !important;
 }
 .tool-label { font-size: 10px; display: block !important; }

 /* Op desktop mag de hoogte 'auto' zijn of meebewegen met de header */
 .header-tools .tool-icon {
  height: auto; 
 }

 #rubriekFilter {
  width: 95%;
 }

 .nav-tooltip {
  bottom: auto; /* Reset mobiel */
  margin-bottom: 0;
  
  top: 100%; /* Onder de knop */
  margin-top: 15px; /* Afstand tot icoon */
  
  /* START ANIMATIE DESKTOP: Iets hoger beginnen */
  transform: translateX(-50%) translateY(-10px);
 }

 /* PIJLTJE DESKTOP: Bovenaan de tooltip, wijst naar boven */
 .nav-tooltip::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #333 transparent;
 }

 /* INTERACTIE DESKTOP */
 .tool-icon:hover .nav-tooltip,
 .tool-icon:focus .nav-tooltip,
 .tool-icon:focus-within .nav-tooltip {
  transform: translateX(-50%) translateY(0);
 }

 /* --- RANDGEVALLEN DESKTOP (Reset mobiele transforms) --- */
 
 .header-tools .tool-icon:first-child .nav-tooltip {
  transform: translateX(0) translateY(-10px);
 }
 .header-tools .tool-icon:first-child:hover .nav-tooltip {
  transform: translateX(0) translateY(0);
 }

 .header-tools .tool-icon:last-child .nav-tooltip {
  transform: translateX(0) translateY(-10px);
 }
 .header-tools .tool-icon:last-child:hover .nav-tooltip {
  transform: translateX(0) translateY(0);
 }

 .header-tools {
  gap: 20px !important;
  justify-content: flex-start !important;
 }


 /* 4. ZOEKBALK (Site) - Schuift ONDER de header vandaan */
 .search-overlay {
  position: absolute !important;
  top: 100% !important; 
  left: 50% !important;
  transform: translate(-50%, -100%) !important; /* Verstop achter header */
  width: 100% !important;
  max-width: var(--max-width-content) !important;
  border-top: none !important;
  border-bottom: 2px solid var(--orangeMainColor) !important;
  background: var(--pico-background-color);
  z-index: 900 !important; 
  transition: transform 0.3s ease-in-out !important;
  bottom: auto !important;
  animation: none !important; 
  border-radius: 0 0 5px 5px;
 }
 .search-overlay.is-open {
  transform: translate(-50%, 0) !important; /* Schuif naar beneden */
 }

 /* 5. BROODPAD (Rechts) */
 #bp.breadcrumb-scroll {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: none !important;
  width: auto !important;
  max-width: 60% !important;
  background: transparent !important;
  border: none !important;
  z-index: 1200;
  display: flex !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  /*white-space: nowrap !important;*/
 }
 #bp.breadcrumb-scroll ul {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 10px;
  flex-direction: row !important; 
  margin-left: auto !important;
 }

 /* 6. MENU RUBRIEKEN (Desktop Fix) */
 #menuLayer { 
  width: 400px !important; 
  border-right: 1px solid var(--pico-muted-border-color); 
  border-top: none !important;
  /* Gebruikt nu de correct berekende JS variabele */
  top: var(--header-height) !important; 
  left: max(0px, calc(50% - 1040px)) !important;
  
  /* Flex kolom is noodzakelijk voor de scroll-structuur */
  display: flex !important;
  flex-direction: column !important;
 }

 #menuLayer.is-open { 
  /* Hoogte is viewport min header */
  height: calc(100vh - var(--header-height)) !important; 
  bottom: auto !important; 
  overflow: hidden !important; /* Container zelf scrollt niet */
 }
 #menuLayer:not(.is-open) { display: none !important; }

 /* De bak met lijstjes */
 #menuLayer .menu-content {
  display: block !important;
  padding: 0 15px 20px 15px !important; 

  flex: 1 !important;  /* Vul resterende ruimte */
  overflow-y: auto !important; /* Scrollbalk HIER tonen */
  min-height: 0 !important;  /* CRUCIAAL: Voorkomt uitrekken container */
  
  /* Padding voor de lijstjes, maar niet voor de sticky header (zie hieronder) */
  position: relative !important;
 }

 /* Het zoekveld in het menu (Desktop: Terug naar boven) */
 .menu-filter-wrapper {
  order: 0 !important;

  /* RESET MOBIELE STIJLEN */
  position: sticky !important;
  top: 0 !important;
  bottom: auto !important; /* Laat de onderkant los! */

  z-index: 20 !important;
  background: var(--pico-background-color) !important;
  
  /* Desktop styling (negatieve marges voor padding compensatie) */
  margin: 0 -15px 10px -15px !important; 
  padding: 15px 0 10px 15px !important;

  border-bottom: 1px solid var(--pico-muted-border-color);
  border-top: none !important;
  width: auto;
 }

 .cmsoverlay {
  order: 0 !important;
  grid-column: 3 !important;
  grid-row: 1 / span 30 !important;
  justify-self: end !important;
  max-width: 400px !important;
  min-width: 100px !important;
  width: 100% !important;

  position: sticky !important;
  top: calc(var(--header-height) + 20px) !important;
  margin-bottom: 0 !important;
  align-self: start !important;
  z-index: 10 !important;

  max-height: calc(100vh - var(--header-height) - 40px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;

 }
 .cmsoverlay .panel-content {
  max-height: initial !important;
  font-size: 0.8rem;
 }

 #uitgelicht {
  grid-row: 4;
 }

 #filterLayer {
  order: 0 !important;
  grid-column: 1 !important;
  grid-row: 2 / span 30 !important;
  justify-self: end !important; 
  width: 100% !important;
  max-width: 400px !important;
  min-width: 250px;

  position: sticky !important;
  top: calc(var(--header-height) + 20px);
  margin-bottom: 0 !important;
  align-self: start !important;
  z-index: 10;

  display: block !important;
  visibility: visible !important;

  max-height: calc(100vh - var(--header-height) - 40px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
 }

 #filterLayer article {
  display: block !important; /* Overschrijf display:none van mobiel */
  opacity: 1 !important;  /* Overschrijf opacity:0 van mobiel */
  visibility: visible !important;
  margin-top: 0 !important;  /* Reset eventuele animatie-marges */
  transition: none !important;  /* Geen animaties op desktop */
  background: transparent !important; /* Of de kleur die je wenst */
  border: none !important;   /* Of 1px solid als je een randje wilt */
 }
 
 /* Verberg de <details> logica van mobiel niet, maar zorg dat ze open staan of normaal ogen */
 #filterLayer details {
  display: block !important;
 }

 /* 8. CONTENT KOLOM (Midden) */
 #ptXL, h1, .carousel-wrapper, #filterSummaryBar, .sticky-bar, .searchResults {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: var(--max-width-content) !important;
  margin-left: auto !important; margin-right: auto !important;
 }

 #ptXL, h1 { order: 2 !important; }
 #ptXL h2 { order: 3; }
 .carousel-wrapper { order: 1 !important; }
 .sticky-bar { top: initial; padding: initial; order: 4 !important; }
 #filterSummaryBar { order: 3 !important; position: sticky !important; top: var(--header-height) !important; z-index: 100; margin-bottom: 10px !important; }
 
 .searchResults {
  order: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
  gap: 10px !important;
  grid-auto-flow: dense !important;
 }
 .searchResults > header.header {
  grid-column: 1 / -1 !important; grid-row: 1 !important; order: -1 !important;
 }

 .result-card footer a[role="button"] {
  flex: 0 0 100%; /* Forceert 100% breedte binnen de flex-container */
  width: 100%; /* Zorgt dat de knop daadwerkelijk uitrekt */
  margin-bottom: 10px;  /* Ruimte tussen de knop en de icoontjes eronder */
  text-align: center;   /* Tekst netjes centreren */
  justify-content: center; /* Zorgt dat de inhoud van de knop in het midden staat */
  order: -1;   /* Zeker weten dat hij als eerste staat */
 }

 .result-card.ad { 
  grid-column: span 2;
  /*padding-left: 13px;
  padding-right: 12px;*/
 }
 .result-card.ad:has(ins.adsbygoogle) {
   grid-column: span 1;
 }
 aside.result-card .cntsteunad picture img {
  width: 610px;
  height: 650px;
 }

 #cl {
  grid-column: 2 !important; /* Dwing in de middelste kolom */
  width: 100%;
  max-width: var(--max-width-content);
  margin: 20px auto !important; /* Centreren en ruimte */
  padding: 0 !important;
 }

 .pagination {
  grid-column: 1 / -1 !important; /* Forceer over de hele breedte */
  width: 100%;
 }

 /* Zorg dat de bovenste pagination direct na de hoofd-header komt */
 .pagination-top {
  order: -1 !important; /* Net als de hoofd-header, maar in HTML erna */
  margin-bottom: 20px;
 }
  
 /* Zorg dat de onderste pagination helemaal onderaan komt */
 .pagination-bottom {
  order: 999 !important; /* Hoog nummer dwingt hem naar het einde */
  margin-top: 40px;
 }

 /* --- Tip Detailpagina Layout --- */
 .tip-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2/3 voor content, 1/3 voor sidebar */
  gap: 40px;
  align-items: start; /* Belangrijk voor sticky sidebar */
  max-width: var(--max-width-content);
 }
 .tip-content {
  grid-column: 1;
  grid-row: 1;
 }
 .tip-content #ptXL {
  margin-top: 0 !important;
  margin-bottom: 20px;
  padding-top: 0 !important;
 }

 /* Sticky Sidebar */
 .tip-sidebar {
  grid-column: 2;
  grid-row: 1 / span 3;

  position: sticky;
  top: calc(var(--header-height) + 10px);
  z-index: 10;

  max-height: calc(100vh - var(--header-height) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
 }

 .practical-info-grid {
  grid-column: 1;
  grid-row: 2;

  /* GEBRUIK KOLOMMEN IPV GRID VOOR MASONRY EFFECT */
  display: block; 
  column-count: 2; /* Verdeel in 2 krant-kolommen */
  column-gap: 20px;
  width: 100%;
 }

  /* ZORG DAT KAARTJES NIET BREKEN */
 .practical-info-grid .card,
 .practical-info-grid .ad-container {
  display: inline-block; /* Nodig voor column-count */
  width: 100%;
  margin-bottom: 20px; /* Ruimte onder elk blokje */
  break-inside: avoid; /* Voorkom dat een kaartje in tweeën wordt geknipt */
  page-break-inside: avoid;
 }

 .review-section {
  grid-column: 1;
  grid-row: 3;
 }

 /* Carousel op desktop iets compacter binnen de kolom */
 .tip-carousel { margin-bottom: 30px; }
 .tip-carousel .carousel-item {
  flex: 0 0 100% !important;
  width: 100%;
 }

 .tip-carousel .carousel-container {
  gap: 0;
  padding-right: 0;
 }

 .tip-carousel .carousel-item img {
  height: 450px;
 }

 #geoSearchForm button[type=submit] {
  bottom: 0;
 }

 .nav-indicator {
  display: flex; /* Nu pas tonen */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 100px;
  background: rgba(255, 255, 255, 0.8);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: opacity 0.3s, width 0.3s;
  opacity: 0.3;
  text-decoration: none; /* Belangrijk omdat het <a> tags zijn */
 }

 .nav-indicator:hover {
  opacity: 1;
  background: #fff;
  width: 60px;
 }

 .nav-indicator.prev {
  left: 0;
  border-radius: 0 50px 50px 0;
 }

 .nav-indicator.next {
  right: 0;
  border-radius: 50px 0 0 50px;
 }

 .nav-indicator i {
  font-size: 2rem;
  color: var(--orangeMainColor);
 }

 .prijsvragen-grid {
  grid-template-columns: repeat(3, 1fr);
 }

 .prijsvragen-container,
 .prijsvraag-detail-container {
  grid-column: 2 !important; 
  
  width: 100% !important;
  max-width: var(--max-width-content) !important;
  margin-left: auto !important; 
  margin-right: auto !important;
  
  order: 3 !important; 
 }

 .cta-button.large {
  display: block !important;
 }

 .artikel p#introduction,
 .artikel p#bdy,
 .artikel p.bdy2,
 .artikel h2 {
  padding: 0;
 }

 .artikel .article-meta .author-details {
  flex-direction: row; 
  align-items: center;
  text-align: center;
  flex-wrap: nowrap;
 }
 
 .author-info .meta-divider {
  display: inline-block !important; 
  margin: 0 8px; 
  color: var(--pico-muted-border-color);
 }

 .agenda-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
 }
 
 .calendar-card {
  flex: 0 0 140px; /* Iets breder op desktop */
 }

/* --- Awards Pagina Desktop --- */
 
 .awards-container {
  /* Plaats in de middelste kolom van de .dwContainer */
  grid-column: 2 !important;
  
  width: 100% !important;
  max-width: var(--max-width-content) !important;
  
  /* Centreren en ruimte */
  margin-left: auto !important; 
  margin-right: auto !important;
  padding: 0 !important; /* Grid regelt de witruimte al */
  
  display: block; /* Grid is hier niet nodig op container zelf, de child (.award-grid) is grid */
 }
 
 .award-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
 }
 
 .province-icon {
  width: 80px;
  height: 80px;
 }
 
 .province-icon img {
  width: 56px;
  height: 56px;
 }
 
 .province-name {
  font-size: 1.1rem;
 }
 
 .fake-btn {
  font-size: 0.85rem;
 }

 .nominees-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
 }

 .search-grid {
  grid-template-columns: 2fr 2fr 1fr;
  align-items: end;
 }
 
 .category-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
 }
 
 .theme-grid {
  grid-template-columns: repeat(3, 1fr);
 }
 
 .city-columns {
  grid-template-columns: repeat(4, 1fr);
 }

 .age-badge {
  font-size: 0.75rem;
 }

 .search-context-selector {
  align-items: center; /* Lijn label en chips verticaal uit */
  justify-content: center;
 }

 .context-label {
  width: auto; /* Label mag nu naast de chips staan */
  margin-bottom: 0;
  margin-right: 15px; /* Ruimte tussen label en eerste chip */
 }

 .hero-card { grid-template-columns: 1.6fr 1fr; height: 450px; }
 .hero-image { height: 100%; }
 .hero-content { display: flex; flex-direction: column; justify-content: center; padding: 50px; }

 .time-planner-nav {
  justify-content: flex-start !important;
  margin-top: 50px;
  margin-bottom: 50px;
 }

 .editor-hero {
  animation: fadeIn 0.8s ease-in-out;
 }

 .master-index-links {
  margin-top: 10px;
 }


 .index-letter-section {
  flex-direction: row;
  gap: 30px;
 }

 .sticky-letter {
  flex-shrink: 0;
  top: calc(var(--header-height) + 20px);
 }

 .city-grid {
  grid-template-columns: repeat(4, 1fr); /* 4 kolommen op desktop */
 }

 .alphabet-scroll {
  justify-content: center; /* Alles netjes in het midden op breed scherm */
  gap: 8px;
 }
 
 .alphabet-scroll a {
  min-width: 40px;
  height: 40px;
  font-size: 1rem;
 }

 .sticky-action-bar {
  position: static !important; /* Terug in de flow van de sidebar */
  background: var(--pico-card-background-color) !important;
  padding: 15px !important;
  border-radius: var(--pico-border-radius) !important;
  border: 1px solid var(--pico-muted-border-color) !important;
  box-shadow: var(--pico-card-box-shadow) !important;
  margin-bottom: 20px !important;
  width: auto !important;
 }

 .sticky-action-bar header {
  display: block !important;
 }

 .sticky-action-bar .action-grid {
  flex-direction: column !important;
  overflow-x: visible;
  gap: 8px !important;
 }

 .sticky-action-bar .action-grid .button {
  flex-direction: row !important; /* Icoon naast tekst */
  text-align: left !important;
  justify-content: flex-start !important;
  font-size: 0.85rem !important;
  text-transform: none;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--pico-muted-border-color) !important;
  width: 100% !important;
 }

 .tip-container {
  margin-top: 0 !important; /* Geen offset nodig op desktop */
 }

.type-badge {
  font-size: 0.6rem;
  padding: 3px 8px;
  bottom: 10px;
 }
 
 .category-badge { right: 8px; }
 .main-badge { left: 8px; }

 /* Detailpagina carousel mag wel groot blijven */
 .tip-carousel .type-badge {
  font-size: 0.75rem;
  padding: 5px 12px;
  bottom: 75px !important;
  display: inline-flex !important; /* Altijd tonen op detail */
 }

 #main-site-footer {
  padding-bottom: 40px; /* Geen bottom-nav op desktop */
  margin-top: 40px;
 }

 .footer-nav-grid {
  grid-template-columns: repeat(4, 1fr); /* 4 knoppen naast elkaar */
 }

 .footer-branding {
  flex-direction: row;
  justify-content: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--pico-muted-border-color);
 }
 
 .legal-text { text-align: left; }

}