// CSS florian-haenle.de 08.2018
 
@import url('fonts/fontstyle.css');

body{hyphens:auto;}

h1, h2, h3, h4, h5, h6{ line-height:120%; }
#slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6 { font-weight: lighter; }

 
/* ul.zpTABs > li.tab > a {font-family: 'Barlow Semi Condensed','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4em; line-height: 1.4em; text-transform: uppercase; letter-spacing: 0.5pt;}*/

hr {
	border: 0;
	border-bottom: solid 1px #d8d8d8;
	margin: 2em 0;
}

#webdescription { 
    border-bottom: solid 12px rgb(253, 195, 0);
}
 
#footer { 
    border-top: solid 12px rgb(253, 195, 0);
}

  
    
/* ----- eigene Angaben ----- */

/*===== GRID STYLE =====*/
.gridstyle-2{display:grid; display:-ms-grid; grid-template-columns: 1fr 1fr; -ms-grid-columns:500px 500px;}
.gridstyle-3{display:inline-grid; grid-template-columns: 1fr 1fr 1fr; }
.gridstyle-4{display:inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.gridstyle-5{display:inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.gridstyle-6{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

.gridstyle-6, .gridstyle-5, .gridstyle-4, .gridstyle-3, .gridstyle-2{/* grid-column-gap: 10px;  -ms-grid-gap: 10px; padding: 0 10px; */ }

.gridstyle-2 div:first-child {padding-right: 20px; }
/*===== GRID STYLE ENDE =====*/

/*===== FLEX STYLE =====*/
.flexstyle-2{display:flex; display : -ms-flexbox; align-items : stretch; -ms-flex-align : stretch; align-content : stretch; }

/*===== FLEX STYLE ENDE =====*/

.img-r{float:right; padding:0 0 20px 20px;}
.img-l{float:left; padding:0 20px 20px 0;}

.aktuelles{width:100%}
.aktuelles p{border-bottom: 1px solid #CED7E0; margin:30px 0;}
 


.mylist > ul li { 
	list-style: none;
	background: url('images/bullet.png') no-repeat 0 8.5px;
	padding: 0 0 0 35px !important;
	background-size: 10px;
}

.mylist-big > ul li { 
	list-style: none;
	background: url('images/bullet.png') no-repeat 0 15.5px;
	padding: 0 0 0 35px !important;
	background-size: 10px;
}
.mylist > ul li strong, .mylist-big > ul li strong {
	font-family: 'Barlow Semi Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-size: 1.4em;
    font-weight:400;
    color: #2d2b01;
}

 

/*--------- CSS Datenschutz -----------*/


.datenschutzinfo{
	padding: 0;
	text-align: left;
	font-size: 1.1em;
}
 
.datenschutz h3{font-size:1.3em; letter-spacing:0.02em; padding-top:20px;}
.datenschutz ol li{list-style-type: upper-alpha !important;} 

.datenschutz ul li{list-style-type: square !important;} 
    
a.button {
    display: inline-block;
    margin: 0 5px;
    padding: 10px 15px;
    font-size: 1.1em;  
    color: #fff; 
    border-radius:3px;
}

.alertbanner.content a#close { 	top: -2400px; }
div.alertbanner.content {padding: 20px;}
/* .close { float: left; }*/
.btn-mittig{margin: 0 auto; text-align:center; max-width:80%;}

.right-image {WIDTH: 38%; FLOAT: right; PADDING: 0 0 20px 20px;}

.clearfix{clear: both;}

/*------- Ende Datenschutz --------*/

/* MEDIA PORTRAIT */
@media all and (min-device-width:360px) and (max-device-width:639px) and (orientation:portrait) {
    
    #slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6 { font-size: 2em; line-height: 0.5; }
        
    .gridstyle-2, .gridstyle-3, .gridstyle-4, .gridstyle-5{ display:block; }
    
    .topadress {position:absolute; top:0; left:0; width:45%; padding: 30px 10px;font-size:90%; }
    .topadress > table{font-size:150%;}
    .topadress h2{font-size:165%;}
    
    h1, h2 { font-size: 185%; }
    h3, h4, h5, h6{ font-size:150%; }
    
    #box-bewerb{position:relativ; z-index:9999; width: 80% !important; } 
    
    #sidebarinner{overflow: visible;}
    
    img.service24{ WIDTH: 80px !important; margin-top:-70px !important;}
    
    .zitat{ background-size: 18%; font-size:1.35em; padding: 20px 20px 20px 80px; }
    
    .info {	background: #d1fbab url(images/info-icon.png) no-repeat 7px 10px; background-size: 20%; }
    
    .btn-mittig{margin: 0 auto; text-align:center; max-width:100%;}
    
    div.alertbanner.content.left.withmargin { left: 0; bottom: 0; }
    
    .grid figure {min-width: 320px !important; min-height: 150px !important;  width: 100%; }
    .grid figure figcaption, .grid figure figcaption > a {	width: 87% !important;	height: 87% !important; }
    figure.effect-ruby p { margin: 2.5em 0 0 !important; }
    .grid figure img{top:-70px;}
    
    .border-right div {	border-bottom: 1px solid #999; border-right: none; }
    
}
    
}

/* MEDIA LANDSCAPE */
@media screen 
  and (min-device-width: 360px) 
  and (max-device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {
    
    
    .grid figure { min-width: 280px !important; min-height: 150px !important;	width: 100%; margin: 7px !important; }
    
    .grid figure figcaption, .grid figure figcaption > a {	width: 80% !important;	height: 80% !important; }
     
    
}

@media (min-width: 360px) and (max-width: 960px){   
    .gridstyle-2, .gridstyle-3, .gridstyle-4, .gridstyle-5{ width: 135%; }
   
}

/* iPad Retina Hoch- und Querformat: */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    #slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6 { font-size: 1.8em !important; line-height: 1.25em; }
    
}

/* iPhone Plus Hoch- und Querformat: */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 960px) { 
    #slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6 { font-size: 1.8em !important; line-height:1.25em; }
}

/*------------------------*/
/*     Hover Effect       */
/*      Gridelement       */
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1168px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
    margin: 10px 0.95%;
    min-width: 205px;
    max-width: 205px;
    max-height: 205px;
    width: 100%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 1em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 80%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
	font-size: 1em; 
}

.grid figure h2 span {
	font-weight: 700;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
	background-color: #17819c;
}

figure.effect-ruby img {
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-ruby h2 {
	margin-top: 0; 
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}
 
figure.effect-ruby p {
	margin: 1em 0 0;
   padding: 0.3em 0.5em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); 
    color: #fff;
}

figure.effect-ruby:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}


/*    ENDE Hover Effect   */
/*------------------------*/

/*--- START Accordion ---*/

.block { 
  width: 100%;
  height: 100%;
  /* float: left; */
  padding: 0;
  z-index: 10; 
  overflow: hidden;
  margin: 50px auto;
}


.block > div > div {
  clear: both; 
    height: 0;
}

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

.block { max-width: 100%; padding: 0px; margin: 0;} 
    
.block > div input:checked ~ div {  overflow-y: scroll; }
    
}

.block > div {
  display: block;
  position: relative;
  padding: 0;
  border-bottom: 1px solid white;
  background-color: #f9f9f9;
  color: black;
}

.block > div input + label {
  cursor: pointer;
  display: block;
  padding: 7.5px 15px;
  background-color: #8FAAC9;
  -webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
  transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;
  color: #fff;
    font-weight:700;
}

.block > div input ~ div {
  visibility: hidden;
  max-height: 0;
  padding: 0;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
}

.block > div input ~ div p { padding: 0 15px; }

.block > div input:checked + label {
  background-color: #5A7493;
  -webkit-transition: background-color 0s ease-in-out 0s;
  transition: background-color 0s ease-in-out 0s;
  color: #fff;
}

.block > div input:checked ~ div {
  display: table;
  opacity: 1;
  visibility: visible;
  max-height: 300px;
  padding: 20px 0;
  -webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
  overflow-y: scroll; 
}

.block > div input:checked + label > span {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
    top:14px;
}

.block > div input + label > span {
	display: block;
	width: 40px;
	position: absolute;
	top: 16px;
	right: 0;
	pointer-events: none;
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
	text-align: center;
	font-size: 12px;
	line-height: 1;
}
 


/*    ENDE Accordion Effect   */
/*------------------------*/