@charset "utf-8";
<style>
@font-face {
  font-display: swap;
  font-family: 'Catamaran';
  src: url('"../fonts/Catamaran-VariableFont_wght.ttf"') 
  format('truetype');
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* type-Selektoren ----------------*/
img {
	max-width: 100%;
	height: auto;
	display: block;
}
        /* mobile ----------------------------------------------------*/
		@media (min-width:320px) and (max-width:500px) {
            
        html {
            font: 1rem Catamara,sans-serif;
            font-variation-settings:'wght' 500;			
        }
        h1,h2,h3 {
            font-variation-settings:'wght' 750;
            margin: 3% 0;		
			}
        h1 {
            line-height: 2rem;
            color: rgb(36, 46, 124);
        }
        h2 {
            font: 1.75rem Catamara,'wght' 600;
        }
        p {
            line-height: 1.5rem;
        }
        figcaption {
            color: rgb(36, 46, 124);
            font: 0.75rem Catamara,sans-serif;
            padding-top: 2%;
            padding-bottom: 2%;
        }
            /* von oben nach unten ---------------*/
            #topheader {
                position: fixed;
                top: 0;
                right: 0;
                z-index: 100;
                background: #fff;
                height: 100px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 2%;
            }

            #topheader .logo {
                max-width: 12rem;
                height: auto;
                display: block;
            }
			/* navi ----------------------*/
			#navchecker { display: none; }
			#topnav {
				position: fixed;
				left: 60%;
				transform: translate(-50%, -100%);
				top: 0;
				z-index: 100;
				width: 250px;
                background: rgb(36, 46, 124);
				transition: 0.5s;
			}
			#navchecker:checked ~ #topnav{
				transform: translate(-50%, 0%);
			} 
			#topnav ul {
				list-style: none;
			}
			#topnav a {
				text-decoration: none;
				color: rgb(144, 212, 246);
				line-height: 48px;
				border-bottom: 1px solid;
				display: block;
				padding-left: 1rem;
				font-variation-settings:'wght' 500;			
			}
			#topnav a:hover {
				background: rgb(65, 91, 138);
			}
			/* ani-button --------------------*/
			#topnav label {
				position: absolute;
				bottom: -48px;
				left: 50%;
				transform: translateX(-50%);
				background: rgb(36, 46, 124);
				height: 48px;
				width: 48px;
				cursor: pointer;
			}
			.line {
				position: absolute;
				left: 20%;
				height: 2px;
				width: 60%;
				background: rgb(144, 212, 246);
/*				transition-property: transform, opacity,top;	
				transition-duration: 0.5s,0.5s, 0.5s;
				transition-delay: 0s, 0.5s, 0s;*/
                transition: 0.5s 0.5s;

			}
			.line:nth-of-type(1) { top: calc(35% - 1px); }
			.line:nth-of-type(2) { top: calc(50% - 1px); }
			.line:nth-of-type(3) { top: calc(65% - 1px); }
			
			#navchecker:checked ~ #topnav .line {
				transition: 0.5s 0.5s;
			}
			
			#navchecker:checked ~ #topnav .line:nth-of-type(1) {
				transform: rotate(45deg);
				top: calc(50% - 1px);
			}
			#navchecker:checked ~ #topnav .line:nth-of-type(2) {
				transform: rotate(-135deg);
				opacity: 0;
			}
			#navchecker:checked ~ #topnav .line:nth-of-type(3) {
				transform: rotate(-45deg);
				top: calc(50% - 1px);
			}
			/* inhalt von oben ------------------------*/
            h1::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(144, 212, 246);
				margin: 10px 0;
			}
            h3::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(36, 46, 124);
				margin: 10px 0;
			}
			#eins {
                min-height: 500px;
				padding-top: 75%;
				background: url("../img/Titel_Bild_iPhone_320.jpg") center fixed;
				background-size: cover;
			}
            #eins figcaption {
                display: flex; 
                justify-content: center;
                padding: 5% 2%;
            }

            #nav a:hover {
                background: rgb(65, 91, 138);
            }
            /* back to top ---------------------------------*/
			#back-top {
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				z-index: 100;
				display: none;
			}
			#back-top a {
				line-height: 48px;
				width: 48px;
				background: rgba(144,212,246,0.5);
				display: block;
				text-align: center;
				text-decoration: none;
				color: #fff;
				border-radius: 50%;
			}
            #form input, form textarea {
                width: 100%;
                padding:10px;
                margin: 5px;
                font: 0.8rem Catamara400, sans-serif;
            }
            #slider1 img {
                max-width: 100%;
                height: auto;
                display: block;
            } 
            .object-fit { 
                width: 100%; 
                height: 100%; 
                margin: 4em auto; 
            }
            .object-fit img { 
                object-fit: cover; 
                width: 100%; 
                height: 100%;
            }
            #footer {
                position: absolute;
                bottom: 0px;
            }
            footer {
                background: rgb(36, 46, 124);
                color: white;
                height: 80px;
            }
            footer a {
                color: rgb(144, 212, 246);
                text-decoration: none;
            }
            footer .impressum a {
                font: 0.75rem / 20px Catamara, sans-serif;
                color: rgb(144, 212, 246);
                text-decoration: none;
                margin-left: 100px;
            }

            /* über mich ----------------*/
            #fomular .cont {
                padding-top: 150px;
            }
                        #formular {
                margin-top: 3.5rem;
                padding: 2%;
            }
            #ich {
                background: white;
                margin-top: 3rem;
                padding-top: 1.5rem;
            }

            #ich h4{
               color: rgb(36, 46, 124);
               line-height: 40px;
            }
            #ich p{
               color: rgb(36, 46, 124);
               padding-top: 5px;
               font: 1rem Catamara,'wght' 600;
            }
            .Design Video {
                margin-top: 70px;
                width: 75%;
            }
			/* elastic_video - Seitenverhältnis responsiv erhalten */
			.elasic_video {
				height: 0;
				padding-top: calc(55% + 15px);
				background: red;
				position: relative;
			}
			.elasic_video iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			/* acc --------------------------------------------*/
			/* steuerung ----*/
			.acc_cont {
				display: none;
			}
			.acc input:checked + .acc_segment .acc_cont{
				display: block;
			}
			/* plus-minus----*/
			.zu {
				display: none;
			}
			.acc input:checked + .acc_segment .auf {
				display: none;
			}
			.acc input:checked + .acc_segment .zu {
				display: block;
			}

			/* design -------*/
			.acc input {
				display: none;
			}
			.acc h2 {
				display: flex;
				justify-content: space-between;
				border-bottom: 2px rgb(144, 212, 246) solid;
				line-height: 48px;
			}
			.acc .auf, .acc .zu {
				background: rgb(144, 212, 246);
				line-height: 48px;
				width: 48px;
				text-align: center;
				font-size: 2rem;
			}
            .acc {
                padding-bottom: 20px;
            }
            .acc_cont p {
                display: flex;
                padding: 2px;
                        }
            .aufzaehlung {
                margin-left: 45pt;
            }
        }
        /* Tablet ----------------------------------------------------*/
		@media (min-width:501px) and (max-width:900px) {
        html {
            font: 1rem Catamara,sans-serif;
            font-variation-settings:'wght' 500;			
        }
        h1,h2,h3 {
            font-variation-settings:'wght' 750;
            margin: 3% 0;		
			}
        h1 {
            padding: 3% 0 4%;
            color: rgb(36, 46, 124);
        }
        h2 {
            font: 1.25rem Catamara,'wght' 600;
        }
                p {
            line-height: 1.5rem;
        }
        figcaption {
            color: rgb(36, 46, 124);
            font: 0.75rem Catamara,sans-serif;
            padding-top: 2%;
            padding-bottom: 2%;
        }
            /* von oben nach unten ---------------*/
            #topheader {
                position: fixed;
                top: 0;
                right: 0;
                z-index: 100;
                background: #fff;
                height: auto;
                width: 100%;
                display: block;
                justify-content: space-between;
                padding: 2%;
            }

            #topheader .logo {
                max-width: 12rem;
                height: auto;
                display: block;
                padding: 2%;
            }
            /* navi-------------------------------*/
            #navchecker { 
                display: none; 
            }
            #topnav > ul {
                list-style: none;
                display: flex;
            }
            #topnav p {
                display: none;
            }
            #topnav li {
                position: relative;
            }
            #topnav a {
                color: rgb(144, 212, 246);
                text-decoration: none;
                background: rgb(36, 46, 124);
                line-height: 30px;
                text-align: center;
                display: block;
                padding: 0 0.5rem;
                margin-left: 2px;
                transition: 0.5s;
            }
            #topnav a:hover {
                background: rgb(65, 91, 138);
            }
            nav ul {
				flex-wrap: wrap;
			}
			nav li {
				flex-basis: 50%;
			}
			nav a {
				margin-bottom: 1px;
				line-height: 48px;
			}


			/* inhalt von oben ------------------------*/
            h1::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(144, 212, 246);
				margin: 10px 0;
			}
            h3::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(36, 46, 124);
				margin: 10px 0;
			}
			#eins {
                min-height: 500px;
				padding-top: 75%;
				background: url("../img/Titel_Bild_500.jpg") center fixed;
				background-size: cover;
			}
            #eins figcaption {
                display: flex; 
                justify-content: center;
                padding: 5% 2%;
            }

            #nav a:hover {
                background: rgb(65, 91, 138);
            }
            /* back to top ---------------------------------*/
			#back-top {
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				z-index: 100;
				display: none;
			}
			#back-top a {
				line-height: 48px;
				width: 48px;
				background: rgba(144,212,246,0.5);
				display: block;
				text-align: center;
				text-decoration: none;
				color: #fff;
				border-radius: 50%;
			}
            #form input, form textarea {
                width: 100%;
                padding:10px;
                margin: 5px;
                font: 0.8rem Catamara400, sans-serif;
            }
            #slider1 img {
                max-width: 100%;
                height: auto;
                display: block;
            } 
            .object-fit { 
                width: 100%; 
                height: 100%; 
                margin: 4em auto; 
            }
            .object-fit img { 
                object-fit: cover; 
                width: 100%; 
                height: 100%;
            }
            #footer {
                position: absolute;
                bottom: 0px;
            }
            footer {
                background: rgb(36, 46, 124);
                color: white;
                height: 80px;
            }
            footer a {
                color: rgb(144, 212, 246);
                text-decoration: none;
            }
            footer .impressum a {
                font: 0.75rem / 20px Catamara, sans-serif;
                color: rgb(144, 212, 246);
                text-decoration: none;
                margin-left: 100px;
            }

            /* über mich ----------------*/
            #fomular .cont {
                padding-top: 150px;
            }
            #formular {
                margin-top: 3.5rem;
                padding: 2%;
            }
            #ich {
                background: white;
                margin-top: 3.5rem;
                padding-top: 1.5rem;
            }

            #ich h4{
               color: rgb(36, 46, 124);
               line-height: 40px;
            }
            #ich p{
               color: rgb(36, 46, 124);
               padding-top: 5px;
               font: 1rem Catamara,'wght' 600;
            }
            .Design Video {
                margin-top: 85px;
                width: 75%;
            }
			/* elastic_video - Seitenverhältnis responsiv erhalten */
			.elasic_video {
				height: 0;
				padding-top: calc(55% + 15px);
				background: red;
				position: relative;
			}
			.elasic_video iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			/* acc --------------------------------------------*/
			/* steuerung ----*/
			.acc_cont {
				display: none;
			}
			.acc input:checked + .acc_segment .acc_cont{
				display: block;
			}
			/* plus-minus----*/
			.zu {
				display: none;
			}
			.acc input:checked + .acc_segment .auf {
				display: none;
			}
			.acc input:checked + .acc_segment .zu {
				display: block;
			}
            /* Anpassung Lightbox2 ---------------------------------*/
            .Design img {
                filter: grayscale(1);
                margin-right: 5px;
            }
            .Design img:hover {
                filter: grayscale(0);
            }

			/* design -------*/
			.acc input {
				display: none;
			}
			.acc h2 {
				display: flex;
				justify-content: space-between;
				border-bottom: 2px rgb(144, 212, 246) solid;
				line-height: 48px;
			}
			.acc .auf, .acc .zu {
				background: rgb(144, 212, 246);
				line-height: 48px;
				width: 48px;
				text-align: center;
				font-size: 2rem;
			}
            .acc {
                padding-bottom: 20px;
            }
            .acc_cont p {
                display: flex;
                padding: 2px;
                        }
            .aufzaehlung {
                margin-left: 45pt;
            }
        }
        /* desktop ----------------------------------------------------*/
		@media (min-width:901px) {
        html {
            font: 1.1rem Catamara,sans-serif;
            font-variation-settings:'wght' 500;			
        }
        h1,h2,h3 {
            font-variation-settings:'wght' 750;
            margin: 3% 0;		
			}
        h1 {
            line-height: 2rem;
            color: rgb(36, 46, 124);
        }
        h2 {
            font: 1.75rem Catamara,'wght' 600;
        }
                p {
            line-height: 1.5rem;
        }
        figcaption {
            color: rgb(36, 46, 124);
            font: 0.75rem Catamara,sans-serif;
            padding-top: 2%;
            padding-bottom: 2%;
        }
            /* von oben nach unten ---------------*/
            #topheader {
                position: fixed;
                top: 0;
                right: 0;
                z-index: 100;
                background: #fff;
                height: 100px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 2%;
            }

            #topheader .logo {
                max-width: 12rem;
                height: auto;
                display: block;
            }
            /* navi-------------------------------*/
            #navchecker { 
                display: none; 
            }
            #topnav > ul {
                list-style: none;
                display: flex;
            }
            #topnav p {
                display: none;
            }
            #topnav li {
                position: relative;
            }
            #topnav a {
                color: rgb(144, 212, 246);
                text-decoration: none;
                background: rgb(36, 46, 124);
                line-height: 30px;
                text-align: center;
                display: block;
                padding: 0 0.5rem;
                margin-left: 2px;
                transition: 0.5s;
            }

            #topnav a:hover {
                background: rgb(65, 91, 138);
            }

			/* inhalt von oben ------------------------*/
            h1::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(144, 212, 246);
				margin: 10px 0;
			}
            h3::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(36, 46, 124);
				margin: 10px 0;
			}
            .wrapper1200 h3 {
                color: rgb(36, 46, 124);
                font: 1.5rem Catamara,sans-serif;
            }
            .wrapper1200 h3::after {
				content: "";
				display: block;
				height: 5px;
				width: 180px;
				background: rgb(144, 212, 246);
				margin: 10px 0;
			}
			#eins {
                min-height: 500px;
				padding-top: 75%;
				background: url("../img/Titel_Bild.jpg") center fixed;
				background-size: cover;
			}
            #eins figcaption {
                display: flex; 
                justify-content: center;
                padding: 5% 2%;
            }

            #nav a:hover {
                background: rgb(65, 91, 138);
            }
            /* back to top ---------------------------------*/
			#back-top {
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				z-index: 100;
				display: none;
			}
			#back-top a {
				line-height: 48px;
				width: 48px;
				background: rgba(144,212,246,0.5);
				display: block;
				text-align: center;
				text-decoration: none;
				color: #fff;
				border-radius: 50%;
			}
            #form input, form textarea {
                width: 100%;
                padding:10px;
                margin: 5px;
                font: 0.8rem Catamara400, sans-serif;
            }
            #slider1 img {
                max-width: 100%;
                height: auto;
                display: block;
            } 
            .object-fit { 
                width: 100%; 
                height: 100%; 
                margin: 4em auto; 
            }
            .object-fit img { 
                object-fit: cover; 
                width: 100%; 
                height: 100%;
            }
            #footer {
                position: absolute;
                bottom: 0px;
            }
            footer {
                background: rgb(36, 46, 124);
                color: white;
                height: 80px;
            }
            footer a {
                color: rgb(144, 212, 246);
                text-decoration: none;
            }
            footer .impressum a {
                font: 0.75rem / 20px Catamara, sans-serif;
                color: rgb(144, 212, 246);
                text-decoration: none;
                margin-left: 100px;
            }

            /* über mich ----------------*/
            #fomular .cont {
                padding-top: 150px;
            }
            #ich {
                background: white;
                margin-top: 1.5rem;
                padding-top: 1.5rem;
            }

            #ich h4{
               color: rgb(36, 46, 124);
               line-height: 40px;
            }
            #ich p{
               color: rgb(36, 46, 124);
               padding-top: 5px;
               font: 1rem Catamara,'wght' 600;
            }
            .Design Video {
                margin-top: 70px;
                width: 75%;
            }
            .Design source {
                height: 100%;
            }
            
            /* Hover Foto mit Rahmen ----------------------*/
            .rahmen {
                width: 583px;
                height: 690px;
                border: 5px solid rgb(36, 46, 124);
                position: relative;
                overflow: hidden;
                float: left;
                margin: 5px;
            }
            .rahmen img {
                width: 100%;
            }

            /* innerer Rahmen ----------------------*/
            /* (rechts-links) ---------------------*/
            .rahmen:before {
                content:"";                    /*leerer Inhalt*/
                display: block;                /*als Block*/
                border-right: 2px solid rgb(36, 46, 124);/*bekommt border rechts*/
                border-left: 2px solid rgb(36, 46, 124);/*und links*/
                position: absolute;            /*wird absolut im Rahmen positioniert*/
                top: 10px;
                right: 20px;
                bottom: 10px;
                left:20px;
                z-index: 1;                    /*wird in den Vordergrund gebracht*/
                transform: scaleY(0);          /*wird in y-Achse auf 0 geschrumpft*/
                opacity: 0;                    /*bekommt die Deckkraft 0*/
                transition: 0.5s;
              /*  background: rgba(0,0,0,0.3);*/
            }
            .rahmen:hover:before {
                transform: scaleY(1);          /*bekommt volle Höhe*/
                opacity: 1;                    /*wird sichtbar*/
            }
            /* (oben-unten) ---------------------*/
            .rahmen:after {
                content:"";
                display: block;
                border-top: 2px solid rgb(36, 46, 124);
                border-bottom: 2px solid rgb(36, 46, 124);
                position: absolute;
                top: 20px;
                right: 10px;
                bottom: 20px;
                left:10px;
                transform: scaleX(0);
                z-index: 1;
                opacity: 0;
                transition: 0.5s;
             /*   background: rgba(0,0,0,0.3);*/
            }
            .rahmen:hover:after {
                transform: scaleX(1);
                opacity: 1;
            }

            /* hoverbild ------------ */
            .rahmen .hoverimg {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                transform: scale(1.5) translateY(50px);
                transition: 0.5s;
            }
            .rahmen:hover .hoverimg {
                opacity: 1;
                transform: scale(1) translateY(0);    
            }

            /* h2 --------------------*/
            .rahmen h2 {
                position: absolute;
                top: 600px;
                left: 20px;
                right: 20px;
                background: rgba(255,255,255,.7);
                padding: 5px 30px;
                transition: 0.5s;
            }
            .rahmen:hover h2 {
                top:4px;
            }

            /* p --------------------*/
            .rahmen p {
                position: absolute;
                bottom: 20px;
                left:20px;
                right: 20px;
                background: rgba(255,255,255,.7);
                padding: 5px 30px;
                opacity: 0;
                transform: scale(0.95);
                transition: 1s;
            }
            .rahmen:hover p {
                opacity: 1;
                transform: scale(1);
            }
            .grid {
                position: relative;
                margin: 0 auto;
                max-width: 1000px;
                list-style: none;
                text-align: center;
            }
            /* Common style */
            .grid figure {
                position: relative;
                float: left;
                overflow: hidden;
                margin: 10px 1%;
                min-width: 320px;
                max-width: 583px;
                max-height: 700px;
                width: 48%;
                background: #3085a3;
                text-align: center;
                cursor: pointer;
            }

            .grid figure img {
                position: relative;
                display: block;
                max-width: 583px;
                max-height: 685px;
                opacity: 0.8;
            }

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

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

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

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

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

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

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

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

            /* Individual effects */
            /***** Apollo *****/
            /*---------------*/

            figure.effect-apollo figcaption::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
                background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
                content: '';
                opacity: 0;
                -webkit-transform: translate3d(0,50%,0);
                transform: translate3d(0,50%,0);
            }

            figure.effect-apollo h2 {
                position: absolute;
                top: 30%;
                left: 0;
                width: 100%;
                color: rgb(36, 46, 124);
                -webkit-transition: -webkit-transform 0.35s, color 0.35s;
                transition: transform 0.35s, color 0.35s;
                -webkit-transform: translate3d(0,-50%,0);
                transform: translate3d(0,-50%,0);
            }

            figure.effect-apollo figcaption::before,
            figure.effect-apollo p {
                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                transition: opacity 0.35s, transform 0.35s;
            }

            figure.effect-apollo p {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 2em;
                width: 100%;
                opacity: 0;
                -webkit-transform: translate3d(0,10px,0);
                transform: translate3d(0,10px,0);
            }

            figure.effect-apollo:hover h2 {
                color: #fff;
                -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
                transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
            }

            figure.effect-apollo:hover figcaption::before ,
            figure.effect-apollo:hover p {
                opacity: 1;
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
            }
            .grid figure {
                display: inline-block;
                float: none;
                margin: 10px auto;
                width: 100%;
            }

            /* freie Klassen -----------------------*/
            .clearfix:after {
                content: "";
                display: block;
                clear: both;
            }

			/* elastic_video - Seitenverhältnis responsiv erhalten */
			.elasic_video {
				height: 0;
				padding-top: calc(55% + 15px);
				background: red;
				position: relative;
			}
			.elasic_video iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			/* acc --------------------------------------------*/
			/* steuerung ----*/
			.acc_cont {
				display: none;
			}
			.acc input:checked + .acc_segment .acc_cont{
				display: block;
			}
			/* plus-minus----*/
			.zu {
				display: none;
			}
			.acc input:checked + .acc_segment .auf {
				display: none;
			}
			.acc input:checked + .acc_segment .zu {
				display: block;
			}
            /* Anpassung Lightbox2 ---------------------------------*/
            .Design img {
                filter: grayscale(1);
                margin-right: 5px;
            }
            .Design img:hover {
                filter: grayscale(0);
            }

			/* design -------*/
			.acc input {
				display: none;
			}
			.acc h2 {
				display: flex;
				justify-content: space-between;
				border-bottom: 2px rgb(144, 212, 246) solid;
				line-height: 48px;
			}
			.acc .auf, .acc .zu {
				background: rgb(144, 212, 246);
				line-height: 48px;
				width: 48px;
				text-align: center;
				font-size: 2rem;
			}
            .acc {
                padding-bottom: 20px;
            }
            .acc_cont p {
                display: flex;
                padding: 2px;
                        }
            .aufzaehlung {
                margin-left: 45pt;
            }
        }

            /* freie Klassen --------------------------*/
            .bg_pa_3 {
                background: rgb(144, 212, 246);
                padding: 3%;
            }
            .bg_pa_3 h3 {
                color: rgb(36, 46, 124);
            }
            .pa_3 {
                padding: 3%;
            }
            .formular {
				min-height: 50px;
				padding-top: 75%;
            }
            .ich {
				min-height: 100px;
				padding-top: 75%;
            }
            .spalter { 
                display: flex; 
                flex-wrap: wrap; 
                justify-content: center;
            }
            .spalter > * {
                flex-basis: 250px; 
            }
            .spalter2 { 
                display: flex; 
                flex-wrap: wrap; 
                justify-content: center;
            }
            .spalter2 > * {
                flex-basis: 500px; 
            }
            .slider {
                position: relative;
            }
            .gap2 { 
                gap: 2%; 
            }
			.mar20 {
				margin: 2% 0;
			}
			.cont {
				background: #fff;
				padding: 
			}
            .mitte {
                 background: rgb(144, 212, 246);
            }
            .wrapper_700 {
                max-width: 700px;
                margin-left: auto;
                margin-right: auto;
                color: rgb(36, 46, 124);
            }
			.wrapper900 {
				max-width: 900px;
				margin-left: auto;
				margin-right: auto;
			}
			.wrapper1200 {
				max-width: 1200px;
				margin-left: auto;
				margin-right: auto;
			}
			.pad5_2 {
				padding: 5% 2%;
                font: 1.5em serif;
			}
			.pad5 {
				padding: 5% 2%;
			}
            .pad5_2 p {
                line-height: 2rem;
            }

            /* abstand --------*/
            .pad2 	{padding: 2%;}
            .pad02 	{padding: 0 2%;}
            .pad002 {padding-bottom: 2%;}
            .pad3 	{padding: 3%;}
            .pad30 	{padding: 3% 0;}

            /* Cookies -----------------------------------*/
            #cookiedingsbums a {color:#000; text-decoration:none;}

            #cookiedingsbums a:hover {text-decoration:underline;}


            #cookiedingsbums { 
               outline: 1px solid #7b92a9; 
               text-align:center; 
               border-top:1px solid #fff;
               background: linear-gradient(#dddddddd ,#eeeeeedd); 
               position:fixed;
               top:10vh; 
               left: 50%;
               transform: translateX(-50%);
               z-index:10000; 
               width:50vw; 
               font-size:1rem; 
               line-height:2rem;
               padding:1rem; 
            }

            .cookiedingsbumsCloser {
               color: #333;
               font: 14px/100% arial, sans-serif;
               text-decoration: none;
               text-shadow: 0 1px 0 #fff;
               cursor:pointer;
               border:1px solid white; 
               border-color:white #7b92a9 white #7b92a9;
               padding:4px 10px;
               margin-left:10px;
               background: #ddd; /* Old browsers */
               background: linear-gradient(#eee,#ddd); 
             }

            .cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}
/* farben ---------*/
	.bg_hblau { background: rgb(144, 212, 246); }	
    .bg_dblau { background: rgb(36, 46, 124); }