/* Container-Styling */
#four .features {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Abstand zwischen den Artikeln */
    flex-wrap: wrap; /* Damit es auf kleineren Bildschirmen umbricht */
    margin-top: 2rem;
}

/* Artikel-Styling */
#four .features article {
    background-color: #f5f5f5; /* Heller Hintergrund */
    border-radius: 12px; /* Abgerundete Ecken */
    padding: 2rem;
    max-width: 600px; /* Breite begrenzen */
    flex: 1 1 300px; /* Flexible Breite mit Mindestgröße */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sanfter Schatten */
    text-align: center; /* Inhalt zentrieren */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Effekt für Desktop */
#four .features article:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Überschrift innerhalb der Artikel */
#four .features article h3 {
    margin-bottom: 1rem;
    color: #333;
}

/* Listen innerhalb der Artikel */
#four .features article ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}

/* Listenpunkte */
#four .features article ul li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.5rem;
}

/* Kleine Bullet-Punkte */
#four .features article ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #04515E;
    font-weight: bold;
}

/* Buttons innerhalb der Artikel */
#four .features article a.special {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    background-color: #04515E;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

#four .features article a.special:hover {
    background-color: #04515ebd;
}

.wrapper2 {
	background-color: #04515e;
	padding: 30px !important;
	 box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); /* Sanfter Schatten */
	 height:1030px;
	 color:#ffffffd6 !important;
	 
}

#leistung {
    background-attachment: scroll, scroll, scroll, fixed;
    background-color: #645862;
    background-image: url(images/light-tl.svg), url(images/light-tr.svg), url(images/overlay.png), url(../../images/11.png);
    background-position: top left, top right, top left, bottom center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: 25em, 25em, auto, cover;
	cursor: default;
    padding: 5em;
    text-align: center;
}


#uebreuns {
    background-attachment: scroll, scroll, scroll, fixed;
    /*background-color: #645862;*/
	background-color: #ffffff;
	/* background-image: url(images/light-tl.svg), url(images/light-tr.svg), url(images/overlay.png), url(../../images/12.png); */
    background-position: top left, top right, top left, bottom center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: 25em, 25em, auto, cover;
	cursor: default;
    padding: 5em;
    text-align: center;
}

@media screen and (max-width: 640px) {
#uebreuns {

    padding: 1em;
	font-size:12px;


}}



@media screen and (max-width: 640px) {
.wrapper2 {
  
    height: 1660px;
    width: 400px;
    margin-left: -87px;
}}

h2 {
	text-align:center;
	
}

.leistungtxt {
	text-align: center;
	font-size: 1.5em;
    letter-spacing: 0.1em;
	font-weight: 100;
	
}

#header.alt {
  
    color: #000000a1 !important;
    position: fixed !important;
    /*background-color: #c6c6c6d6 !important;*/
	background: #04515ee0 !important;
}

header.special {

  padding-top: 0em !important;

}


#navPanel {
  display: none;
  /* plus restliche Styles */
}
body.navPanel-visible #navPanel {
  display: block;
}

@media screen and (max-width: 640px) {
    #navPanel {

        background: #04515e !important;
        /*color: #ffffffd6 !important;*/
    }
}

@media screen and (max-width: 640px){
    #navButton .toggle:before {
        color: #fff;
        content: '\f0c9';
        font-size: 1em;
        height: 40px;
        left: 10px;
        line-height: 40px;
        opacity: 0.5;
        position: absolute;
        top: 11px;
        width: 60px;
        z-index: 1;
		border: solid 1px;
        border-radius: 2px;
    }
}

@media screen and (max-width: 640px) {
    #navButton .toggle:after {
        background: #04515ebf !important;
        border-radius: 2px;
        content: '';
        height: 40px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 60px;
		border: solid 1px;

    }
}

@media screen and (max-width: 640px) {
.textfarbe {
	color:#000000d6 !important;
	
}}

.textfarbe {
	color:#000000d6 !important;

}

.icon.circle {
    width: 150px !important;
}

@media screen and (max-width: 640px) {
.icon.circle {
    width: 150px !important;
}}


.wrapper.style3 {
    background: #04515E !important;
    color: #fff;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
}

#cta {
    background-image: url(images/light-tl.svg), url(images/light-tr.svg), url(images/overlay.png), url(../../images/00.png) !important;


}

.footertext {
	color: #04515E;
	
}


.wrslogo {
    color: inherit;
    text-decoration: none;
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #04515E;
	font-size: 36px;
}

@media screen and (max-width: 640px) {
#banner {
	background-image: url(images/light-tl.svg), url(images/light-tr.svg), url(../../images/klein/header_klein.png) !important;
	
}}






#banner .inner header {
    display: block !important;
 }
 
/*HINTERGRUND LOGO */

#banner .inner {
    /*background: rgb(0 0 0 / 50%) !important;*/
	background: #04515ec4 !important;
 
}
@media screen and (max-width: 640px) {
#banner .inner {

    height: 290px;
	margin-top: -20px !important;
	padding: 19px 1.5em !important;
}}

@media screen and (max-width: 640px) {
.button.fit {
        width: auto;
        margin-left: 20px;
		
    }
}

 
 
.imp {
	
	color:#ffffff !important;
	
}

.cont {
	
	width: 90%;
    margin: 0 auto;
}


@media screen and (max-width: 640px) {
	.cont {
	
width: 100%;
    
}}


.lightbox.hidden { display: none; }
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox-content {
  background: #fff; padding: 1.5rem; max-width: 900px; max-height: 80vh; overflow: auto;
  border-radius: 8px;
}
.lightbox-close { cursor: pointer; font-size: 2rem; line-height: 1; }



input[type="text"], input[type="password"], input[type="email"], input[type="textarea"] {
    line-height: 1em;
   /* width: 250px !important;
    margin-left: -50px !important;
	*/
}

@media screen and (max-width: 736px) {
    input[type="button"], input[type="submit"], input[type="reset"], button, .button {
        max-width: 20em;
        width: 100%;
       
    }
}


.seo {
	
	font-size:12px !important;
	margin-top: 10px;
}

@media screen and (max-width: 640px) {
.seo {
	
	font-size:12px !important;
	margin-top: 10px;
}}

.inner {
	
	    margin: 50px auto !important;
}


.logohead {
	color:#ffffff;
	font-weight:500;
	
}

.ueber-uns {
	color: #726c6c;
    font-weight: 500;
	background-color: #ffffffc9;
	
}



.kontakt {
	width:250px !important;
	border-radius: 10px;
	
}

#kont {
	background: #E8EEF4;
    color: #7c8081;
    padding: 0em 5em 10em 5em !important;
    text-align: center;
    width: 50%;
    margin: 0 auto;
	height: 690px !important;
}



@media screen and (max-width: 640px) {
#kont {
	background: #E8EEF4;
    color: #7c8081;
    padding: 5em 5em 10em 5em !important;
    text-align: center;
    width: 100%;
	height: 580px;

}}

::-webkit-input-placeholder {
    /* color: inherit; */
    /* opacity: 0.5; */
    position: relative;
    top: 3px;
    text-align: center;
    color: #000 !important;
	opacity: 1 !important;

	
}

.border {
	    border-width: 1px;
    border-style: solid;
    border-color: initial;
}

.versendet {
	font-size:20px;
	font-weight:700;
	color:green;
	/*border: 2px solid white; /* 2px Breite, durchgezogene Linie, schwarze Farbe */
    /*display: inline-block; /* Wichtig, damit der Rahmen den Text umschließt */
    
	
}

.nichtversendet {
	font-size:20px;
	font-weight:700;
	color:red;
	/*border: 2px solid white; /* 2px Breite, durchgezogene Linie, schwarze Farbe */
    /*display: inline-block; /* Wichtig, damit der Rahmen den Text umschließt */
}

#header nav {
  
    color: white;
}


input[type="text"], input[type="password"], input[type="email"], textarea {
    -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: none;
    border: solid 1px rgb(124 128 129) !important;
    border-radius: 0;
    color: inherit;
    display: block;
    padding: 0.75em;
    text-decoration: none;
    width: 100%;
    outline: 0;
}
@media screen and (max-width: 640px) {
input[type="text"], input[type="password"], input[type="email"], textarea {

    width: 330px;
    margin-left: -80px;
}}

@media screen and (max-width: 640px) {
input[type="submit"]{

    margin-left: -40px;
}}



header.special:before, header.special:after {
	display:none;
}

.urheb {
	font-size:12px;
	margin: 0 auto;
    width: 70%;
    padding: 100px;
	
}

.urhebh3 {
	
	font-size:14px;
}

@media screen and (max-width: 640px) {
.urheb {
	font-size:12px;
	margin: 0 auto;
    width: 100%;
    padding: 0px;
    margin-top: 150px;
	
}}

@media screen and (max-width: 640px) {
.urhebh3 {
	
	font-size:14px;
}}


@media screen and (max-width: 640px) {
.line {
	border-bottom: solid 2px;
    border-top: solid 2px;
}
}