*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
} 
html, body {
    height: 100%;background-color:white; margin:0;
    font-family: Arial,sans-serif,Helvetica; 
    font-size:16px;
    color:black;
}

h1{ font-size:30px }

.f12 { font-size:12px }
.f13 { font-size:13px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f20 { font-size:18px }

.bold { font-weight: bold; }

.rel { 	position:relative }
.abs { 	position:absolute }
.in-block { display: inline-block } 

.center { text-align:center }
.right  { text-align:right }
.left   { text-align:left }


.full-w { width:100% }
.full-h { height:100% }


.mt0 { margin-top:0px }
.pd40 { padding:40px 0}
.pd60 { padding:60px 0}
.pd0 { padding:0px }
.w300 { 	width:300px }
.l20 { left:20px; }
.r20 { right:20px; }
.mr40 { margin-right:40px!important; }
.mb50 { margin-bottom:50px!important; }

.aus { display:none }


#wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom:150px;
}

#footer{
  
 position:absolute;
    bottom: 0;
    width: 100%;
} 

   
    
.bgc-blue { background-color:#15518b }

.block{
    position:relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding:0 20px;
}

#block-left  { position:relative;float:left;width:calc(100% - 350px) }
#block-right { float:right;margin: 0px 0 50px 0px;text-align:center }	

.bldk{
	background-color:#15518b;padding:40px 0
}

.bldk h1, .bldk h2, .bldk p{
	color:white
}



.clear {
  overflow:   auto

} 
.clear::after {
  content: "";
  clear: both;
  display: table;
}

.shadow { box-shadow: 0 20px 40px #abadbc;display:inline-block; }




input[type=text], input[type=password], select , input[type=number],textarea {
   
    border-radius: 5px;
    background-clip: padding-box;
    box-sizing: border-box; 
    font-family: Arial, Helvetica, sans-serif;     
    font-size:14px;  
    width: 100%;
    padding:6px 9px;  
     background: white;
    border: 1px solid #DADADA;
    color: black;   
    margin-bottom:5px;  
}

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
    background: #FDF2BA;
    border: 1px solid #6E6E6E;
    color:black;
    outline-style: none;
  	box-shadow: none;
    }


input[type=text]:disabled, input[type=password]:disabled {
	background: #f8f8f8; 
	background: -moz-linear-gradient(top,  #f8f8f8 0%, #e6e6e6 100%); 
	background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e6e6e6 100%); 
	background: linear-gradient(to bottom,  #f8f8f8 0%,#e6e6e6 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e6e6e6',GradientType=0 );
	color:gray;
	cursor:not-allowed;
	
    
    }


::-webkit-input-placeholder { color:#B3B8BD; }
::-moz-placeholder { color:#B3B8BD; } 
:-ms-input-placeholder { color:#B3B8BD !important;  } 
::-ms-input-placeholder {   color:#B3B8BD; }
input:-moz-placeholder { color:#B3B8BD; }


    input[type=checkbox] {
        -webkit-appearance: none;
        width: 19px;
        height: 19px;
        vertical-align:middle;
        background-image: url("/images/icos/checkLeer.png");
        background-size: 100%;
        background-position: right center;
        background-repeat: no-repeat;
        border:none;
    }

    input[type=checkbox]:checked {
        background-image: url("/images/icos/check.png");
   }

    input[type=checkbox].isLocked {
        background-image: url("/images/icos/noCheck.png");
        width:15px;
   }

.msg-box {
	display: inline-block;background-color:white;min-width:300px;
}

.msg-caption {
	 background-color:#f9bb2d;padding:5px;text-align:center;font-size:13px;font-weight:bold
}

.msg-content {
	 padding:20px;text-align:left;font-size:13px
}
.msg-footer{
	border-top:1px silver dotted;padding:10px
}

.flex{	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;   
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 
    width:100%;
}
.flex.justify{
	 -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-item {
  flex: 0 1 auto;
}

/* Buttons   */

.but {
    font-family:Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 10px 16px;
    background-color:silver;
    display: inline-block;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    cursor:pointer;	
    text-decoration:none;
    box-shadow: 3px 2px 2px 0px #888;

	}

.but.blue   { color: black; background-color:#8ec0ef; }
.but.yellow { color: black; background-color:#ffcc00; }
.but.small  { font-size:14px;padding:5px 20px;}

.but:hover        { color:white;background-color:#9f9b9b;}
.but.blue:hover   { color:white;background-color:#489ae7;}
.but.yellow:hover { color:#932604;background-color:#ffe680;}

.but-anmeldung {margin:10px 20px; }

.but.msg-close{
    margin: 5px;
    width: 150px;
    padding: 5px;
    font-size: 14px;
    background-color: #ffcc00;
}

.fr-caption{
    position:sticky;
    width: 100%;
    top: 0px;
    padding: 10px 20px;
    z-index: 10;
    background-color:#15518b;
    color:white;
    font-size:24px;
    font-weight:bold;
}


.fr-close, .fr-msg-close,.news-close{
	position: absolute;
	top:6px;
    right: 20px;
    padding-top:1px;
    color: white;
    font-size: 24px;
    font-weight:bold;
    border: 2px white solid;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
}

.fr-close:hover,.fr-msg-close:hover, .news-close:hover{ 
	cursor:pointer;color:#ffcc00;border:2px #ffcc00 solid;
}

#frFrame{
	width:95vw;height: 95vh;max-width:1000px
	}

#frFrame.kontakt{
	max-width:600px;max-height:600px
	}

/* Modal  */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 501; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  text-align: center;
  padding: 2.5vh 2vw;
}

.modal-content {
  background-color: #fefefe;
  margin: 0 auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  text-align:left;
  display:inline-block;
  box-shadow:6px 6px 8px 0px black;  
}


/* Header Bereich // Menu */

#header-blk { 
   position:relative;
   background: url('../../images/header_htg.png') left top repeat-x;
   background-size: contain;
   max-height:140px;
   height:140px;
   min-height:50px;
}

.header-blk-logo {padding:1% 0 }
.header-blk-logo img { height:160%	}

.header-blk-text {
    position: relative;
    float:right;
    font-size: 2.6vw;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: black;
    font-weight: bolder;
    text-align: right;
    line-height: 2.7vw;
}

.header-blk-logo:hover,.header-blk-text:hover {
	cursor:pointer
}
.ham-ico {
  display: none;
  cursor: pointer;
  float:right;
  padding: 0 0 0 20px
 }

.ham-ico .item {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.ham-ico.open .bar1 { transform: translate(0, 9px) rotate(-45deg); }
.ham-ico.open .bar2 { opacity: 0;}
.ham-ico.open .bar3 { transform: translate(0, -9px) rotate(45deg); }

.mn { height: 37px;color:white;background-color:#15518b; }

.mn-block {
    position:relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding:0 20px;
    text-align:right	
}

.mn.mobil:not(.open) .mn-block{
	display:none
}
.mn-content {
	position:relative;display:inline-block;z-index:100
}
.mn.mobil .mn-content {
	position:absolute;width:100%;background-color:#15518b;
}

.mn-items {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  display:inline-block;
  font-size:15px;font-weight:bold;
}

.mn-link {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

.mn-link.img {
  padding: 3px 10px;
}

.mn-drop-link {
  margin-bottom:10px;	
}

.mn-drop-link a::before{
	content: '\2BC8';
	margin-right:10px;
   
}
.mn-items .mn-drop-link a{
  font-size: 16px;
  color: white;
  text-decoration: none;
}

.mn-items a.mn-link.img {
  padding: 4px 10px;
}

.mn-drop-caption:hover,.mn-drop-link:hover a{
  color: #ffcc00;cursor:pointer
}




.mn-drop {
  float: left;
  overflow: hidden;
}

.mn-drop-caption {
  font-size: 16px;  
  border: none;
  outline: none;
  padding: 10px 10px;
  background-color: inherit;
  font: inherit;
  margin: 0;  
  color:white

}


.mn-drop-content {
  display: none;
  position: absolute;
  background-color: #15518b;
  width: 100%;
  left: 0;
  z-index: 1;
  text-align:left;
  color:white;
  padding:20px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.6);
    -moz-box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.6);
    box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.6);  
}


.mn:not(.mobil) .mn-drop:hover  .mn-drop-content {
  display: block;
}

.mn-drop-content h2{
	margin:0 0 20px 0
}

.mn-drop.open .mn-drop-content {
  display: block!important;
}

.mn-drop-close { display:none }

.mn.mobil .mn-drop, .mn.mobil .mn-link{    border-bottom: 1px #5b9edf dotted }
.mn.mobil .mn-drop:hover,.mn.mobil .mn-link:hover { background-color: #1a76cf;cursor:pointer}



#impressum {
	background-color:#8b8a8a;color:black;padding:25px 0;
}
#impressum h2 {
	margin-top:0px;font-size:16px
}

#impressum a {
	color:black;text-decoration: none;
}

#impressum .item-link a {
	font-size:16px;font-weight:bold;color:black;text-decoration: none;
}

#impressum a:hover,#impressum .item-link a:hover {
	color:white
}


#impressum .item-link {
	padding:5px 0
}
#impressum .item-link a::before{
	content: '\2BC8';
	margin-right:10px;
}

#impressum .logo-app{
	display:inline-block;margin:5px 10px 10px 0
}

#impressum .partner {
	display:inline-block
}

ul { list-style-type:none;}
ul li:before { content: "" " "; }

ul.high-light { 
	list-style-type	:none;
	line-height: 1.3;
    }

ul.high-light i.icofont-star{ 
color:#e2795a;
}

ul.high-light.tennis { 
    padding: 0 10px;
    font-size: 15px;
    line-height: 1.7;
    }

.filter-table {
	width:150px;float:left;margin-right:40px;font-weight:normal
}
.filter-table .ipa-drop-label{
	font-size:11px
}

.filter-table .ipa-drop-header{
	height:22px;padding:0 4px
}
.filter-table .ipa-drop-arrow{
	background:silver
}



.ipa-drop-header{
	margin:0 0 5px 0;
	padding:4px;
	width:250px;
	border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #DADADA;
    position:relative;
    white-space: nowrap;
    overflow: hidden;
    height:26px;
    cursor:pointer;
    background-color:white;
    font-weight:normal;
    font-size:15px;
    max-width:100%

}
.ipa-drop-arrow {
	position:absolute;width:20px;background-color:lightgray;right:0px;top:0px;height:100%;cursor:pointer;
}
.ipa-drop-arrow .arrow{
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin:3px 5px 0 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.ipa-drop {
	position:absolute;
	margin-top:-6px;
	border:1px silver solid;
	max-height:350px;
	overflow:auto;
	display: block;
	z-index:100;
	min-width:250px;
	display:none;
	background-color:rgb(253, 242, 214);
	font-size:15px;
}
.ipa-drop-gruppe{
	background-color:#ffb9086e;font-size:15px;font-weight:bold;text-align:center;padding:2px
	
}
.ipa-drop-item,.checkliste-item {
	padding:2px 10px;
	border-bottom:1px silver dotted;
}

.ipa-drop-item:hover,.checkliste-item:hover{
background-color: #D2E3FF;
	cursor:pointer
}

.ipa-drop.checkbox .ipa-drop-item,.checkliste-item{
    background-position: 5px;
    background-image: url('/images/icos/checkLeer.png');
    background-repeat: no-repeat;
    background-size: 17px 15px;
    padding-left: 28px;
}


.ipa-drop.checkbox .ipa-drop-item.checked,.checkliste-item.checked{
    background-position: 5px;
    background-image: url('/images/icos/checkBlack.png');
    background-repeat: no-repeat;
    background-size: 17px 15px;
    padding-left: 28px;
}

.ipa-drop-item.locked{
  pointer-events: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;

}

.ipa-drop-item.disabled{
 display:none

}

.ipa-grid {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 1px;
    background-color: #ccc;
    padding: 1px;
    margin-bottom: 30px;
    position: relative;
}


.ipa-grid .item {
    background-color: #f4f4f4;
    padding: 3px;
    font-size: 14px;
    overflow: hidden;
}


.isError {
	border:1px red solid!important
}
.get-datenschutz,.get-agb,.get-kursbedingungen,.download{
	color:blue;cursor:pointer
}

.get-datenschutz:hover,.get-agb:hover,.get-kursbedingungen:hover,.download:hover{
	color:#eb4009
}

@media only screen and (max-width: 650px ) {
    .header-blk-text { font-size:16px; line-height:16px }
	.header-blk-logo img { height:100% }
	.xxxxmn-desk { display:none }
	.xxxxblock { padding:0 10px }
}


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

	.header-blk-logo img { height:100% }
	.xxxxxxmn-desk { display:none }
	.ham-ico { display:inline-block }
	.block { padding:0 10px }
     .mn { height:auto }
     .mn-block { padding:0px }
     .mn-content {display:block }
     .mn-items { width:100%;text-align:left }
     .mn-link { float:none;width:100%;text-align:left;margin-left:10px }
     .mn-drop {	float:none }
     .mn-drop-caption { padding-left:20px }
     .mn-drop-content { position:relative;padding: 5px 0px 0px 25px;background-color: #0e3d6b }
     .mn-lock-mobil{ display:none}

}

.banner-kurse-staerke {
    margin-bottom: 50px;
    padding: 4px 10px;
    text-alingn: left;
    text-align: left;
    width: 300px;
    font-size: 12px;
    background-color: #bddbf747;
}

.banner-angebot {
	margin-bottom:50px;text-align:center;cursor:pointer
}
.banner-spielertreff, .banner-platzstd {
	width:300px;margin-bottom:50px;
}
.banner-spielertreff .caption,.banner-platzstd .caption {
    background: #c3e1ff;
    font-weight: bold;
    padding: 5px;}

.banner-spielertreff .content, .banner-platzstd .content {
background: #edf5fd;
    font-size: 12px;
    padding: 10px;
    }

#iContent {	position:relative;cursor:pointer;color:#2525a9;}
.iCap {	display:inline-block;font-size:16px;font-weight:bold;margin-right:3px}
.iVal {	display:inline-block;font-size:12px;margin-right:10px}
.iIco{display:inline-block}
#iInfo { position:relative;font-size:12px;background:#e4eff9;padding:5px;padding: 5px 10px;border: 1px #6ab2f3 solid;cursor:pointer}


.input-wrapper { position: relative;  margin-bottom: 15px; }
.input-wrapper input { padding: 10px;  border: 1px solid #ccc;  border-radius: 5px;  box-sizing: border-box;  font-size:16px}
.input-wrapper label {  position: absolute;  top: 10px;  left: 10px;  pointer-events: none;  transition: all 0.3s ease;  color: #999;}
.input-wrapper input:focus + label,
.input-wrapper input:not(:placeholder-shown) + label {  top: -8px;  left: 5px;  font-size: 12px;  padding:0 5px;  background:white}
.input-wrapper input:focus + label {  color: #007bff; }
.input-wrapper input:focus::placeholder {  color: transparent; }
.input-wrapper input:focus { background:white;outline-style: none;border: 2px #15518b solid ; }

.but .img-wait { 	display:none;width:20px;margin:auto }
.but.progress .img-wait { display:block }
.but.progress span { display:none }
.but.progress:hover { cursor:not-allowed }


@media all and (max-width: 950px) {
	#block-left  { width:100%; }
	#block-right,.banner-kurse-staerke { width:100%; }	
}