/**** 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 */

@font-face {
	font-family: "Merriweather Sans";
	src: url('fonts/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
}


:root {
	--color-theme: #ef7d14
}

body {
	margin:      0;
	font-family: 'Merriweather Sans', 'times new roman', serif;
	font-size:   1.1rem;
}

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

h1, h2, h3 {
	font-family: 'Merriweather Sans', sans-serif;
}

h3 {
	color:     #444;
	font-size: 1.7rem;
}

h1 {
	color:     var(--color-theme);
	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:     var(--color-theme);
}

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

.intro div > p > a, .intro div > p > a:visited {
	color:         var(--color-theme);
	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%;
}


.offers a table.hx, table.hx {
	margin:        0 auto;
	width:         90%;
	border:        1px solid var(--color-theme);
	border-bottom: 1px solid #fff;
	background:    #f7f7f7;
	padding:       15px;
}

.offers a table.hx:hover, table.hx:hover {
	background:    #fff;
	border:        1px solid var(--color-theme);
	border-bottom: 1px solid #fff;
}

.offers a table.hx td, table.hx td {
	color:     #333;
	font-size: 1.1rem;
}

.offers a table.hx h3, table.hx h3 {
	padding:   0;
	margin:    10px 0;
	font-size: 1.7rem;
	color:     var(--color-theme);
}

.offers table.cnt {
	margin:          0 auto;
	width:           90%;
	border:          1px solid var(--color-theme);
	border-top:      0;
	background:      #fff;
	border-collapse: collapse;
}

.offers table.cnt td {
	color:          #333;
	font-size:      1.1rem;
	vertical-align: top;
	padding:        7px 15px;
}

.offers table.cnt tr:nth-child(2n+2) {
	background-color: #f5f5f5;
}

.offers .form-cta-wrapper {
	text-align: center;
}

.offers input.butt {
	display:          inline-block;
	padding:          0.625rem 1rem;
	margin:           8px 0;
	color:            #fff;
	background-color: var(--color-theme);
	border:           1px solid var(--color-theme);
	font-size:        1rem;
	font-weight:      300;
	line-height:      1.2;
	cursor:           pointer;
	min-width:        250px;
}

.offers input.butt:hover {
	color:            var(--color-theme);
	background-color: #fff;
	border:           1px solid var(--color-theme);
	transition:       all 250ms ease-in-out;
}

.offers a.bx {
	display:    inline-block;
	padding:    13px 30px;
	background: #eee;
	color:      green;
	font-size:  3rem;
	border:     2px solid green;
}

.offers a.bx:hover {
	background: #fff;
	color:      green;
	box-shadow: 0 4px 20px #888;
}

.offers td.gr {
	background: #fff;
	color:      #aaa !important;
}


@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:    150px;
	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;
	margin-right:    4rem;
}

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

#header-nav ul > li > a:link, #header-nav ul > li > a:visited {
	padding:         0.75rem 0 0.25rem;
	color:           var(--color-theme);
	font-size:       1.25rem;
	font-weight:     700;
	text-transform:  uppercase;
	text-decoration: none;
}

#header-nav ul > li:last-of-type {
	margin-right: 0;
}

#header-nav ul > li > a:hover, #header-nav ul > li > a:active {
	border-bottom: 1px solid var(--color-theme);
	transition:    all 250ms ease-in-out;
}

#header-nav ul > li > a.aktiv {

}

#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;
}

.logo-link img {
	float:  left;
	margin: 15px 0 0 10px
}

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

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

#mobile-nav a > img {
	width:        85%;
	max-width:    150px;
	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"] {
	display:          inline-block;
	padding:          0.625rem 1rem;
	color:            #fff;
	background-color: var(--color-theme);
	border:           1px solid var(--color-theme);
	font-size:        1rem;
	font-weight:      300;
	line-height:      1.2;
	cursor:           pointer;
}

#formular input[type="submit"]:hover {
	color:            var(--color-theme);
	background-color: #fff;
	border:           1px solid var(--color-theme);
	transition:       all 250ms ease-in-out;
}


.register-wrapper > p {
	margin:  10px 10%;
	padding: 30px;
	border:  1px solid var(--color-theme);
}

#bereich1 .faq-link {
	padding:         2px 4px;
	color:           var(--color-theme);
	background:      #fdfaf0;
	text-decoration: none;
	font-size:       1.25rem;
}

#bereich1 .faq-link:hover {
	text-decoration: underline;
}

@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;
	}
}