/* ==========================================
   MINIMALE WEBSITEBREEDTE
   ========================================== */
html {
min-width: 340px;
}
  

body {
min-width: 340px;
}
  

.header-logo img {
height: auto;
max-height: 105px;
max-width: 100%;
}
  

/* ==========================================
   THEME VARIABLES
   ========================================== */
:root{
--brand:#518b56;
--bg:#f1f1f1;
--text:#111;
--muted:#666;
--c1:#518b56;
--c2:#9d943a;
--c3:#fefefe;
--gap:3.5px;
--max-width:1200px;
--tile-min:330px;
--radius:3px;
--font-family: "Roboto", sans-serif;
--fs: clamp(14px, 1.2vw, 15px);
--lh:1.45;
--tr:.22s;
}
  

/* ==========================================
   BASE
   ========================================== */
*, ::before, ::after { box-sizing:border-box }
  

html {
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
  

html, body { height:100%; margin:0 }
  

body{
font-family: var(--font-family);
font-size: var(--fs);
background: var(--bg);
color: var(--text);
line-height: var(--lh);
-webkit-font-smoothing: antialiased;
font-weight: 350;
}
  

a{
color: inherit;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-style: solid;
text-decoration-color: var(--brand);
text-decoration-thickness: 1px;
}
  

a:hover,
a.tile.info:hover .title,
.tile-link:hover .tile-link-overlay h4,
.tile-link:focus .tile-link-overlay h4,
.tile-static-hover:hover .tile-link-overlay h4 {
text-decoration-style: dotted; text-decoration-thickness: 2px
}
  

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

/* ==========================================
   HEADER & FOOTER
   ========================================== */
.page-inner{
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
  

.site-header{
position: sticky;
top:0;
z-index: 200;
background: var(--bg);
border-bottom: 1px solid #eee;
padding: 14px 0;
}
  

.header-logo img { height:105px; display:block }
  

.site-footer{
position: fixed;
bottom: 10px;
z-index: 200;
color: black;
font-weight: 500;
background: var(--bg);
padding: 7px 18px;
border-radius: 3px;
left: 50%;
transform: translateX(-50%);
}
  

.site-footer nav { display: flex; gap: 1rem }
  

/* ==========================================
   LAYOUT
   ========================================== */
#main-content { padding:20px 0; min-height: calc(100vh - 140px) }
  

.mosaic-row { max-width: var(--max-width); margin:0 auto; padding:0 20px }
  

.mosaic{
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(var(--tile-min),1fr));
}
  

/* Grotere tiles bij volledig scherm */
@media (min-width: 1200px) {
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
}
  

/* ==========================================
   TILE - BASE
   ========================================== */
.tile{
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: #e6e6e6;
aspect-ratio: 1/1;
outline: none;
container-type: inline-size;
}
  

.tile:focus-visible { outline: 3px solid rgba(81,139,86,0.4); outline-offset: 4px }
  

/* ==========================================
   IMAGE TILES
   ========================================== */
.tile img{
width:100%;
height:100%;
object-fit:cover;
transition: transform .25s ease-out;
}
  

@media (prefers-reduced-motion:no-preference){
.tile:hover img { transform: scale(1.03) }
}
  

/* ==========================================
   INFO TILES
   ========================================== */
.tile.info{
padding:24px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
  

.info-1, .info-5 { background: var(--c1); color:#fff }
.info-2 { background: var(--c2); color:#fff }
.info-3 { background: var(--c3); color:#111 }
  

a.tile.info { text-decoration: none }
  

a.tile.info .title{
text-decoration-line: underline;
text-decoration-color: #fff;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
  

.tile.info > .inner{
max-width:340px;
height:100%;
padding:16px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
  

.tile.info .title{
font-weight: 200;
margin:0;
line-height: 1.3;
}
  

.info-3 > .inner{
justify-content:flex-start;
align-items:center;
text-align:left;
padding:12px;
}
  

.info-3 .title{
font-weight:600;
text-transform: uppercase;
letter-spacing:.02em;
margin:0 0 4px;
}
  

.info-3 .desc{
text-align:left;
padding:0 10px;
}
  

.tile.info .desc{ opacity:.95 }
  

.tile.info .desc ul{
list-style: disc;
padding-left: 20px;
margin:0;
text-align:right;
}
  

/* ==========================================
   WHITE TILES
   ========================================== */
.tile-white{
background:#fff;
color: var(--text);
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding:16px;
text-align:left;
cursor: default;
}
  

.tile-white h4{
margin:0 0 12px;
text-align:center;
width:100%;
font-weight:500;
}
  

.tile-white p{ margin:0; line-height:1.4 }
  

/* ==========================================
   QUOTE TILES
   ========================================== */
.tile-quote{
background:#fff;
color: var(--text);
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
padding:32px;
text-align:center;
cursor:default;
}
  

.tile-quote p{ margin:0; font-style: italic; line-height:1.6 }
  

.tile-quote cite{
display:block;
margin-top:16px;
font-size:.9rem;
font-style:normal;
color: var(--muted);
}
  

/* ==========================================
   LINK TILES
   ========================================== */
.tile-link { cursor:pointer }
  

.tile-link-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
height:6%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
transition: opacity var(--tr);
}
  

.tile-link:hover .tile-link-overlay,
.tile-link:focus .tile-link-overlay,
.tile-link-overlay.active { opacity:1 }
  

.tile-link-overlay h4{
margin:0;
font-weight:400;
text-decoration:underline;
text-decoration-color: var(--brand);
text-decoration-style:dotted;
text-decoration-thickness:2px;
text-underline-offset:3px;
}
  

/* ==========================================
   TITLE TILE (afbeelding + permanente onderbalk)
   ========================================== */
.tile.tile-title { cursor: pointer; text-decoration: none }
  

.tile.tile-title .tile-title-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 6%;
background: rgba(157, 148, 58, 0.75);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
  

.tile.tile-title .tile-title-bar h4 {
margin: 0;
font-weight: 300;
text-decoration: underline;
text-decoration-color: var(--brand);
text-decoration-style: solid;
text-decoration-thickness: 0px;
text-underline-offset: 3px;
}
  

.tile.tile-title[target="_blank"] .tile-title-bar h4::after {
content: " \2197";
display: inline-block;
font-size: 0.9em;
opacity: 0.75;
margin-left: 3px;
}
  

.tile.tile-title[target="_blank"]:hover .tile-title-bar h4::after,
.tile.tile-title[target="_blank"]:focus .tile-title-bar h4::after {
transform: translate(2px, -2px);
opacity: 1;
}
  

.tile.tile-title:hover .tile-title-bar h4,
.tile.tile-title:focus .tile-title-bar h4 {
text-decoration-style: dotted;
text-decoration-thickness: 2px;
}
  

@media (max-width: 480px) {
.tile.tile-title .tile-title-bar { padding: 10px }
}
  

.tile.tile-title.tile-no-link { cursor: default }
.tile.tile-title.tile-no-link:hover img,
.tile.tile-title.tile-no-link:focus img { transform: none }
  

/* ==========================================
   STATIC & STATIC HOVER TILES
   ========================================== */
.tile-static, .tile-static-hover{
background:#ddd;
cursor:default;
pointer-events:none;
position:relative;
overflow:hidden;
}
  

.tile-static img, .tile-static-hover img{
object-fit:contain;
padding:0;
}
  

.tile-static a{ display:block; width:100%; height:100%; pointer-events:auto }
  

.tile-static-hover .tile-link-overlay{
opacity:0;
transition: opacity var(--tr);
}
  

.tile-static-hover:hover .tile-link-overlay,
.tile-static-hover .tile-link-overlay.active{ opacity:1 }
  

.tile-static-hover .tile-link-overlay h4{
text-decoration:none;
color: var(--text);
margin:0;
font-weight:400;
font-size:1rem;
}
  

/* ==========================================
   TITLE TILE - FILL (vol vlak, geen onderbalk)
   ========================================== */
.tile.tile-title.tile-title-fill {
cursor: pointer;
text-decoration: none;
}
  

.tile.tile-title.tile-title-fill .tile-title-fill-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: rgba(157, 148, 58, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 18px;
color: #fff;
transition: _background_ var(--tr);
}
  

.tile.tile-title.tile-title-fill:hover .tile-title-fill-overlay,
.tile.tile-title.tile-title-fill:focus .tile-title-fill-overlay {
background: rgba(157, 148, 58, 0.6);
}
  

.tile.tile-title.tile-title-fill .tile-title-fill-overlay h2,
.tile.tile-title.tile-title-fill .tile-title-fill-overlay h3 {
margin: 0;
color: #fff;
text-decoration: none;
font-family: var(--font-family);
text-transform: uppercase;
line-height: 1.05;
letter-spacing: 0.01em;
}
  

.tile.tile-title.tile-title-fill .tile-title-fill-overlay h2 {
font-size: clamp(2.2rem, 2vw, 2.2rem);
font-weight: 175;
}
  

.tile.tile-title.tile-title-fill .tile-title-fill-overlay h3 {
margin-top: 0.35em;
font-size: clamp(1.6rem, 2.0vw, 1.6rem);
font-weight: 450;
letter-spacing: 0.04em;
}
  

.tile.tile-title.tile-title-fill:hover img,
.tile.tile-title.tile-title-fill:focus img { transform: none }
  

@media (max-width: 480px) {
.tile.tile-title.tile-title-fill .tile-title-fill-overlay { padding: 12px }
}
  

/* ==========================================
   INACTIVE & NOIMG
   ========================================== */
.noimg{
background:#ddd;
color:#333;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
padding:6px;
}
  

/* ==========================================
   RESPONSIVE TYPOGRAPHY - container query units
   ========================================== */
.tile.info .title { font-size: clamp(1.2rem, 4cqi, 1.8rem) }
.tile.info .desc { font-size: clamp(0.95rem, 2.5cqi, 1.1rem) }
.tile-white h4,
.tile-quote p { font-size: clamp(0.9rem, 3cqi, 1.2rem) }
  

/* ==========================================
   BREAKPOINTS
   ========================================== */
@media (max-width:900px){
.mosaic-row, .page-inner{
max-width:100%;
padding-inline:16px;
  }
}
  

@media (max-width:480px){
:root { --tile-min: 100% }
}
  

@media (max-width:480px){
.tile-link-overlay{ padding:10px }
}
  

/* ==========================================
   PRINT & REDUCED MOTION
   ========================================== */
@media print{
.site-header, .site-footer, .tile-link-overlay{
position: static;
background:none;
color:#000;
  }
.tile{ break-inside: avoid }
}
  

@media (prefers-reduced-motion:reduce){
*, .tile:hover img{
animation:none;
transition:none;
transform:none;
  }
html{ scroll-behavior:auto }
}
  

/* ==========================================
   360° PANORAMA TILE
   ========================================== */
.tile.tile-pano {
position: relative;
background: #000;
padding: 0;
cursor: grab;
}
.tile.tile-pano.has-bg { background-size: cover; background-position: center;}
  

.tile.tile-pano:active { cursor: grabbing; }
.tile.tile-pano .pano-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.tile.tile-pano .pano-start {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
color: #fff;
text-align: center;
padding: 16px;
cursor: pointer;
transition: opacity .25s ease, _background_ .2s ease;
}
.tile.tile-pano .pano-start:hover { background: rgba(0,0,0,0.55); }
.tile.tile-pano .pano-start.hidden { opacity: 0; pointer-events: none; }
.tile.tile-pano .pano-start svg { width: 56px; height: 56px; margin-bottom: 10px; }
.tile.tile-pano .pano-start span {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.tile.tile-pano .pano-hint {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 0.7rem;
padding: 4px 10px;
border-radius: 12px;
pointer-events: none;
opacity: 0;
transition: opacity .3s ease;
}
.tile.tile-pano .pano-hint.visible { opacity: 1; }
  

/* ==========================================
   CONDITIONELE TEGEL — alleen tonen bij 3 kolommen
   ========================================== */
.tile.info.intro-uitleg {
display: none;
background: #fff;
pointer-events: none;
}
@media (min-width: 1038px) {
.tile.info.intro-uitleg { display: flex; }
}