/* ------------------------------------------------ */
/* PAGE BACKGROUND */
/* ------------------------------------------------ */

body{
   background:linear-gradient(
    180deg,
    #8b0000 0%,
    #800000 40%,
    #6f0000 100%
  );
  margin:0;
}

#websitevak{
  max-width:1154px;
  margin:25px auto;
  background:transparent;
  border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
}

/* ------------------------------------------------ */
/* TYPOGRAPHY */
/* ------------------------------------------------ */

td{
  font:11px Arial;
  color:#333333;
}

a{
  font-weight:bold;
  color:#cc0000;
  text-decoration:none;
}

a:hover{
  color:#990000;
  text-decoration:underline;
}


/* ------------------------------------------------ */
/* HEADER */
/* ------------------------------------------------ */

.header{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:10px;
  background:#800000;
}

.title{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.logo{
  font:bold 24px Georgia, serif;
  color:#FFFF00;
  letter-spacing:0.15em;
}

.subtitle{
  font:22px Georgia, serif;
  color:#f5d080;
}


/* ------------------------------------------------ */
/* HERO */
/* ------------------------------------------------ */

.hero{
  width:100%;
  height:220px;
  overflow:hidden;
  background:#800000;
}

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

/* ------------------------------------------------ */
/* NAVIGATION */
/* ------------------------------------------------ */

#navigation{
  background:#a4c2c2;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  justify-content:flex-start;
}

#navigation a{
  padding:10px 14px;
  background:#a4c2c2;
  color:#336666;
}

#navigation a:hover{
  background:#8fb3b3;
}

#navigation a.active{
  background:white;
  color:#cc0000;
}

#navigation{
  row-gap:4px;
}

.menuButton{
  display:none;
  background:#a4c2c2;
  padding:10px;
  font:14px Arial;
  cursor:pointer;
}

#menuToggle{
  display:none;
}
/* ------------------------------------------------ */
/* MAIN LAYOUT */
/* ------------------------------------------------ */

.mainLayout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 300px;
  align-items:start;
}

/* ------------------------------------------------ */
/* SIDEBAR */
/* ------------------------------------------------ */

.sidebar{
  background:#a4c2c2;
  padding:18px;
  border-radius:4px;
  height:auto;
}

.sidebarText{
  font:13px/18px Georgia;
  font-weight:bold;
  color:#336666;
}

.facebookIcon{
  width:25px;
  margin-bottom:10px;
}

.sidebarBlock{
  display:flex;
  flex-direction:column;
  gap:20px;   /* controls ALL spacing */
  margin-top:20px;
}

.toltLogo{
  width:120px;   /* adjust to taste (100–130) */
}

.bottomLogos{
  display:flex;
  gap:20px;
  align-items:center;
  background:#800000;
  padding:10px;
  border-radius:6px;
}

.bottomLogos a:first-child img{
  width:80px;   /* VIT */
}

.bottomLogos a:last-child img{
  width:70px;    /* Midgard */
}

/* ------------------------------------------------ */
/* CONTENT */
/* ------------------------------------------------ */

.content{
  background:white;
  padding:20px;
  border-radius:4px;
}

.bodyText{
  font:15px/24px Arial;
  color:#333333;
}

.pageName{
  font:20px/26px Georgia;
  color:#cc3300;
  letter-spacing:0.1em;
}

.subHeader{
  font:bold 14px/20px Georgia;
  color:#669999;
  letter-spacing:0.1em;
}

/* ------------------------------------------------ */
/* RIGHT COLUMN */
/* ------------------------------------------------ */

.right{
  background:white;
  padding:20px;
  border-radius:4px;
}

.right img{
  display:block;
  margin-bottom:20px;
  max-width:260px;
  width:100%;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

/* ------------------------------------------------ */
/* BOTTOM ROW BUIENRADAR */
/* ------------------------------------------------ */

.bottomRow{ 
  display:flex;
  gap:40px;
  margin-top:20px;
  background:transparent;
  align-items:flex-start;
}

.weather{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.weatherMap{
  width:256px;
  height:256px;
  border:0;
}

/* ------------------------------------------------ */
/* IMAGES */
/* ------------------------------------------------ */

img{
  max-width:100%;
  height:auto;
  border-radius:4px;
}

/* ------------------------------------------------ */
/* RESPONSIVE */
/* ------------------------------------------------ */

@media (max-width:900px){

.menuButton{
  display:block;
}

#navigation{
  display:none;
  flex-direction:column;
}

#menuToggle:checked + .menuButton + #navigation{
  display:flex;
}

.mainLayout{
  grid-template-columns:1fr;
}

.right{
  order:3;
}

.sidebar{
  order:2;
}

.content{
  order:1;
}

}