/**
 * conex Website - main.css
 * @author Thomas Jirasko <technik@bugfree-systems.de>
 * @package sitepackage/Resources/Public/Css
 * @created 2026-08-10
 * @updated 2026-10-04 by Thomas Jirasko
 */

/* --- Browser CSS reset --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100.01%;font-family:inherit;}
img{vertical-align:bottom;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;text-shadow:none;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}

:root {
	--color-link:#f78e1e;
	--color-text:#77787b;
	--color-highlight:dimgrey;
	--color-orange:#f78e1e;
	--color-nav:dimgray;
	--color-nav-act:#f78e1e;
	--color-lightgrey:#f8f8f8;
}

html{scroll-behavior:smooth;}

/* --- Typography --- */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(../webfonts/lato-v17-latin-regular.eot);
	src: local(''), url(../webfonts/lato-v17-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */ url(../webfonts/lato-v17-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */ url(../webfonts/lato-v17-latin-regular.woff) format('woff'), /* Modern Browsers */ url(../webfonts/lato-v17-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */ url(../webfonts/lato-v17-latin-regular.svg#Lato) format('svg');
}
#main a{display:inline-block;position:relative;color:var(--color-link);text-decoration:none;}
#main p > a:after,
#main li > a:after,
#main h5 > a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform 0.3s ease;}

#main h5 > a{padding-left:16px;}
#main h5 > a:before{content:"\00AB";display:block;margin-left:-25px;font-size:29px;height:30px;width:23px;position:absolute;margin-left:-20px;font-size:30px;top:-1px;}

#main h5 > a:after{transform-origin:right;}
#main p > a:hover:after,
#main li > a:hover:after,
#main h5 > a:hover:after{text-decoration:none;transform:scaleX(1);}

body{background:#FFF;font-family:Lato,sans-serif;font-size:1em;line-height:1.5em;font-weight:400;color:var(--color-text);}
body *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-ms-hyphens:none;}

#main h1{color:var(--color-highlight);font-size:2.8rem;line-height:1.3em;margin-bottom:25px;word-wrap:break-word;}
#main h2{color:var(--color-highlight);font-size:2.2rem;line-height:1.25em;margin-bottom:25px;letter-spacing:1px;word-wrap:break-word;}
#main h3{color:var(--color-highlight);font-size:1.85rem;line-height:1.25em;margin-bottom:10px;word-wrap:break-word;}
#main h4{color:var(--color-highlight);font-size:.7rem;line-height:1.25em;margin:7px 0 0 0;word-wrap:break-word;}
#main h5{color:var(--color-highlight);font-size:1.5rem;line-height:1.25em;margin-bottom:10px;word-wrap:break-word;}

#main p + h2{margin-top:35px;}
#main p + h3{margin-top:30px;}

#main .text-right{text-align:right;}
#main .text-center{text-align:center;}

#main .frame p,
#main .frame ul,
#main .frame ol{font-size:1.55em;line-height:1.5em;margin-bottom:15px;word-wrap:break-word;}

#main .frame p.text-tiny{font-size:.75rem;line-height:1.3em;margin-bottom:10px;}
#main .frame p.text-small{font-size:1.2rem;line-height:1.4em;margin-bottom:12px;}
#main .frame p.text-big{font-size:1.8rem;margin-bottom:25px;}
#main .frame p.text-huge{font-size:2.1rem;margin-bottom:35px;}

#main ul li,
#main ol li{padding-left:35px;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAxMkgxOE0xOCAxMkwxMyA3TTE4IDEyTDEzIDE3IiBzdHJva2U9IiNmNzhlMWUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=='); background-repeat:no-repeat;background-position:left 2px;background-size:35px 35px;}

/* --- Table --- */
figure.table{margin:1rem 0 3rem 0;}

/* --- Font styling --- */
.color-orange,
header.color-orange > h1,
header.color-orange > h2,
header.color-orange > h3{color:var(--color-orange) !important;}
.text-uppercase{text-transform:uppercase;}

/* --- Space --- */
.frame-space-before-extra-small { margin-top: 1em; }
.frame-space-before-small { margin-top: 2em; }
.frame-space-before-medium { margin-top: 3em; }
.frame-space-before-large { margin-top: 4.5em; }
.frame-space-before-extra-large { margin-top: 6em; }
.frame-space-after-extra-small { margin-bottom: 1em; }
.frame-space-after-small { margin-bottom: 2em; }
.frame-space-after-medium { margin-bottom: 3em; }
.frame-space-after-large { margin-bottom: 4.5em; }
.frame-space-after-extra-large { margin-bottom: 6em; }

/* --- Layout --- */
#header .inner, #footer .inner{max-width:1240px;margin:0 auto;padding:0 40px;}

/* --- Header --- */
#header{position:sticky;top:0;z-index:1000;background:#fff;transition:line-height 0.3s ease;}
#header.sticky{box-shadow:0 0 2px 2px rgb(0 0 0 / .1);}
#header .inner{display:flex;justify-content:flex-start;align-items:stretch;}
#header .inner .logo{padding:0;width:200px;margin-left:auto;}
#header .inner .logo a{line-height:80px;-webkit-transition:line-height 0.3s ease;}
#header .inner .logo img{width:100%;height:auto;}

/* --- Mainnav --- */
div.mainnav{flex:0 0 auto;z-index:1010;}
div.mainnav nav{display:block;height:100%;}
div.mainnav nav > ul{display:flex;align-items:center;height:100%;}
div.mainnav nav > ul > li{flex:0 0 auto;display:flex;font-size:16px;line-height:80px;transition:line-height 0.3s ease;-webkit-transition:line-height 0.3s ease;}
div.mainnav nav > ul > li > a{display:block;padding:10px 15px;text-decoration:none;color:var(--color-nav);}
div.mainnav nav > ul > li > a + span.subitems_trigger{display:none;}
div.mainnav nav > ul > li.active > a,
div.mainnav nav > ul > li > a:hover{color:var(--color-nav-act);}
div.mainnav nav > ul > li:first-child > a{padding-left:0;}
@media only screen and (min-width:1000px) {
	#header.sticky .inner .logo a{line-height:60px;}	
	div.mainnav nav > ul > li > ul{display:none;position:absolute;z-index:1020;min-width:170px;padding:25px;background:#fff;color:var(--color-nav);box-shadow:0 5px 12px rgba(0, 0, 0, .15);}
	#header.sticky div.mainnav nav > ul > li{position:relative;line-height:50px;}
	#header.sticky div.mainnav nav > ul > li.hasSub:hover > ul{top:57px;}
	div.mainnav nav > ul > li.hasSub:hover > ul{display:block;top:77px;line-height:1.8em;}
	div.mainnav nav > ul > li.hasSub > ul > li{position:relative;}
	div.mainnav nav > ul > li.hasSub > ul > li > a{display:block;height:100%;text-decoration:none;color:var(--color-nav);}
	div.mainnav nav > ul > li.hasSub > ul > li > a > span{position:relative;display:inline-block;}
	div.mainnav nav > ul > li.hasSub > ul > li.active > a{color:var(--color-nav-act);}
	div.mainnav nav > ul > li.hasSub > ul > li:hover > a{color:var(--color-nav-act);}
	div.mainnav nav > ul > li.hasSub:hover > ul > li > a > span:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--color-nav-act);transform:scaleX(0);transform-origin:center;transition:transform 0.3s ease;}
	div.mainnav nav > ul > li.hasSub:hover > ul > li:hover > a > span:after {transform:scaleX(1);}
}
div.mainnav .smartmenu-close{display:none;}
div.mobilenav-trigger{display:none;}

/* --- Socialmedianav --- */
div.socialmedianav ul{display:flex;justify-content:flex-start;align-items:center;height:100%;}
div.socialmedianav ul > li{flex:0 0 auto;display:flex;font-size:16px;line-height:16px;}
div.socialmedianav ul > li.social.xing{border-left:1px solid #ccc;margin-left:20px;}
div.socialmedianav ul > li.social a{padding:10px 10px;color:var(--color-nav);}
div.socialmedianav ul > li.social a:hover{color:var(--color-nav-act);}
div.socialmedianav ul > li.social.xing{padding-left:10px;}

/* --- Footer --- */
#footer{display:flow-root;background-color:var(--color-orange);color:#fff;padding:65px 0;font-size:.85em;}
#footer a{color:#fff;text-decoration:none;}
#footer a:hover{color:#f3f3f3;}
#footer div.row{display:flex;flex-wrap:wrap;gap:4%;}
#footer div.row .column.one-half{flex:0 0 46%;}
#footer div.row .column.one-fourth{flex:0 0 23%;}
#footer h4{font-size:1.45em;margin-bottom:25px;line-height:1.3;color:#fff;word-wrap:break-word;}
#footer .column.navigation{margin-top:15px;}
#footer .column.navigation ul li{display:inline-block;}
#footer .column.navigation ul li:after{content:"|";padding:0 5px;}
#footer .column.navigation ul li:last-child:after{content:"";}

a.top-link{position:fixed;display:block;opacity:0;width:43px !important;height:43px !important;line-height:23px;padding:10px;box-shadow:0 0 2px #aaa;border-radius:50%;font-size:20px;right:15px;z-index:10005;bottom:15px;text-align:center;background:#fff;transition:All 0.3 ease;-webkit-transition:All 0.3s ease;text-decoration:none;}
a.top-link:before{content:"\f077";display:inline-block;color:var(--color-text);font-family:var(--fa-family-classic);font-size:100%;font-weight:600;font-style:normal;}
a.top-link:hover{opacity:1;background:#fff;}
a.top-link.is-visible{opacity:.7;}

@media only screen and (min-width:768px) and (max-width:999px) {

	/* --- Mainnav --- */
	div.mainnav .smartmenu-close{display:block;position:absolute;right:40px;top:40px;width:35px;height:35px;cursor:pointer;}
	div.mainnav .smartmenu-close:before,
	div.mainnav .smartmenu-close:after{display:inline-block;width:35px;height:1px;background:#fff;content:'';transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
	div.mainnav .smartmenu-close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);margin-left:-35px;}
}
@media only screen and (max-width:999px) {

	/* --- Typography --- */
	#main h1{font-size:1.7rem;margin-bottom:14px}
	#main h2{font-size:1.6rem;margin-bottom:10px;}
	#main h3{font-size:1.4rem;font-weight:600;margin-bottom:10px;}
	#main h5{font-size:1.1rem;margin-bottom:10px}

	#main .frame p,
	#main .frame ul,
	#main .frame ol{font-size:1.3em;line-height:1.45em;}

	#main .frame p.text-tiny{font-size:.7rem;}
	#main .frame p.text-small{font-size:1.1rem;}
	#main .frame p.text-big{font-size:1.6rem;}
	#main .frame p.text-huge{font-size:1.9rem;}

	#main h5 > a{padding-left:15px;}
	#main h5 > a:before{margin-left:-16px;font-size:25px;height:25px;width:23px;top:-1px;}

	#main ul li,
	#main ol li{padding-left:32px;background-position:left 0;background-size:32px 32px;}

	/* --- Space --- */
	.frame-space-before-extra-small { margin-top: 0.75em; }
	.frame-space-before-small { margin-top: 1.75em; }
	.frame-space-before-medium { margin-top: 2.5em; }
	.frame-space-before-large { margin-top: 3.5em; }
	.frame-space-before-extra-large { margin-top: 4em; }
	.frame-space-after-extra-small { margin-bottom: 0.75em; }
	.frame-space-after-small { margin-bottom: 1.75em; }
	.frame-space-after-medium { margin-bottom: 2.5em; }
	.frame-space-after-large { margin-bottom: 4em; }
	.frame-space-after-extra-large { margin-bottom: 5em; }

	/* --- Heaer --- */
	#header .inner{height:70px;}
	#header .inner .logo a{line-height:60px;}

	/* --- Mainnav --- */
	div.mainnav{display:none;position:fixed;z-index:1010;height:100%;width:100%;background:rgb(24,24,24);color:#fff;left:0;top:0;}
	div.mainnav nav{display:flex;justify-content:center;align-items:center;}
	div.mainnav nav > ul{display:block;height:auto;margin:0 auto;}
	div.mainnav nav > ul > li{display:block;text-align:center;padding:0;font-size:1.7rem;line-height:2rem;font-weight:400;padding:.5rem;text-transform:uppercase;}
	div.mainnav nav > ul > li > a{display:inline-block;padding:0 10px;color:#fff;}
	div.mainnav nav > ul > li > a + span.subitems_trigger{display:inline-block;cursor:pointer;}
	div.mainnav nav > ul > li > a + span.subitems_trigger:before{content:'[+]';color:rgb(255 255 255 / .8);}
	div.mainnav nav > ul > li.hasSub.open > a + span.subitems_trigger:before{content:'[-]';}
	div.mainnav nav > ul > li > ul{position:relative;min-width:0;padding:0;background:transparent;color:#fff;box-shadow:none;}
	div.mainnav nav > ul > li.hasSub > ul{display:none;top:0;line-height:1.8em;margin-top:7px;}
	div.mainnav nav > ul > li.hasSub > ul > li{font-size:1.2rem;line-height:2.2rem;text-transform:none;}	
	div.mainnav nav > ul > li.hasSub > ul > li > a{text-decoration:none;color:#fff;}
	div.mainnav nav > ul > li.hasSub > ul > li:hover > a{color:var(--color-text);}
	div.mainnav nav > ul > li.hasSub > ul > li.active > a{color:var(--color-nav-act);}

	/* --- Mobilenav trigger --- */
	div.mobilenav-trigger{display:block;height:100%;width:35px;position:relative;z-index:1001;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;cursor:pointer;}
	div.mobilenav-trigger span.line{height:1px;background:#393939;width:35px;position:absolute;display:block;top:50%;}
	div.mobilenav-trigger span.line:before,
	div.mobilenav-trigger span.line:after{display:inline-block;width:35px;height:1px;background:#393939;position:absolute;left:0;content:'';top:50%;margin-top:-13px;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;}
	div.mobilenav-trigger span.line:before{margin-top:11px;}

}
@media only screen and (max-width:767px) {

	/* --- Typography --- */
	#main h1{font-size:1.5rem;margin-bottom:12px}
	#main h2{font-size:1.45rem;}
	#main h3{font-size:1.45rem;}
	#main h5{font-size:1.1rem;margin-bottom:8px;}

	#main p + h2{margin-top:30px;}
	#main p + h3{margin-top:25px;}

	#main .frame p,
	#main .frame ul,
	#main .frame ol{font-size:1.2em;}

	#main .frame p.text-small{font-size:1rem;}
	#main .frame p.text-big{font-size:1.5rem;}
	#main .frame p.text-huge{font-size:1.8rem;}

	#main ul li,
	#main ol li{padding-left:30px;background-position:left 0;background-size:30px 30px;}

	/* --- Space --- */
	.frame-space-before-extra-small { margin-top: 0.6em; }
	.frame-space-before-small { margin-top: 1.5em; }
	.frame-space-before-medium { margin-top: 2.25em; }
	.frame-space-before-large { margin-top: 3.25em; }
	.frame-space-before-extra-large { margin-top: 3.75em; }
	.frame-space-after-extra-small { margin-bottom: 0.6em; }
	.frame-space-after-small { margin-bottom: 1.5em; }
	.frame-space-after-medium { margin-bottom: 2.25em; }
	.frame-space-after-large { margin-bottom: 3.75em; }
	.frame-space-after-extra-large { margin-bottom: 4.5em; }

	/* --- Header --- */
	#header .inner{padding:0 20px;}

	/* --- Mainnav --- */
	div.mainnav{backface-visibility:hidden;display:block;overflow-x:hidden;position:fixed;z-index:1000;top:0;left:-300px;height:100vh;min-height:100vh;width:300px;background:#fff;color:#555;overflow-y:auto;-webkit-overflow-scrolling:touch;/* mobile safari*/} 
	div.mainnav nav{align-items:normal;padding-top:87px;}
	div.mainnav nav > ul > li{font-size:1.3rem;line-height:1.5rem;padding:.5rem;text-transform:none;transition:line-height 0.3s ease;}
	div.mainnav nav > ul > li > a{padding:0 10px;color:#555;}
	div.mainnav nav > ul > li.active > a{font-weight:600;}
	div.mainnav nav > ul > li > a + span.subitems_trigger{display:inline-block;cursor:pointer;}
	div.mainnav nav > ul > li > a + span.subitems_trigger:before{content:"\f107";color:var(--color-nav);font-family:var(--fa-family-classic);font-size:80%;font-weight:600;font-style:normal;}
	div.mainnav nav > ul > li.hasSub.open > a + span.subitems_trigger:before{content:"\f106";}
	div.mainnav nav > ul > li.active > a + span.subitems_trigger:before{color:var(--color-nav-act);font-weight:900;}
	div.mainnav nav > ul > li > ul{position:relative;min-width:0;padding:0;background:transparent;box-shadow:none;}
	div.mainnav nav > ul > li.hasSub > ul{display:none;top:0;line-height:1.8em;}
	div.mainnav nav > ul > li.hasSub > ul > li{font-size:1rem;line-height:1.8rem;text-transform:none;}	
	div.mainnav nav > ul > li.hasSub > ul > li > a{text-decoration:none;color:#555;}
	div.mainnav nav > ul > li.hasSub > ul > li:hover > a{color:var(--color-nav-act);}
	div.mainnav nav > ul > li.hasSub > ul > li.active > a{color:var(--color-nav-act);}

	/* --- Mobilenav trigger --- */
	div.mobilenav-trigger{z-index:1001;width:25px;height:70px;}
	div.mobilenav-trigger span.line{height:2px;background:var(--color-nav-act);width:25px;}
	div.mobilenav-trigger.close span.line{height:0;}
	div.mobilenav-trigger span.line:before,
	div.mobilenav-trigger span.line:after{width:25px;height:2px;background:var(--color-nav-act);top:50%;margin-top:-10px;}
	div.mobilenav-trigger.close span.line:before,
	div.mobilenav-trigger.close span.line:after{-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-top:0;}
	div.mobilenav-trigger.close span.line:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
	div.mobilenav-trigger span.line:before{margin-top:7px;}
	div.mobilenav-trigger.close span.line:after{margin-top:0px;}

	/* --- Footer --- */
	#footer .inner{padding:0 20px;}
	#footer div.row .column{margin-bottom:35px;}
	#footer div.row .column:last-child{margin-bottom:0;}
	#footer div.row .column.one-half{flex:0 0 100%;}
	#footer div.row .column.one-fourth{flex:0 0 100%;}
	#footer .column.navigation ul li:last-child{margin-top:25px;}
}

@media only screen and (max-width:499px) {
	
	/* --- Typography --- */
	#main h1{font-size:1.6rem;}
	#main h2{font-size:1.4rem;}
	#main h3{font-size:1.1rem;}
	#main h5{font-size:1rem;}

	#main .frame p,
	#main .frame ul,
	#main .frame ol{font-size:1em;}

	#main ul li,
	#main ol li{padding-left:27px;background-position:left 0;background-size:27px 27px;}

	/* --- Space --- */
	.frame-space-before-extra-small { margin-top: 0.5em; }
	.frame-space-before-small { margin-top: 1.25em; }
	.frame-space-before-medium { margin-top: 2em; }
	.frame-space-before-large { margin-top: 3em; }
	.frame-space-before-extra-large { margin-top: 3.25em; }
	.frame-space-after-extra-small { margin-bottom: 0.5em; }
	.frame-space-after-small { margin-bottom: 1.25em; }
	.frame-space-after-medium { margin-bottom: 2em; }
	.frame-space-after-large { margin-bottom: 3em; }
	.frame-space-after-extra-large { margin-bottom: 3.25em; }
}