/* VIDEOS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.videos video{width:100%; height:auto; aspect-ratio:16 / 9;}

/* HOME HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_news_btn{position:absolute; top:calc(100vh - 180px); left:60px;}
.home_news_btn a{display:flex; width:100px; height:100px; box-sizing:border-box; background:var(--blue); color:#FFF; border-radius:50%; justify-content:center; align-items:center; position:relative; border:solid 5px #FFF}
.home_news_btn a:hover{background:#000; color:#FFF}
.home_news_btn a:visited{color:#FFF}
.home_news_btn a .text{transform:rotate(-12deg); font-family: 'marketot', sans-serif; font-size:36px}
.home_news_btn a .arrow{position:absolute; right:-55px; top:50%; transform:translateY(-50%) rotate(90deg); font-size:50px; }

@media (max-width: 700px) {
	.home_news_btn{top:calc(100vh - 280px); left:auto; right:60px}
}

.home_hero{width:100%; height:calc(100vh - 130px); background:var(--blue)}
.home_hero > div{width:100%; height:100%; margin:auto; position:relative; background-size: cover; background-position:center bottom}
@media (max-width: 700px) {
	.home_hero{height:calc(100vh - 160px); }
	.home_hero > div{background-position:5% 50%}
}

.e-skill{position:absolute; top:160px; left:20px;}
.e-skill p{margin:0}
.e-skill a{padding:10px; background:#FFF; border-radius:9px; display:inline-block; cursor:pointer}
.e-skill a:hover{background:#000}
.e-skill a img{width:auto; height:30px}
.e-skill a:hover img{filter:brightness(0) invert(1)}

.home_btns{position:absolute; top:220px; left:20px;}
.home_btns ul{list-style-type: none; padding:0; margin:0; display:flex; gap:15px; flex-wrap:wrap; max-width:360px}
.home_btns ul li{width:calc(50% - 7.5px); display:none}
.home_btns ul li:last-child{display:contents}
.home_btns ul li a{display:block; width:100%; height:auto; background:var(--blue); color:#FFF; padding:10px 15px; border-radius:9px; box-sizing:border-box; text-align:center}
.home_btns ul li a:hover{background:#000}
.home_btns ul li a:visited{color:#FFF}

@media (max-width: 700px) {
	.e-skill{top:175px;}
	.home_btns{top:240px;}
	.home_btns ul li:last-child,
	.home_btns ul li{display:block}
	.home_btns ul li a{padding:10px 15px; font-size:16px;}
}
@media (max-width: 400px) {
	.home_btns{margin-right:15px;}
	.home_btns ul li a{padding:5px 0px}
}

.home_nav{position:absolute; top:130px; right:0; height:calc((100vh - 130px) - 220px); width:100%; max-width:660px; background:rgba(0,0,0,0.5); overflow:hidden}
.home_nav ul{list-style-type: none; padding:0; margin:0}
.home_nav > ul a{color:#FFF}
.home_nav > ul > li{padding:0 0 0 10px; box-sizing:border-box; margin:20px 0 20px 20px; border-left:solid 5px var(--blue) }
.home_nav > ul > li:nth-child(1){margin:20px 0 0 20px; }
.home_nav > ul > li > a{font-size:30px; line-height:40px; color:var(--blue); font-weight:600; display:inline-block; margin:0 0 10px 0}
.home_nav > ul > li > a:hover{color:#FFF}
.home_nav > ul > li > ul{display:flex; flex-wrap:wrap;}
.home_nav > ul > li > ul > li{margin:0 15px 10px 0; min-width:calc(50% - 45px)}
.home_nav > ul > li > ul > li a:before{content:"\2794"; color:#FFF; padding:0 5px 0 0}
.home_nav > ul > li > ul > li a:hover,
.home_nav > ul > li > ul > li a:hover:before{color:var(--blue)}

/* Joomla 6 */
.home_nav button{display:none!important}

@media (max-width: 1200px) {
	.home_nav{max-width:440px; height:calc((100vh - 130px) - 160px)}
	.home_nav > ul > li{margin:0 0 15px 20px}
	.home_nav > ul > li:nth-child(1){margin:10px 0 15px 20px; }
	.home_nav > ul > li > a{margin:0}
	.home_nav > ul > li > ul > li a{font-size:16px;}
	.home_nav > ul > li > ul > li{margin:0 15px 0 0; height:27px}
}
@media (max-height: 900px) {
	.home_nav{display:}
}
@media (max-width: 700px) {
	.home_nav{display:none}
}



.home_slider{position:absolute!important; top:0; right:0; z-index:10000; background:rgba(0,158,206,1); transform:translateY(-100%); width:100%!important; max-width:660px; height:220px; overflow:hidden}
.home_slider .n2-ss-slider{height:100%}
.home_slider .n2-ss-layer{width:calc(100% - 30px)!important} 
.home_slider .n2-ss-layer a{color:#FFF!important}
.home_slider .n2-ss-layer a:hover{color:#000!important}
.home_slider .n2-ss-layer p{font-family: 'Rubik', sans-serif!important; font-size:20px!important}

@media (max-width: 1200px) {
	.home_slider{max-width:440px; height:160px;}
	.home_slider .n2-ss-layer p{font-size:16px!important;}
}
 @media (orientation: landscape) and(max-width: 900px),(orientation: portrait) and(max-width: 700px) {
        div#n2-ss-2 [data-hide-mobileportrait="1"] {
            display: block !important;
        }
}

/* MOBILE LANDSCAPE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handheld{display:none; justify-content:center; align-items:center; width:100%; height:100vh; position:absolute; top:0; left:0; background:black; z-index:11111111}
.handheld p{color:white}

@media (max-height: 400px) and (orientation: landscape){
	.handheld{display:flex}
	body{height:100vh; overflow:hidden}
}

/* INFOVIDEO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_video{position:absolute; top:0; left:25%; transform:translate(-50%,-110%); box-sizing:border-box; z-index:2; border-radius:15px; width:40%; display:flex; justify-content:center;}
.home_video video{width:100%; max-width:800px; height:auto; aspect-ratio: 16 / 9; padding:5px; border-radius:15px; box-sizing:border-box; background:#FFF}

@media (max-width: 700px) {
	.home_video{position:relative; top:auto; left:auto; transform:none; width:100%; border-radius:0; z-index:0; padding:45px 15px;}
}

.infovideo{margin:0 0 100px 0}  

@media only screen and (orientation:portrait){
	.infovideo > .landscape{display:none}
}
@media only screen and (orientation:landscape){
	.infovideo > .portrait{display:none}
}

/* HAUSORDNUNG
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.item-pagehausordnung ol{margin:40px 0}
.item-pagehausordnung li{margin:0 0 20px 0}

/* OVERVIEW KURSE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.overview_kurse .newsflash{border-top:solid 5px #009ece; width:100%; max-width:1024px; margin:0 auto 60px auto}
.overview_kurse .newsflash > div{display:flex; flex-wrap:wrap; padding:15px; box-sizing:border-box}
.overview_kurse .newsflash > div:nth-child(odd){background:rgba(0,158,205,0.2)}
.overview_kurse .newsflash > div:nth-child(even){background:rgba(0,158,205,0.4)}
.overview_kurse .newsflash > div p{margin-right:25px}
.overview_kurse .newsflash > div p:nth-child(1){width:100%; margin:0 0 10px 0}
.fachkurse .newsflash > div p:nth-child(1){width:100%; color:#FFF; padding:0 5px; background:#009ece; border-radius:5px}
.fachkurse .newsflash > div p:nth-child(2){width:100%; margin:0 0 10px 0}
.overview_kurse > div > div .readmore{width:100%; margin:10px 0}
.overview_kurse .newsflash > div a{background:rgba(0,158,205,1); padding:10px 15px; color:#FFF; border-radius:5px}
.overview_kurse .newsflash > div a:hover{background:rgba(0,0,0,1)}
.overview_kurse .newsflash > div h3{border-radius: 5px;background:#000; height:120px; margin:0 0 20px 0; color:#FFF; display:flex; justify-content:center; align-items:center}

@media (max-width: 700px) {
  .overview_kurse{padding-top:30px}
}

/* FORMULARE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.visCSStop10,.visCustomText{margin-top:20px}
.visCustomText p{margin-bottom:10px}
.visCustomText a{text-decoration:underline}
.visBtnCon .btn{color:#FFF; padding:10px 30px; background:rgba(0,158,205,1); border-radius:5px; border:none}
.visBtnCon .btn:hover{background:rgba(0,158,205,0.2); color:#000}

.form_weiterbildung{margin-top:60px}
.form_weiterbildung a,.form_weiterbildung a:visited{color:#009ece!important}
.form_weiterbildung a:hover{color:#000!important}
.form_weiterbildung .strong{font-weight:700}

.scroll-to-form{position:absolute; top:10px; right:15px; transform: rotate(0);}
.scroll-to-form a{color:#FFF; padding:5px 10px; font-size:14px; line-height:20px; background:rgba(0,158,205,1); border-radius:5px; border:none}
.scroll-to-form a:hover{background:rgba(0,158,205,0.2); color:#000}

.scroll-to-form-content h3{position:relative}
.scroll-to-form-content h3 a{display:block; position:absolute; top:0; right:0; color:#FFF; padding:5px 10px; font-size:14px; line-height:20px; background:rgba(0,158,205,1); border-radius:5px; border:none; font-weight:300}
.scroll-to-form-content h3 a:hover{background:rgba(0,158,205,0.2); color:#000}

.visforms-title{margin-bottom:20px}
.visforms-content{display:flex; flex-wrap:wrap}
.visforms-content input{width:30px; margin:10px 0 0 0}
.visforms-content label{width:calc(100% - 30px); margin:0}


@media (max-width: 700px) {
  .visCSSlabel,.visCSSinput,.editor{width:100%}
}

@media (max-width: 700px) {
  .scroll-to-form-content h3 a{top:-40px}
}


/* HYBRID-SCHOOLING
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#hybrid{position:absolute; top:0; left:0}
.hybrid_schooling{width:100%}
.hybrid_schooling h3{color:#FFF; font-size:50px; line-height:60px; width:100%; margin:0 0 20px 0}
.hybrid_schooling > div{width:100%; max-width:1024px; padding:50px 15px; box-sizing:border-box; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-end}
.hybrid_schooling > div .video{width:66%}
.hybrid_schooling > div .text{width:34%}
.avPlayerWrapper{width:100%; margin:0}
.avPlayerWrapper .avPlayerContainer .avPlayerBlock video{background:none}
.hybrid_schooling p{padding:0 15px; color:#FFF}
.hybrid_schooling a,.hybrid_schooling a:visited{color:#FFF}
.hybrid_schooling a:hover{color:#000}
.hybrid_schooling video{width:100%; height:auto}

@media (max-width: 1000px) {
  .hybrid_schooling > div .video{width:100%}
  .hybrid_schooling > div .text{width:100%}
  .avPlayerWrapper{width:100%}
  .hybrid_schooling h3{margin:20px 0}
  .hybrid_schooling > div{padding:15px}
  .hybrid_schooling p:last-child{position:relative; width:100%; bottom:auto; padding:0}
}
@media (max-width: 700px) {
  .hybrid_schooling h3{color:#FFF; font-size:30px; line-height:40px; margin:0}
}

/* HEADER-IMAGE HOME
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.headerimage_home{width:100%; height:calc(100vh - 130px)}
.headerimage_home > div{height:100%; background:#000}
.headerimage_home > div >.content{width:50%; height:33.333%; float:left; position:relative}
.headerimage_home > div >.content:nth-child(1){height:100%}

.headerimage_home > div >.content:nth-child(1){background: url("../../../images/header/ebz-eingang-1920x1280.jpg") left center; background-size: cover;}
.headerimage_home > div >.content:nth-child(2){background: url("../../../images/header/weiterbildung-1920x1280.jpg") center center; background-size: cover;}
.headerimage_home > div >.content:nth-child(3){background: url("../../../images/header/grundbildung-1920x1280.jpg") center center; background-size: cover;}
.headerimage_home > div >.content:nth-child(4){background: url("../../../images/header/organisation-1920x1280.jpg") center center; background-size: cover;}
.headerimage_home > div >.content:nth-child(1):after{content:""; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.5); position:absolute; z-index:2}

.headerimage_home > div >.content > p{text-align:center; width:100%; color:#FFF}
.headerimage_home > div >.content > p strong{display:none}
.headerimage_home > div >.content > p:first-child{height:100%}
.headerimage_home > div >.content > p:first-child > a{display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); -ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms}
.headerimage_home > div >.content > p:first-child > a:hover{background:rgba(0,0,0,0); -ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.headerimage_home > div >.content > p:last-child{position:absolute; left:0; bottom:20px; display:flex; flex-wrap:wrap; justify-content:center}
.headerimage_home > div >.content > p:last-child a{color:#FFF; filter:drop-shadow(0 0 5px #000); margin:0 15px;}
.headerimage_home > div >.content > p:last-child a:hover{color:#009ece}
.headerimage_home > div >.content > p:last-child a:first-child{display:block; width:100%; margin-bottom:20px; font-size:30px; font-weight:700}

.headerimage_home .quicknav{position:absolute; top:130px; left:30px; display:none}
.headerimage_home .quicknav a{display:block; padding:10px; width:200px; background:rgba(0,158,205,1); text-align:center; border-radius:5px; color:#FFF}
.headerimage_home .quicknav a:hover{background:rgba(0,158,205,0.2);}

.shortlinks{position:absolute; top:160px; left:30px; z-index:3}
.shortlinks ul{margin:0; padding:0; list-style-type:none}
.shortlinks li{margin-bottom:15px}
.shortlinks a{display:block; padding:10px; width:200px; background:rgba(0,158,205,1); text-align:center; border-radius:5px; color:#FFF}
.shortlinks a:visited{color:#FFF}
.shortlinks a:hover{background:rgba(0,158,205,0.2);color:#FFF}

@media (max-width: 1200px) {
  .headerimage_home > div >.content > p:last-child{bottom:0}
  .headerimage_home > div >.content > p:last-child a:first-child{margin-bottom:10px}  
}

@media (max-width: 700px) {
	.headerimage_home{height:auto}
	.headerimage_home > div >.content{width:100%; height:50%}
	.headerimage_home > div >.content:after{content:""; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); top:0; left:0}
    .headerimage_home > div >.content:first-child{display:none}
	.headerimage_home > div >.content > p{z-index:2}
	.headerimage_home > div >.content > p strong{position:relative; left:auto; bottom:auto; z-index:2} 
	.headerimage_home > div >.content > p:last-child{transform:translateY(0)}
	.headerimage_home > div >.content > p:first-child > a{background:none}
	
  .shortlinks{position:absolute; top:180px; left:0; width:100%}
  .shortlinks ul{display:flex; justify-content:center}
  .shortlinks li{margin-left:5px; margin-right:5px}
  .shortlinks a{font-size:14px; line-height:20px; width:auto}
}
@media (max-width: 390px) {
	.headerimage_home > div >.content > p:first-child{height:60px;}
	.headerimage_home > div >.content{padding:0 0 10px 0}
	.shortlinks a{font-size:11px;}

}



/* TIMETABLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timetable .newsflash{border-top:solid 5px #009ece; width:100%; max-width:1024px; margin:0 auto 20px auto; position:relative}
.timetable .newsflash > div{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:15px; box-sizing:border-box; width: 100%;
position: relative; min-height:100px}
.timetable .newsflash > div:nth-child(odd){background:rgba(0,158,205,0.2)}
.timetable .newsflash > div:nth-child(even){background:rgba(0,158,205,0.4)}

.timetable .newsflash > div p{margin:0}
.timetable .newsflash > div p:nth-child(1){width:calc(100% - 270px)}
.timetable .newsflash > div p:nth-child(2){margin:0 15px; width:140px; text-align:center}
.timetable .newsflash > div p:nth-child(3){width:100px; text-align:center}
.timetable .newsflash > div p:nth-child(4){position:absolute; top:0; left:0; width:100%}

.timetable .newsflash > div a{background:rgba(0,158,205,0); color:rgba(0,158,205,0); width: 100%; height:100px; display: block; padding:15px; box-sizing:border-box}
.timetable .newsflash > div a:hover{background:rgba(0,158,205,0.5)}

.timetable .newsflash:before,
.timetable .newsflash:after{position:absolute; top:-30px;background:rgba(0,158,205,1); text-align:center; color:#FFF; font-size:16px}
.timetable .newsflash:before{content:"Zeit"; left:calc(100% - 270px); width:140px}
.timetable .newsflash:after{content:"Zimmer"; right:15px; width:100px}


@media (max-width: 700px) {
  .timetable .newsflash > div p:nth-child(1){width:100%; border-bottom:solid 1px #FFF; padding-bottom:10px; margin-bottom:10px}
  .timetable .newsflash > div a{height:170px}
  .timetable .newsflash > div a:hover{background:none}
  .timetable .newsflash:before{content:none}
}

/* SANDWICH
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sandwich{display:flex; flex-wrap:wrap}
.sandwich p{width:50%; text-align:center}
.sandwich img{width:80%; height:auto; margin:0 10%}

@media (max-width: 500px) {
  .sandwich p{width:100%}
  .sandwich img{width:100%; margin:0}
}

/* AKUTELLE KURSE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.aktuelle_kurse{margin:50px 0 0 0}
.aktuelle_kurse h2{margin-bottom:10px;}
.aktuelle_kurse table{width:100%}
.aktuelle_kurse table tr:first-child{background:rgba(0,158,205,1)!important; color:#FFF}
.aktuelle_kurse table tr:nth-child(odd){background:rgba(0,158,205,0.3)}
.aktuelle_kurse table tr:nth-child(even){background:rgba(0,158,205,0.5)}
.aktuelle_kurse table td{padding:5px 5px 5px 15px}

.weitere_kurse > div{display:flex; flex-wrap:wrap; justify-content:center}
.weitere_kurse h3{width:100%;}
.weitere_kurse a{display:block; padding:5px 15px; background:#009ece; color:#FFF; border-radius:9px; margin:0 15px}
.weitere_kurse a:hover{color:#FFF; background:#000;}
.weitere_kurse a:visited{color:#FFF}

@media (max-width: 700px) {
  .aktuelle_kurse table tr{display:flex; flex-wrap:wrap}
  .aktuelle_kurse table tr td:first-child{width:100%}
}

/* üK Jahresprogramm
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jahresprogramm th, td {padding: 0 15px 0 0; text-align: left; vertical-align: top;}
.jahresprogramm td:first-child{font-weight:700}
.jahresprogramm h3{margin:0; padding:20px 0}
.jahresprogramm .field{padding:15px; background:#009ece; border-radius:9px}
.jahresprogramm .field p,
.jahresprogramm .field a,
.jahresprogramm .field h3,
.jahresprogramm .field a:visited{color:#FFF}
.jahresprogramm .field a:hover{color:#000}

@media (max-width: 500px) {
  .jahresprogramm table{width:100%}
  .jahresprogramm tr{display:flex; flex-wrap:wrap; margin-bottom:10px}
  .jahresprogramm td{box-sizing:border-box; display:block}
  .jahresprogramm td:first-child{width:100%}
}

/* HEADERIMAGE Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header_content{position:relative; clear:both}
.headerimage_content{width:100%; height:66vh; background:rgba(0,0,0,0.5)}
.headerimage_content h1{position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); color:#FFF}
.headerimage_content h1{animation-duration: 6s; animation-name: title; animation-iteration-count:infinite; animation-direction:alternate;animation-timing-function: linear; box-sizing:border-box}
@keyframes title {
	0%{padding:0 60px 0 0}
	100%{padding:0 0 0 60px}
}
.headerimage_content p img{width:100%; height:100vh}

.header_content .subnav{position:absolute; width:100%; left:0; bottom:40px; display:flex; flex-wrap:wrap; justify-content:center; flex-wrap; padding-inline-start: 0; list-style-type: none; margin-block-start: 0; margin-block-end: 0}
.header_content .subnav li{margin-bottom:30px}
.header_content .subnav a{margin:7.5px; padding:10px 30px; background:rgba(0,158,205,1); color:#FFF; border-radius:5px; }
.header_content .subnav a:hover{background:rgba(0,158,205,0.2)}
.header_content .subnav li:nth-child(1) a{background:rgba(0,0,0,1)}
.header_content .subnav li:nth-child(1) a:hover{background:rgba(0,0,0,0.2)}

.headerimage_content .quicknav{position:absolute; left:50%; top:calc(60% + 100px); transform:translate(-50%,-50%); display:flex; flex-wrap; display:none}
.headerimage_content .quicknav p{margin:7.5px}
.headerimage_content .quicknav a{padding:10px 30px; border-radius:5px; background:rgba(0,158,205,1); color:#FFF}
.headerimage_content .quicknav a:hover{background:rgba(0,158,205,0.2)}

@media (max-width: 1200px) {
  .header_content .subnav{bottom:20px}
}

@media (max-width: 700px) {
  .headerimage_content{height:50vh}
  .headerimage_content h1{top:30%}
  .header_content .subnav a{font-size:14px; line-height:20px; padding:5px 15px;}
  .header_content .subnav li{margin-bottom:10px}
  .header_content .subnav li:nth-child(1) a{padding:7px 15px;}
}
@media (max-width: 320px) {
  .header_content .subnav a{font-size:12px; line-height:14px; padding: 3px 10px}
  .header_content .subnav li{margin:0}
}

@media (max-width: 900px) and (orientation: landscape) { 
  .headerimage_content h1{top:30%}
  .header_content .subnav a{font-size:14px; line-height:20px; padding:5px 15px;}
  .header_content .subnav li{margin-bottom:10px}
}

/* MAP ADDRESS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.map{padding:50px 0 0 0}
.map h3{font-size:50px; line-height:60px; width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:0 auto 30px auto}
.map iframe{width:100%; height:400px; border:none}

.address{width:100%; padding-bottom:50px}
.address a,.address a:visited{color:#000}
.address a:hover{color:#009ece}
.address > div{width:100%; max-width:1024px; padding:0 15px; box-sizing:border-box; margin:0 auto; display:flex; flex-wrap:wrap}
.address > div > .content{width:34%; height:400px; display:flex; flex-direction:column; justify-content:space-between}

.address > div > .content > address{font-style:normal}
.address > div > .content > address p{margin:0}

.address > div > .content > .com a{display:flex; height:40px; align-items:center}
.address > div > .content > .com img{width:40px; height:40px; filter:brightness(0); margin-right:15px}
.address > div > .content > .com img:hover{filter:brightness(1)}

.address > div > .content > .social{display:flex;}
.address > div > .content > .social p{margin:0 30px 0 0}
.address > div > .content > .social img{width:40px; height:40px; filter:brightness(0)}
.address > div > .content > .social img:hover{filter:brightness(1)}

.address > div > .timetable{width:66%; height:400px; background: url("../../../images/header/ebz-eingang-1920x1280.jpg") left center; background-size: cover; position:relative}
.address > div > .timetable > .content{position:absolute; bottom:15px; right:15px; background:rgba(0,0,0,0.5); padding:15px 15px 5px 15px; box-sizing:border-box; width:215px}
.address > div > .timetable > .content p{margin-bottom:10px; color:#FFF; text-align:center}

@media (max-width: 1000px) {
  .address > div > .content > .social p{margin:0 10px 0 0}
}

@media (max-width: 700px) {
  .map h3{font-size:30px; line-height:40px;}
  .address > div > .content{width:100%}
  .address > div > .timetable{width:100%}
  .address > div > .content > .social p{margin:0 30px 30px 0}  
}

/* PHOCA PDF
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pdf-print-icon{position:absolute; top:10px; right:15px; display:none} 
.pdf-print-icon a{color:#FFF; padding:5px 10px; font-size:14px; line-height:20px; background:rgba(0,158,205,1); border-radius:5px; border:none}
.pdf-print-icon a:hover{background:rgba(0,158,205,0.2); color:#000}
.pdf-print-icon a:visited{color:#FFF}

@media (max-width: 700px) {
  .pdf-print-icon{top:10px}
}

/* KONTAKTPERSON
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.kontaktperson{width:100%; background:rgba(0,158,205,1); display:flex; flex-wrap:wrap}
.kontaktperson img{width:34%; height:auto;}
.kontaktperson > .content{width:66%; color:#FFF; display:flex; align-items:center; justify-content:center; flex-direction:column}
.kontaktperson > .content a, .kontaktperson > .content a:visited{color:#FFF}
.kontaktperson > .content a:hover{color:#000}
.kontaktperson > .content p:first-child{font-size:50px; line-height:60px; font-weight:600; margin:0 0 40px 0}

@media (max-width: 700px) {
  .kontaktperson img,.kontaktperson > .content{width:100%}
  .kontaktperson > .content p:first-child{font-size:30px; line-height:40px; margin:20px 0}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav{position:fixed; top:18px; left:18px; z-index:111}
nav > ul {position:fixed; top:0; left:0; width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:flex-start; align-content:center; padding:0 10%!important}
nav ul{padding:0; margin:0; list-style: none; overflow: hidden; box-sizing:border-box}
nav > ul > li{padding:40px 0; margin:0; width:33.33%; height:auto; }
nav > ul > li > a{font-family: 'ubuntobold', sans-serif; font-weight: 700; border-bottom:solid 2px #009ece; display:block; margin:0 auto 20px auto; padding-bottom:20px; width:220px; font-size:24px}
nav a, nav, nav a:visited, nav:visited{color:#FFF}
nav a:hover{color:#009ece}
nav > ul > li .arrow:hover:before {content:'\2794 '; padding-right:5px}
nav > ul > li .arrow:hover:after {content:'\2794 '; padding-left:5px; color:transparent}

/* menu */
nav .mod-menu {height: 0;  transition: height .2s ease-out;	text-align: center;}

/* Joomla 6 */
nav .mod-menu__toggle-sub{display:none}
nav .mod-menu__sub{display:block}

/* menu icon */
nav .menu-icon {cursor: pointer; display: inline-block; padding: 28px 7px; position: relative; border-radius:9px; z-index:2; background:rgba(255,255,255,1)}
nav .menu-icon:hover{background:rgba(0,0,0,1)}
nav .menu-icon .navicon{background: #009ece;  display: block;  height: 8px;  position: relative;  transition: background .2s ease-out;  width:36px; border-radius:4px}
nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {background: #009ece;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%; border-radius:4px}
nav .menu-icon .navicon:before {top: 20px;}
nav .menu-icon .navicon:after {top: -20px;}

/* menu btn */
nav .menu-btn {  display: none;	text-align: center;}
nav .menu-btn:checked ~ .mod-menu {height: 100%; background: rgba(0,0,0,0.9)}
nav .menu-btn:checked ~ .menu-icon {background:#009ece}
nav .menu-btn:checked ~ .menu-icon .navicon {  background: transparent;}
nav .menu-btn:checked ~ .menu-icon .navicon:before {  background: #FFF; transform: rotate(-45deg);}
nav .menu-btn:checked ~ .menu-icon .navicon:after {  background: #FFF; transform: rotate(45deg);}
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {  top: 0;}


@media (max-width: 1000px) {
  nav{top:26px;}
  nav .menu-icon{padding:20px 6px;}
  nav .menu-icon .navicon{width:30px; height:7px}
  nav .menu-icon .navicon:before {top: 16px;}
  nav .menu-icon .navicon:after {top: -16px;}
  nav > ul{padding:0!important}
  nav .menu-btn:checked ~ .menu {height: 100%; background: rgba(0,0,0,1)}
}
@media (max-width: 700px) {
  nav{top:12px; right:14px; font-size:14px; width:40px}
  nav .menu-icon{padding:24px 5px;}
  nav .menu-icon .navicon{width:28px;}
  nav > ul > li{padding:10px 0; width:50%}
  nav > ul > li:first-child{padding-top:80px}
  nav > ul > li > a{font-size:16px; line-height:24px; margin:0 auto 10px auto; padding-bottom:10px; width:150px}
}
@media (max-width: 380px) {
  nav > ul > li{padding:5px 0}
  nav > ul > li > ul > li{height:24px}
  nav > ul > li > a{font-size:14px; line-height:16px; margin:0 auto 5px auto; padding-bottom:5px}
}

/* Grundbildung Content Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grundbildung_links > div{display:flex; flex-wrap:wrap;}
.grundbildung_links p{width:33%; padding:7.5px; box-sizing:border-box; margin:0; text-align:center}
.grundbildung_links a{display:block; width:100%; background:rgba(0,158,205,1); color:#FFF; padding:25px 15px; box-sizing:border-box}
.grundbildung_links a:visited{color:#FFF;}
.grundbildung_links a:hover{background:rgba(0,158,205,0.2); color:#009ece;}
.grundbildung_links img{width:auto; max-width:100px; filter:brightness(0) invert(1); margin:10px 0}

@media (max-width: 700px) {
  .grundbildung_links p{width:100%}
}

/* CHUCHICHAESTLI
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chuchichaestli .newsflash{border-top:solid 5px #009ece; width:100%; max-width:1024px; margin:0 auto 60px auto}
.chuchichaestli .newsflash > div{flex-wrap:wrap; padding:15px; box-sizing:border-box; width: 100%;
position: relative;}
.chuchichaestli .newsflash > div:nth-child(odd){background:rgba(0,158,205,0.2)}
.chuchichaestli .newsflash > div:nth-child(even){background:rgba(0,158,205,0.4)}
.chuchichaestli .newsflash > div p{margin:0 15px}

.chuchichaestli > div > div .readmore{position:absolute; top:0; left:0; width:100%; margin:0}
.chuchichaestli .newsflash > div a{background:rgba(0,158,205,0); color:rgba(0,158,205,0); width: 100%; display: block;padding:15px; box-sizing:border-box}
.chuchichaestli .newsflash > div a:hover{background:rgba(0,158,205,0.5)}

@media (max-width: 700px) {
  .overview_kurse{padding-top:30px}
}

/* WOCHENMENU
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wochenmenu hr{margin:40px 10% 0 10%; border-top:1px solid #000}
.wochenmenu h3{margin:20px 0}
.wochenmenu .content{background:#009ece; padding:20px; color:#FFF; box-sizing:border-box; width:100%; border-radius:5px}
.wochenmenu .content p{margin:0 0 10px 0}
.wochenmenu .content p:last-child{margin:0}

/* HEADERIMAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bg_ebz:after{background: url("../../../images/header/ebz-eingang-1920x1280.jpg") center center; position:fixed;}
.bg_weiterbildung:after{background: url("../../../images/header/weiterbildung-1920x1280.jpg") center center; position:fixed}
.bg_berufspruefung:after{background: url("../../../images/header/berufspruefung-1920x1280.jpg") center center; position:fixed;}
.bg_hoehere-fachpruefung:after{background: url("../../../images/header/hoehere-fachpruefung-1920x1280.jpg") center center; position:fixed;}
.bg_fachkurse:after{background: url("../../../images/header/fachkurse-1920x1280.jpg") center center; position:fixed;}
.bg_firmenschulung:after{background: url("../../../images/header/firmenschulung-1920x1280.jpg") center center; position:fixed;}
.bg_bauleiter-teamleiter:after{background: url("../../../images/header/bauleiter-teamleiter-1920x1280.jpg") center center; position:fixed;}
.bg_hidden-site:after{background: url("../../../images/header/hidden-site-1920x1280.jpg") center center; position:fixed;}

.bg_grundbildung:after{background: url("../../../images/header/grundbildung_2-1920x1280.jpg") center center; position:fixed;}
.bg_fit:after{background: url("../../../images/header/fit-fuer-die-lehre-1920x1280.jpg") center center; position:fixed;}
.bg_elektroplaner-praktikum:after{background: url("../../../images/header/elektroplaner-praktikum-1920x1280.jpg") center center; position:fixed;}
.bg_start-up-kurs:after{background: url("../../../images/header/start-up-kurs-1920x1280.jpg") center center; position:fixed;}
.bg_qv-vorbereitung:after{background: url("../../../images/header/qv-vorbereitung-1920x1280.jpg") center center; position:fixed;}
.bg_zwischenpruefung:after{background: url("../../../images/header/zwischenpruefung-1920x1280.jpg") center center; position:fixed;}
.bg_absturzsicherung:after{background: url("../../../images/header/absturzsicherung-1920x1280.jpg") center center; position:fixed;}

.bg_leitbild:after{background: url("../../../images/header/leitbild-1920x1280.jpg") center center; position:fixed;}
.bg_organisation:after{background: url("../../../images/header/organisation-1920x1280.jpg") center center; position:fixed;}
.bg_team:after{background: url("../../../images/header/team-1920x1280.jpg") center center; position:fixed;}
.bg_karriere:after{background: url("../../../images/header/karriere-1920x1280.jpg") center center; position:fixed;}
.bg_faq:after{background: url("../../../images/header/faq-1920x1280.jpg") center center; position:fixed;}

.bg_gastronomie:after{background: url("../../../images/header/gastronomie-1920x1280.jpg") center center; position:fixed;}
.bg_ampere:after{background: url("../../../images/header/ampere-1920x1280.jpg") center center; position:fixed;}
.bg_menukarte:after{background: url("../../../images/header/menukarte-1920x1280.jpg") center center; position:fixed;}
.bg_bestellungen:after{background: url("../../../images/header/bestellungen-1920x1280.jpg") center center; position:fixed;}
.bg_chuchichaestli:after{background: url("../../../images/header/chuchichaestli-1920x1280.jpg") center center; position:fixed;}

.bg_raumangebot:after{background: url("../../../images/header/raumangebot-1920x1280.jpg") center center; position:fixed;}
.bg_digitalevents:after{background: url("../../../images/header/digitalevents-1920x1280.jpg") center center; position:fixed;}
.bg_schulungen:after{background: url("../../../images/header/schulungen-1920x1280.jpg") center center; position:fixed;}
.bg_sitzungen:after{background: url("../../../images/header/sitzungen-1920x1280.jpg") center center; position:fixed;}
.bg_veranstaltungen:after{background: url("../../../images/header/veranstaltungen-1920x1280.jpg") center center; position:fixed;}

.bg_search:after{background: url("../../../images/header/search-1920x1280.jpg") center center; position:fixed;}
.bg_news:after{background: url("../../../images/header/news-1920x1280.jpg") center center; position:fixed;}
.bg_newsletter:after{background: url("../../../images/header/newsletter-1920x1280.jpg") center center; position:fixed;}
.bg_kontakt:after{background: url("../../../images/header/kontakt-1920x1280.jpg") center center; position:fixed;}
.bg_versand:after{background: url("../../../images/header/versand-1920x1280.jpg") center center; position:fixed;}
.bg_impressum:after{background: url("../../../images/header/impressum-1920x1280.jpg") center center; position:fixed;}
.bg_datenschutz:after{background: url("../../../images/header/datenschutz-1920x1280.jpg") center center; position:fixed;}
.bg_agbs:after{background: url("../../../images/header/agb-1920x1280.jpg") center center; position:fixed;}

.bg_image:after{
content: "";
top: 0;
height: 100vh;
left: 0;
right: 0;
z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{height:130px; position:relative; background:#FFF; border-bottom:solid 1px #DDD; box-sizing:border-box}

header .logo{width:325px; height:90px; position:absolute; left:25px; top:25px}
header .logo p{margin:0}
header .logo p a{width:100%; height:100%; display:block}
header .logo img{width:100%; height:auto}

header .icons{position:absolute; left:50%; top:50px; transform:translateX(-50%)}
header .icons div{display:flex;}
header .icons p{margin:0 10px; width:30px; height:30px; position:relative}
header .icons img{filter:brightness(0); }
header .icons img:hover{filter:brightness(1)}

header .icons div > p:after{content:"";position:absolute; bottom:-32px; left:50%; transform:translateX(-50%); width:200px; text-align:center; font-size:16px}
header .icons div > p:nth-child(1):hover:after{content:"+41 52 354 64 00"}
header .icons div > p:nth-child(2):hover:after{content:"info@ebz.ch"}
header .icons div > p:nth-child(3):hover:after{content:"Kontaktformular"}
header .icons div > p:nth-child(4):hover:after{content:"8307 Effretikon"}

header .search{position:absolute; top:50px; right:30px}
header .search label{display:none}
header .search .btn-primary{width: 30px; height: 30px; position: absolute; top: 0; right: 0; background: #000; border:solid 1px #000; color:#FFF; display: flex; align-items: center; justify-content: center;}
header .search input{width:200px}

/*header .search .btn-primary:after{content:"S"; position: absolute; top: -1px; left:7px; color:#FFFF}*/
.com-finder__search button{display:none}

@media (max-width: 1000px) {
	header .logo{width:260px; height:40px; top:30px}
	header .icons{left:calc(50% + 40px)}
	header .icons p{margin:0 5px}
	header .search input{width:120px}
}
@media (max-width: 700px) {
	header{height:160px}
	header .logo{left:20px; top:20px}
	header .search{top:110px; right:20px}
	header .icons{left:20px; top:110px; transform:translateX(0)}
	header .icons div > p:after{display:none}
}
@media (max-width: 350px) {
  header .logo img{width:260px}
  /*header .logo div{width:110px; overflow:hidden}*/
  header .icons div > p:nth-child(4){display:none}
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer p{margin:0}
footer a, footer a:visited{color:#FFF}
footer a:hover{color:#009ece}

footer > div{width:100%; max-width:1024px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; height:100px; padding:15px; box-sizing:border-box;}
footer > div > p{font-size:14px;}
footer > div > .content{display:flex; flex-wrap:wrap}
footer > div > .content p{margin-right:20px}

@media (max-width: 700px) {
  footer > div{display:block; height:auto}
  footer > div > p{padding:20px 0; text-align:right}
}

/* CONTACT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact{padding:80px 0; position:relative}
.contact:before{content:""; width:100%; height:200px; position:absolute; top:180px; left:0; background:#009ece;}
.contact > div{width:100%; max-width:1024px; position:relative; height:400px; background:#000; margin:0 auto}
.contact a, .contact a:visited{color:#FFF}
.contact a:hover{color:#009ece}

.contact > div > div{width:66%; height:400px; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; padding-bottom:30px; box-sizing:border-box}
.contact > div > div h2{padding-top:20px; color:#FFF; text-align:center; width:100%}

.contact > div > div > p{margin:0 10px; width:180px; text-align:center}
.contact > div > div > p img{margin-bottom:10px; filter:brightness(0) invert(1)}
.contact > div > div > p img:hover{filter:brightness(1) invert(0)}


.contact > div > p:last-child{width:34%; position:absolute; top:0; right:0; height:100%; text-align:center; background: url("../../../images/header/newsletter-1920x1280.jpg") left center; background-size: cover; margin:0}
.contact > div > p:last-child a{width:100%; height:100%; background:rgba(0,0,0,0.5); display:block; color:#FFF}
.contact > div > p:last-child a:hover{background:rgba(0,0,0,0); color:#009ece}
.contact > div > p:last-child span{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); width:100%}
.contact > div > p:last-child strong{font-size:30px; line-height:40px}

@media (max-width: 1000px) {
	.contact > div > div h2{padding:0 15px}
	.contact > div > div > p{width:auto; font-size:14px}
    .contact > div > div > p{margin-right:40px}
}
@media (max-width: 700px) {
	.contact > div{height:auto;}
	.contact > div > div{width:100%; height:auto;}
    .contact > div > div > p{margin-right:0}
	.contact > div > p:last-child{width:100%; position:relative; top:auto; right:auto; height:200px; }
}

/* EBZ-NEWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ebz_news{width:100%; max-width:1024px; margin:0 auto; padding:30px 15px 50px 15px; box-sizing:border-box}
.ebz_news h2{color:#FFF}
.ebz_news a{margin:10px 0; padding:10px; background:rgba(255,255,255,0.8); display:block}
.ebz_news a:hover{background:rgba(255,255,255,0.5)}
.ebz_news ul{margin-block-start:0; padding-inline-start:0; list-style-type: none}

@media (max-width: 700px) {
	.ebz_news{padding:20px 15px;}
	.ebz_news h2{margin:0 0 20px 0}
}

/* Menükarte
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menukarte{display:flex; flex-wrap:wrap}
.menukarte h2{width:100%}
.menukarte p{width:calc(66% - 15px); margin:0 15px 0 0}
.menukarte ul{width:34%; margin:0; padding:0; text-align:center; list-style-type: none;}
.menukarte ul li{width:100%; height:100%}
.menukarte ul a{display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; color:#FFF; background:rgba(0,158,205,1)}
.menukarte ul a:hover{background:rgba(0,158,205,0.2); color:#009ece}
.menukarte ul img{filter:brightness(0) invert(1); width:100px; height:100px; padding:0 10px 20px 0}

/* Ferienmeldung
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tab_ferienmeldung{margin:0 0 20px 0}
.tab_ferienmeldung td{padding:5px 15px 0 5px}

/* TEAM
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.team > div{display:flex; flex-wrap:wrap; justify-content:center; width:100%; padding:0 7.5px; box-sizing:border-box}
.team > div > div{width:calc(12.5% - 15px); min-width:230px; margin:0 7.5px 15px 7.5px; padding:15px; box-sizing:border-box; border-radius:5px; background: linear-gradient(245deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 15%, rgba(221,221,221,1) 100%);
}
.team > div > div figure{margin:0 0 20px 0;}
.team > div > div img{width:100%; height:auto}
.team > div > div p{margin:0; font-size:16px; line-height:26px}
.team > div > div p:nth-child(2){font-weight:700}
.team > div > div p:nth-child(3){margin-bottom:10px}
.team > div > div p:last-child{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto; }
.team > div > div a,.team > div > div a:visited{color:#000}
.team > div > div a:hover{color:#009ece}

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {font-family: 'marketot'; src: url('../fonts/MarketOT.woff') format('woff'), url('../fonts/MarketOT.woff2') format('woff2')}
:root {--blue: #009ece}
html {font-size: 62.5%; scroll-behavior:smooth}
body {font-size: 20px; line-height: 30px; font-family: 'Rubik', sans-serif; font-weight: 400; color: #000; background:#FFF}
a, a:visited{color: #009ece; text-decoration: none}
a:hover{color:#000}
strong {font-family: 'Rubik', sans-serif; font-weight: 600}

.auto-hyphens{hyphens: auto;-webkit-hyphens:auto; -ms-hyphens:auto; -moz-hyphens:auto}
.transition{-ms-transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}
.transition:hover{-ms-transition: all 500ms;-webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms;}

p{margin:0 0 20px 0}
h1, h2, h3{font-family: 'Rubik', sans-serif; font-weight: 600}
h1{font-size:60px; line-height:80px; margin:0; color:#000; text-align:center; width:100%}
h1 a,h1 a:visited{color:#FFF}
h2{font-size:50px; line-height:60px; padding:0; margin:40px 0; color:#000; text-align:left}
h3{font-size:30px; line-height:40px; padding:0; margin:40px 0 20px 0; color:#000}

@media (max-width: 700px) {
  h1{font-size:40px; line-height:50px}
  .h1_home,h2,.standort h1{font-size:30px; line-height:40px;}
  h3{font-size:20px; line-height:30px;}
  h2{margin:20px 0}
}

.bg_white{background:#FFF}
.bg_black{background:#000}
.bg_blue{background:#009ece}

/* CONTENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article{width:100%; max-width:1024px; margin:0 auto; padding:15px 15px 50px 15px; box-sizing:border-box; position:relative}