/**** FARBEN ****/
/*
fvf-rot:   	rgb(248,53,47);
hellstgrau:	#f5f5f5;
hellgrau:	#eee;
*/

/**** GLOBAL ****/
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow'); /* kräftig */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); /* dünn */
@import url('https://fonts.googleapis.com/css?family=Oswald'); /* kräftig */
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz'); /* kräftig, schmal */

body {
  margin: 0;
  font-family: 'bookman old style', 'times new roman', serif;
  font-size: 1.1rem;
}

* {
  -webkit-box-sizing: border-box;
					box-sizing: border-box;
}

h1, h2, h3 { 
		font-family: 'Open Sans Condensed', sans-serif;
}
h3 {
	color: #444;
	font-size: 1.7rem;
}

h1 {
	color: rgb(248,53,47);
	font-size: 3rem;
}
h2 {
	color: #777;
	font-size: 2rem;
}

p, td { -o-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

section a, section a:visited { 
	color: #000; 
	background: #eee; 
	text-decoration: none;
}

section a:hover, section a:active {
	color: #fff;
	background: rgb(248,53,47);
}

section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.fhl {
	color: red;
	font-size: .9rem;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.scr-read {
  display: none;
}

.intro {
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;	
}

.intro > h1 {
  font-size: 3rem;
  color: rgb(248,53,47);
}

.intro > p {
  font-size: 1.1rem;
	text-align: left;
	columns: auto 400px;
}

.intro div > p > a, .intro div > p > a:visited {
	color: rgb(248,53,47);
	font-size: 1.1rem;
	padding-left: 3px;
	padding-right: 3px;
}

.intro div > a:hover, .intro div > a:active {
	color: #fff;
	background: #666;
	text-decoration: none;
}

a.btn2, a.btn2:visited, button.btn2 {
  background: #777;
  border: 0;
  color: #fff;
  padding: 7px 15px;
  -webkit-transition: background .7s ease-in-out;
  transition: background .7s ease-in-out;
}

a.btn2:hover, button.btn2:hover {
  color: #fff;
  border: 0;
	background: rgb(248,53,47);
  cursor:  pointer;
}


/**** GRID-SYSTEM  &  @MEDIA ****/

.container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  padding: .8rem;
}

.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-4 { width: 66.666%; }
.col-6 { width: 100%;    }

@media (max-width: 1366px) {
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .intro {
    width: 90%;
  }
  .intro > p {
    margin-bottom: .5rem;
  }
}

@media (max-width: 1024px) {
  .col-1 { width: 33.333%; }
	section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .intro {
    width: 100%;
		margin-bottom: 1rem;
  }
  .intro > p {
    margin-bottom: 0;
  }	
}

@media (max-width: 768px) {
  .col-1 { width: 50%;  }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }
	section {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
	#ani-logo {
    display: none;
  }
}

@media (max-width: 480px) {
  .col-1 { width: 100%; }
  .col-2 { width: 100%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }
}


/**** NAVIGATIONSLEISTE ****/

nav {
	height: auto;
	/*max-height: 150px;*/
	position: fixed;	
	background-color: #fff;
	box-shadow:  0 3px 13px #999;
}

#header-nav {
  width: 100%;
  font-size: 1.1rem;
	z-index: 1000;
}

#header-nav a > img {
  width: 100%;
	max-width: 450px;
  margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#header-nav ul {
  margin: 0;
  padding: 0;
  float: right;  
}

#header-nav ul > li {
  display: inline-block;
	line-height: 60px;
	list-style-type: none;
}

#header-nav ul > li > a {
  display: inline-block;
}

#header-nav ul > li > a:link, #header-nav ul > li > a:visited {
  color: rgb(248,53,47);
  text-decoration: none;
	padding:  0 10px;
}

#header-nav ul > li > a:hover, #header-nav ul > li > a:active {
  color: #fff;
	background: #666;
  text-decoration: none;
}

#header-nav ul > li > a.aktiv {
  background: #eee;
	color: #000;
}

#header-nav .col-3 {
  padding-top: 5px;
  padding-bottom: 5px;
}

#header-nav .container,
#header-nav .row,
#header-nav .col-3 {
  height: 100%;
}

.logo-link {
  display: inline-block;
	margin-top: -23px;
}

/**** NAVIGATIONSLEISTE (MOBIL) ****/

#mobile-nav {
  margin: 0 auto;
	width: 100%;
  font-size: 1rem;
	z-index: 1000;
}

#mobile-nav a > img {
  width: 85%;
	max-width: 450px;
  margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#mobile-nav ul {
  margin: 15px auto 0 auto;
  padding: 0;  
}

#mobile-nav ul > li {
  display: inline-block;
	line-height: 50px;
	list-style-type: none;
}

#mobile-nav ul > li > a {
  display: inline-block;
}

#mobile-nav ul > li > a:link, #mobile-nav ul > li > a:visited {
  color: rgb(248,53,47);
  text-decoration: none;
	padding:  0 10px;
}

#mobile-nav ul > li > a:hover, #mobile-nav ul > li > a:active {
  color: #fff;
	background: #666;
  text-decoration: none;
}

#mobile-nav ul > li > a.aktiv {
  background: #eee;
	color: #000;
}

#mobile-nav .col-6 {
  padding-top: 5px;
  padding-bottom: 5px;
}

#mobile-nav .container,
#mobile-nav .row,
#mobile-nav .col-6 {
  height: 100%;
}


/*
#mobile-nav-button {
  color: #fff;
  float: right;
  font-size: 2.5rem;
  border: 1px solid #fff;
  width: 40px;
  height: 40px;
  position: relative;
  margin-top: -18px;
  margin-bottom: 5px;
}

#mobile-nav-button > span {
  position: absolute;
  top: -4px;
  left: 7px;
}

#mobile-nav-content > ul > li {
  display: block;
  background-color: red;
  height: 50px;
  padding: 0;
  text-align: center;
	width: 160px;
	list-style-type: none;
}

#mobile-nav-content > ul > li > a {
	width: 100%;
	list-style-type: none;
}

#mobile-nav-dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

#mobile-nav-content {
  position: absolute;
  right: 0;
  top: 50px;
  display: none;
}

#mobile-nav-dropdown:hover > #mobile-nav-content {
  display: block;
}
*/

#mobile-nav {
  display: none;
}	

@media (max-width: 768px) {
  #desktop-nav {
    display: none;
  }
  #mobile-nav {
    display: block;
  }
}

/**** LEISTUNGEN-BEREICH ****/

#bereich1 {
  padding-top: 1rem;
}

#bereich1 img.h {
	width: 90%;
	-webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); 
	-webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}
#bereich1 img.h:hover {
	box-shadow: 0 5px 25px #777;
	-webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); 
	-webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}

.angebot-teaser-box {
  background-color: #305496;
  text-align: center;
  color: #FFF;
  padding: 1rem 3rem 2.5rem;
  width: 60%;
  margin-bottom: 1.6rem;
	box-shadow: 0 3px 8px #777;
}

#bereich1 .row > .col-3:nth-of-type(even) > .angebot-teaser-box {
  margin-right: auto;
  margin-left: 1rem;
	background: #555;
}

#bereich1 .row > .col-3:nth-of-type(odd) > .angebot-teaser-box {
  margin-right: 1rem;
  margin-left: auto;
}

.erste-section {
	padding-top: 120px;
}

@media (max-width: 768px) {
	.erste-section {
		padding-top: 180px;
	}	
}

.angebot-teaser-box > h2 {
  font-size: 1.4rem;
}

.angebot-teaser-box > p {
	text-align: justify;
}

.intro > p.unter {
	border-bottom:  1px solid silver;
	padding-bottom: 15px;
}

.intro > p.unter a {
	background:  #777;
}

.schalter2 {
  text-decoration: none;
	height: 40px;
  display: inline-block;
  padding-top: .5rem;
  width: 40%;
  min-width: 100px;
  margin-top: 1rem;
	border: 1px solid #fff;
	-webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}

.schalter2:link {
  color: #fff;
}

.schalter2:visited {
  color: #fff;
}

.schalter2:active {
  color: #fff;
}

.schalter2:hover {
  color: #fff;
	background:  #ff6a00;
  border: 1px solid #fff;
	-webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}

a.btn2 {
	text-decoration: none;
}
 
@media (max-width: 1366px) {
  .angebot-teaser-box {
    width: 80%;
  }
}

@media (max-width: 1024px) {
  .angebot-teaser-box {
    width: 100%;
    margin-bottom: .6rem;
  }
  #bereich1 .row > .col-3:nth-of-type(even) > .angebot-teaser-box {
    margin-left: .5rem;
  }
  #bereich1 .row > .col-3:nth-of-type(odd) > .angebot-teaser-box {
    margin-right: .5rem;
  }
}

@media (max-width: 768px) {
  #bereich1 .row > .col-3:nth-of-type(even) > .angebot-teaser-box {
    margin-left: 0;
  }
  #bereich1 .row > .col-3:nth-of-type(odd) > .angebot-teaser-box {
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .angebot-teaser-box {
    padding: 1rem 1.5rem 2.5rem;
  }
}

/**** SERVICE-BEREICH ****/

#bereich2 {
  background-color: #f5f5f5;
}

#bereich2 img.h {
	width: 90%;
	-webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); 
	-webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}
#bereich2 img.h:hover {
	box-shadow: 0 5px 25px #777;
	-webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); 
	-webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;
}

.anreisser1, .anreisser2 {
  text-align: center;
  width: 80%;
}

.anreisser1 h1 {
  font-size: 2.5rem;
	color: #fff;
}

.anreisser2 h1 {
  margin-top: 1rem;
	font-size: 2.5rem;
	color: red;
	text-align: center;
}

.anreisser1 p {
	text-align: center;
	color: #fff;
}

.anreisser2 p {
	text-align: justify;
	color: #000;
	font-size: 1rem;
}

#bereich2 .row:nth-of-type(2) > .col-2:first-of-type > .anreisser1 {
  margin-right: 0;
  margin-left: auto;
}

#bereich2 .row:nth-of-type(2) > .col-2:nth-of-type(2) > .anreisser1 {
  margin-left: auto;
  margin-right: auto;
}

.icon {
  width: 80px;
  height: 79px;
  margin-left: auto;
  margin-right: auto;
	border: 0;
	-webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.icon:hover {
  -webkit-transform: rotateZ(5deg);
          transform: rotateZ(5deg);
}

#icon1 {
  background: transparent url("./img/sprite_1x3.png") left 0 top 0;
}
#icon2 {
  background: transparent url("./img/sprite_1x3.png") left -80px top 0;
}
#icon3 {
  background: transparent url("./img/sprite_1x3.png") left -160px top 0;
}


@media (max-width: 768px) {
  #bereich2 > .container > .row:nth-of-type(2) > .col-2 > .anreisser1 {
    margin-right: auto;
    margin-left: auto;
  }
	.anreisser1, .anreisser2 {
	 text-align: center;
   width: 95%;
  }
}

@media (max-width: 480px) {
  .anreisser1 {
    width: 100%;
  }
	.anreisser1, .anreisser2 {
	 text-align: center;
   width: 80%;
  }
}


/**** FOOTER ****/

#oben { position: fixed; bottom: 30px; right: 25px; width: 40px; height: 40px; display: none; z-index: 999; text-align: center; background: #555; padding-top: 8px; border: 1px solid #fff; border-radius: 50%; }
#oben a { color: #fff; text-decoration: none; }
#oben a:hover { color: red; text-decoration: none; }

#footer {
  background-color: #555;
  height: auto;
  color: #fff;
}

#footer p, #footer a {
	color: #fff;
	font-size: 1rem;
	line-height: 1.5rem;
}

#footer a:hover {
	color: rgb(248,53,47);
}



/**** LEISTUNGS-SEITE ****/

.angebot {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.angebot:nth-of-type(even) {
  background-color: #f2f2f2;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-container > .intro {
  width: 100%;
}

.angebot-box {
  background-color: #555;
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  color: #fff;
  padding: 2rem 4rem;
  text-align: center;
  min-height: 720px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.angebot-box-tipp {
  -webkit-box-shadow: 0 0 20px 0 #3D3F45;
          box-shadow: 0 0 20px 0 #3D3F45;
  font-size: 1rem;
	background: #305496;
}

.angebot-box h1 {
  margin-bottom: 0;
}

.angebot-box ul {
  padding: 0;
}

.angebot-box p {
  text-align: justify;
}

.angebot-box ul > li {
	list-style-type: square;
  margin-left: 25px;
  margin-bottom: .5rem;
	text-align: left;
}

.angebot-box > div > p.preis {
	background: #ff6a00;
	padding: 8px;
	color: #fff;
}

.schalter1 {
  width: 50%;
  height: 2.5rem;
  font-size: 1rem;
  margin-top: .5rem;
  min-width: 170px;
}

@media (max-width: 1782px) {
  .angebot-box {
    -ms-flex-preferred-size: 27.5%;
        flex-basis: 27.5%;
  }
/*  .angebot-box-tipp {
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
  }*/
}

@media (max-width: 1622px) {
  .angebot-box {
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
  }
/*  .angebot-box-tipp {
    -ms-flex-preferred-size: 32.5%;
        flex-basis: 32.5%;
  }*/
}

@media (max-width: 1488px) {
  .angebot-box {
    padding: 1rem 2rem;
  }
  .flex-container {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
/*  .angebot-box-tipp {
    min-height: initial;
  }*/
}

@media (max-width: 1366px) {
  .flex-container {
    width: 90%;
  }
}

@media (max-width: 1088px) {
  .flex-container {
    width: 80%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
  }
  .angebot-box {
    padding: 2rem 4rem;
    margin-bottom: 2rem;
    min-height: initial;
  }
}

@media (max-width: 1024px) {
  .flex-container {
    width: 100%;
    padding-right: 4rem;
    padding-left: 4rem;
  }
}

@media (max-width: 768px) {
  .flex-container {
    width: 90%;
  }
}

@media (max-width: 409px) {
  .angebot-box {
    padding: 1rem 2rem;
  }
}

@media (max-width: 338px) {
  .angebot-box {
    padding: .5rem 1rem 2rem 1rem;
  }
}

/****  FORMULARE ****/

#formular {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
	background: transparent;
	color: #000;
	text-align: left;
}

#formular td {
	text-align: left;
}

#formular input,
#formular select,
#formular textarea {
  width: 100%;
  border: 1px solid gray;
  padding: 7px;
  font-size: 1rem;
  font-family: verdana, Tahoma, Arial, sans-serif;
  color: #000;
  -webkit-transition: border .5s ease-in-out;
  transition: border .5s ease-in-out;
	border-radius: 4px;
}

#formular input[type="Checkbox"] {
	width: 20px;
}

#formular textarea {
  height: 120px;
}

#formular input:hover,
#formular textarea:hover,
#formular input:focus,
#formular textarea:focus {
  border: 1px solid rgb(248,53,47);
}

#absendenButton {
  width: 160px;
  height: 45px;
	font-size: 1.2rem
}

#formular input[type="submit"] {
	background: #444;
	color: #fff;
}
#formular input[type="submit"]:hover {
	background: rgb(248,53,47);
	color: #fff;
	border: 1px solid #000;
	cursor: pointer;
}

@media (max-width: 1366px) {
  #formular {
    width: 90%;
  }
}

@media (max-width: 1024px) {
  #formular {
    width: 100%;
		padding: 20px;
  }
}

@media (max-width: 768px) {
  #formular button {
    width: 100%;
		padding: 5px;
  }
}