/************ LBV 2024 - 16-09-24 ************/





html, body {
	width: 100%;
    margin: 0;
    padding: 0;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-size: 1.6vw;
	font-size: calc(1vw + 6px);
    line-height: 2.2vw;
	line-height: calc(1.5vw + 7px);
	font-weight: 300;
    letter-spacing: 0.02rem;
	margin: 0px;
	padding: 0px;
	behavior:url("../csshover.htc");
	-webkit-text-size-adjust: none;
	text-decoration:none;
	background-color: #007381;
}

body a {
	color: #006C75;
    font-weight: 400;
	text-decoration: underline;
}
  
body a:hover {
    color: #000;
    font-weight: 600;
	text-decoration: underline;
}





/************ HEAD ************/





#head {
    position: relative;
	float: left;
	width: 100vw;
	height: 12vw;
    margin-top: 0;
	background-color: #007381;
	z-index:95;
}

#logo {
    position: relative;
    float: left;
	margin-left: 8vw;
    margin-top: 1.5vw;
    width: 35%;
	height: 75%;
	background-image: url(../00-pics/LBV-Logo-neg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 99;
}

#hand {
    position: relative;
    float: right;
    margin-top: 4vw;
	margin-right: 10vw;
	margin-right: 10vw;
    margin-top: 1.5vw;
    width: 25%;
	height: 75%;
	background-image: url(../00-pics/Hand-2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 99;
}

#mobile-menue {
	display: none;
}



/************ MENUE ************/





#main-menu {
    position: relatvie;
    float: left;
    width: 100%;
    left: 0;
    right: 0;
	margin-top: 0.1rem;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 3rem;
    background-color: #C2CD23;
    color: #000;
    z-index: 98;
}

#main-menu a {
    color: #000;
}


#nav-1, #nav-1-active {
	position: relative;
	float: left;
	width: 16%;
	margin: 0;
    padding: 0;    
    padding-left: 10%;
	text-align: left;
	z-index: 98;
}

#nav-5, #nav-5-active {
	position: relative;
	float: right;
	width: 10%;
	margin: 0;
    padding: 0;    
    padding-right: 10%;
	text-align: right;
	z-index: 98;
}

#nav-1-active, #nav-5-active {
	background-color: #007381;
    color: #FFF;
    font-weight: 600;
}

#nav-2, #nav-2-active {
	width: 18%;
}

#nav-3, #nav-3-active {
	width: 20%;
}

#nav-4, #nav-4-active {
	width: 16%;
}

#nav-2, #nav-2-active,
#nav-3, #nav-3-active,
#nav-4, #nav-4-active {
	position: relative;
	float: left;
	margin: 0;
    padding: 0;
	height: 3rem;
	text-align: center;
	z-index: 98;
	text-decoration: none;
}

#nav-2-active,
#nav-3-active,
#nav-4-active {
	background-color: #007381;
    color: #FFF;
    font-weight: 600;
}

#main-menu a:hover {
    font-weight: 600;
}





/************ CONTENT ************/





#white {
    position: relative;
    float: left;
	width: 100%;
	height: auto;
    margin: 0;
    padding-bottom: 5rem;
    overflow: none;
	background-color: white;
    z-index: 99;
}

#light-index {
    position: relative;
    float: left;
	width: 100%;
	height: auto;
    margin: 0;
    padding-bottom: 0;
    overflow: none;
	background-color: #F1F6DE;
    z-index: 99;
}

#content {
    position: relative;
    float: left;
	width: 86vw;
	height: auto;
    margin: 0;
    margin-top: 7vw;
	margin-left: 7vw;
    overflow: none;
}

#text-index {
    position: relative;
    float: left;
    width: 38vw;
	height: auto;
    margin: -2vw 0 3.5% 3vw;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    text-align: center;
    z-index: 90;
}

#clip-index {
    position: relative;
    float: right;
    width: 38vw;
	height: 28.5vw;
    margin: -3.5vw 3vw 3.5% 0;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#light {
    position: relative;
    float: left;
	width: 100%;
	height: auto;
    margin: 0;
    padding-bottom: 5rem;
    overflow: none;
	background-color: #F1F6DE;
    z-index: 99;
}


#column {
    position: relative;
    float: left;
    width: 38vw;
    margin: 1.25% 0 0 3.33vw;
	z-index: 90;
}

#links {
    position: relative;
    float: left;
    width: 38vw;
    margin: 0 0 0 3vw;
	font-size: 1rem;
	line-height: 1.5rem;
    z-index: 90;
}

#rechts {
    position: relative;
    float: right;
    width: 38vw;
    margin: 0 3vw 0 0;
	font-size: 1rem;
	line-height: 1.5rem;
    z-index: 90;
}

#box {
    position: relative;
    float: left;
    width: 100%;
    margin: 0 0 3.33vw 0;
	z-index: 90;
	outline: medium solid #C2CD23;
}

#box-wide {
    position: relative;
    float: left;
	width: 80vw;
    margin: 1.25% 0 2.5em 3vw;
	z-index: 90;
	outline: medium solid #C2CD23;
}

#clip {
    position: relative;
    float: left;
    width: 100%;
	height: 28.5vw;
    margin: 1% 0 5% 0;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#clip-left {
    position: relative;
    float: left;
    width: 38vw;
	height: 28.5vw;
    margin: 0.5% 0 3.5% 3vw;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#clip-right {
    position: relative;
    float: right;
    width: 38vw;
	height: 28.5vw;
    margin: 0.5% 3vw 3.5% 0;
    border-bottom: 2px solid #C2CD23; 
    z-index:90;
}

#clip-box-unten {
    position: relative;
    float: left;
    width: 100%;
	height: 28.5vw;
    margin: 0;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#clip-box-oben {
    position: relative;
    float: left;
    width: 100%;
	height: 28.5vw;
    margin: 0;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#clip-left-inside {
    position: relative;
    float: left;
    width: 38vw;
	height: 28.5vw;
    margin: 0.5% 5% 3.5% 0;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#clip-right-inside {
    position: relative;
    float: right;
    width: 38vw;
	height: 28.5vw;
    margin: 0.5% 0 3.5% 5%;
    border-bottom: 2px solid #C2CD23; 
    z-index: 96;
}

#left {
    position: relative;
    float: left;
    width: 41vw;
	height: auto;
    left: 0;
    margin: 0.5% 0 3.5% 0;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text {
    position: relative;
    float: left;
    width: 85%;
	height: auto;
    margin: 7.5%;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text-left {
    position: relative;
    float: left;
    width: 38vw;
	height: auto;
    margin: 0.5% 0 3.5% 3vw;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text-right {
    position: relative;
    float: right;
    width: 38vw;
	height: auto;
    margin: 0.5% 3vw 3.5% 0;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text-wide, #text-spalte {
    position: relative;
    float: left;
    width: 100%;
	height: auto;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration:none;
    margin: 0 0 3.5% 0;
    z-index: 90;
}

#text-box-left {
    position: relative;
    float: left;
    width: 35vw;
	height: auto;
    margin: 0 0 0 3vw;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text-box-right {
    position: relative;
    float: right;
    width: 35vw;
	height: auto;
    margin: 0 3vw 0 0;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#text-impressum {
    position: relative;
    float: left;
    width: 92%;
	height: auto;
    margin: 0 3vw 0 4%;
    overflow: auto;
	font-size: 1rem;
	line-height: 1.5rem;
    text-decoration: none;
    z-index: 90;
}

#map {
    position: relative;
    float: right;
    width: 100%;
	height: calc(21.7vw + 62px);
    margin: 2% 0 1rem 0;
}

#top-space {
    position: relative;
    float: left;
    width: 100%;
	height: 2em;
    margin: 0;
}

#bottom-space {
    position: relative;
    float: left;
    width: 100%;
	height: 5em;
    margin: 0;
}





/************ SPENDEN ************/





#spende-1, #spende-2, #spende-3, #spende-4 {
    position: relative;
    width: 49%;
	min-height: 14vw;
    text-align: center;
    background-color: #E3E196;
    animation-name: spenden;
    animation-duration: 2.5s;
}

#spende-1 {
    position: relative;
    float: left;
    margin: 0 0 0.75vw 0;
    animation-delay: 2s;
}

#spende-2 {
    position: relative;
    float: right;
    margin: 0 0 0.75vw 0;
    animation-delay: 6s;
}

#spende-3 {
    position: relative;
    float: left;
    margin: 0;
    animation-delay: 10s;
}

#spende-4 {
    position: relative;
    float: right;
    margin: 0;
    animation-delay: 14s;
}

@keyframes spenden {
  0%   {background-color: #E3E196;}
  50%  {background-color: #C2CD23;}
  100%  {background-color: #E3E196;}
}

#spende-1:hover, #spende-2:hover, #spende-3:hover, #spende-4:hover {
    color: #000;
    background-color: #C2CD23;
}

#button-spenden {
    position: relative;
    float: left;
    width: 80%;
	height: auto;
    margin: 0 0 1vw 7%;
    padding: 3%;
    background-color: #007381;
    color: white;
    border-radius: 1rem;
} 

.CHF {
    text-align: center;
}

.Betrag {
    font-size: 3rem;
    line-height: 3rem;
    text-align: center;
}





/************ BUTTONS ************/





#social-left {
    position: relative;
    float: left;
    width: 47.5%;
	height: 3.5rem;
    margin: 0;
    text-align: center;
    padding-top: 22.5%;
    color: #006C75;
    background-color: #E3E196;
	background-image: url(../00-pics/button-facebook-dark.png);
    background-size: 40%;
    background-position: 50% 30%;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}

#social-right {
    position: relative;
    float: right;
    width: 47.5%;
	height: 3.5rem;
    margin: 0;
    text-align: center;
    padding-top: 22.5%;
    color: #006C75;
    background-color: #E3E196;
	background-image: url(../00-pics/button-instagram-dark.png);
    background-size: 40%;
    background-position: 50% 30%;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}

#social-left:hover {
    font-weight: 600;
    color: #000;
    background-color: #C2CD23;
}

#social-right:hover {
    font-weight: 600;
    color: #000;
    background-color: #C2CD23;}

#button-Newsletter {
    position: relative;
    float: left;
    width: 100%;
	height: 10%;
    margin: -2.5rem 0 0 0;
    background-color: #E3E196;
    font-size: 1.2rem;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.75rem;
}

#button-Newsletter:hover {
    font-weight: 600;
    background-color: #000;
}



#download, #mail, #tel, #app, #internet, #login, #online, #APP-Android, #APP-iOS {
    position: relative;
    float: left;
    width: 78%;
    margin: 3.5% 0;
    padding: 0 5% 0 17%;
    font-size: 1.2rem;
    color: #006C75;
    background-color: #E3E196;
    background-size: 9%;
    background-position: 5%;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}

#download {
	background-image: url(../00-pics/icon-download.png);
}

#download:hover {
	background-image: url(../00-pics/icon-download-black.png);
}

#mail {
	background-image: url(../00-pics/icon-mail.png);
}

#mail:hover {
	background-image: url(../00-pics/icon-mail-black.png);
}

#tel {
	background-image: url(../00-pics/icon-tel.png);
}

#tel:hover {
	background-image: url(../00-pics/icon-tel-black.png);
}

#internet {
	background-image: url(../00-pics/icon-internet.png);
}

#internet:hover {
	background-image: url(../00-pics/icon-internet-black.png);
}

#login {
	background-image: url(../00-pics/icon-login.png);
}

#login:hover {
	background-image: url(../00-pics/icon-login-black.png);
}

#online {
	background-image: url(../00-pics/icon-formular.png);
}

#online:hover {
	background-image: url(../00-pics/icon-formular-black.png);
}

#download:hover, #mail:hover, #tel:hover, #app:hover, #internet:hover, #login:hover, #online:hover, #APP-Android:hover, #APP-iOS:hover {
    font-weight: 600;
    color: #000;
    background-color: #C2CD23;
}





/************ TEXT-STILE ************/





h1 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #006C75;
    letter-spacing: 0.05rem;
    text-align: center;
    line-height: 2.5rem;
    margin:0 0 2rem 0;
    padding: 0;
}

h2 {
    font-size: 1.5rem;
	line-height: 1.5rem;
    color: #006C75;
    font-weight: 600;
    margin-top: 0.7rem;
}

h3 {
    font-size: 1.25rem;
	line-height: 1.5rem;
    color: #006C75;
    font-weight: 600;
    margin-top: 0.7rem;
}

h4 {
    font-size: 1.5rem;
	line-height: 2rem;
    color: #006C75;
    font-weight: 400;
}

h5 {
    font-size: 1.5rem;
	line-height: 1.5rem;
    color: #006C75;
    letter-spacing: 0.05rem;
    font-weight: 300;
    text-align: center;
    margin: -1.75rem 0 2rem 0;
}

h7 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FFF;
    letter-spacing: 0.05rem;
    text-align: center;
    line-height: 2rem;
    padding: 0;
}

.subheadline {
    font-size: 1.5rem;
	line-height: 2rem;
    font-weight: 300;
    text-align: center;
    color: #006C75;
}

.text {
    font-size: 1rem;
	line-height: 1.5rem;
    text-align: justify;
}

.strongtext {
    font-weight: 600;
    color: #006C75;
	text-align: left;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.middle {
    vertical-align: middle;
}

.white {
    color: #FFF;
}


.link-name {
	color: #006C75;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5rem;
    text-align: center;
}

li {
    margin-bottom: 0.5rem
}



/************ MITARBEITER ************/





#team-links, #team-rechts {
	position: relative;
	float: left;
	margin: 2vw 2.5% 0 0 ;
	width: 22.5%;
    height: 33vw;
    z-index: 80;
    text-align: center;
}

#Link-links, #Link-rechts {
	position: relative;
	float: left;
	margin: 2vw 2.5% 0 0 ;
	width: 22.5%;
    height: 18em;
    z-index: 80;
    text-align: center;
}

#Link-links a, #Link-rechts a {
    color: blue;

}





/************ DETAILS = AUFKLAPPER ************/





#Ausklapper {
    position: relative;
    float: left;
    width: 92.5%;
	min-height: 3rem;
    margin: 0 0 1rem 2.5%;
    padding-left: 1rem;
    overflow: auto;
    text-decoration:none;
    text-align: left;
    background-color: #E3F1F5;
    border-radius: 0.5rem;
    z-index: 99;
}

#Ausklapper a {
    color: #000;
}

details > summary {
    list-style: none;
    z-index: 99;
    overflow: hidden;
}

details summary::-webkit-details-marker {
    display:none;
    z-index: 95;
}

details > summary {
    height: 3rem;
	background-image: url(../00-pics/arrow-1.svg);
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: right;
    margin-top: 0.25rem;
    z-index: 95;
}

details[open] > summary {
	background-image: url(../00-pics/arrow-2.svg);
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: right;
    z-index: 95;
}

details > summary {
    list-style-type: none;
    z-index: 95;
}

summary {
    margin-top: -0.5rem;
    align-items: center;
    width: 97.5%;
    z-index: 95;
}



#Ausklapper-wide {
    position: relative;
    float: left;
    width: 100%;
	min-height: 1rem;
    overflow: auto;
    margin: -3.5rem 0 0 0;
    z-index: 95;
}


.summary-right {
    width: 45%;
    margin-left: 50%;
    margin-right: 2%;
}

.summary-left {
    width: 45%;
    margin-left: 2%;
    margin-right: 52%;
}





/************ FORMULAR ************/





form {
    border: none;
    width: 85%;
    background-color: #007381;
    padding: 7.5%;
    margin: 1% 0;
}

input {
    font-size: 1.25em;
    width: 100%;
    height: 2vw;
    border: none;
    margin: 0;
    margin-top: 0.2em;
}

form label {
    display: block;
    font-size: 1em;
    color: white;
    margin-bottom: 1.5em;
    padding: 0;
}

textarea {
    width: 100%;
    font-family: inherit;  
    margin: 0;
    margin-top: 0.3em;
    padding: 0;
    border: none;
}

#ort {
    min-height: 5vw;
}

#beschreibung {
    min-height: 10vw;
}

input, textarea {
    width: 96%;
    padding: 2%;
    font-family: inherit;
    font-size: 1.25em;
    border-radius: 0.3em;
    outline: none;
}    

input:focus, textarea:focus { 
    background-color: #E3E196;
}

input[type=submit] {
    background-color: #E3E196;
    cursor: pointer;
    width: 100%;
    min-height: 2.5em;
    padding: .3em;
    margin-top: 1em;
    border-radius: 0.3em;
	color: #006C75;

}

input[type=submit]:hover {
    font-weight: 600;
    color: #000;
    background-color: #C2CD23;
}


#Danke {
    position: relative;
    float: left;
    width: 100%;
	height: 10%;
    margin: 2rem 0 0 0;
    background-color: #C2CD23;
    font-size: 1.2rem;
    font-weight: 600;
	color: #333;
    text-align: center;
    vertical-align: middle;
    border-radius: 0.75rem;
} 
    

   








.petrol {
    background-color: #007381;
}
  


table{
    width: 100%;
}

td, input, select, textarea { 
	vertical-align: middle;
	color: #333; 
}


.Feld1 { 
	background-color: FFF; 
	min-height: 1vw;
    width: 96%;
  	-webkit-appearance: button;
	margin: 1vw 0 0 0;
    border: none;
}

.Feld2a { 
    float: left;
	background-color: FFF; 
	min-height: 3vw;
    width: 94%;
  	-webkit-appearance: button;
	margin: 1vw 10% 0 0;
    border: none;
}

.Feld2b { 
    float: right;
	background-color: FFF; 
	min-height: 3vw;
    width: 94%;
  	-webkit-appearance: button;
	margin: 1vw 0 0 0;
    border: none;
}






#formular {
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#standard{
	height: 1.5vw;
}

#short{
	height: 3vw;
}

#middle{
	height: 2.5vw;
}

input[type="radio"] {
    display: inline-block;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;

    border: 0.4vw solid white;

    position: relative;
    margin: 0 1.5vw 0 0;
}

input[type="radio"]:checked {
    background-color: white;
    border: 0.4vw solid white;
    outline: unset !important /* I added this one for Edge (chromium) support */
}



#radio-einser{
    float: left;
    width: 100%;
	height: 4vw;
}

#radio-zweier{
    float: left;
    width: 50%;
	height: 6vw;
}

#radio-links{
    z-index: 90;
    float: left;
    width: 48%;
	height: 6vw;
    margin-right: 2%;
    overflow: hidden;
}

#radio-rechts{
    float: right;
    width: 48%;
	height: 6vw;
    margin-left: 2%;
}

#radio-leer{
    float: right;
    width: 48%;
	height: 6vw;
    margin-left: 2%;
}


#formularfeld-links{
    float: left;
    width: 48%;
}
 
#formularfeld-rechts{
    float: right;
    width: 48%;
}


#space{
    position: relative;
    float: left;
    width: 100%;
    height: 3vw;
    margin: 0;
    padding: 0;
}

#small-space{
    position: relative;
    float: left;
    width: 100%;
    height: 2vw;
    margin: 0;
    padding: 0;
}


#text-33 {
    position: relative;
    float: left;
    width: 33%;
	height: auto;
    margin: 0.25vw 0 0 0;
    overflow: auto;
    color: #FFF;
	font-size: 1rem;
    font-weight: 600;
	line-height: 1.5rem;
    text-decoration: none;
    text-align: center;
    z-index: 90;
}

#text-45-links {
    position: relative;
    float: left;
    width: 45%;
	height: auto;
    margin: 0.25vw 5% 0 0;
    overflow: auto;
    color: #FFF;
	font-size: 1rem;
    font-weight: 600;
	line-height: 1.5rem;
    text-decoration: none;
    text-align: center;
    z-index: 90;
}

#text-45-rechts {
    position: relative;
    float: right;
    width: 45%;
	height: auto;
    margin: 0.25vw 0 0 5%;
    overflow: auto;
    color: #FFF;
	font-size: 1rem;
    font-weight: 600;
	line-height: 1.5rem;
    text-decoration: none;
    text-align: center;
    z-index: 90;
}


#text-Fotos{
    float: right;
    width: 93.5%;
	height: 6vw;
    margin: -2.75em 0 0 0;
}



/************ FOOTER ************/





#footer {
    position: relative;
    float: left;
	width: 80vw;
    height: auto;
	margin-left: 10vw;
	color: white;
    z-index: 98;
}

#triple-1 {
    position: relative;
    float: left;
	width: 32%;
    height: auto;
    margin: 1rem 0 5vw 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

#triple-2 {
    position: relative;
    float: left;
	width: 32%;
    height: auto;
    margin: 1rem 0 5vw 2%;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 99;
}

#triple-3 {
    position: relative;
    float: right;
	width: 32%;
    height: auto;
    margin: 1rem 0 5vw 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: right;
    z-index: 99;
}

#footer a {
	color: white;
    font-weight: 400;
}

#footer a:hover {
    font-weight: 600;
}





/************ HIDDEN-SERVICE ************/





.unsichtbar {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}    

h6 {
    font-size: 1px;
    color: white;
}

#sprungmarken {
    position: fixed;
    left: -500%;
    width: auto;
    height: auto;
    display: inline;
    float: left;
    overflow: hidden;
    color: #FFF;
    background-color: #FFF;
}

#sprungmarken a.unsichtbar:focus,
#sprungmarken a.unsichtbar:active {
    left: 0px;
    width: auto;
    white-space: nowrap;
    top: -1.6rem;
    height: 20px;
    overflow: visible;
    display: block;
    color: #FFF;
    padding: 2px 2em 0;
    background-color: #FFF;
}

#sprungmarken ul,
#sprungmarken ul li,
#sprungmarken ul li a,
#sprungmarken ul li a:hover,
#sprungmarken li a.active {
    color: #FFF;
    background: #FFF;
    text-decoration: none;
}

#inhalt .blaettern li span.unsichtbar {
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    top: 3.6rem;
    top: 2.8rem;
    left: 0;
    left: -1000rem;
    text-align: left;
    background-color: #fff;
    border: 2px solid #c0c0c0;
    padding: 0.2rem;
    line-height: 1rem;
    z-index: 100;
}        




#pic {
    position: relative;
    float: right;
    width: 38vw;
	height: 48vw;
    margin: 1% 3vw 3.5% 0;
	background-image: url(../00-pics/formular.jpg);
    background-size: contain;
    z-index:90;
}


 








/************       C S S       ************/

/************   900 - 1.400 px   ************/

/************     F o n t s     ************/



@media (max-width: 1400px) {


html, body {
	font-size: 20px;
    line-height: 30px;
}

#download, #mail, #tel, #app, #internet, #login, #APP-Android, #APP-iOS {
    position: relative;
    float: left;
    width: 78%;
    width: calc(95% - 95px);
    margin: 3.5% 0;
    padding: 0 5% 0 95px;
    background-size: 50px;
}
    
#footer {
	font-size: 20px;
    line-height: 28px;
}

}






/************       C S S       ************/

/************  kleiner 1.100 px   ************/

/************  F O R M U L A R  ************/



@media (max-width: 1100px) {




/************ FORMULAR ************/




    
#standard{
	height: 1.5vw;
    min-height: 20px;
}

#short{
	height: 1.5vw;
    min-height: 20px;
}

#radio-links{
	min-height: 25px;
}

#radio-mitte{
    float: left;
	min-height: 25px;
}

#radio-rechts{
    float: left;
	min-height: 25px;
}

#formularfeld-links{
    float: left;
    width: 100%;
}

#formularfeld-mitte{
    float: left;
    width: 100%;
}

#formularfeld-rechts{
    float: left;
    width: 100%;
}

#formularfeld-mitterechts{
    margin: -0.5vw 0 6vw 0;
	min-height: 25px;
}

  
}    
    




/************       C S S       ************/

/************   T A B L E T S   ************/

/************     9 0 0 P X     ************/



@media (max-width: 900px) and (orientation: portrait) {


html, body {
}





/************ HEAD ************/






#head {
	height: 15vw;
}

#logo {
	margin-left: 8vw;
    margin-top: 2.2vw;
    width: 40%;
	height: 75%;
}

#hand {
    position: relative;
    float: right;
	margin-right: 10vw;
    margin-top: 2.8vw;
    width: 28.6%;
	height: 75%;
	background-image: url(../00-pics/Hand-2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 99;
}






/************ MENUE ************/





#main-menu {
    font-size: 1.1rem;
}


#nav-1, #nav-1-active {
	width: 19vw;
}

#nav-2, #nav-2-active {
	width: 18.5vw;
}

#nav-3, #nav-3-active {
	width: 20.5vw;
}

#nav-4, #nav-4-active {
	width: 14vw;
} 
    
#nav-5, #nav-5-active {
	width: 8vw;
}   
    
    
    
    
/************ CONTENT ************/





#white {
	width: 100%;
}

#content {
	width: 80vw;
	margin-top: 10vw;
	margin-left: 10vw;
}

#column, #box, #box-wide {
    width: 100%;
    margin-left: 0;
}
    
#clip, #clip-left, #clip-right, #clip-left-inside, #clip-right-inside, #clip-index {
    width: 100%;
	height: 60vw;
    margin: 5vw 0 5vw 0;
}
    
#clip-box-unten {
    width: 100%;
	height: 60vw;
    margin: 5vw 0 0 0;
}  
    
#clip-box-oben {
    width: 100%;
	height: 60vw;
    margin: 0 0 5vw 0;
}   
    
#text, #text-index {
    float: left;
    width: 90%;
    margin: 0 0 0 5%;
}

#text-left, #text-right, #text-MA, #text-wide, #text-spalte, #links, #rechts, #text-impressum {
    float: left;
    width: 100%;
    margin: 0;
}
    
#rechts {
    margin-top: 5vw;
}
  
#text-box-left, #text-box-right {
    float: left;
    width: 90%;
    margin: 0 0 0 5%;
}
    
#box-wide {
    min-height: 90vw;
}

#map {
    width: 100%;
	height: 58.6vw;
}

#bottom-space {
    position: relative;
    float: left;
    width: 100%;
	height: 5rem;
    margin: 0;
}
 
  




/************ SPENDEN ************/





#spende-1, #spende-2, #spende-3, #spende-4 {
	min-height: 200px;
}

#spende-3, #spende-4 {
	margin: 1.5vw 0 5vw 0;
}

#button-spenden {
    width: 160px;
    left: 48%;
    margin: 0 0 1vw -80px;
    padding: 2%;
}



/************ BUTTONS ************/





#social-left {
	height: 4rem;
    font-size: 1.25rem;
    margin: 0;
}

#social-right {
	height: 4rem;
    font-size: 1.25rem;
    margin: 0;
}

#button-Newsletter {
    font-size: 1.25rem;
	height: 15%;
    margin: 0;
}

#tel {
    margin-bottom: 6vw;
}


  

    
/************ TEXT-STILE ************/


h1 {
	font-size: 2.5rem;
	line-height: 2.5rem;
    text-align: center;
}

h2 {
	font-size: 1.5rem;
    line-height: 1rem;
    margin-top: 0.8rem;
}

h3 {
	font-size: 1.25rem;
}

.subheadline {
	line-height: 2rem;
}


    
    
    
/************ MITARBEITER ************/

  
#team-links {
    position: relative;
    float: left;
	width: 45%;
    height: 60vw;
    margin: 6vw 5% 0 0;
    text-align: center;
} 
    
#team-rechts {
    position: relative;
    float: right;
	width: 45%;
    height: 60vw;
    margin: 6vw 5% 0 0;
    text-align: center;
}

#Link-links {
    position: relative;
    float: left;
	width: 45%;
    height: 40vw;
    margin: 6vw 5% 0 0;
    text-align: center;
} 
    
#Link-rechts {
    position: relative;
    float: right;
	width: 45%;
    height: 40vw;
    margin: 6vw 5% 0 0;
    text-align: center;
}    





/************ FORMULAR ************/



#name, #wohnort, #kontakt, #datum {
    min-height: 3vw;
}
    
#ort {
    min-height: 4vw;
}

#beschreibung {
    min-height: 15vw;
}

    

    
    
    
    
  
    
    
    
    
    
    
    
/************ DETAILS = AUFKLAPPER ************/
    
       
#Ausklapper {
    width: 95%;
	min-height: 3rem;
    padding-left: 5%;
    margin: 0 0 1rem 0;
}
    
    
#box-wide {
    
}
    
#Ausklapper-wide {

}


.summary-right, .summary-left {
    width: 45%;
    margin-top: 5vw;
    margin-left: 50%;
    margin-right: 2%;
}



    
    
/************ FOOTER ************/


   
    

#footer {
	font-size: 1rem;
    line-height: 150%;
}

    
    
    
    
        
    
    


/************       C S S       ************/

/************   T A B L E T S   ************/

/************     7 0 0 P X     ************/



@media (max-width: 700px) {
            
            
#triple-1 {
	width: 100%;
    height: auto;
    margin: 5vw 0 0 0;
    text-align: left;
}

#triple-2 {
	width: 100%;
    height: auto;
    margin: 0;
    text-align: left;
}

#triple-3 {
	width: 100%;
    height: auto;
    margin: 0 0 15vw 0;
    text-align: left;
}


 
}      
     
 
    


/************         C S S         ************/

/************ S M A R T P H O N E S ************/




@media (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) and (max-width: 600px),
        (min--moz-device-pixel-ratio: 2) and (orientation: portrait) and (max-width: 600px),     
        (min-resolution: 2dppx) and (orientation: portrait) and (max-width: 600px),      
        (min-resolution: 192dpi) and (orientation: portrait) and (max-width: 600px),
		(max-width: 600px) and (orientation: portrait)
		{


html, body {
    font-size: 22px;
}        





/************ HEAD ************/


#head {
	width: 100%;
	height: 27vw;
	margin: 0;
}
            
#hand {
    display: none;
}

#logo {
    width: 60%;
    height: 70%;
    margin: 5vw 0 0 5vw;
}
                        
#main-menu {
    display: none;
}


        


/************ MOBILE MENUE = http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ ************/


#mobile-menue {
	display: block;
	z-index: 100;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	position: absolute;
	top: 8.75vw;
	right: 10vw;
	width: 9.6vw;
	height: 8vw;
	text-decoration: none;
	display: block;
	z-index: 99;
}

/*Strip the ul of padding and list styling*/
#mobile-menue ul {
	position: static;
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/*Create a horizontal list with spacing*/
#mobile-menue li {
	display: inline-block;
	float: left;
	margin-right: 1px;
	margin-bottom: 1px;
}

/*Style for menu links*/
#mobile-menue li a {
	display: block;
	width: 90%;
	height: 15vw;
	text-align: left;
	font-size: 1.1em;
	line-height: 2.25em;
	color: #006C75;
    font-weight: 600;
	background: #E3E196;
	text-decoration: none;
	padding: 0 10%;
	border-bottom: 1px solid #333;
}

/*Hover state for top level links*/
#mobile-menue li:hover a {
	background: #FFF;
}

/*Style for dropdown links*/
#mobile-menue li:hover ul a {
	background: #FFF;
	color: #666;
	height: 13vw;
	line-height: 2.5em;
}

/*Hover state for dropdown links*/
#mobile-menue li:hover ul a:hover {
	background: #FFF;
	color: #000;
}

/*Hide dropdown links until they are needed*/
#mobile-menue li ul {
	display: none;
}

/*Make dropdown links vertical*/
#mobile-menue li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#mobile-menue li ul li a {
	width: 85%;
	padding: 0 18%;
	font-size: 1em;
}

#mobile-menue ul li, #mobile-menue li a {
	width: 100%;
	overflow: hidden;
}

/*Display the dropdown on hover*/
#mobile-menue ul li a:hover + .hidden, #mobile-menue .hidden:hover {
	display: block;
}


/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}




            
/************ CONTENT ************/


#content {
	width: 100%;
	margin-top: 5vw;
	margin-left: 0;
}
            
#light {
    padding: 0;
}
            
#column, #box, #box-wide {
    width: 100%;
    margin-left: 0;
}
    
#clip, #clip-index, #clip-left, #clip-right, #clip-box-oben, #clip-box-unten, #clip-left-inside, #clip-right-inside {
    width: 100%;
	height: 75vw;
    margin: 0 0 5vw 0;
}
 
#clip-index, #clip-left, #clip-right {
    margin: 5vw 0 0 0;
}
    
#clip-box-unten {
    margin: 2vw 0 0 0;
}
   
#text {
    float: left;
    width: 80%;
    margin: 0 0 0 10%;
}

#text-left, #text-right, #text-MA, #text-spalte, #text-impressum {
    float: left;
    width: 80%;
    margin: 5% 0 0 10%;
    height: auto;
}          

#links, #rechts {
    float: left;
    width: 100%;
    margin: 5% 0 0 0;
    height: auto;
}          
            
#text-wide {
    float: left;
    width: 90%;
    margin: 10% 0 0 5%;
    height: auto;
}                   
    
#text-box-left, #text-box-right {
    float: left;
    width: 90%;
    min-height: 42vw;
    margin: 0 0 0 5%;
}
    
#box {
    margin: 11vw 0 0 0;
} 
            
#box-wide {
    min-height: 90vw;
    margin: 12vw 0 0 0;
}
       
#map {
    width: 100%;
	height: 75vw;
}

#top-space {
	height: 0;
}
            
#bottom-space {
    position: relative;
    float: left;
    width: 100%;
	height: 5rem;
    margin: 0;
}
  
    
    
    

/************ SPENDEN ************/





#spende-1, #spende-2, #spende-3, #spende-4 {
	min-height: 40vw;
}

            
#spende-3, #spende-4 {
    margin-top: 1.5vw;
}

#button-spenden {

} 

.CHF {
    text-align: center;
}

.Betrag {
    font-size: 3rem;
    line-height: 3.5rem;
    text-align: center;
}





/************ BUTTONS ************/





#social-left, #social-right {
    width: 47.5%;
    margin: 0.5rem 0 5vw 0;
}

#button-Newsletter {
    margin: 0;
}

#download, #mail, #tel, #app, #internet, #login, #APP-Android, #APP-iOS {
    width: 75%;
    margin: 3.5% 0;
    padding: 0 5% 0 20%;
    font-size: 1.2rem;
    background-size: 10%;
    background-position: 5%;
}



            
  
/************ MITARBEITER ************/





#team-links {
    min-height: 80vw;
    width: 37.5%;
    margin: 3vw 0 0 10%;
}
    
#team-rechts {
    min-height: 80vw;
    width: 37.5%;
    margin: 3vw 10% 0 0;
}    

#Link-links {
    min-height: 50vw;
    width: 37.5%;
    margin: 3vw 0 0 10%;
}
    
#Link-rechts {
    min-height: 50vw;
    width: 37.5%;
    margin: 3vw 10% 0 0;
}    

     

    
/************ DETAILS = AUFKLAPPER ************/
    
    
    
    
    
#Ausklapper {
    width: 100%;
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.1rem;
    border-radius: 0;
    overflow: hidden;
}
  
details > summary {
    height: 4rem;
    background-size: 2rem;
    margin-top: 0.5rem;
}

summary {
    padding: 0;
    margin: 0 10% 0 10%;
    padding-top: 1rem;
    width: 80%;
}
    
.link-name  {
    font-size: 1rem;
    line-height: 1.2rem;
}            
            
         
            
            
            
/************ TEXT-STILE ************/


h1 {
	font-size: 1.8rem;
    line-height: 1.8rem;
}

h2 {
    font-size: 1.3rem;
    line-height: 1.5rem;
} 
            
h5 {
    font-size: 1.25rem;
	line-height: 1.5rem;
    color: #006C75;
    letter-spacing: 0.05rem;
    font-weight: 300;
    text-align: center;
    margin: -1.75rem 0 2rem 0;
}
            
.subheadline  {
    font-size: 1.3rem;
    line-height: 1.5rem;
} 
            
   
            



/************ FORMULAR ************/



#name, #wohnort, #kontakt, #datum {
    min-height: 10vw;
}
    
#ort {
    min-height: 6vw;
}

#beschreibung {
    min-height: 15vw;
}
 
    

            
            
            
            
    
    

#standard{
	height: 1.5vw;
}

#short{
	height: 3vw;
}
            
#middle{
	height: 7vw;
}

            
            


            
            
            
 input[type="radio"] {
    display: inline-block;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: 50%;
    width: 8vw;
    height: 8vw;

    border: 1vw solid white;

    position: relative;
    margin: 0 3vw 0 0;
}

input[type="radio"]:checked {
    background-color: white;
    border: 1vw solid white;
    outline: unset !important /* I added this one for Edge (chromium) support */
}           
            
            
            
            
             
            

            
#formular {
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#standard{
	height: 100%;
}

#short{
	height: 100%;
}
            
#standard{
	height: 100%;
}



#radio-links{
    z-index: 90;
    float: left;
    width: 50%;
	height: 16vw;
    margin: 0 0 0 0;
    overflow: hidden;
}

#radio-mitte{
    float: left;
    width: 50%;
	height: 16vw;
    margin: 0 0 0 0;
}

#radio-rechts{
    float: left;
    width: 50%;
	height: 16vw;
    margin: 0 0 0 0;
}

#formularfeld-links{
    float: left;
    width: 100%;
}

#formularfeld-mitte{
    float: right;
    width: 100%;
}

#formularfeld-rechts{
    float: right;
    width: 100%;
}

#formularfeld-mitterechts{
    z-index: 99;
    float: right;
    width: 50%;
	height: 12vw;
    margin: 0;
}

#space{
    float: left;
    width: 100%;
    height: 12vw;
}
           
            
            

/************ FOOTER ************/


   
    

#footer {
	font-size: 1rem;
    line-height: 150%;
}

#triple-1 {
	width: 100%;
    height: auto;
    margin: 5vw 0 0 0;
    text-align: left;
}

#triple-2 {
	width: 100%;
    height: auto;
    margin: 0;
    text-align: left;
}

#triple-3 {
	width: 100%;
    height: auto;
    margin: 0 0 15vw 0;
    text-align: left;
}

   

}