/* css-code fuer laptops von 1000px bis 1599px */
@media only screen and
(min-width:1000px)(max-width:1599px) {...}


/* ALLGEMEIN: BEFEHLE FUER DEN BODY, TABELLEN, LINKS UND BILDER FUER ALLE SEITEN UND GROESSEN */
html, body { height: 100%; font: 100% Arial, Helvetica, sans-serif; margin: 0px; padding: 0px;  text-align: center; overflow-x: hidden; }
table { border: 1px solid white; border-collapse: collapse; }
td { border: 1px solid white; border-collapse: collapse; }
a { text-decoration: none; color: black; }
img { border: 0; }
/* ALLGEMEIN: HEADER FUER LAPTOPS */
#headerbcw { width: 100%; height: 90px; background: #000; }
#flexboxheader { width: 100%; height: auto; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
#flexboxheaderbcwlinks { width: 60%; height: auto; }
.headerbcwlogo { width: 220px; height: auto; margin-top: 14px; margin-left: 15px; float: left; }
.headerturnieredelogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 30px; border: 1px outset #fff; }
.headermitgliedwerdenlogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 10px;  border: 1px outset #fff;}
.headerblvnrwlogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 10px;  border: 1px outset #fff;}
#flexboxheaderbcwrechts { width: 40%; height: auto; }
.iconsheader li { float:right; position: relative; list-style: none; display: inline-flex; margin: 20px 10px 0 0px; width: 45px; height: 45px; background: #000; border-radius: 50%; cursor: pointer; box-shadow: -1px -1px 2px cyan, 1px 1px 3px #242424; }
.iconsheader li.active:before { position: absolute; content: ''; height: 33px; width: 33px; background: #000; top: 8%; left: 50%; transform: translate(-50%, 5%); border-radius: 50%; box-shadow: inset -1px -1px 3px #242424, inset 2px 2px 3px #242424; }
.iconsheader li.active a { color: cyan; font-size: 16px; }
.iconsheader li a { position: relative; z-index: 2; color: #fff; font-size: 20px; width: 100%; line-height: 47px; }
.headerinstagram { width: 50px; height: auto; margin-top: 13px; margin-right: 15px; float:right; }
.headerfacebook { width: 60px; height: auto; margin-top: 11px; margin-right: 6px; float:right; }
.headerkadermanager { width: 140px; height: auto; margin-top: 23px; margin-right: 25px; float:right; border-radius: 0%; border: 1px outset cyan; box-shadow: 1px 1px 1px #ededed; }
/* ALLGEMEIN: NAVIGATION FUER LAPTOPS */
#boxnavigation { width: 100%; height: auto; background: #000; }
nav { background: #000; border-top: 1px solid #454545; z-index: }
nav:after { content: ''; clear: both; display: table; }
nav .logo { float: left; color: #fff; font-size: 17px; line-height: 48px; padding-left: 30px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav .logonavigation { float: left; width: 245px; height: auto; margin-left: 15px; margin-top: 20px; display: none; }
nav ul { float: right; list-style: none; margin-right: 40px; position: relative; padding: 0px; margin: 0px; z-index: 1000; }
nav ul li { float: left; display: inline-block; background: #000; margin: 0 5px; }
nav ul li a { color: #fff; text-decoration: none; line-height: 50px; font-size: 16px; padding: 8px 15px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav ul ul li a { font-size: 15px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav ul li a:hover { box-shadow: 0 0 5px #33ffff, 0 0 5px #66ffff; border-radius: 5px; color: cyan; }
nav ul ul li a:hover { color: cyan; box-shadow: none; }
nav ul ul { position: absolute; top: 90px; border-top: 3px solid cyan; opacity: 0; visibility: hidden; transition: top .3s; }
nav ul ul ul { border-top: none; }
nav ul li:hover > ul { top: 50px; opacity: 1; visibility: visible; }
nav ul ul li { position: relative; margin: 0px; width: 150px; float: none; display: list-item; border-bottom: 1px solid #121212; }
nav ul ul li a { line-height: 50px; }
nav ul ul ul li { position: relative; top: -50px; left: 150px; }
.fa-plus { margin-left: 40px; font-size: 15px; }
.show, .icon, input { display: none; }
/* ALLGEMEIN: HEADER UND NAVIGATION FUER SMARTPHONE UND TABLET (display: none;) */
mobilenavigation { display: none; }
/* ALLGEMEIN: FOOTER FUER LAPTOPS */
#abschlussbox { background-color: black; width: 100%; height: 400px; float: left; margin: 40px 0 0 0; }
#abschlussindex { background-color: black; width: 100%; height: 400px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: auto; }
#abschlussbcwlogo { width: 230px; height: 153px; margin-top: 20px; margin-left: 20px; }
#abschlusstext1 { margin-top: 40px; text-align: left; }
#abschlusstext2 { margin-top: 40px; margin-right: 80px; text-align: left; }
.footerh1 {  font-size: 18px; color: #00dede; line-height: 30px; font-style: italic; text-decoration: underline; }
.footerh2 { font-size: 15px; color: #eee9e9; line-height: 18px; font-style: italic; }
.footerh3 { font-size: 13px; color: #cdc9c9; line-height: 11px; font-style: italic; }
/* ALLGEMEIN: ZWISCHENRAUM FUER SMARTPHONE (display: none;) */
#zwischenraumsmartphone { display: none; }





/* BILDERGALERIEN  bauk�sten style*/
#bildergalerien { width: 100%; height: auto; margin: 70px 0 20px 0; float: left; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-items: stretch; }
#bildergalerienstyle { width: 45%; height: 190px; margin: 0 0 40px 0; background: #292929; border: 1px solid #292929; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: flex-start; position: relative; box-shadow: 1px 1px 10px #000; }
.blog-card { position: absolute; height: 190px; width: 100%; margin: auto; background: #ffffff; border-radius: 25px; box-shadow: 0px 10px 50px #d1d1d1; }
.blog-card .inner-part { display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 190px; position: absolute; }
#tapImg:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
.inner-part .img { height: 140px; width: 140px; overflow: hidden; flex-shrink: 0; border-radius: 20px; box-shadow: 2px 2px 10px #969696; }
#tapImg:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
.img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; opacity: 0; transition: .6s; }
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
.content { padding: 0 5px 0 35px; width: 100%; margin: 0; opacity: 0; transition: .6s; }
#tapImg:checked ~ .inner-part .content { display: none; }
#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
.content span { display: block; color: #8A0808; margin: -15px 0 6px 0; font-size: 14px; text-align: left; font-weight: bold; font-family: rockwell, arial; }
.content .title { font-size: 18px; color: #363636; margin-bottom: 8px; text-align: left; font-family: rockwell, arial; }
.content .text { font-size: 14px; color: #363636; margin-bottom: 12px; line-height: 18px; text-align: justify; text-align: left; font-family: rockwell, arial; }
.content button { float: left; margin-left: -3px; display: inline-flex; padding: 8px 11px; border: none; font-size: 11px; text-transform: uppercase; color: #ededed; border-radius: 50px; border: 1px solid #ededed; cursor: pointer; outline: none; background: linear-gradient(147deg, #8A0808 0%, #363636 74%);  font-family: rockwell, arial; font-style: italic; font-weight: bold; }
.content button:hover { background: linear-gradient(147deg, #ededed 0%, #969696 74%); color: #8A0808; border: 1px solid #ededed; }
.sliders { position: absolute; bottom: 10px; left: 55%; z-index: 100; transform: translateX(-30%); }
#tapImg:checked ~ .sliders { display: none; }
.sliders .tap { position: relative; height: 10px; width: 50px; background: #d9d9d9; border-radius: 5px; display: inline-flex; margin: 0 3px; cursor: pointer; }
.sliders .tap:before { position: absolute; content: ''; top: 0; left: 0; height: 100%; width: -100%; border-radius: 10px; background: linear-gradient(147deg,#8A0808 0%, #363636 74%); transform: scaleX(0); transition: transform .6s; transform-origin: left; }
#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before { transform: scaleX(1); width: 100%; }
input { display: none; }
/* BILDERGALERIEN  baukasten zwei */
#tap-4:checked ~ .inner-part .img-1,
#tap-5:checked ~ .inner-part .img-2,
#tap-6:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
#tap-4:checked ~ .inner-part .content-1,
#tap-5:checked ~ .inner-part .content-2,
#tap-6:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
#tap-4:checked ~ .sliders .tap-4:before,
#tap-5:checked ~ .sliders .tap-5:before,
#tap-6:checked ~ .sliders .tap-6:before { transform: scaleX(1); width: 100%; }
#tapImg2:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
#tapImg2:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg2:checked ~ .inner-part .content { display: none; }
#tapImg2:checked ~ .sliders { display: none; }
/* BILDERGALERIEN  baukasten drei */
#tap-7:checked ~ .inner-part .img-1,
#tap-8:checked ~ .inner-part .img-2,
#tap-9:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
#tap-7:checked ~ .inner-part .content-1,
#tap-8:checked ~ .inner-part .content-2,
#tap-9:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
#tap-7:checked ~ .sliders .tap-7:before,
#tap-8:checked ~ .sliders .tap-8:before,
#tap-9:checked ~ .sliders .tap-9:before { transform: scaleX(1); width: 100%; }
#tapImg3:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
#tapImg3:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg3:checked ~ .inner-part .content { display: none; }
#tapImg3:checked ~ .sliders { display: none; }
/* BILDERGALERIEN  baukasten vier */
#tap-10:checked ~ .inner-part .img-1,
#tap-11:checked ~ .inner-part .img-2,
#tap-12:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
#tap-10:checked ~ .inner-part .content-1,
#tap-11:checked ~ .inner-part .content-2,
#tap-12:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
#tap-10:checked ~ .sliders .tap-10:before,
#tap-11:checked ~ .sliders .tap-11:before,
#tap-12:checked ~ .sliders .tap-12:before { transform: scaleX(1); width: 100%; }
#tapImg4:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
#tapImg4:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg4:checked ~ .inner-part .content { display: none; }
#tapImg4:checked ~ .sliders { display: none; }
/* BILDERGALERIEN  baukasten fuenf */
#tap-13:checked ~ .inner-part .img-1,
#tap-14:checked ~ .inner-part .img-2,
#tap-15:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
#tap-13:checked ~ .inner-part .content-1,
#tap-14:checked ~ .inner-part .content-2,
#tap-15:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
#tap-13:checked ~ .sliders .tap-13:before,
#tap-14:checked ~ .sliders .tap-14:before,
#tap-15:checked ~ .sliders .tap-15:before { transform: scaleX(1); width: 100%; }
#tapImg5:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
#tapImg5:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg5:checked ~ .inner-part .content { display: none; }
#tapImg5:checked ~ .sliders { display: none; }
/* BILDERGALERIEN  baukasten sechs */
#tap-16:checked ~ .inner-part .img-1,
#tap-17:checked ~ .inner-part .img-2,
#tap-18:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
#tap-16:checked ~ .inner-part .content-1,
#tap-17:checked ~ .inner-part .content-2,
#tap-18:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
#tap-16:checked ~ .sliders .tap-16:before,
#tap-17:checked ~ .sliders .tap-17:before,
#tap-18:checked ~ .sliders .tap-18:before { transform: scaleX(1); width: 100%; }
#tapImg6:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
#tapImg6:checked ~ .inner-part .img { height: 190px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg6:checked ~ .inner-part .content { display: none; }
#tapImg6:checked ~ .sliders { display: none; }


/*
*
*
*
*
*
css-code fuer grosse bildschirme ab 1400px
*
*
*
*
*
*/


@media only screen and
(min-width:1400px) {


/* ALLGEMEIN: HEADER FUER GROSSE BILDSCHIRME */
#headerbcw { width: 100%; height: 90px; background: #000; }
#flexboxheader { width: 1350px; height: 90px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: auto; background: #000; }
#flexboxheaderbcwlinks { width: 60%; height: auto; }
.headerbcwlogo { width: 220px; height: auto; margin-top: 14px; margin-left: 15px; float: left; }
.headerturnieredelogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 30px; border: 1px outset #fff; }
.headermitgliedwerdenlogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 10px;  border: 1px outset #fff;}
.headerblvnrwlogo { width: 70px; height: auto; float: left; margin-top: 60px; margin-left: 10px;  border: 1px outset #fff;}
#flexboxheaderbcwrechts { width: 30%; height: auto; }
.iconsheader li { float:right; position: relative; list-style: none; display: inline-flex; margin: 20px 10px 0 0px; width: 45px; height: 45px; background: #000; border-radius: 50%; cursor: pointer; box-shadow: -1px -1px 2px cyan, 1px 1px 3px #242424; }
.iconsheader li.active:before { position: absolute; content: ''; height: 33px; width: 33px; background: #000; top: 8%; left: 50%; transform: translate(-50%, 5%); border-radius: 50%; box-shadow: inset -1px -1px 3px #242424, inset 2px 2px 3px #242424; }
.iconsheader li.active a { color: cyan; font-size: 16px; }
.iconsheader li a { position: relative; z-index: 2; color: #fff; font-size: 20px; width: 100%; line-height: 47px; }
.headerinstagram { width: 50px; height: auto; margin-top: 13px; margin-right: 15px; float:right; }
.headerfacebook { width: 60px; height: auto; margin-top: 11px; margin-right: 6px; float:right; }
.headerkadermanager { width: 140px; height: auto; margin-top: 23px; margin-right: 25px; float:right; }
/* ALLGEMEIN: NAVIGATION FUER GROSSE BILDSCHIRME */
#boxnavigation { width: 100%; height: auto; background: #000; }
nav { background: #000; border-top: 1px solid #454545; width: 1350px; margin: auto; }
nav:after { content: ''; clear: both; display: table; }
nav .logo { float: left; color: #fff; font-size: 17px; line-height: 48px; padding-left: 30px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav .logonavigation { float: left; width: 245px; height: auto; margin-left: 15px; margin-top: 20px; display: none; }
nav ul { float: right; list-style: none; margin-right: 40px; position: relative; padding: 0px; margin: 0px;  z-index: 1000; }
nav ul li { float: left; display: inline-block; background: #000; margin: 0 5px; }
nav ul li a { color: #fff; text-decoration: none; line-height: 50px; font-size: 16px; padding: 8px 15px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav ul ul li a { font-size: 15px; font-family: rockwell, montserrat, poppins, sans-serif; }
nav ul li a:hover { box-shadow: 0 0 5px #33ffff, 0 0 5px #66ffff; border-radius: 5px; color: cyan; }
nav ul ul li a:hover { color: cyan; box-shadow: none; }
nav ul ul { position: absolute; top: 90px; border-top: 3px solid cyan; opacity: 0; visibility: hidden; transition: top .3s; }
nav ul ul ul { border-top: none; }
nav ul li:hover > ul { top: 50px; opacity: 1; visibility: visible; }
nav ul ul li { position: relative; margin: 0px; width: 150px; float: none; display: list-item; border-bottom: 1px solid #121212; }
nav ul ul li a { line-height: 50px; }
nav ul ul ul li { position: relative; top: -50px; left: 150px; }
.fa-plus { margin-left: 40px; font-size: 15px; }
.show, .icon, input { display: none; }
/* ALLGEMEIN: FOOTER FUER GROSSE BILDSCHIRME */
#abschlussbox { background-color: black; width: 100%; height: 400px; float: left; }
#abschlussindex { background-color: black; width: 1390px; height: 400px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: auto;}
#abschlussbcwlogo { width: 230px; height: 153px; margin-top: 20px; margin-left: 20px;}
#abschlusstext1 { margin-top: 40px; text-align: left; }
#abschlusstext2 { margin-top: 40px; margin-right: 80px; text-align: left; }
.footerh1 {  font-size: 18px; color: #00dede; line-height: 30px; font-style: italic; text-decoration: underline;}
.footerh2 { font-size: 15px; color: #eee9e9; line-height: 18px; font-style: italic; }
.footerh3 { font-size: 13px; color: #cdc9c9; line-height: 11px; font-style: italic;}





/* BILDERGALERIEN  bauk�sten style*/
#bildergalerien { width: 1320px; height: auto; margin: auto; padding: 70px 0 40px 0; float: none; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: stretch; }
#bildergalerienstyle { width: 47%; height: 190px; margin: 0 0 40px 0; background: #292929; border: 1px solid #292929; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: flex-start; position: relative; box-shadow: 1px 1px 10px #000; }
}


/*
*
*
*
*
*
css-code fuer tablets von 680px bis 999px
*
*
*
*
*
*/


@media only screen and
(min-width:680px) and (max-width:999px) {

/* ALLGEMEIN: HEADER FUER LAPTOPS UND GROSSE BILDSCHIRME (display: none;) */
#headerbcw { display: none; }
/* ALLGEMEIN: NAVIGATION FUER LAPTOPS UND GROSSE BILDSCHIRME (display: none;) */
nav { display: none; }
/* ALLGEMEIN: HEADER UND NAVIGATION FUER TABLET */
*{  box-sizing: border-box; }
mobilenavigation { background: #000000; padding: 0px; font-family: montserrat, sanf-serif; display: block; }
#headerlogomobile { width: 180px; height: auto; float: left; margin-top: 13px; margin-left: 13px;}
.headerkadermanager { width: 120px; height: auto; margin-top: 24px; margin-right: 25px; float: right; border-radius: 0%; border: 1px outset #ededed; box-shadow: 1px 1px 1px #ededed;}
#headerinstagramtablet { width: 28px; height: 28px; margin-top: 37px; margin-left: 0px;  float: left;}
#headerfacebooktablet {  width: 33px; height: 33px; margin-top: 36px; margin-left: 10px; margin-right: 3px; float: left; }
mobilenavigation ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0; }
mobilenavigation ul li { padding: 0px; cursor: pointer; }
mobilenavigation ul li.items { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; border: 2px outset #cdc9c9; }
mobilenavigation ul li.itemsoben { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; }
mobilenavigation ul li.itemsunten { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; }
mobilenavigation ul li.items:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.itemsoben:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.itemsunten:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.items:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.itemsoben:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.itemsunten:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.logo { flex: 1; color: #fff; font-size: 23px; font-weight: 0; cursor: default; user-select: none; height: 80px;}
mobilenavigation ul li a { color: #fff; text-decoration: none; font-size: 19px; transition: .4s; }
mobilenavigation ul li:hover a { color: cyan; }
mobilenavigation ul li:hover i { color: cyan; }
mobilenavigation ul li.i  { font-size: 23px; }
mobilenavigation ul li.btn { display: none; }
mobilenavigation ul li.btn.hide i:before { content: '\f00d'; }
mobilenavigation { padding: 0px; display: block; }
mobilenavigation ul li.items { width: 71%; display: none; line-height: 55px; margin-bottom: 22px; }
mobilenavigation ul li.itemsoben { width: 100%; display: none; margin-top: 0px; margin-bottom: 17px; border-top: 2px solid #cdc9c9;}
mobilenavigation ul li.itemsunten { width: 100%; display: none; margin-top: 13px; margin-bottom: 0px; border-bottom: 1px solid #ffffff;}
mobilenavigation ul li.items.show { display: block; }
mobilenavigation ul li.itemsoben.show { display: block; }
mobilenavigation ul li.itemsunten.show { display: block; }
mobilenavigation ul li.btn { display: block; color: #ffffff; font-size: 27px; margin-right: 18px; }
mobilenavigation ul li.items:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.itemsoben:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.itemsunten:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.items:hover:after { opacity: 0; }
mobilenavigation ul li.itemsoben:hover:after { opacity: 0; }
mobilenavigation ul li.itemsunten:hover:after { opacity: 0; }
#navigationuntermenuetablet { width: 100%; height: 40px; border-top: 1px solid #454545; border-bottom: 1px solid #dedede; font-family: montserrat, rockwell, arial; }
.navigationuntermenuetabletschrift1 { color: #fff; font-size: 15px; float: left; margin-top: 10px; margin-left: 20px; }
.anavigationuntermenuetabletschrift2 { color: #fff; font-size: 13px; float: right; margin-top: 11px; margin-right: 20px; word-spacing: 20px; }
/* ALLGEMEIN: FOOTER FUER TABLET */
#abschlussbox { background-color: black; width: 100%; height: 380px; float: left; }
#abschlussindex { background-color: black; width: 100%; height: 380px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: auto;}
#abschlussbcwlogo { width: 180px; height: 120px; margin-top: 20px; margin-left: 20px;}
#abschlusstext1 { margin-top: 40px;  }
#abschlusstext2 { margin-top: 40px; margin-right: 80px; }
.footerh1 {  font-size: 18px; color: #00dede; line-height: 22px; font-style: italic; text-decoration: underline;}
.footerh2 { font-size: 15px; color: #eee9e9; line-height: 16px; font-style: italic; }
.footerh3 { font-size: 13px; color: #cdc9c9; line-height: 10px; font-style: italic;}





/* BILDERGALERIEN  bauk�sten style*/
#bildergalerien { width: 100%; height: auto; margin: 50px 0 20px 0; float: left; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-items: stretch; }
#bildergalerienstyle { width: 45%; height: 150px; margin: 0 0 40px 0; background: #292929; border: 1px solid #292929; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: flex-start; position: relative; box-shadow: 1px 1px 10px #000; }
.blog-card { position: absolute; height: 150px; width: 100%; margin: auto; background: #ffffff; border-radius: 25px; box-shadow: 0px 10px 50px #d1d1d1; }
.blog-card .inner-part { display: flex; align-items: center; justify-content: center; padding: 0 15px; height: 150px; position: absolute; }
#tapImg:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
.inner-part .img { height: 100px; width: 100px; overflow: hidden; flex-shrink: 0; border-radius: 20px; box-shadow: 2px 2px 10px #969696; }
#tapImg:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
.img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; opacity: 0; transition: .6s; }
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
.content { padding: 0 5px 0 25px; width: 100%; margin: 0; opacity: 0; transition: .6s; }
#tapImg:checked ~ .inner-part .content { display: none; }
#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
.content span { display: block; color: #8A0808; margin: -15px 0 10px 0; font-size: 13px; text-align: left; font-weight: bold; font-family: rockwell, arial; }
.content .title { font-size: 15px; color: #363636; margin-bottom: 15px; text-align: left; font-family: rockwell, arial; }
.content .text { font-size: 14px; color: #363636; margin-bottom: 12px; line-height: 18px; text-align: justify; text-align: left; font-family: rockwell, arial; display: none; }
.content button { float: left; margin-left: -3px; display: inline-flex; padding: 6px 9px; border: none; font-size: 10px; text-transform: uppercase; color: #ededed; border-radius: 50px; border: 1px solid #ededed; cursor: pointer; outline: none; background: linear-gradient(147deg, #8A0808 0%, #363636 74%);  font-family: rockwell, arial; font-style: italic; font-weight: bold; }
.content button:hover { background: linear-gradient(147deg, #ededed 0%, #969696 74%); color: #8A0808; border: 1px solid #ededed; }
.sliders { position: absolute; bottom: 7px; left: 50%; z-index: 100; transform: translateX(-10%); }
#tapImg:checked ~ .sliders { display: none; }
.sliders .tap { position: relative; height: 7px; width: 40px; background: #d9d9d9; border-radius: 5px; display: inline-flex; margin: 0 3px; cursor: pointer; }
.sliders .tap:before { position: absolute; content: ''; top: 0; left: 0; height: 100%; width: -100%; border-radius: 10px; background: linear-gradient(147deg,#8A0808 0%, #363636 74%); transform: scaleX(0); transition: transform .6s; transform-origin: left; }
#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before { transform: scaleX(1); width: 100%; }
input { display: none; }
/* BILDERGALERIEN  skalierung baukasten fuer tablets */
#tapImg2:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg3:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg4:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg5:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg6:checked ~ .inner-part .img { height: 150px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
}


/*
*
*
*
*
*
css-code fuer smartphone bis 679 px
*
*
*
*
*
*/


@media only screen and
(max-width:679px) {

/* ALLGEMEIN: HEADER FUER LAPTOPS UND GROSSE BILDSCHIRME (display: none;) */
#headerbcw { display: none; }
/* ALLGEMEIN: NAVIGATION FUER LAPTOPS UND GROSSE BILDSCHIRME (display: none;) */
nav { display: none; }
/* ALLGEMEIN: HEADER UND NAVIGATION FUER SMARTPHONE */
*{  box-sizing: border-box; }
mobilenavigation { background: #000000; padding: 0px; font-family: montserrat, sanf-serif;}
#headerlogomobile { width: 160px; height: auto; float: left; margin-top: 12px; margin-left: 8px;}
.headerkadermanager { width: 120px; height: auto; margin-top: 25px; margin-right: 50px; float:right; display: none; }
#headerinstagramtablet { width: 25px; height: 25px; margin-top: 33px; margin-left: 3px;  float: left; display: none; }
#headerfacebooktablet {  width: 30px; height: 30px; margin-top: 32px; margin-left: 7px; margin-right: 0px; float: left; display: none; }
mobilenavigation ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0; }
mobilenavigation ul li { padding: 0px; cursor: pointer; }
mobilenavigation ul li.items { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; border: 1px outset #cdc9c9; }
mobilenavigation ul li.itemsoben { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; }
mobilenavigation ul li.itemsunten { position: relative; width: auto; margin: 0px; text-align: center; order: 3; background: #080808; }
mobilenavigation ul li.items:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.itemsoben:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.itemsunten:after { position: absolute; content: ''; left: 0; bottom: 5px; height: 2px; width: 100%; background: #33ffff; opacity: 0; transition: all 0.2s linear; }
mobilenavigation ul li.items:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.itemsoben:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.itemsunten:hover:after { opacity: 1; bottom: 8px; }
mobilenavigation ul li.logo { flex: 1; color: #fff; font-size: 23px; font-weight: 0; cursor: default; user-select: none; height: 70px; }
mobilenavigation ul li a { color: #fff; text-decoration: none; font-size: 17px; transition: .4s; }
mobilenavigation ul li:hover a { color: cyan; }
mobilenavigation ul li:hover i { color: cyan; }
mobilenavigation ul li.i  { font-size: 23px; }
mobilenavigation ul li.btn { display: none; }
mobilenavigation ul li.btn.hide i:before { content: '\f00d'; }
mobilenavigation { padding: 0px; display: block; }
mobilenavigation ul li.items { width: 81%; display: none; line-height: 50px; margin-bottom: 20px; }
mobilenavigation ul li.itemsoben { width: 100%; display: none; margin-top: 0px; margin-bottom: 14px; border-top: 1px solid #cdc9c9;}
mobilenavigation ul li.itemsunten { width: 100%; display: none; margin-top: 10px; margin-bottom: 0px; border-bottom: 1px solid #ffffff;}
mobilenavigation ul li.items.show { display: block; }
mobilenavigation ul li.itemsoben.show { display: block; }
mobilenavigation ul li.itemsunten.show { display: block; }
mobilenavigation ul li.btn { display: block; color: #ffffff; font-size: 24px; margin-right: 13px; }
mobilenavigation ul li.items:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.itemsoben:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.itemsunten:hover { border-radius: 5px; box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff; }
mobilenavigation ul li.items:hover:after { opacity: 0; }
mobilenavigation ul li.itemsoben:hover:after { opacity: 0; }
mobilenavigation ul li.itemsunten:hover:after { opacity: 0; }
/* ALLGEMEIN: UNTERMENUE NAVIGATION TABLET (dispay: none;) */
#navigationuntermenuetablet { display: none; }
/* ALLGEMEIN: FOOTER FUER SMARTPHONE */
#abschlussbox { background-color: black; width: 100%; height: 800px; float: left; }
#abschlussindex { background-color: black; width: 100%; height: 800px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; margin: auto;}
#abschlussbcwlogo { width: 180px; height: 120px; margin-top: 20px; margin-left: 20px; }
#abschlusstext1 { margin-top: 40px; width: 100%; margin-left: 20px; }
#abschlusstext2 { margin-top: 40px; width: 100%; margin-right: 0px; margin-left: 20px; }
.footerh1 {  font-size: 18px; color: #00dede; line-height: 22px; font-style: italic; text-decoration: underline;}
.footerh2 { font-size: 15px; color: #eee9e9; line-height: 16px; font-style: italic; }
.footerh3 { font-size: 13px; color: #cdc9c9; line-height: 10px; font-style: italic;}
/* ALLGEMEIN: ZWISCHENRAUM FUER SMARTPHONE  */
#zwischenraumsmartphone { width: 100%; height:50px; background-color: #ededed; display: block; margin-bottom: 0px; border-bottom: 1px solid #ababab; }
#zwischenraumsmartphonestyle { width: 100%; height: 100px; margin-top: 0px; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
#zwischenraumsmartphonetextseitenthema { color: #000; font-size: 19px; font-family: arial; font-style: italic; font-weight: bold; line-height: 50px; margin: 0 10px 0 16px; }
#zwischenraumsmartphonetextseitenthemaunterpunkt { font-size: 10px; font-family: arial; color: #595959; padding: 4px 10px 4px 10px; margin: 14px 0 0 13px; border: 1px solid #bdbdbd; cursor: pointer; box-shadow: 2px 2px 10px #000; font-weight: bold; border-radius: 8px; }





/* BILDERGALERIEN  bauk�sten style*/
#bildergalerien { width: 100%; height: auto; margin: 35px 0 10px 0; float: left; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-items: stretch; }
#bildergalerienstyle { width: 95%; height: 163px; margin: 0 0 25px 0; background: #292929; border: 1px solid #292929; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: flex-start; position: relative; box-shadow: 1px 1px 10px #000; }
.blog-card { position: absolute; height: 160px; width: 100%; margin: auto; background: #ffffff; border-radius: 25px; box-shadow: 0px 10px 50px #d1d1d1; }
.blog-card .inner-part { display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 160px; position: absolute; }
#tapImg:checked ~ .inner-part { padding: 0; transition: .1s ease-in; }
.inner-part .img { height: 105px; width: 105px; overflow: hidden; flex-shrink: 0; border-radius: 20px; box-shadow: 2px 2px 10px #969696; }
#tapImg:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
.img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; opacity: 0; transition: .6s; }
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 { opacity: 1; transition-delay: .2s; }
.content { padding: 0 5px 0 25px; width: 100%; margin: 0; opacity: 0; transition: .6s; }
#tapImg:checked ~ .inner-part .content { display: none; }
#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 { opacity: 1; margin-left: 0px; z-index: 100; transition-delay: .3s; }
.content span { display: block; color: #8A0808; margin: -15px 0 6px 0; font-size: 14px; text-align: left; font-weight: bold; font-family: rockwell, arial; }
.content .title { font-size: 16px; color: #363636; margin-bottom: 15px; text-align: left; font-family: rockwell, arial; }
.content .text { font-size: 14px; color: #363636; margin-bottom: 12px; line-height: 18px; text-align: justify; text-align: left; font-family: rockwell, arial; display: none; }
.content button { float: left; margin-left: -3px; display: inline-flex; padding: 8px 11px; border: none; font-size: 11px; text-transform: uppercase; color: #ededed; border-radius: 50px; border: 1px solid #ededed; cursor: pointer; outline: none; background: linear-gradient(147deg, #8A0808 0%, #363636 74%);  font-family: rockwell, arial; font-style: italic; font-weight: bold; }
.content button:hover { background: linear-gradient(147deg, #ededed 0%, #969696 74%); color: #8A0808; border: 1px solid #ededed; }
.sliders { position: absolute; bottom: 10px; left: 55%; z-index: 100; transform: translateX(-7%); }
#tapImg:checked ~ .sliders { display: none; }
.sliders .tap { position: relative; height: 8px; width: 35px; background: #d9d9d9; border-radius: 5px; display: inline-flex; margin: 0 3px; cursor: pointer; }
.sliders .tap:before { position: absolute; content: ''; top: 0; left: 0; height: 100%; width: -100%; border-radius: 10px; background: linear-gradient(147deg,#8A0808 0%, #363636 74%); transform: scaleX(0); transition: transform .6s; transform-origin: left; }
#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before { transform: scaleX(1); width: 100%; }
input { display: none; }
/* BILDERGALERIEN  skalierung baukasten fuer tablets */
#tapImg2:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg3:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg4:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg5:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
#tapImg6:checked ~ .inner-part .img { height: 160px; width: 100%; z-index: 99; margin-top: 0px; transition: .3s .2s ease-in; }
}