@import url('normalize.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

/*TYPOGRAPHIE*/

body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 100%;
	font-family: "Fira Sans Condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6  {
	font-family: "Fira Sans Condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased !important;
	display: block;
	cursor: default;
}

p,
a,
li {
	text-decoration: none;
	font-weight: 400;
	font-size: 1.250em;
	font-style: normal;
	line-height: 1.500em;
	padding: 0;
	margin: 0;
	color: #505050;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased !important;
}

p {
	padding: 0 0 25px 0;
	margin: 0;
}

strong {
	font-weight: bold;
}


/*i {
	font-style: italic;
}*/

ul {
	padding: 0 0 15px 0;
	margin: 0;
}

ul li {
	list-style-position: outside;
	margin: 0;
	padding: 0;
}


a {
	text-decoration: underline;
	color: #208562;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: none;
}


/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-bottom:50px;
}
 
dl dt {
    background: #208562;
    color:#fff;
    float:left;
    font-weight:bold;
    margin-right:15px;
    padding:5px; 
    width:120px;
}
 
dl dd {
    margin:2px 0;
    padding:5px 0;
}


/*HEADER*/

h1 {
	font-style: normal;
	color: #282828;
	font-size: 4.500em;
	font-weight: 700;
	padding: 0 0 25px 0;
	text-shadow: 1px 3px 2px rgba(80,80,80,0.25);

}

h2 {
	display: block;
	width: 100%;
	font-style: normal;
	color: #282828;
	font-size: 1.85em;
	line-height: 1.85em;
	padding-top: 0;
	padding-bottom: 20px;
	margin: 0;
	padding-left: 0;
	font-weight: 600;
	
	
}

h3 {
	font-style: normal;
	text-transform: uppercase;
	color: #205862;
	font-size: 1.400em;
	/*letter-spacing: 0.120em;*/
	line-height: 2.000em;
	padding: 0;
	font-weight: 700;
	padding-bottom: 10px;
	/*text-shadow: 1px 3px 2px rgba(143,143,143,0.75);*/
}

h4 {
	display: block;
	width: 100%;
	font-style: normal;
	color: #282828;
	font-size: 1.700em;
	line-height: 2.0em;
	padding-top: 0px;
	padding-bottom: 20px;
	margin: 0px;
	padding-left: 0px;
	font-weight: 400;
	
}

h5 {
	font-size: 1.2em;
	line-height: 40px;
	/*letter-spacing: 0.625em;*/
	color: #282828;
	font-weight: 100;
	/*background: #465c86;*/
	padding: auto 0 auto 0;
	text-transform: uppercase;
}

h6 {
	display: block;
	width: 100%;
	font-style: normal;
	color: #282828;
	font-size: 1.100em;
	font-weight: 400;
	line-height: 2.0em;
	padding-top: 0;
	padding-bottom: 10px;
	margin: 0;

}


/*MY CLASS*/





/*TEXT CLASS*/

.bold {
	font-weight: 900;
}

.invert {
	color: #208562;
}

.centered {
	text-align: center;
}

.right {
	text-align: right;
}


.video-bg {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1000; 
	
	background-position-x: 50%;
	background-position-y: 0;
	background-repeat: no-repeat;
	background-size: cover, cover;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	background-color: transparent !important;
	display: flex;
	width: 100%;
	*zoom: 1;
	border: none;
	margin: 0;
	padding: 0;
	z-index: -1000;
}


/* Container nimmt 100% der Bildschirmhöhe ein */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* volle Bildschirmhöhe */
    overflow: hidden;
	
	opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

.hero.loaded {
    opacity: 1;
}


/* Video als Hintergrund */
.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* füllt den Bereich sauber aus */
    z-index: -1; /* hinter den Text legen */
}



/* Inhalt über dem Video */
/*.hero .content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;	
	padding: 0;
	opacity: 0;
	
	animation: fadeIn 1s ease-in-out forwards,
           pulse 2s ease-in-out;

}*/

.hero .content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    width: 100%;
    height: 100vh;

    display: flex;               /* Flexbox aktivieren */
    flex-direction: column;      /* Elemente untereinander */
    justify-content: center;     /* Vertikal zentrieren */
    align-items: center;         /* Horizontal zentrieren */

    box-sizing: border-box;
    padding: 0;
    overflow: hidden;

    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards,
               pulse 2s ease-in-out;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  from { transform: scale(0.75); }
  to   { transform: scale(1.75); }
}



/*.hero .content h1 {
    color: white;
    text-align: center;
    width: 100%;
    box-sizing: border-box;	
	padding-top: 20%;
	text-shadow: 1px 3px 2px rgba(80,80,80,0.75);
}*/

.hero .content h1 {
    color: white;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: 0; /* WICHTIG: entfernen */
    text-shadow: 1px 3px 2px rgba(80,80,80,0.75);
}


.hero .content h2 {
	font-weight: 600;
    text-align: center;
	font-size: 270%;
    width: 100%;
    box-sizing: border-box;
	/*text-shadow: 0 1px 1px white, 0 2px 2px white, 0 4px 2px black;*/
	text-shadow: 1px 3px 2px rgba(80,80,80,0.75);
	color: #fff;

}

.hero .content btn {
	position: absolute;
    bottom: 50px;
    left: 50%;

}

/*HYPERLINK CLASS*/


.more {
	cursor:pointer;
	color:#000;
	font-size: 1.125em;
	line-height: 1.500em;
	padding: 0;
	text-decoration:none;
	text-shadow:0px 1px 0px #000;
	
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	-ms-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.more i {
	display: block;
	font-size: 1.0em;
	line-height: 1.500em;
	font-weight: 900;
	float: left;
	padding: 0 10px 0 0;
	color: #208562;

}

.more i:hover {
	color: #208562;

}


.more:hover {
	color: #208562;
}



.iconed:link {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #000;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


.iconed {
	display: block;
	float: left;
	font-size: 1.125em;
	line-height: 1.500em;
	
	padding: 0;
	margin: 0;
	color: #208562;
}


.iconed i {
	display: block;
	font-size: 1.125em;
	line-height: 1.500em;
	font-weight: 700;
	float: left;
	padding: 0 10px 0 0;
	color: #208562;
}


.iconed:hover {
	color: #208562;
}




.underlined {
	text-decoration: underline;
	color: #000;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.underlined:hover {
	text-decoration: none;
	color: #208562;
}



.readmore {
	width: 150px;
	height: 50px;
	font-size: 1.000em;
	line-height: 50px;
	display:inline-block;
	cursor:pointer;
	padding: auto 0;
	margin: 0;
	

/*	text-align: center;*/
	text-decoration:none;
	
	font-weight: 700;
	border-radius: 25px;
	
	background-color: #fff;
	color: #205862;
	
	border: rgba(32,88,98, 1.0) 5px solid;


	
}


.readmore i {
	height: 50px;
	position: relative;
	display: inline-block;
	transform: translateX(-150px); 
	transition: transform 0.25s ease; 
	/*margin-left: -18px;*/
	padding: 0 10px 0 0;
	margin: 0;
	opacity: 0;
}

.readmore:hover {
	background-color: rgba(32,88,98,1.0);
	color: #fff;	
}

.readmore:hover i {
	transform: translateX(0);
	opacity: 1.0;
}




.readmore:active {

}



.readmorebox {
	display: block;
	width: 100%;
	border-radius: 2px;
	display:inline-block;
	cursor:pointer;
	padding: 0 auto;
	
	font-size: 1.000em;
	line-height: 40px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000;
	font-weight: 700;
	
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	
	border: rgba(34,34,34,0.2) 1px solid;
	border-bottom: rgba(0,0,0,1) 5px solid;
}

.readmorebox:after {
	content: "Details";
}

.readmorebox:hover {
	background-color: rgba(205,0,0,1);
	color: #fff;
	
	
}

.readmorebox:active {
	position:relative;
	top: 1px;
}


.readpdf {
	display: block;
	width: 150px;
	border-radius: 5px;
	display:inline-block;
	cursor:pointer;
	padding: 0 auto;
	margin: 10px 0;
	
	font-size: 1.000em;
	line-height: 30px;
	text-align: center;
	text-decoration:none;
	
	font-weight: 700;
	
	background-color: rgba(255,0,0,1.0);
	color: #fff;
	
	border: rgba(34,34,34,0.2) 1px solid;
	border-bottom: rgba(205,0,0,1) 5px solid;
	
}

.readpdf::before {
	font-family: "FontAwesome";
	content: "\f07c";
	padding: 0 15px 0 0;
	color: #fff;
	font-weight: 200;
}

.readpdf:after {
	content: "PDF";
}

.readpdf:hover {
	background-color: rgba(205,0,0,1);
	color: #fff;	
	text-shadow:0px 1px 0px #000;
}

.readpdf:active {
	position:relative;
	top: 1px;
}

.goback {
	display: block;
	width: 300px;
	display:inline-block;
	cursor:pointer;
	padding: 0 auto;

	text-decoration: none;
	font-size: 1.0em;
	line-height: 50px;
	font-style: normal;
	font-weight: 500;
	text-align: center;
	background: #ff8c00;
	color: #fff;
	
	border-radius: 25px;
	
	border: rgba(0,0,0,0.1) 1px solid;

	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}

.goback::before {
	font-family: "FontAwesome";
	font-weight: 100;
	font-size: 1.0em;
	line-height: 50px;
	content: "\f0a9";
	padding: 0 20px 0 0;
	color: #fff;
}

.goback:hover {
	background: #e68600;
	color: #fff;
}

.goback:hover::before {
	color: #fff;
}


.goback:active {
	position:relative;
	top: 1px;
}




.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

/*LISTSTYLE*/


.checked ul {
	list-style-position: outside;
	padding-left: 0;

}

.checked ul li {
	list-style: none;
	list-style-position: outside;
	padding-left: 0;
}

.checked li::before {
	/*list-style-position: outside;*/
	font-family: "FontAwesome";
	content: "\f058";
	padding: 0 15px 0 0;
	color: #465c86;
}



.crossed li {
	list-style-type: none;
}

.crossed li::before {
	font-family: "FontAwesome";
	content: "\f057";
	padding: 0 15px 0 0;
	color: #465c86;
}


.pdfed li {
	list-style-type: none;
}

.pdfed li::before {
	font-family: "FontAwesome";
	content: "\f1c1";
	padding: 0 15px 0 0;
	color: #465c86;
}


/*BUTTONSTYLE*/


		.btn {
            position: relative;
			display: inline-block;
			height: 50px;
            padding: 0 2.5em;
            border: none;
            border-radius: 50px;
            font-size: 1.0em;
            cursor: pointer;
            transition: all 0.25s;
            text-decoration: none;
            font-weight: 500;
			font-family: "Fira Sans Condensed", sans-serif;
	
			overflow: hidden; /* verhindert, dass das Icon außerhalb sichtbar ist */
        }

        .btn-primary {
            background-color: #ff8c00;
            color: white;
			border: 2px solid #ff8c00;
        }

        .btn-primary:hover {
            background-color: #e68600;
            transform: translateY(-2px);
            box-shadow: 0 5px 5px rgba(255, 149, 0, 0.25);
        }

		.btn-primary-dark {
            background-color: #205862;
            color: white;
			border: 2px solid #205862;
        }

        .btn-primary-dark:hover {
            background-color: #154149;
            transform: translateY(-2px);
            box-shadow: 0 5px 5px rgba(32,88,98, 0.25);
        }

        .btn-secondary {
            background-color: #205862;
            color: #fff;
            border: 2px solid rgba(32,88,98,1.00);
        }

        .btn-secondary:hover {
            background-color: #1a1a1a;
			transform: translateY(-2px);
            color: white;
			box-shadow: 0 5px 5px rgba(26,26,26, 0.25);
        }

		.btn-secondary-dark {
            background-color: #205862;
            color: #fff;
            border: 2px solid rgba(32,88,98,1.00);
        }

        .btn-secondary-dark:hover {
            background-color: #205862;
            color: white;
			border: 2px solid rgba(32,88,98,1.00);
			
			transform: translateY(-2px);
			box-shadow: 0 5px 5px rgba(26,26,26, 0.25);
        }


		.btn i {
			position: relative;
			display: inline-block;
			transform: translateX(0); 
			transition: transform 0.25s ease; 
			padding: 0 10px 0 0;
			margin: 0;
			opacity: 1.0;
		}


		.btn:hover i {
			transform: translateX(0);
			opacity: 1.0;
		}


		.btn-primary-dark i {
			position: relative;
			display: inline-block;
			transform: translateX(-150px); 
			transition: transform 0.25s ease-in-out;
			/*margin-left: -18px;*/
			padding: 0;
			margin: 0;
			opacity: 1.0;
		}


		.btn-primary-dark:hover i {
			transform: translateX(-15px);
			opacity: 1.0;
		}


		.btn-down {
			display: block;
			width: 50px;
            background-color: #ff8c00;
            color: #fff;
			padding: 0;
			
			position: absolute;
    		bottom: 50px;
    		left: 50%;
    		transform: translateX(-50%); /* horizontal zentrieren */
			
			
        }

		.btn-down i {
			transform: translateX(-50%); /* horizontal zentrieren */
			transform: translateX(0px);
			color: #fff;
			opacity: 1.0;
			padding: 0;
			margin: 0;
        }

        .btn-down:hover {
            background-color: #e68600;
            /*transform: translateY(-2px);*/
            /*box-shadow: 0 5px 5px rgba(255, 149, 0, 0.25);*/
        }

		






/*NAVIGATION*/

.menu {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	z-index: 99999;

	/*border-top: 1px solid rgba(34,34,34,0.05);
	border-bottom: 1px solid rgba(34,34,34,0.15);*/
}

.mobilnav {
	display: none;
	visibility: hidden;
}





.desknav {
	display: block;
	visibility: visible;
}


.desknav ul {
	 line-height: 50px;
	 height: 50px;
	 list-style: none;
	 margin: 0;
	 padding: 0 50px;
	 display: flex;
	 gap: 0px;
	 align-items: center;
	justify-content: flex-end;
}

.desknav a {
	display: block;
	padding: 0 10px;
	line-height: 50px;
	height: 50px;
	width: auto;
	font-size: 1.0em;
	font-weight: 600;
	color: #205862;
	text-decoration:none;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}

.desknav a:hover {
	color: #ff8c00;
	text-decoration: underline;
}

.desknav a.active {
	color: #ff8c00;
	text-decoration: underline;
} 

.desknav li {
	 display: block;
	 height: 50px;
}

.desknav ul:hover a {
	color: #505050;
	text-decoration: none;
}

.desknav ul:hover a:hover {
	color: #ff8c00;
	text-decoration: underline;
}





/*BACKGROUND & COLOR*/

.orange-bg {
	background: #ff8c00 !important;
	color: #fff !important;
}

.orangefont {
	color: #ff8c00;
}
.petrolfont {
	color: #205862;
}

.whitefont {
	color: #fff;
}

.petrol-bg {
	background: #205862;
	color: #fff;
}

.petrol {
	color: #205862;
}

.red {
	background: #465c86;
}

.blue {
	background: #11344f;
}

.white-bg {
	background: #fff;
}

.grey-bg {
	background: #f3f3f3;
}



.bluefont {
	color: #11344f;
}



.whiteboxed {
	background: #fafafa;
	/*box-shadow: 0 10px 15px rgba(50,50,50,0.25),
	0 2px 0px rgba(32,88,98,1.0);*/
	border: 1px solid #e6e6e6;
	padding: 15px;
	border-radius: 20px;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	
}



.whiteboxed h1 {
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	margin: 0 auto;
	padding: 0;
	background: #205862;
	box-shadow: none;
	border-radius: 50%;
		
}

.whiteboxed h2 {
	font-size: 1.500em;
	font-weight: 600;
	color: #205862;	
}

.whiteboxed p {
	font-size: 1.000em;
	height: auto;
}

.whiteboxed h1 i {
	
}

.whiteboxed:hover {
	/*box-shadow: 0 15px 25px rgba(50,50,50,0.25),
	0 5px 0px rgba(32,88,98,1.0);*/
	transform: scale(1.005);

}


.darkred {
	background: #66000;
}


.lightgrey{
	background: #f7f7f7;
}

.midgrey{
	background: #e6e6e6;
}

.darkgrey {
	background: #222222;
}

.bggrey {
	background: rgba(204,204,204,0.1);
}


.features-bg {
	background: #f0f0f0;
}



.darkblack {
	
	background: rgba(20, 20, 20, 1.0);
}





.bg {
	background: #ffffff;
}




/*POSITION*/

.bottom {
	bottom: 0;
}

.center {
	text-align: center;
}

/*SIZE*/

.full100 {
	height:auto !important; /* normale Browser */
    height:100vh; /* IE6: setzt dies wie min-height um*/
    min-height:100vh; /* normale Browser */
}

.full {
	height:auto !important; /* normale Browser */
    height:100%; /* IE6: setzt dies wie min-height um*/
    min-height:100%; /* normale Browser */
}

.seventyfive {
	height:auto !important; /* normale Browser */
    height:75%; /* IE6: setzt dies wie min-height um*/
    min-height:75%; /* normale Browser */
}

.half {
	height:auto !important; /* normale Browser */
    height:50%; /* IE6: setzt dies wie min-height um*/
    min-height:50%; /* normale Browser */
}


/*MARGIN & PADDING*/

.padding-t25b5 {
	height: auto;
	padding: 25px 0 5px 0;
}

.padding-t25b25 {
	height: auto;
	padding: 25px 0 25px 0;
}

.padding-t50b5 {
	height: auto;
	padding: 50px 0 5px 0;
}

.padding-tb {
	height: auto;
	padding: 7% 0 7% 0;
	margin: 0;
}

.padding-tino {
	height: auto;
	padding: 5% 0 5% 0;
	margin: 0;
}

.padding-t {
	height: auto;
	padding: 3% 0 0 0;
	margin: 0;
}

.padding-t25 {
	height: auto;
	padding: 50px 0 0 0;
}

.padding-b {
	height: auto;
	padding: 0 0 2.5% 0;
	margin: 0;
}

.padding-tb25 {
	height: auto;
	padding: 25px 0 25px 0;
}

.padding-tb50 {
	height: auto;
	padding: 50px 0 50px 0;
}

.padding-tb100 {
	height: auto;
	padding: 100px 0 100px 0;
}

.padding-b25 {
	height: auto;
	padding: 0 0 25px 0;
}

.padding-b50 {
	height: auto;
	padding: 0 0 50px 0;
}

.padding-b100 {
	height: auto;
	padding: 0 0 100px 0;
}

.padding-l25 {
	height: auto;
	padding: 0 0 0 25px;
}

.margin-tb {
	height: auto;
	margin: 25px 0 25px 0;
}


/*GRID*/


.col1-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(50% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}

.col2-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(50% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}

.col1-2 img {
	display: block;
	width: 100%;
	height: auto;
}


.col1-3,
.col2-3,
.col3-3 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(33% - 20px);
	height: auto;
	padding-bottom: 15px;
	margin: 10px;
}


.col1-4,
.col2-4,
.col3-4,
.col4-4 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(25% - 20px);
	height: auto;
	padding: 15px;
	margin: 10px;
}


.col1-5 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(20% - 20px);
	height: auto;
	padding: 15px;
	margin: 10px;
}


.col13 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(33% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}


.col23 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(66% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}



.col14 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(25% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}


.col24 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(50% - 20px);
	height: auto;
	padding: 0;
	margin: 0 10px;
}




/*FONTSIZE*/

.small {
	font-size: 75%;
}

.big {
	font-size: 125%;
}



/*BORDER*/

.bbottom {
	border-bottom: 1px dotted rgba(32, 88, 98, 1);
}

.btop {
	border-top: 1px dotted rgba(32, 88, 98, 1);
}


/*CLEAR & BORDER*/

.clear {
	font-size:0px;
	clear:both;
	height:0px;
}

.clear10 {
	font-size:0px;
	clear:both;
	height:10px;
}

.border {
	position: relative;
	float: left;
	width: 86%;
	height: auto;
	margin: 25px 7% 25px 7%;
	padding: 0;
	border-top: 1px solid #ededed;
	box-shadow: 0px 1px 0px rgba(237,237,237, 1.0);
}

.border-full {
	position: relative;
	float: left;
	width: 100%;
	height: 10px;
	margin: 0;
	padding: 0;
	background: #fff;
}

.border-red {
	position: relative;
	float: left;
	width: 100%;
	height: 10px;
	margin: 0;
	padding: 0;
	background: #ff8c00;
}

/*HTML5*/


.container {
	width: 86%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

section {
	z-index: 10;
	height: auto;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 8000;
	position: relative;
}

main {
	height: auto;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding:0;
	position: relative;
}

article {
	z-index: 10;
	height: auto;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 8000;
	position: relative;
}

aside {

}

hgroup {

}

header {
	width: 100%;
	z-index: 9999;
	left: 0;
	top: 0;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
}

#header {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	z-index: 9000;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background: #DD511A;
}

#navigation {
	position: relative;
	width: 100%;
	z-index: 9999;
	right: 0;
	top: 0;
	height: auto;
	margin: 0;
	padding: 0;
	float: left;
	text-align: center;

}

/*WRAPPER*/

.wrapper {
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
}

.wrapper-50 {
	width: 50%;
	height: auto;
	margin: 0 25% 0 25%;
}

.wrapper-75 {
	width: 75%;
	height: auto;
	margin: 0 12.5% 0 12.5%;
	background-color: transparent;
}

.wrapper-90 {
	width: 90%;
	height: auto;
	margin: 0 5% 0 5%;
	background-color: transparent;
}

.wrapper-full {
	width: 98%;
	height: auto;
	margin: 0 1% 0 1%;
}

.wrapper-fullwidth {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.nowrapper {
	width: 100%;
	height: auto;
	margin: 0;
}

/*SLOGAN*/

.fotoslogan {
	display: block;
	float: left;
}

.fotoslogan a {
	display: block;
}

.fotoslogan img {
	max-width: 533px;
	height: auto;
	margin: 0;
	padding: 0;

}

.slogan {
	display: block;
	float: left;
	max-width: 30%;
}

/*PRODUCTS*/

/*.products {
	display: block;
	float: left;
	list-style-type: none;
	width: 100%;
}

.products .col1-2 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 50%;
	height: auto;
	z-index: 8000;
	margin: 0;
	padding: 0;
}

.products .col2 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 48%;
	height: auto;
	z-index: 8000;
	margin: 0;
	padding: 0;
}

.products .detail {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 100%;
	height: auto;
	z-index: 8000;
	margin: 25px 0 25px 0;
	padding: 0;
}

.products p {
	padding: 0;
	margin-left: 25px;
}

.products h3 {
	padding: 0;
	margin-left: 25px;
}

.products .detail h3 {
	padding: 20px 0 0 10px;
	margin: 0;
}


.products .detail ul {
	text-decoration: none;
	color: #1c1c1c;
	padding: 20px 0 20px 10px;
	margin: 0;
}

.products .detail ul li {
	list-style-position: inside;
	list-style-type: disc;
	font-weight: 400;
	font-size: 1.000em;
	font-style: normal;
	line-height: 1.500em;
	padding: 0;
	margin: 0;
}

.products a {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	min-width: 240px;
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
	padding: 8px;
	float: left;
}

.products a:hover {
	background: #e5e5e5;
	border: 1px solid #f1f1f1;

}

.products a img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.75;
}

.products a img:hover {
	opacity: 1;
}

.products .col2 a {
	background: none;
	border: none;
	margin-left: 25px;
	padding: 25px 0 0 0;
	text-decoration: none;
}

.products .col2 a:hover,
.products .col2 a:active,
.products .col2 a:focus {
	background: none;
	border: none;
	margin-left: 25px;
	text-decoration: none;
	color: #000000;
}*/




/*MEDIA*/

.media {
	display: block;
	/*box-sizing: border-box;
	-moz-box-sizing:border-box;*/
	width: 100%;
	height: auto;
	/*min-width: 240px;*/
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
	padding: 7px;
}

/*DOWNLOAD*/

.downloads {
	display: block;
	float: left;
	width: 100%;
}

.downloads .col1-2 {
	display: block;
	float: left;
	width: 25%;
}

.downloads .col1-2 img {
	display: block;
	width: 100%;
	height: auto;
	/*-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;*/
	/*min-width: 240px;*/
	background: #f1f1f1;
	border: 1px solid #e5e5e5;
	padding: 8px;
	opacity: 0.75;

}

.downloads .col1-2 img:hover {
	background: #e5e5e5;
	border: 1px solid #f1f1f1;
	opacity: 1.0;

}

.downloads .col2 {
	display: block;
	float: left;
	width: 75%;
	padding: 0 0 0 25px;
}

.downloads p {
	margin: 25px 0 25px 0;
}

.downloads .col2 a {
	display: block;
	float: left;
	width: 100%;
	text-decoration: none;
	font-weight: 600;
	color: #363636;
	/*height: 32px;*/
	line-height: 2.000em;
	padding: 0;
	margin: 0;
	
}

.downloads .col2 a:hover {
	/*background: #e5e5e5;*/
	/*border: 1px solid #f1f1f1;*/
	color: #465c86;
}

.downloads .col2 i {
	display: block;
	float: left;
/*	height: 32px;
	line-height: 2.000em;*/
	color: #465c86;
	margin: 0 15px 0 0;
	padding: 0 0 0 0;

}




/*Cookie*/

/* Fade‑In Animation */ 
@keyframes fadeInCookie { 
	from { opacity: 0; transform: translateX(-400px);}
	to { opacity: 1; transform: translateX(0); }
}

.cookie-banner {
  position: fixed;
  bottom: 30px;
  left: 0;
/*  right: 0;*/
  background: #ff8c0095;
  color: #fff;
  padding: 15px 25px;
  width: 350px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 -3px 5px rgba(0,0,0,0.25);
  border-radius: 0 20px 20px 0;
	
   /* Fade‑In Effekt */ opacity: 0; animation: fadeInCookie 0.25s ease-out forwards;
}

.cookie-banner a {
  color: #205862;
  font-size: 14px;
  font-weight: 600;
	text-decoration: none;
}

.cookie-banner a:hover {
  text-decoration: underline;
}

.cookie-text {
  padding: 0;
  margin: 0 25px 0 0;

}


.cookie-btn {
  background: #fff;
  color: #205862;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  padding: 15px;
  margin: 0 15px 10px 0;
	
  line-height: 20px;
  transition: all 0.25s ease-in-out;
}

.cookie-btn:hover {
  background: #205862;
  color: #fff;
}

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cookie-btn {
    width: 100%;
  }
}


@media (max-width: 320px) {
  .cookie-banner {
	  background: #ff8c00;
	  width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
	border-radius: 0;
  }

  .cookie-btn {
    width: 100%;
  }
}


/*IDS*/

#slider,
#content,
#accordion2,
#accordion3,
#contactform,
#datenschutz,
#imprint,
#slogan-3,
#agb {
	animation-delay: 0.7s;
	animation-timing-function: ease-in;
}

#content .person {
    display: flex;
    align-items: flex-start;
    gap: 25px; /* Abstand zwischen Bild und Text */
    width: 100%;
    margin: 25px 0;
    padding: 25px;
    border-radius: 20px;
    background: rgba(80, 80, 80, 0.10);
}

/* Bild */
#content .person img {
    width: 100%;
    max-width: 250px;   /* Bild wird nie größer als 250px */
    min-width: 175px;   /* Bild darf bis 175px schrumpfen */
    height: auto;
    border-radius: 20px;
    flex-shrink: 1;     /* Bild darf kleiner werden */
	filter: brightness(110%);
	transition: filter 0.25s ease;

}


/* Wrapper für h3 + p */
#content .person .person-content {
    flex: 1;
}

/* Überschrift */
#content .person h3 {
    margin: 0;
}

/* Text */
#content .person p {
    margin: 0;
    color: #505050;
}

#content img {
	display: block;
	float: left;
    width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: 20px;
}

#content .info {
	display: block;
	float: left;
    width: calc(50% - 20px);
	height: auto;
	margin: 0 0 0 20px;
	padding: 0;
}

/* Responsive: unter 600px Bild über dem Text */
@media (max-width: 768px) {
    #content .person {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #content .person img {
        max-width: 350px;
        min-width: 150px;
    }

    #content .person .person-content {
        text-align: center;
    }
}



/*#content .person {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin: 25px 0;
	padding: 25px;
	border-radius: 20px;
	color: #fff;
	background: rgba(80, 80, 80, 0.10);
}

#content .person img {
	display: block;
	float: left;
	width: 250px;
	height: 250px;
	padding: 0;
	margin: 0 25px 0 0;
	border-radius: 20px;
}

#content .person p {
	color: #505050;
}*/

#content p {
	padding: 0 0 50px 0;
	
}

#content ul {
	/*padding: 0 0 50px 15px;
	list-style: inside;*/
	
	list-style: none; padding-left: 0;
	
}

#content ul li {
	/*padding: 0 0 15px 25px;	
	list-style-position: outside;*/
	
	position: relative;
	padding-left: 1.2em; /* Abstand für den Bullet */
	padding-bottom: 15px;
}

#content ul li::before {
	content: "•"; /* Bullet */ position: absolute; left: 0; top: 0;
}




#features article {
	display: flex;
	align-items: stretch;
	/* h2 oben bündig */
	gap: 40px;
	margin: 50px 0;
}
	


#features .col-img {
	display:block;
	float: left;
	width: 50%;
}

#features .col-img-left,
#features .col-img-right {
	flex: 0 0 50%; /* Bildspalte */ 
	display: flex;
	align-items: center; /* Bild vertikal mittig */
}


#features .col-content-left,
#features .col-content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;   /* horizontal zentrieren */
    padding: 0 25px;
}


#features .col-content-left p,
#features .col-content-right p {
    margin: auto 0; /* vertikal zentriert */
	text-align: center;
}


#features .col-content-left h2,
#features .col-content-right h2,
#features .col-content-left p strong,
#features .col-content-right p strong {
    margin-top: 0;
    margin-bottom: 0;
}

#features .col-content-left h2,
#features .col-content-right h2 {
	margin: 0 0 10px 0; /* oben bündig, kein Auto */ 
	text-align: center;
	color: #205862;
}



#features .col-img-left {
	order: 1;
}

#features .col-content-right {
	order: 2;
}

#features .col-content-left {
	order: 1;
}

#features .col-img-right {
	order: 2;
}

#features img {
	display: block;
	width: 100%;
	height: auto;
	float: left;
	border-radius: 20px;
	
}


#startscreen {

}

#startscreen .col1-2 {
	z-index: 5000;
	margin: 0;
	padding: 0;

}

#startscreen .col1-2 img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	display: block;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;

}

#startscreen .col2 {
	z-index: 8000;
	margin: 0;
	padding: 0;
}

#startscreen li {
	float: left;
	margin: 0;
	padding-right: 20px;
	list-style: none;
}


#404 {
 
}

#video {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

#video.loaded {
    opacity: 1;
}


/*NEWS*/

#news article {
	display: block;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
}


#news .col1-2,
#news .col2-2 {
	display: block;
	z-index: 8000;
	margin: 0;
	padding: 2.5% 5%;
	width: 50%;

}




#news img {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	/*padding: 0;*/

}



/*IMPRINT*/

#imprint i,
#disclaimer i,
#design i {
	padding: 0 25px 0 0;
	color: #465c86;
	
}


#imprint p,
#imprint a {
	/*font-weight: 400;*/
	text-decoration: none;
	padding-bottom: 25px;
	
	

}

#imprint a {
	color: #205862;
	font-size: 100%;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#imprint a:hover {
	color: #ff8c00;
}

#imprint h3 {
	margin: 10px 0 0 0;
}

#imprint ul {
	margin: 0;
	padding: 0;
}


#imprint ul li {
	list-style-type: none;
	list-style-position: outside;

	
}



/*ICON*/

#icon .col1-2,
#icon .col2,
#icon .col3 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 33.33333333333333%;
	height: auto;
	z-index: 9999;
	margin: 0;
	padding: 0;
	
}

#icon .box{
	position: relative;
	margin: 0 auto 0 auto;
	width: 200px;
	height: auto;
	text-align: center;
	
	
}

#icon .box li {
	list-style: none;
	
	
}

#icon .box li a {
	
	
}

#icon h3 {
	text-align: center;
	
}




/*WHY*/

#why .col1-2{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 33.33333333333333%;
	height: auto;
	z-index: 9999;
	margin: 0;
	padding: 0 5px 0 0;
}

#why .col2{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 33.33333333333333%;
	height: auto;
	z-index: 9999;
	margin: 0;
	padding: 0 5px 0 5px;
}

#why .col3{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: 33.33333333333333%;
	height: auto;
	z-index: 9999;
	margin: 0;
	padding: 0 0 0 5px;
}

#why ul {
	list-style-position: inside;
}

#why li {
	list-style-type: disc;
	text-decoration: none;
	font-weight: 400;
	font-size: 1.0em;
	font-style: italic;
	line-height: 1.6em;
	color: #1c1c1c;
	padding: 0;
	margin: 0;
}

/*DATENSCHUTZ*/

#datenschutz {
	position: relative;
	top: 0;
	left: 0;
	/*height: auto;*/
	width: 100%;
	display: block;
	margin: 0;
}

#datenschutz ul {
	margin: 0;
	padding: 0 0 0 15px;
}

#datenschutz ul li {
	list-style-type: disc;
	list-style-position: outside;
/*	font-weight: 400;
	font-size: 1.125em;
	font-style: normal;
	line-height: 1.500em;*/
	margin-bottom: 25px;

}

#datenschutz p {
	text-decoration: none;

}

#datenschutz span {

	text-decoration: none;
	

}

#datenschutz a {
	color: #205862;
	font-size: 100%;
	text-decoration: none;
	padding: 0 0 25px 0;
	margin: 0;

}

#datenschutz a:hover {
	text-decoration: none;
	color: #ff8c00;

}

/*POSTER*/


#poster {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	/*background: #fff;*/
	animation-delay: 0.5s;

}


#poster .box {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 10%;
	left: 0;
	z-index: 100;
	/*display: flex;
	flex-basis: 0%;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;*/
	
	padding: 0;
	margin:0;

}



#poster h1,
#poster h2,
#poster p,
#poster a {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;

}

#poster h1 {
	font-size: 4.000em;
	text-shadow: 1px 5px 3px rgba(255,255,255,0.5);
	padding-top: 25px;
}

#poster h2 {
	font-size: 2.500em;
	text-shadow: 1px 3px 3px rgba(255,255,255,0.5);
}


#poster a {
	display: block;
	width: 200px;
	height: 50px;
	margin: 25px auto;

	line-height: 50px;
    -moz-box-shadow: 0px 10px 5px #8f8f8f;
    -webkit-box-shadow: 0px 10px 5px #8f8f8f;
    box-shadow: 0px 10px 5px #8f8f8f;

}

#poster video {
	background-position-x: 50%;
	background-position-y: 0;
	background-repeat: no-repeat;
	background-size: cover, cover;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	background-color: transparent !important;
	display: flex;
	width: 100%;
	/*height: 800px;*/
	*zoom: 1;
	border: none;
	margin: 0;
	padding: 0;
	
	/*height: 800px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;*/
	
}



#slider {
	z-index: 100;
}





#slogan {
	display: block;
	margin: 0;
	padding: 0;
	background-color: #465c86;
}



#slogan .box {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;	
	padding: 3.5%;
	/*animation: flash 15s infinite;*/
	animation: pulse 10s infinite;
}


#slogan h1,
#slogan h2 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	text-shadow: none;
}

#slogan h1 {
	font-size: 3.000em;
	
}

#slogan h2 {
	font-size: 2.200em;
}



#slogan-2 {
	display: block;
	margin: 0;
	padding: 0;
	background-color: #465c86;
}

#slogan-2 .box {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;	
	padding: 3.5%;
	/*animation: flash 15s infinite;*/
	/*animation: pulse 10s infinite;*/
	animation: easeInQuad 3s infinite;
}


#slogan-2 h1,
#slogan-2 h2 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	text-shadow: none;
}

#slogan-2 h1 {
	font-size: 3.000em;
	
}

#slogan-2 h2 {
	font-size: 2.200em;
}


#slogan-3 {
	display: block;
	margin: 0;
	padding: 0;
}

#slogan-3 .box {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;	
	padding: 3.5%;
	
	margin: 0 auto;
	
	text-align: center;
	
	display: inline-block;
  	vertical-align: middle;

}


#slogan-3 h1,
#slogan-3 h2,
#slogan-3 p {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	text-shadow: none;
}

#slogan-3 h1 {
	margin-top: 80px;
	
}

#slogan-3 h2 {
	font-size: 2.50em;
}

#slogan-3 p {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 50px;

	text-decoration: none;
	text-align: center;
	text-shadow: none;
}

#slogan-3 a {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 3.000em;
	text-decoration: none;
	text-align: center;
	color: #fff;
	text-shadow: none;
}




#slogan-4 {
	display: block;
	margin: 0;
	padding: 0;
	background-color: #465c86;
}

#slogan-4 .box {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;	
	padding: 0.5%;
	/*animation: flash 15s infinite;*/
	/*animation: pulse 10s infinite;*/
	animation: easeInQuad 3s infinite;
}


#slogan-4 h1,
#slogan-4 h2 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	text-shadow: none;
}

#slogan-4 h1 {
	font-size: 2.20em;
	
}

#slogan-4 h2 {
	font-size: 1.400em;
}



#slogan-5 {
	/*animation: pulse 7.5s infinite;*/
	animation: pulse 1.5s ;
	animation-delay: 0.5s;
}





/*TITEL*/





#title-1 {
	display: block;
	margin: 0;
	padding: 0;
	background: rgba(40, 42, 43, 1);
	
}

#title-1 .box {
	display: block;
	width: 100%;
	box-sizing: border-box;	
	padding: 3.5%;
	/*animation: flash 15s infinite;*/
	/*animation: pulse 10s infinite;*/
	animation: easeInQuad 3s infinite;
}


#title-1 h1 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;

	color: rgba(140,137,137,0.7);
	text-shadow: none;
}

#title-1 h1 {
	font-size: 2.500em;
	
}



#follow {
	/*display: block;
	box-sizing: border-box;	
	color: #fff;
	cursor: default;*/
}

#follow .box {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;	
	margin: 0;
	padding: 0;
	animation: pulse 5s;
}

#follow article {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	cursor: default;
}

#follow article:last-child {
	padding: 50px 0 0 0;
	background: none;

}


#follow h1,
#follow h2 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
}

#follow h1 {
	color: #fff;
	padding-top: 15px;
	padding-bottom: 50px;
	
	
}

#follow h2 {
	font-size: 2.200em;
	color: #fff;
}



#follow p {
	color: #fff;
}


/*#follow ol {
	width: 100%;
    counter-reset: item;
	list-style-type: none;
}



#follow ol li {
	position: relative;
	display: block;
	float: left;
    width: calc(32.5% - 15px);
	height: 275px;
    line-height: 25px;
    margin: 0 15px;
    padding: 25px 25px;
    color: #fff;
    text-align: left;
	background: #ffffff20;
	border-radius: 20px;
}



#follow ol li:first-child {
    margin: 0 15px 0 0;
}

#follow ol li:last-child {
    margin: 0 0 0 15px;
}


#follow ol li h4 {
	color: #fff;
	height: 30px;
	font-size: 1.50em;
	font-weight: 600;
	padding: 0 0 70px 45px;
}


#follow ol li::before {
    counter-increment: item;
    content: counter(item);

    position: absolute;
    left: 30px;
    top: 55px;
    transform: translateY(-50%);

    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff8c00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}*/

#follow ol {
    width: 100%;
    counter-reset: item;
    list-style-type: none;

    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
}

#follow ol li {
    position: relative;
    display: flex;
    flex-direction: column;

    flex: 1; /* alle gleich breit */
    padding: 25px 25px;
    color: #fff;
    text-align: left;
    background: #ffffff20;
    border-radius: 20px;
}

#follow ol li h4 {
    color: #fff;
    font-size: 1.50em;
    font-weight: 600;
    padding: 0 0 25px 45px;
    margin: 0;
	line-height: 30px;
}

#follow ol li::before {
    counter-increment: item;
    content: counter(item);

    position: absolute;
    left: 30px;
    top: 25px; /* bündig mit der Oberkante */
	left: 25px;
    
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff8c00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/*#follow ol li::before {
    counter-increment: item;
    content: counter(item);

    position: absolute;
    left: 30px;
    top: 55px;
    transform: translateY(-50%);

    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff8c00;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}*/


#follow ul {
	display: block;
	width: 100%;
	margin: 50px 0 0 0;
	padding: 0;
	
}

#follow ul li {
	list-style-type: none;
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 15px 0 0;
	padding: 0;
	text-align: center;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#follow ul li a {
	display: block;
	width: 50px;
	height: 50px;
	font-size: 3.125em;
	font-style: normal;
	text-decoration: none;
	margin: 0;
	padding: 0;
	
	border: 1px rgba(28,28,28,1.00);
	cursor: pointer;

	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#follow ul li:hover {
	border: thin rgba(28,28,28,1.00);
}

#follow ul li a:hover {
	opacity: 1.0;
}






#follow2 {
	display: block;
	box-sizing: border-box;	
	margin: 0;
	padding: 0;
	height: 100px;
	/*background-color: #e6e6e6;
	box-shadow: inset 0px 10px 0px 0px rgba(70, 92, 134, 1.0);*/
	 background: rgb(255,255,255);
background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(70,92,134,1) 75%);
background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(70,92,134,1) 75%);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(70,92,134,1) 75%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#465c86",GradientType=1); 
}

#follow2 .box {
	display: block;
	width: 100%;
	height: 100px;
	box-sizing: border-box;	
	padding: 0;
}

#follow2 a {
	display: block;
	float: left;
	width: 25%;
	height: auto;
	box-sizing: border-box;	
	padding: 0;

}

#follow2 a img {
	display: block;
	float: left;
	width: 200px;
	height: auto;
	box-sizing: border-box;	
	margin: 0;
	padding: 15px 0;
}


#follow2 ol {
	/*width: 100%;*/
	/*text-align: right;*/
	margin: 0;
	padding: 0;
	float: right;
}

#follow2 li {
	list-style-type: none;
	display: block;
	float: left;
	width: 75px;
	margin: 0;
	padding: 0;
	text-align: center;
}

#follow2 li a {
	display: block;
	font-size: 2.000em;
	font-style: normal;
	line-height: 100px;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	
	
	opacity: 0.7;
}

#follow2 a:hover {

	opacity: 1.0;
}





#moreabout {
	display: block;
	margin: 0;
	padding: 0;
	background-color: #465c86;
	height: 100px;
}

#moreabout :hover {
	background-color: #F30000;
}



#moreabout a {
	display: block;
	width: 100%;
	height: 100px;
	line-height: 100px;
	padding: 0;
	margin: 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
}





#portrait {
	display: block;
	box-sizing: border-box;
	width: 100%;
	
	
}

/*#portrait article {
	padding: 0;
	margin: 50px 0 0 0;
}





#portrait .col1-6,
#portrait .col2-6,
#portrait .col3-6,
#portrait .col4-6,
#portrait .col5-6,
#portrait .col6-6 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(25% - 25px);
	height: auto;
	padding: 0;
	margin: 0 0;

	color: #505050;
	
	background: #fafafa;
	
	border-radius: 20px;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}*/


#portrait article {
    padding: 0;
    margin: 50px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Zentriert die Boxen */
    gap: 25px; /* ersetzt dein -25px calc() Trick */
	
	
}

#portrait .col1-6,
#portrait .col2-6,
#portrait .col3-6,
#portrait .col4-6,
#portrait .col5-6,
#portrait .col6-6 {
    box-sizing: border-box;
	float: none;
    flex: 0 0 calc(25% - 25px); /* 4 Spalten + Platz für gap */
    margin: 0;
    float: none; /* WICHTIG: Float entfernen */
	background: #fafafa;
	border-radius: 20px;
}




#portrait .col1-6:hover,
#portrait .col2-6:hover,
#portrait .col3-6:hover,
#portrait .col4-6:hover,
#portrait .col5-6:hover,
#portrait .col6-6:hover {
	/*box-shadow: 0 15px 25px rgba(50,50,50,0.25);*/
	transform: scale(1.05);
	cursor: pointer;
	border: none;
	
	
}

#portrait h1,
#portrait p {
	color: #fff;
}

#portrait img {
	display: block;
  	width: 100%;
	height: auto;
	
	border-radius: 20px 20px 0 0;

	
}


#portrait ol {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}

#portrait li {
	list-style-type: none;
	display: inline-block;
	width: 40px;
	margin: 0;
	padding: 0;
	margin-right: 10px;
	text-align: center;
}

#portrait li:last-child {
	margin-right: 0;
}

#portrait li a {
	display: block;
	font-size: 1.75em;
	font-style: normal;
	line-height: 1.75em;
	text-decoration: none;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
	-webkit-filter: grayscale(55%); /* Chrome, Safari, Opera */
    filter: grayscale(55%);
	opacity: 0.5;
	
	margin: 0;
	padding: 0;
}

#portrait a:hover {
	-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%);
	opacity: 1.0;
}




#ziel {
	display: block;
	box-sizing: border-box;
	width: 100%;
	
	
}


#ziel article {
    padding: 0;
    margin: 50px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center; /* Zentriert die Boxen */
    /*gap: 25px; /* ersetzt dein -25px calc() Trick */
	
	
}

#ziel .col1-2,
#ziel .col2-2 {
    box-sizing: border-box;
	float: none;
    flex: 0 0 calc(50%); /* 4 Spalten + Platz für gap */
    margin: 0;
    float: none; /* WICHTIG: Float entfernen */
	
	
	
}

#ziel .col2-2 {
	background: #fafafa;
    padding: 50px;
	border-radius: 0 20px 20px 0;
	align-content: center;
}


#ziel h1 {
	color: #fff;
}

#ziel p {
	color: #205862;
}

#ziel img {
	display: block;
  	width: 100%;
	height: auto;
	
	border-radius: 20px 0 0 20px;

	
}



/* Gesamter Bereich */
#ziel2 {
    width: 100%;
    background-color: rgba(32, 88, 98, 1);

    /* WICHTIG: Flexbox aktivieren */
    display: flex;
    align-items: stretch; /* Beide Elemente gleiche Höhe */
}

/* Wrapper für Inhalt */
#ziel2 .lazy-load {
    display: flex;
    width: 100%;
}

/* INFO-BEREICH */
#ziel2 .info {
	width: calc(50% - 12.5%);
    box-sizing: border-box;
	margin-left: 12.5%;
}

/* Text-Styling */
#ziel2 .info h1,
#ziel2 .info p {
    color: #fff;
    margin: 0 0 20px 0;
	padding-right: 100px;
}

/* Bild rechts */
#ziel2 img {
    width: 50%;
    height: 100%;        /* Höhe anpassen */
    object-fit: cover;   /* Bild füllt den Bereich sauber */
    display: block;
}








/* Gesamter Bereich */
#ziel3 {
    width: 100%;
	height: auto;
    background-color: rgba(32, 88, 98, 1);
    box-sizing: border-box;
}

/* Info-Bereich links */
#ziel3 .info {
	display: block;
	box-sizing: border-box;
    float: left;
    width: 50%;
    padding-right: 100px;
}

#ziel3 .info h1,
#ziel3 .info p {
    margin: 0 0 20px 0;
    color: #fff;
}

/* Bild rechts */
#ziel3 img {
	display: block;
	box-sizing: border-box;
    float: left;
	width: 50%;
	height: auto;

	border-radius: 20px;
	margin: 0;
}




/*FIRMA*/


#firma {
	display: block;
	float: left;
	height: 450px;
	margin: 0;
	padding: 0;
}

#firma .full-detail {
	background-image: url("../images/firma_hg.jpg");
	background-position: 50% 50%;
	background-position-x: 50%;
	background-position-y: 50%;
	background-repeat: no-repeat;
	background-size: cover, cover;
	border-bottom-color: rgb(226, 226, 226);
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-left-color: rgb(226, 226, 226);
	border-left-style: solid;
	border-left-width: 0px;
	border-right-color: rgb(226, 226, 226);
	border-right-style: solid;
	border-right-width: 0px;
	border-top-color: rgb(226, 226, 226);
	border-top-style: solid;
	border-top-width: 0px;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	display: flex;

	height: 450px;
}


#firma .box {
	width: 100%;
	box-sizing: border-box;
	/*display: flex;
	flex-basis: 0%;
	flex-grow: 1;
	flex-shrink: 1;
	flex-wrap: wrap;*/
	
	padding: 0 5%;
	margin: 5%;

}








#firma a {
	display: block;
	width: 200px;
	height: 50px;
	margin: 25px auto;

	line-height: 50px;
    -moz-box-shadow: 0px 10px 5px #8f8f8f;
    -webkit-box-shadow: 0px 10px 5px #8f8f8f;
    box-shadow: 0px 10px 5px #8f8f8f;



}


#firma article {
	display: block;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	
}


#firma article .col1-2 {
	z-index: 8000;
	margin: 0;
	padding: 3.5% 7% 7% 7%;

}

#firma article .col2 {
	z-index: 8000;
	margin: 0;
	padding: 3.5% 7% 7% 7%;
}



#industry {

}

#industry .box {
	display: block;
	width: 100%;
	/*box-sizing: border-box;	*/
	/*padding: 3.5%;*/
}

/*#industry > div {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;	
	padding: 0;
}*/

#industry a {
	display: block;
	width: 15%;
	height: auto;
	box-sizing: border-box;	
	padding: 0;

}


#industry h2 {
	display: block;
	box-sizing: border-box;	
	width: calc(100% - 30px);
	float: left;
	margin: 0 15px;
	padding: 0 15px;
	font-weight: 700;
	text-align: center;
	position: absolute;
    top: 15px;
	left: 0;
    z-index: 10;
    color: #205862;
	background-color: rgba(255, 255, 255, 0.5);
    font-size: 1.300em;
	border-radius: 10px 10px 0 0;	
}


#industry img {
	display: block;
	width: 100%;
	height: auto;
	margin:0;
	padding: 0;
	
	border-radius: 10px;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}





/*AGB*/

.agb {
	
}

.agb ul {
	margin: 0;
	padding: 0 0 0 25px;

}

.agb ul li {
	list-style-type: none;
	list-style-position: outside;
	font-weight: 400;
	font-size: 1.125em;
	font-style: normal;
	line-height: 1.500em;
	margin-bottom: 0.500em;
}





/*CONTAINER*/


.container {
	width: 86%;
	height: auto;
	z-index: 8000;
	margin: 0 7% 0 7%;
}


/*NAVIGATION*/

.navbox {
	width: 100%;
	height: 100px;
	float: right;
	margin: 15px 0 0 0;
	padding: 0;

}

nav {
	text-align: right;


}

.logo {
	float: left;
	margin: 0;
	padding: 0;
}

.logo a {
	display: block;
	text-align: left;
}

.logo img {
	display: block;
	height: 20px;
	max-height: 20px;
	width: auto;
	text-align: center;
	margin: 15px auto;
	padding: 0 50px;
	cursor: pointer;

}

.mobil-logo {
	float: left;
	margin: 0;
	padding: 0;
}

.mobil-logo a {
	display: block;
	text-align: left;
}

.mobil-logo img {
	display: block;
	height: 20px;
	max-height: 20px;
	width: auto;
	text-align: center;
	margin: 15px auto;
	padding: 0 50px;
	cursor: pointer;

}




.resizing .logo img {
    height: 30px; /* Resized height */
    max-height: 30px; /* Resized max height */
    margin: 10px auto; /* Resized margin */
}

/*TOP*/


#callus {
    display: block;
    width: 100%;
    height: 2px;
    background: orange; /* falls nicht schon gesetzt */

    overflow: hidden; /* wichtig: Inhalt bleibt verborgen */
    transition: height 0.2s ease-in-out;
}

/*#callus:hover {
    height: 50px;
}*/

/* Inhalt erst bei Hover anzeigen */
#callus ul {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#callus:hover ul {
    opacity: 1;
}

/* Layout */
#callus ul li {
    display: block;
    float: left;
    list-style: none;
    padding-right: 10px;
    margin: 0;
}

#callus ul li a {
    display: block;
    text-decoration: none;
    font-size: 0.75em;
    line-height: 50px; /* passt zur Hover-Höhe */
    margin: 0;
    color: rgba(255,255,255,0.75);
}

#callus ul li a:hover {
    color: rgba(255,255,255,1);
}






#top {
	display: block;
	width: 70%;
	height: 50px;
	margin: 2.5% 15%;
	padding: 0;

	border-radius: 25px;
	background-color: #ffffff90;
	
	border-bottom-color: rgb(100, 100, 100);
	border-bottom-style: none;
	border-bottom-width: 0px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
	z-index: 9999;

}

.background-blur{
  	backdrop-filter: blur(8px);
}

/*.header-blur{
	background-color: #ffffff40;
  	backdrop-filter: blur(1px);
	
}*/

.sticky {
  	position: fixed;
	z-index: 9999;
	/*transition: height 0.35s;*/
}

#top .col1-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(40% - 20px);
	height: auto;
	padding: 0;
	margin: 0;
}

#top .col2-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: right;
	width: calc(60% - 20px);
	height: auto;
	padding: 0;
	margin: 0;
}






#top-mobil {
	display: none;
	visibility: hidden;
	width: 70%;
	height: 50px;
	margin: 2.5% 15%;
	padding: 0;

	border-radius: 25px;
	background-color: #ffffff90;
	
	border-bottom-color: rgb(100, 100, 100);
	border-bottom-style: none;
	border-bottom-width: 0px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
	z-index: 9999;
	/*transition: position 0.35s;*/
}


#top-mobil .col1-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(50% - 20px);
	height: auto;
	padding: 0;
	margin: 0;
}

#top-mobil .col2-2 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: right;
	width: calc(50% - 20px);
	height: auto;
	padding: 0;
	margin: 0;
}


/*CONTENT*/

.content {
	padding-right: 14px;
	padding-left: 14px;
	text-decoration: none;
	padding-bottom: 10px;
	padding-top: 10px;
	z-index: 10;
	height: auto;
}

.content .col1-2{
	float: left;
	margin-right: 0px;
	margin-left: 0px;
	width: 650px;

}
.content .col2{
	float: right;
	margin-right: 0px;
	height: 100%;
	width: 300px;
	margin-left: 20px;
	display: block;
}
.content .col2 ul {
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	width: 100%;
	float: left;
	border-radius: 5px 5px 5px 5px;
	height: 200px;
	display: block;
}
.content .col2 ul li a p{
	font-family: "Fira Sans Condensed", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #465c86;
	text-align: center;
	position: relative;
	bottom: 10px;
	padding-bottom: 0px;
	margin: 0px;
	font-style: normal;
	text-decoration: underline;
}
.content .col2 ul li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.content .col2 ul li a{
	display: block;
	margin-top: 0px;
	background-image: url(../images/pakete/paket_start.png);
	background-repeat: no-repeat;
	margin-bottom: 0px;
	width: auto;
	height: 200px;
	list-style-type: none;
}
.content .col2 ul li a:hover {
	background-image: url(../images/pakete/paket_start_hover.png);
	background-repeat: no-repeat;
	color: #000000;
}

/*BANNER*/

.banner {
	height: 150px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.banner img {
	border-radius: 0px 0px 0px 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;

}

/*OPACITY*/

.opacity { position:absolute; left:5px; height:272px; width:167px; top:0px; background:url(../images/opacity.png) repeat
}
.opacity_r { position:absolute; left:348px; height:272px; width:167px; top:0px; background:url(../images/opacity.png) repeat
}

.menu_bg {
	background-color: #00602B;
	height: 30px;
}
.menu_bg_fest {
	background-color: #00602B;
	height: 30px;
	position: relative;
	top: 150px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
}


/* PAGES --------------------------------------------------------*/

#page-content{
	float: left;
	width: 800px;
	margin-left: 14px;
}
.date { color:#000000; 
}
.text {
	padding-left:0px
}
.datum {
	font-size:14px;
	text-transform:uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}
.col_first  {
	float: left;
	width: 292px;
	vertical-align: baseline;
	line-height: 20px;
	margin-left: 14px;
}
.col_740  {
	float: left;
	width: 740px;
	vertical-align: baseline;
	line-height: 20px;
	background-color: #FFFEEC;
}
.col {
	float: left;
	width: 200px;
	vertical-align: baseline;
	margin-left: 26px;
}
.col_list {
	line-height: 20px;
	background-color: #FFFEEC;
	padding-bottom: 20px;
	color: #333333;
	font-family: "Fira Sans Condensed", sans-serif;
}
col_ul {

}
col_li {
	width: 100%;
	text-decoration: none;
	list-style-type: none;
	display: block;
	height: 170px;
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #006633;
}

/*MAP*/

.map {
	float: left;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.mapinfo {
	float: left;
	width: auto;
	height: 250px;
	margin-top: 14px;
	margin-left: 50px;
}

/*FACEBOOK*/

.facebookOuter {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.facebookInner {
	overflow: hidden;
	color: #FFFFFF;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.fan_box  .connections   {
	color: #FFFFFF;
}

.fan_box .connections_grid .grid_item .name {
	color: #FFFFFF;
}
.fbConnectWidgetFooter {
	background-color: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/*TOTOP*/

.totop {
	display:block;	
	position: fixed;
	bottom: 30px;
	right: 30px;
	border-radius: 50%;
	
	
	z-index: 9999;
}



.totop a {
	display: block;
	position: relative;
	
	text-decoration: none;
	margin: 0;
	padding: 0;

	font-size: 3.125em;
	line-height: 50px;
	width: 50px;
	height: 50px;

	border-radius: 50%;
	

	color: #ff8c00;
	background-color: #fff;
	/*border: 1px rgba(40,40,40, 0.9) solid;*/
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	
}

.totop a:hover,
.totop a:focus {
	color: #fff;
	background-color: #ff8c00;
	/*border: 1px rgba(40,40,40, 0.3) solid;*/

}





/*CONTACT*/


#contactform {
	position: relative;
	top: 0;
	left: 0;
	/*height: auto;*/
	width: 100%;
	display: block;
	margin: 0;
}

#contactform h1,
#contactform h2 {
	text-align: center;
}

.col_contact-area {
	display: block;
	width: 100%;
	padding: 50px 0 0 0;
	margin: 0 auto;
	
}


.col_contact-area p {
	display: block;
	float: left;
	width: 100%;
	line-height: 40px;
	margin: 25px 0;
	padding: 0;
	
}

.col_contact-area .feld {
	display: block;
	float: left;
	height: 40px;
	width: calc(100% - 45px);
	margin: 0 0 20px 0;
	padding: 0;
	
}



.col_contact-area i {
	display: block;
	box-sizing: border-box;
	float: left;
	height: 40px;
	width: 40px;
	margin: 0 5px 0 0;
	padding: 0;
	background: rgba(32,88,98,1.00);
	border: rgba(34,34,34,0.1) 1px solid;
	border-radius: 20px 0 0 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
}


.col_contact-area input {
  display: block;
  width: 100%;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-family: "Fira Sans Condensed", sans-serif;
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  background: #fafafa;
  
  border: rgba(17,48,54,0.1) 1px solid;
  color: rgba(6,17,19,1.00);
  margin: 0;
  padding: 13px 5px 13px 15px;
  border-radius: 0;
  
  transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
}

.col_contact-area input:hover {
  /* Verlauf von rechts nach links */
  background: linear-gradient(to left, rgba(32,88,98,1.00) 100%, #e6e6e6 0);
  background-size: 200% 100%;
  background-position: right bottom;
  color: #fff;
}


.col_contact-area input:active {
	color: rgba(255,255,255,1.00);
	background: rgba(32,88,98,1.00);
	border: rgba(32,88,98,1.00) 1px solid;
}

.col_contact-area input:focus {
	color: rgba(255,255,255,1.00);
	background: rgba(32,88,98,1.00);
	border: rgba(32,88,98,1.00) 1px solid;
	outline: none;
}


.col_contact-area .feld1 input,
.col_contact-area .feld2 input,
.col_contact-area .feld3 input,
.col_contact-area .feld4 input,
.col_contact-area textarea {
	outline: none;
	border: none;
	width: 100%;
	padding: 13px 5px 13px 15px;

}


.col_contact-area .message {
	display: block;
	float: left;
	height: 180px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fafafa;
}


.col_contact-area .math {
	display: block;
	float: left;
	height: 40px;
	width: 140px;
	margin: 0 5px 10px 0;
	padding: 0;
	background: #fafafa;
	border: rgba(34,34,34,0.1) 1px solid;
}

.col_contact-area .mathresult {
	display: block;
	float: left;
	height: 40px;
	width: calc(100% - 190px);
	margin: 0 0 20px 0;
	padding: 0;
	
}

/* -----------------------------------------------------------
   UPLOAD BUTTON – CUSTOM STYLING
   ----------------------------------------------------------- */
.col_contact-area .upload {
	display: block;
	float: left;
	height: 40px;
	line-height: 40px;
	width: 200px;
	margin: 0;
	padding: 0;
	border-radius: 20px 0 0 20px;

}

.col_contact-area .upload i {
	display: block;
	position: relative;
	top: 0;
	left: 5px;
	height: 40px;
	width: 40px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
    color: #fff;
    /*text-align: center;*/
    line-height: 40px;
}

.hinweis {
  	background-color: none;
  	font-size: 1.0em;
	font-style: italic;
	font-weight: 500;
  	color: #205862;
  	border-radius: 20px;
	margin: 0;
	padding: 0;

}


.custom-file-button {
    display: inline-block;
	box-sizing: border-box;
	height: 40px;
	line-height: 40px;
    padding: 0;
	margin: 0;
    background: rgba(255,140,0,1.00);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
	border-radius: 20px;
    width: 250px;
	cursor: pointer;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
    
}

.custom-file-button:hover {
    background-color: #e68600;
}

.custom-file-button:active {
    transform: translateY(0);
}

.custom-file-button i {
	position: relative;
	top: 0;
	display: inline-block;
	height: 40px;
	transform: translateX(0); 
	transition: transform 0.25s ease; 
	padding-right: 15px;
	margin: 0;
	opacity: 1.0;
	
	font-family: "FontAwesome";

	content: "\f1d8";
	position: relative;
	line-height: 40px;
	left: 0; 
	top: 0; 
	font-size: 14px;
	color: #fff;
	padding-right: 15px;
}


.custom-file-button:hover i {
	transform: translateX(0);
	opacity: 1.0;
}

/* -----------------------------------------------------------
   FILELIST – ÄUSSERER CONTAINER
   ----------------------------------------------------------- */
.col_contact-area .filelist {
    display: block;
    float: left;                 /* bleibt wie gewünscht */
/*    min-height: 40px;
	height: 200px;*/
    width: calc(100% - 0px);
    margin: 20px 0 10px 0;
    padding: 0;
    background: #fafafa;
    border: rgba(34,34,34,0.1) 1px solid;
    box-sizing: border-box;
    position: relative;          /* wichtig für Firefox */
    z-index: 1;                  /* verhindert Überlappung durch Icons */
/*	overflow: hidden;            /* ← NEU: clearfix für Firefox */
}







/* -----------------------------------------------------------
   FILELIST – INHALT (TEXT)
   ----------------------------------------------------------- */

.filelist #filePreview {
    padding-left: 15px;
	padding-right: 15px;
    font-size: 14px;
	line-height: 25px;
    color: #205862;
    font-weight: 400;
    cursor: default;
}

#filePreview i.fa-file {
    background: none;
    color: #205862;
    padding: 0;
	border: none;
    font-size: 14px;
	line-height: 25px;
    margin-right: 10px;
}

.filelist i {
    all: unset;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
	line-height: 25px;
    background: none;
    color: #205862;
    padding: 0;
	border: none;
}


.file-delete-icon {
    margin-left: 6px;
    opacity: 1.0;
	font-size: 14px;
	line-height: 25px;
    background: none;
    color: #ff8c00;
    padding: 0 15px 0 0;
	border: none;
}

.file-delete-button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	color: #ff8c00;
}

.file-delete-button:hover {
	color: #ff8c00;
}








.col_contact-area .math img {
	padding: 12px 0 8px 15px;
	margin: 0;
	display: block;
}

.col_contact-area .send {
	display: block;
	float: left;
	position: relative;
	padding-left: 30px;
	height: 40px;
	line-height: 40px;
	width: 200px;
	margin: 0;
	padding: 0;
}

/*.col_contact-area .send i {
	display: block;
	box-sizing: border-box;
	float: left;
	height: 40px;
	width: 40px;
	margin: 0 5px 0 0;
	padding: 0;
	background: none;
	border: none;
    color: #fff;
    text-align: center;

    line-height: 40px;
}*/




.col_contact-area textarea {
	display: block;
	float: left;
	
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-family: "Fira Sans Condensed", sans-serif;
	font-size: 0.875em;
	line-height: 1.500em;
	height: 100%;
	width: 100%;
	padding: 13px 5px 5px 15px;
	margin: 0 0 10px 0;
	border-style: none;
	background: #fafafa;
	border: rgba(17,48,54,0.1) 1px solid;
 	color: rgba(6,17,19,1.00);
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	
}


.col_contact-area textarea:hover {
	background: linear-gradient(to left, rgba(32,88,98,1.00) 100%, #e6e6e6 0);
  	background-size: 200% 100%;
  	background-position: right bottom;
  	color: #fff;
}

.col_contact-area textarea:active {
	color: rgba(255,255,255,1.00);
	background: rgba(32,88,98,1.00);
	border: rgba(32,88,98,1.00) 1px solid;
}

.col_contact-area textarea:focus {
	color: rgba(255,255,255,1.00);
	background: rgba(32,88,98,1.00);
	border: rgba(32,88,98,1.00) 1px solid;
	outline: none;
}

.col_contact-area .submit-button {
	display: block;
	float: left;
	font-family: "Fira Sans Condensed", sans-serif;
	line-height: 40px;
	font-size: 14px;
    font-weight: 500;
	width: 250px;
	height: 40px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: rgba(255,140,0,1.00);
	border-radius: 20px;
	cursor: pointer;
	border: none;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

}

.col_contact-area .submit-button::before {
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f1d8";
	position: absolute;
	left: 0; 
	top: 0; 
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	padding-left: 15px;


}



.col_contact-area .submit-button:hover {
	color: rgba(255,255,255,1.00);
	background: rgba(230, 134, 0, 1.0);
	outline: none;
}

.col_contact-area .submit-button:active {
	color: rgba(255,255,255,1.00);
	background: rgba(230, 134, 0, 1.0);
	outline: none;
}

.col_contact-area .submit-button:focus {
	color: rgba(255,255,255,1.00);
	background: rgba(230, 134, 0, 1.0);
	outline: none;
}


.col_contact-area .submit-button i {
	position: relative;
	top: 0;
	display: inline-block;
	height: 40px;
	transform: translateX(-150px); 
	transition: transform 0.25s ease; 
	padding: 0 10px 0 0;
	margin: 0;
	opacity: 0;
}


.col_contact-area .submit-button:hover i {
	transform: translateX(0);
	opacity: 1.0;
}





/*TABLE*/


table.productdetail {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  color: #000000;
}

table.productdetail td,
table.productdetail th {
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  padding: 4px;
  text-align: center;
}

table.productdetail td:first-child {
	text-align: right;
}

table.productdetail td:first-child:after {
	content: " mm";
}

/*table.productdetail td:nth-child(2):before {
	content: "6";
}

table.productdetail td:nth-child(5):before {
	content: "8";
}

table.productdetail td:nth-child(8):before {
	content: "10";
}

table.productdetail td:nth-child(11):before {
	content: "12";
}*/

table.productdetail thead {
	line-height: 30px;
  	background-color: #465c86;
	color: #fff;
	font-weight: 600;
}

/*table.productdetail thead:hover {
	color: #000;
}*/


table.productdetail tbody tr:hover {
	background-color: #d9d9d9;
	cursor: pointer; 
}







/*BOTTOM*/

#bottom {
	display: block;
	positon: relative;
	bottom: 0;
	left: 0;
	height: 100px;
	z-index: 5000;
	padding: 0;

}

#bottom p {
	display: block;
	width: 100%;
	margin: auto;
	float: left;
	font-style: normal;
	font-size: 0.875em;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-align: center;
	line-height: 100px;
	padding: 0;
	text-decoration: none;
	color: rgba(140,137,137,1.0);

}


#bottom a {
	text-decoration: none;
	font-style: normal;
	font-size: 0.875em;
	font-weight: 400;
	letter-spacing: 0.15em;
	padding-left: 10px;
	line-height: 100px;
	color: rgba(140,137,137,1.0);
}

#bottom a:hover {
	color: rgba(255,255,255,1.0);
}


/*GOOGLEMAPS*/

.responsiveContainer {
	position: relative;
	height: auto;
	overflow: hidden;
	/*margin-bottom: 20px;*/
}

.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gm-style-iw {
	width: 300px;
	height: 80px;
}
.responsiveContainer b {
	color: #465c86;
	font-weight: bold;
	font-size: 18px;
}



/*FOOTER*/

#footer {
	display: block;
	width: 100%;
	height: auto;
	padding: 25px 0 0 0;
	background-color: #282828;
	z-index: 5000;
	
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

#footer:hover {
	
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

#footer a i  {
	margin: 0 5px 0 0;
	padding: 0;
	
	color: #205862;

	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

/*#footer:hover a i  {
	color:#205862;
	
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}*/


#footer h5 {
	margin: 0 0 20px 0;
	padding: 0;
	color: #FF8C00;
	font-weight: 600;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#footer:hover h5 {
	font-size: 1.500em;
}

#footer   a,
#footer   p,
#footer   li {
	text-decoration: none;
	color: #8c8c8c;
	font-size: 1.000em;
	line-height: 1.600em;
	font-style: normal;
	padding-left: 0px;
	margin: 0;
	font-weight: 400;
	list-style-type: none;
	
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#footer   li {
	text-transform: uppercase;
}

#footer a {
	cursor: pointer;
}

#footer:hover a {
	color:#fff;
}

#footer a:hover {
	color: #ff8c00;
}




#footer .col1-4,
#footer .col2-4,
#footer .col3-4,
#footer .col4-4 {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	float: left;
	width: calc(25%);
	height: auto;
	padding: 0;
	margin: 0;
}

/*#footer .col1-4 {
	left: 0;
	float: left;
	text-align: left;
}*/

#footer .col1-4 ul {
	padding: 0;
	margin: 0;

}

#footer .col1-4 ul li{
	/*font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;*/
	/*text-decoration: underline;*/
	list-style-position: inside;
	list-style-type: none;
	padding-left: 0;
	margin: 0;
	
}

#footer .col2-4 {
	text-transform: uppercase;
}

#footer   .col2-4 ul{
	
}

#footer   .col2-4 ul li {
	/*font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;*/
	text-decoration: none;
	list-style-position: inside;
	list-style-type: none;
	padding-left: 0;
}

/*#footer .col3-4 {
	left: 0;
	float: left;

}*/

#footer   .col3-4 ul{
	margin: 0;
	padding: 0;
}

#footer   .col3-4 ul li {
	width: 80%;
	list-style-type: none;
	display: block;
	float: left;
	margin: 0 0 20px 0;
	padding: 0;
}

#footer   .col3-4 ul li a img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/*#footer .col4-4 {
	left: 0;
	float: left;
	text-align: left;

}*/

#footer   .col4-4 ul{
	margin: 0;
	padding: 0;
}


#footer   .col4-4 ul li{
	list-style-type: none;
	padding:0;
	margin: 0;
	display: block;
	width: auto;
	float: left;
}

#footer   .col4-4 a {
	color: rgba(40, 42, 43, 1.0);
}

#footer   .col4-4 a:hover {
	color: #465c86;
}



/*FUNKTIONS*/

.lazy-load {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease-in-out, transform 0.75s ease-in-out;
}

/* Diese Regel MUSS später kommen als .lazy-section */
.hidden {
  opacity: 0;
  transform: translateY(50px);
}


/* ======================================================================================================
 MEDIA QUERIES
=======================================================================================================*/	

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



h1 {
	font-size: 3.500em;

}

h2 {
	font-size: 1.500em;
	line-height: 2.0em;
}

h3 {
	font-size: 1.200em;
	line-height: 2.200em;

}

h4 {
	font-size: 1.0em;
	line-height: 1.7em;
	
}


.hero .content h2 {
	font-size: 200%;
}

}



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

.wrapper {
	width: 92%;
	height: auto;
	margin: 0 4% 0 4%;
}
	
p, a, li {
    font-size: 1.000em;
}
	
.agb ul li {
	font-size: 1.000em;
}
	
.padding-tb {
	height: auto;
	padding: 8% 0 8% 0;
	margin: 0;
}

h1 {
	font-size: 3.000em;

}

h2 {
	font-size: 1.300em;
	line-height: 2.0em;
}
	
h3 {
    font-size: 1.2em;
    line-height: 1.8em;
}


	
#slogan h2,
#slogan-1 h2,
#slogan-2 h2,
#slogan-3 h2,
#slogan-4 h2 {
    font-size: 2.000em;
}

	
#follow h1 {
	font-size: 2.750em;
}

#follow h2 {
	font-size: 2.000em;
}
	
#detail h1 {
    font-size: 3.000em;
}

#detail h2 {
    font-size: 2.500em;
}

	
#news .col1-2, 
#news .col2-2 {
    display: block;
    z-index: 8000;
    margin: 0;
    padding: 4% 4%;
    width: 50%;

}


#portrait li a {
	font-size: 2.0em;
	line-height: 2.0em;
}

#ziel3 .info p {
    padding-top: 0;
}


}



/*Ipad PRO*/
@media only screen and (max-width: 1366px) {

p,
a,
li {
	font-size: 1.000em;
	line-height: 1.500em;
}
	
.agb ul li {
	font-size: 1.000em;
	line-height: 1.500em;
}

	
.whiteboxed h2 {
	font-size: 1.250em;
		
}
	

}






/*Google Nexus 10*/
@media only screen and (max-width: 1280px) {


	
#contactform {
	right: -70%;
}

#contactform:hover,
#contactform:focus {
	right: -50%;

}
	
h3 {
    font-size: 1.0em;
    line-height: 2.4em;
}	

h4 {
	font-size: 1.0em;
	line-height: 1.6em;
	
}
	
/*.hero .content h1 {
    color: white;
    text-align: center;
    width: 100%;
    box-sizing: border-box;	
	padding-top: 25%;
	text-shadow: 1px 3px 2px rgba(80,80,80,0.75);
}*/

/*#portrait .col1-6,
#portrait .col2-6,
#portrait .col3-6,
#portrait .col4-6,
#portrait .col5-6,
#portrait .col6-6 {
	width: calc(32% - 0.4%);
	padding: 0;
	margin: 0.8% 0.8%;

}*/




}

/*Ipad*/
@media only screen and (max-width: 1024px) {

.wrapper {
	width: 84%;
	height: auto;
	margin: 0 8% 0 8%;
}
	
	


h1 {
	font-size: 2.400em;
}

.hero .content h2 {
	font-size: 150%;
}
	
p,
a,
li {
	font-size: 0.925em;
	line-height: 1.350em;
}

.padding-tb {
	height: auto;
	padding: 10% 0 10% 0;
	margin: 0;
}	
	
.agb ul li {
	font-size: 0.925em;
	line-height: 1.350em;
}

#contactform {
	right: -65%;
}

#contactform:hover,
#contactform:focus {
	right: -40%;

}
	
	

	
.whiteboxed {
	padding: 25px;
}
	
.whiteboxed p {
	height: 60px;	
}
	
.whiteboxed h2 {
    font-size: 1.500em;		
}
	

.col1-4, 
.col2-4, 
.col3-4, 
.col4-4 {
    width: calc(50% - 20px);
	padding: 15px;

}
	


	
#news .col1-2, 
#news .col2-2 {
    display: block;
    z-index: 8000;
    margin: 0;
    padding: 4% 4%;
    width: 50%;

}

#slogan h1,
#slogan-1 h1,
#slogan-2 h1,
#slogan-3 h1,
#slogan-4 h1 {
    font-size: 2.250em;
}

#slogan h2,
#slogan-1 h2,
#slogan-2 h2,
#slogan-3 h2,
#slogan-4 h2 {
    font-size: 1.500em;
}

	
#follow article {
	width: 85%;
	margin: 25px 7.5%;

}

#follow h1 {
	font-size: 2.250em;
}

#follow h2 {
	font-size: 1.500em;
}
	
	
button {
	line-height: 40px;
}


#features .col-content-left,
#features .col-content-right {
	flex: 1; /* Textspalte */
	display: flex;
	flex-direction: column;
	padding: 0 0;
}

#follow ol { 
	flex-direction: column;
	gap: 25px;
} 
	
#follow ol li {
	width: 100%;
}
	
#portrait .col1-6,
#portrait .col2-6,
#portrait .col3-6,
#portrait .col4-6,
#portrait .col5-6,
#portrait .col6-6 {
    flex: 0 0 calc(50% - 25px); /* 4 Spalten + Platz für gap */

}

	
	
}



/*Breakpoint Desktop Navigation*/
@media only screen and (max-width: 900px) {

#top {
	display: none;
	visibility: hidden;
}
	
#top-mobil {
	display: block;
	visibility: visible;
}
	
.desknav {
	display: none;
	visibility: hidden;
}

.mobilnav {
	display: block;
	visibility: visible;
}

#top .col1-2 {
	display: none;
	visibility: hidden;
}
	
#top .col2 {
	width: 50%;
}
	
#top .col3 {
	width: 50%;
}
	
#startscreen .col1-2 {
	float: left;
	width: 50%;
	margin: 0 25%;


}
	
#startscreen .col2 {
	float: left;
	width: 100%;


}

	
#ziel2 .info {
    display: block;
	width: calc(100% - 12.5%);
	padding-right: 12.5%;
}


/* Bild rechts */
#ziel2 img {
	width: 100%;
}
	


#ziel3 .info {
    width: 100%;
    padding: 0;
}
	
#ziel3 .info p {
    padding: 0;
	padding-bottom: 50px;
}


/* Bild rechts */
#ziel3 img {
	width: 100%;
	

}
	
.padding-tb {
	height: auto;
	padding: 12% 0 12% 0;
	margin: 0;
}
	
.col_contact-area {
	display: block;
	width: 85%;
	padding: 0;
	margin: 0 auto;
	
}
	
	
	

#features article {
        display: flex;
        flex-direction: column;  /* alles untereinander */
        margin: 50px 0;
        text-align: center;
		
		background: rgba(80, 80, 80, 0.1); /* grauer Hintergrund */ 
		border-radius: 25px; /* abgerundete Ecken */ 
		padding: 25px; /* Innenabstand */
}


    #features .col-img-left,
    #features .col-img-right {
        order: 1;
        width: 100%;
        flex: none;
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Content IMMER darunter */
    #features .col-content-left,
    #features .col-content-right {
        order: 2;
        width: 100%;
        flex: none;
        display: block;
        margin: 0;
        padding: 0;
    }

    #features img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        border-radius: 20px;
    }

    #features .col-content-left h2,
    #features .col-content-right h2 {
        margin: 0 0 10px 0;
        text-align: center;
    }

    #features .col-content-left p,
    #features .col-content-right p {
        margin: 0 auto;
        text-align: justify;
        max-width: 700px;
    }
	
	#features .col-content-left p strong,
    #features .col-content-right p strong {
        display: block;
        text-align: center;
    }


	
	
	
	
}



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

body {
	font-size: 100%;
}

.wrapper {
	width: 76%;
	height: auto;
	margin: 0 12% 0 12%;
}

.padding-tb {
	height: auto;
	padding: 15% 0 15% 0;
	margin: 0;
}

.logo {
	float: none;
	width: 100%;
	height: 90px;
}

.logo a {
	text-align: center;
}

.logo img {
	max-width: 338px;
	height: auto;
	text-align: center;
	margin: 0 auto 0 auto;

}

.box {
	height: 200px;
}

.navbox {
	/*position: relative;
	width: auto;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0 0 0 338px;*/
	width: 100%;
	height: 120px;
	float: none;
	margin: 10px 0 0 0;
	padding: 0;

}

nav {
	position: relative;
	width: 100%;
	/*width: 100%;*/
	z-index: 9999;
	top: 0;
	left: 0;
	height: 120px;
	margin: 0;
	padding: 0;

}




#contactform {
	right: -55%;
}

#contactform:hover,
#contactform:focus {
	right: -25%;

}



.downloads .col1-2 {
	width: 35%;
}

.downloads .col2 {
	width: 65%;
}

#follow article {
	width: 100%;
	margin: 25px 0;

}
	
#follow li {
    width: 50px;
}
	

#footer .col1-4, 
#footer .col2-4, 
#footer .col3-4, 
#footer .col4-4 {
    display: block;
    width: 100%;
    height: auto;
	padding: 0 0 25px 0;
	margin: 0;

}



#news .col1-2, 
#news .col2-2 {
    padding: 5% 3%;
}
	

#slogan h1,
#slogan-1 h1,
#slogan-2 h1,
#slogan-3 h1,
#slogan-4 h1 {
    font-size: 2.000em;
}

#slogan h2,
#slogan-1 h2,
#slogan-2 h2,
#slogan-3 h2,
#slogan-4 h2 {
    font-size: 1.250em;
}
	
	

	



#follow2 li {
	width: 50px;
}


}


@media only screen and (max-width: 592px) {
	
h1 {
	font-size: 2.000em;
}

.hero .content h2 {
	font-size: 130%;
}
	
	
p,
a,
li {
	font-size: 0.900em;
	line-height: 1.400em;
}
	
.agb ul li {
	font-size: 0.900em;
	line-height: 1.400em;
}
	
	
	
#callus .col1-2 {
	width: calc(70% - 10px);
}


#callus .col2-2 {
	width: calc(30% - 10px);
}	

/*#portrait .col1-6, 
#portrait .col2-6, 
#portrait .col3-6, 
#portrait .col4-6, 
#portrait .col5-6, 
#portrait .col6-6 {
    width: calc(50% - 2.4%);
	padding: 0;
	margin: 1.2%;
}*/


	
#footer h5,
#footer li,
#footer p,
#footer a {
	padding: 0 3% 0 0;
}

#footer   .col3 ul li {
	float: none;
	padding: 0 3% 0 3%;

}

#top .col1-2 p {
	display: none;
}

.col_contact-area {
	width: 85%;	
}
	
#contactform {
	right: -60%;
}

#contactform:hover,
#contactform:focus {
	right: -0%;

}
	
	
#news .col1-2, 
#news .col2-2 {
	width: 100%;
    padding: 5% 3%;
}

	
.padding-tb {
	height: auto;
	padding: 17% 0 17% 0;
	margin: 0;
}

#slogan-3 .box {
	padding: 25px;
}
	
#slogan h1,
#slogan-1 h1,
#slogan-2 h1,
#slogan-3 h1,
#slogan-4 h1 {
    font-size: 1.500em;
}

#slogan h2,
#slogan-1 h2,
#slogan-2 h2,
#slogan-3 h2,
#slogan-4 h2 {
    font-size: 1.000em;
}

#follow h1 {
	font-size: 1.500em;
}

#follow h2 {
	font-size: 1.000em;
}
	
#portrait .col1-6,
#portrait .col2-6,
#portrait .col3-6,
#portrait .col4-6,
#portrait .col5-6,
#portrait .col6-6 {
    flex: 0 0 calc(100% - 25px); /* 4 Spalten + Platz für gap */

}

#portrait li a {
	font-size: 2.5em;
	line-height: 2.5em;
}	
	
.whiteboxed {
	padding: 25px;
}
	
.whiteboxed p {
	height: 90px;	
}
	
.whiteboxed h2 {
    font-size: 1.200em;		
}
	
#bottom p {
	display: block;
	float: left;
	width: 100%;
	margin: auto;
}
	
#bottom ul {
	display: block;
	float: left;
	width: 100%;
	margin: auto;
}

.col1-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 30px 15px;
    margin: 0;
}
	
.col2-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 30px 15px;
    margin: 0;
}
	
.col1-4, 
.col2-4, 
.col3-4, 
.col4-4 {
    width: calc(100% - 20px);
	padding: 15px;

}

#top {
	display: block;
	width: 80%;
	margin: 2.5% 10%;
	padding: 0;


}
	
#top-mobil {
	width: 80%;
	margin: 2.5% 10%;
	padding: 0;

}
	
#top-mobil .col1-2 {
	width: calc(30% - 20px);
}

#top-mobil .col2-2 {
	width: calc(70% - 20px);
}

.mobil-logo img {
	display: block;
	max-height: 18px;
	margin: 16px auto;
	padding: 0 50px;

}
	
	
	
.col_contact-area .math {
	display: block;
	float: left;
	height: 40px;
	width: calc(100% - 45px);
	margin: 0 0 20px 0;
	padding: 0;
	background: #fafafa;
	border: rgba(34,34,34,0.1) 1px solid;
}

.col_contact-area .mathresult {
	display: block;
	float: left;
	height: 40px;
	width: calc(100% - 0px);
	margin: 0 0 30px 0;
	padding: 0;
	
}

.hinweis {
  	background-color: none;
	font-size: 0.85em;

}
	
	
	
	
	
}

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


body {
	font-size:100%;
}

.wrapper {
	width: 80%;
	height: auto;
	margin: 0 10% 0 10%;
}
	
h1 {
	font-size: 1.800em;
}
	


.hero .content h2 {
	font-size: 120%;
}
	

	
	
	
.col1-4, 
.col2-4, 
.col3-4, 
.col4-4 {
    width: calc(100% - 30px);

}
	
.col1-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 30px 15px;
    margin: 0;
}
	
.col2-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 30px 15px;
    margin: 0;
}

.col1-3,
.col2-3,
.col3-3 {
	float: none;
	width: calc(100% -30px);
}	
	
.padding-tb {
	height: auto;
	padding: 20% 0 20% 0;
	margin: 0;
}

#follow li {
    width: 40px;
}



	
	
#follow .box {
	padding: 15px;

}
	
	
#follow h1 {
	font-size: 1.600em;

	
}

#follow h2 {
	font-size: 1.000em;
}
	
#follow li {
	list-style-type: none;
	display: inline-block;
	width: 50px;
	margin: 0;
	padding: 0;
	text-align: center;
}

#follow li a {
	font-size: 1.500em;
	font-style: normal;
	line-height: 2.0em;
}
	

	

#bottom p {
	font-size: 0.750em;
	letter-spacing: 0.05em;
	line-height: 100px;
}
	
#bottom ul {
	display: block;
	width: 100%;
	margin: auto;
	text-align: center;
}
	
#bottom ul li {
	display: block;
	with: 50%;
	margin: 0;
	padding: 0;
	
}
	
#bottom a {
	display: block;
	font-size: 0.750em;
	letter-spacing: 0.05em;
	line-height: 50px;
}
	
	
#callus .col1-2 li:first-child {
	display: none;
	visibility: hidden;
}
	
.whiteboxed h2 {
    font-size: 1.500em;		
}
	
	
.col_contact-area {
	width: 100%;	
}
	
.col_contact-area .send {
	width: 100%;

}	
	

	
.col_contact-area .message {
	height: 300px;

}
	



#follow2 li {
	width: 40px;
}	

#follow2 a img {
	width: 150px;
	padding: 25px 0;
}
	
	
.col_contact-area .upload {
	width: 100%;

}
	
.custom-file-button {
    width: 100%;  
}
	
.col_contact-area .submit-button {
	width: 100%;
}
	
}





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


.navbox {
	display: block;
	width: 100%;
	height: auto;
	float: none;
	margin: 10px 0 0 0;
	padding: 0;

}
.wrapper {
	width: 86%;
	height: auto;
	margin: 0 12% 0 12%;
}
	

	
.whiteboxed h2 {
    font-size: 1.200em;		
}
	

	
h1 {
	font-size: 1.600em;
}

.hero .content h2 {
	font-size: 100%;
}

h2 {
	font-size: 1.000em;
}
	
h3 {
	font-size: 1.000em;
}
	

#top .col1-2 {
	display: none;
	visibility: hidden;
}

#top .col2 {
	float: left;
	width: 100%;
}
	
#top .col3 {
	display: none;
	visibility: hidden;
		
}
	
.mobil-logo img {
	height: 16px;
	max-height: 16px;
	margin: 17px auto;
	padding: 0 25px;

}

.padding-tb {
	height: auto;
	padding: 25% 0 25% 0;
	margin: 0;
}
	

#slogan h1,
#slogan-1 h1,
#slogan-2 h1,
#slogan-3 h1,
#slogan-4 h1 {
    font-size: 1.200em;
}

#slogan h2,
#slogan-1 h2,
#slogan-2 h2,
#slogan-3 h2,
#slogan-4 h2 {
    font-size: 1.000em;
}	

	
#follow h1 {
	font-size: 1.200em;
}

#follow h2 {
	font-size: 1.000em;
}
	
#follow ol li h4 {
    font-size: 1.10em;

}
	
#callus .col2-2 {
	width: calc(30% - 5px);
}	

#follow2 li {
	width: 35px;
}	

#follow2 a img {
	width: 100px;
	padding: 32px 0;
}	
	
.col1-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 50px 15px;
    margin: 0;
}
	
.col2-2 {
    width: calc(100% - 30px);
    height: auto;
    padding: 50px 15px;
    margin: 0;
}
	
#footer   a,
#footer   p,
#footer   li {
	font-size: 0.90em;
	line-height: 2.200em;

}

}




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



.logo img {
	max-width: 180px;
	height: auto;
	text-align: center;
	margin: 0 auto 0 auto;

}

.navbox {
	display: block;
	width: 100%;
	height: auto;
	float: none;
	margin: 0;
	padding: 0;

}

}