/* 
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Klantpanel
Landal Greenparks - NL
gebaseerd op Hof van Saksen - Landal
geschreven juli 2023
bewerkt mei 2025
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
*/


/*
1.0
Huisstijl - variabelen
*/

:root {
		--2022-1st: #0097a2; 
		--2022-1st-white: #e5f5f6; /* hue 90% */
		--2022-2nd: #f7931d;
		--2022-3nd: #5b635b;
		--2022-grey: #f6f1de; /* #e5e5e5; hue 85% */
		--2022-grey-light: #fffae9; /*#f5f5f5; hue 95% */
		--2022-grey-dark: #999; /* hue 80% */

		--red: #AA8CAC; /* lila */
		--reddark: #65285F; /* paars */
		--blue: #2A74B5; /* kobalt blauw */
		--green: #B4D9BB; /* mintgroen */
		--greendark: #11594B; /* viridian groen */
		--yellow: #F3942D; /* oranje */

		--banner: url("https://voorbeeld.landalpanel.nl/assets/banner-home.png");
}


/*
1.1
Huisstijl - font
*/
	
		
	h1 {color: var(--2022-1st); font-family: Hatton, arial, sans-serif; font-weight: 400; font-size: 36px; line-height: normal;}
	h2 {color: var(--2022-1st); font-family: Hatton, arial, sans-serif; font-size: 32px; font-weight: 400; line-height: 36px;}
	h3 {color: var(--2022-3nd); font-family: Inter, arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 28px;}
	h4 {color: var(--2022-3nd);}
	h5 {}
	h6 {}






/*
2.0
Structuur - general
*/
body {
	color: var(--2022-3nd);
	font-family: Inter, arial, sans-serif;
	font-size: 0.9em /*12px;*/;
	line-height: normal;
	margin: 0 0 0 0;
	/*text-shadow: 0 1px 0 #ffffff;*/
	}
.page {background-color: var(--2022-grey-light); position: relative;}

.hidden {display: none !important;}
.show {display: inherit !important;}

a, a:hover, a:active, a:focus {color: var(--2022-1st); font-weight: 700; text-decoration: none;}

/*
2.1
Structuur - header
*/
.page-header-top {padding: 1px 3% 0 3%; margin: auto; position: relative; width: 96%; max-width: 1000px;}
.header-top-logo {
	height: auto; max-height: 50px;
    padding: 2% 1% 1% 1%;
	width: auto;
	
	position: absolute; top: 0;
	}
.page-header-top h2 {font-size: 1.17em; width: 100%; text-align: right;}
.page-header-bottom {
    background: var(--2022-grey-light); margin: 1% auto;
	}
.header-menu-img {background: transparent; display: none; height: 25px; padding: 25px; width: 25px; position: absolute; right: 0; top: 0;}
.header-menu {
    color: var(--2022-3nd);
	display: table;
	height: 50px;
	margin: 0 0 0 25%;
    padding: 1%;
	text-align: right;
	width: 73%;
	max-width: 1000px;
	}
.header-banner {
    background-image: var(--banner);
	background-position: center; background-repeat: no-repeat; background-size: cover;
    margin: auto;
	}
    .header-banner, .header-banner-shadow, .header-banner-content {height: 450px; position: relative;}
    .header-banner-shadow {background: rgba(0,0,0,0.3); z-index: 1;}
    .header-banner-content {display: flex; align-items: center; vertical-align: middle;}
    .header-banner-content h1 {color: #ffffff;}
    /*.header-banner svg {position: absolute; left:0; right: 0; z-index: 0;}*/
    /*.header-banner-img {width: 100%;}*/

@media only screen and (max-width: 600px) {
	.header-top-logo {padding: 2%; position: relative; max-width: 125px;}
    .header-banner, .header-banner-shadow, .header-banner-content {height: 450px;}
	
	.header-menu-img {display: inline;}
	.header-menu {display: none; visibility: hidden;}
	.header-menu[class~=show] {display: table !important; padding: 0 0 2% 0; visibility: inherit !important;}
	.header-menu button {width: 50%;}
}


/*
2.2
Structuur - content
*/
.page-content {
	background: transparent;
    border: none;
	height: auto; min-height: 250px; 
	padding: 2% 2%; 
}
.page-content, .header-banner-content {
	margin: 0 auto;
	width: 92%; max-width: 1000px;
	
	position: relative; z-index: 1;
	}
.page-content-box {padding: 1% 0;}

.content-box-alinea {}
.content-box-alinea h2 {margin: 100px auto auto auto; text-align: center;}
.content-box-underline {background: var(--2022-3nd); border: none; height: 1px; width: 100%;}

.action-boxes {display: table;}
.action-boxes, .action-boxes a {color: var(--2022-1st); text-decoration: none;}
.action-box {
	box-shadow: 0 1px 6px 0 transparent;
	border: 3px solid var(--2022-grey);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-weight: bold;
	float: left;
	height: auto; min-height: 85px;
	margin: 2%;
	padding: 2%;
	text-align: center;
	transition: 1s border, 1s box-shadow;
	width: 24%;
	}
.action-box:hover {border: 3px solid transparent; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);}
.action-box:hover, .action-box:hover a {color: var(--2022-1st);}

.toggle-box {display: none; margin: auto auto 10px auto; padding: 2%; }

@media only screen and (max-width: 800px) {
	.action-box {float: none; margin: 2% 15%; width: auto;}
}

	/*
	2.2.1
	Uitleg Panel
	*/
	tr {height: 50px;}
	tr:hover .opsomming, tr:active .opsomming, tr:focus .opsomming {background: var(--2022-3nd)}
	tr:hover td:not(.opsomming), tr:active td:not(.opsomming), tr:focus td:not(.opsomming) {color: var(--2022-2nd);}
	/*
	2.2.2
	Hulp Panel
	*/
	#contactPanel h2 button {position: relative; top: 25px; transform: rotate(15deg);}
	#hulpPanel {display: none;}

/*
2.3
Structuur - footer
*/
.page-footer {	
	background: var(--2022-1st);
	margin: 100px auto auto auto;
	}
.page-footer-box {
    color: #ffffff;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
    text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
	}
.footer-fileblock {
	border-top: 1px solid #ffffff;
	padding: 2% 0;
	margin: 2% auto 0 auto;
	}
.footer-fileblock a {color: #ffffff; font-weight: normal;}






/*
3.1
Attributen - button
*/
.btn, a {cursor: pointer;}
.btn {
	border: none; border-radius: 8px;
	font-family: Inter, arial, sans-serif; font-weight: bold;
	height: 50px;
	padding: 0 2%;
	text-align: center;
	width: auto; min-width: 100px;
	}
.btn-basic-me {
	background: #ffffff;
    box-shadow: 0 1px 6px 0 var(--2022-grey);
    color: var(--2022-2nd);
	}
.btn-toggle {
	background: transparent;
    border-top: 1px solid var(--2022-1st); border-radius: 0;
    color: var(--2022-2nd);
    height: auto;
	text-align: left;
	width: 100%;
	}
    .btn-toggle h3 {color: var(--2022-1st); font-size: 16px; line-height: 24px;}

.btn-basic-me:hover, .btn-basic-me:active, .btn-basic-me:focus {background: var(--2022-1st); color: #ffffff;}
.btn-toggle:hover, .btn-toggle:active, .btn-toggle:focus {}

.header-menu button {
	background: transparent;
    color: var(--2022-3nd);
    display: inline-block;
	font-size: 14px; font-weight: normal;
	padding: 13px 11px;
	}
.header-menu button.btn-inloggen {background: #ec6f02; color: #ffffff;}
.header-menu button:hover {background: var(--2022-grey);}
.header-menu button.btn-inloggen:hover {background: #e75402; color: #ffffff;}


/*
3.2
Attributen - opsommingstekens
*/

.opsomming {
 background: var(--2022-2nd);
 color: #ffffff;
 display: block; display: flex;
 justify-content: space-around;
 transition: 2s background, 1s color;
 
 border-radius: 90px; padding: 9px 13px;
 }