:root {  
  --hauptfarbe: #126175; /* webamor dunkelblau */
  --hauptfarbe_alternativ: #318599; /* hellere Version des webamor dunkelblau */
  --hauptfarbe_hellhinterg: #e0f1f5; /* leicht gefärbtes hellgrau in Richtung Hauptfarbe */
  --hauptfarbe_dunkelhinterg: #c19da1; /* leicht gefärbtes dunkleres grau in Richtung Hauptfarbe */
  --zweitfarbe: #30a3bf; /* helles türkis webamor */
  --hell: #ffffff; /* weiß */
  --hell_transparent: #ffffff45; /* weiß, stark durchsichtig */
  --hell_wenig_transparent: #ffffffab; /* weiß, wenig durchsichtig */
  --hellgrau: #eaeaea; /* helles grau */
  --mittelgrau: #afafaf; /* mittelgrau - zwischen hellgrau und grau */
  --grau: gray; /* grau */
  --dunkelgrau: #696969; /* dunkelgrau */
  --schwarzgrau: #404040; /* besonders dunkeles grau */
  --dunkel: #000000; /* schwarz */
  --hinweis: darkgreen; /* dunkelgrün */
  --meldung: #900; /* dunkelrot */
}

/* ------------------------------------ allgemein ----------------------------------- */

#inhalt {margin: 3vh 0;}
#inhalt a {color: var(--hauptfarbe);}
#inhalt a:hover {text-decoration: underline;}
.bold {font-weight: bold;}





/* ------------------------------------ Navigation ----------------------------------- */

#navi_mobile_2020 {background-color: ;}
#navi_mobile_2020 #navi_mobile_2020_burgermenu {height: 5vh;}
#navi_mobile_2020 #navi_mobile_2020_inhalt ul li ul {background-color: ;}


#navigation {background-color: white; height: 45px; transition: 0.2s;}
#navigation:hover {}
#navigation ul {width: auto;}
#navigation ul li {display: flex; flex-direction: column; position: relative; padding: 0 10px;}
#navigation ul li a {height: auto; color: var(--zweitfarbe); position: relative; transition: 0.4s; padding: 8px 16px;}
/*
#navigation ul li a:before {content: ""; background: #8e1315; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; border-radius: 5px; transform: scaleX(0); animation: 0.5s forwards no-hover-x linear; animation-fill-mode: forwards; z-index: -1;}
#navigation ul li a:hover:before {animation: .3s forwards hover-x linear; animation-fill-mode: forwards;}
#navigation ul li a:hover {color: #8e1315;}
#navigation ul li a.aktiv:hover {color: #8e1315;}
*/
#navigation ul li ul {background: white; position: absolute; top: 41px; min-width: 70%; box-shadow: 0 5px 5px gray; padding: 5%;}
#navigation ul li ul li a {animation: none; color: ; padding: 5px 0 0 0; height: auto;}
/*
#navigation ul li ul li a:before {content: ""; background: #8e1315; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; border-radius: 5px; transform: scaleX(0); animation: 0.3s forwards no-hover-x linear; animation-fill-mode: forwards; z-index: 3;}
#navigation ul li ul li a:hover:before {animation: 0.3s forwards hover-x linear; animation-fill-mode: forwards;}
#navigation ul li ul li a:hover {color: #8e1315;}
#navigation ul li a.aktiv {color: #8e1315;}
#navigation ul li a.aktiv:before {content: ""; background: #8e1315; position: absolute; width: 100%; height: 3px; bottom: 0; left: 0; border-radius: 5px;}
#navigation ul li a.aktiv:hover {color: #8e1315;}
#navigation ul li ul li a.aktiv {color: #8e1315; font-weight: bold;}
#navigation ul li ul li a.aktiv:hover {color: #8e1315;}
*/

#navigation ul li a:before {content: ""; position: absolute; left: 51%; right: 51%; bottom: 0; background: var(--hauptfarbe); height: 5px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}

#navigation ul li a:hover:before {left: 0; right: 0;}

#navigation ul li a:hover {color: var(--hauptfarbe);}

#navigation ul li a.aktiv {color: var(--hauptfarbe);}

#navigation ul li a.aktiv:before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; background: var(--hauptfarbe); height: 5px;}

#navigation ul li a.aktiv:hover {color: ;}

#navigation ul li ul {margin-right: 0; display: flex; flex-direction: column; position: absolute; right: 0; padding: 0 15px;}




@keyframes hover-v {
  0% {transform: scaleX(0); height: 3px;}
  70% {transform: scaleX(1.05); height: 3px;}
  75% {height: 3px;}
  100% {transform: scaleX(1.05); height: 100%;}
}

@keyframes no-hover-v {
  0% {transform: scaleX(1.05); height: 100%;}
  45% {height: 3px;}
  55% {transform: scaleX(1.05); height: 3px; opacity: 1;}
  100% {transform: scaleX(0); height: 3px; opacity: 0;}
}

@keyframes hover-x {
  0% {transform: scaleX(0); height: 3px;}
  100% {transform: scaleX(1.05); height: 3px;}
}

@keyframes no-hover-x {
  0% {transform: scaleX(1.05); height: 3px;}
  100% {transform: scaleX(0); height: 3px;}
}





/* ------------------------------------ Startseite ----------------------------------- */

#indiv_vorlage1101 #bausteinbereiche_bausteine_1 {display: flex; flex-wrap: wrap; margin: 0 0 30px 0;}
#indiv_vorlage1101 #bausteinbereiche_bausteine_1 .kurztext_global {background-color: transparent;}
#indiv_vorlage1101 #bausteinbereiche_bausteine_1 .kurztext_global h3 {font-weight: normal; font-size: 1.8rem; line-height: 2.6rem; margin-bottom: 20px;}


@media screen and (max-width: 768px) {
 #indiv_vorlage1101 #bausteinbereiche_bausteine_1 .kurztext_global h3 {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 20px;}
}



#indiv_vorlage1101 #webamor_pakete #bausteinbereiche_bausteine_2 {display: flex; flex-wrap: wrap; margin: 30px 0 100px 0;}

#indiv_vorlage1101 #webamor_pakete .kurztext_global {flex: 1; margin: 2%; flex-direction: column; box-shadow: 0 1px 4px #a2a2a2; transition: 1s; background-color: var(--hauptfarbe_hellhinterg);}
#indiv_vorlage1101 #webamor_pakete .kurztext_global:hover {background: linear-gradient(25deg, var(--hauptfarbe_hellhinterg) 0%, rgba(255,255,255,1) 50%, var(--hauptfarbe_hellhinterg) 100%);}
#indiv_vorlage1101 #webamor_pakete .kurztext_global h3 {text-align: center; margin: 0; font-size: 1.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: normal;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text {flex-direction: column; display: flex !important; align-items: center; flex: 1;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste {width: 50% !important; opacity: 0.7; transition: 0.3s;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global:hover .kurztext_nur_der_text .kurztext_bilderleiste {opacity: 1;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste div a {width: 100%;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste div a img {width: 100%;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text .kurztext_text_div {padding: 0 !important; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}


#indiv_vorlage1101 #webamor_pakete .kurztext_global .nurtext_global {margin: 0; padding: 0;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .nurtext_global h4 {font-size: 1.4rem; text-align: center; font-family: sans-serif; font-weight: normal; margin: 20px 0 5px 0;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .kurztext_nur_der_text .kurztext_text_div .nurtext_global p {font-size: 0.75rem; line-height: 1rem; text-align: center; font-family: sans-serif; color: gray;}

#indiv_vorlage1101 #webamor_pakete .kurztext_global .baustein_html_code_multi {display: flex; flex-direction: column; max-height: 0; transition: 0.8s; overflow: hidden; height: auto;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global:hover .baustein_html_code_multi {max-height: 80px; height: auto;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .baustein_html_code_multi .textblock {display: flex; justify-content: center;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .baustein_html_code_multi .textblock a {padding: 5px 30px; background-color: var(--hauptfarbe); color: white; border-radius: 5px; margin: 25px 0 0 0; transition: 0.3s;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .baustein_html_code_multi .textblock a:hover {cursor: pointer; background-color: var(--hauptfarbe_alternativ); text-decoration: none;}


#indiv_vorlage1101 #webamor_pakete .kurztext_global:nth-of-type(2) {margin: 0; box-shadow: 0 4px 20px gray;}


@media (max-width: 930px) {
 #indiv_vorlage1101 #webamor_pakete .kurztext_global {flex: none; margin: 4% 0; padding: 10%; width: 80%;}
 #indiv_vorlage1101 #webamor_pakete .kurztext_global:nth-of-type(2) {margin: 0; box-shadow: 0 4px 15px gray;}
}


@media screen and (max-width: 768px) {
 #indiv_vorlage1101 #bausteinbereiche_bausteine_2 {padding: 4%; width: 92%; margin-top: 0;}
 #indiv_vorlage1101 #webamor_pakete .kurztext_global {padding: 10%; width: 80%;} 
 #indiv_vorlage1101 #webamor_pakete .kurztext_global:nth-of-type(2) {margin: 30px 0;} 
}






#inhalt #bausteinbereiche_bausteine_1 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste, #inhalt #bausteinbereiche_bausteine_2 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste, #inhalt #bausteinbereiche_bausteine_3 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste, #inhalt #bausteinbereiche_bausteine_4 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste, #inhalt #bausteinbereiche_bausteine_5 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste {margin: 15px 0 !important ;}







/* ------------------------------------ Inhalt ----------------------------------- */

#inhalt h1 {font-weight: normal; font-size: 1.4rem; width: 92%; padding: 0 4%;}
#inhalt h1 strong {font-size: 2rem; text-transform: uppercase; letter-spacing: 1px;}

#inhalt #bild_neben_text_position #textbereich {width: 92%; padding: 0 4% !important; padding-left: 4% !important; padding-right: 4% !important;}




#inhalt #bausteinbereiche_bausteine_1 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"], #inhalt #bausteinbereiche_bausteine_2 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"], #inhalt #bausteinbereiche_bausteine_3 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"], #inhalt #bausteinbereiche_bausteine_4 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"], #inhalt #bausteinbereiche_bausteine_5 .kurztext_global .kurztext_nur_der_text .kurztext_bilderleiste .kurztext_einzelbildkasten .bildausgabe input[type="image"] {width: auto; max-width: 100%;}


@media screen and (max-width: 768px) {
 #inhalt h1 {font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 20px; width: 92%; padding: 0 4%;}
 #inhalt #bild_neben_text_position #textbereich {width: 92%; padding: 0 4% !important; padding-left: 4% !important; padding-right: 4% !important;}
}







/* ------------------------------------ Über uns ----------------------------------- */

#inhalt #bausteinbereiche_bausteine_3 .kurztext_global {background-color: transparent;}







/* ------------------------------------ Referenzen ----------------------------------- */

#inhalt #bausteinbereiche_bausteine_3 .nurbild_global {background-color: transparent;}
#inhalt #bausteinbereiche_bausteine_3 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten {box-shadow: 0 1px 5px gray; transition: 0.3s; border-radius: 5px; position: relative;}
#inhalt #bausteinbereiche_bausteine_3 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten:hover {box-shadow: 0 3px 15px gray;}
#inhalt #bausteinbereiche_bausteine_3 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten a {width: 100%;}
#inhalt #bausteinbereiche_bausteine_3 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten a img {width: 100%; border-radius: 5px;}
#inhalt #bausteinbereiche_bausteine_3 .nurbild_global .nurbild_bilderleiste .nurbild_einzelbildkasten .bildunterschrift {position: absolute; bottom: 0; border-radius: 5px; width: auto !important; background-color: ; padding: 7px 12px; max-width: calc(100% - 24px);}





/* ------------------------------------ Kontakt ----------------------------------- */

#inhalt #vorlage117 #bausteinbereiche_bausteine_1 .kurztext_global {background-color: transparent; padding: 2% 20%; width: auto;}






/* ------------------------------------ Kontaktform ----------------------------------- */

#kontaktformular {width: 100%; max-width: 100%; padding: 0 20%;}
#kontaktformular fieldset {background-color: ; border: none; padding: 20px;}
#kontaktformular fieldset legend {background-color: ; letter-spacing: 1px; padding: 4px 16px;}
#kontaktformular #kontaktform_senden input[value="Anfrage senden"] {background-color: var(--hauptfarbe);}





/* ------------------------------------ Fuss ----------------------------------- */

#fuss {background-color: ;}
#fuss #fuss_adresse a {text-decoration: underline; color: white;}


#fuss #fuss_oben {background-color: ; width: 100%; display: flex; justify-content: center; align-items: center;}
#fuss_innen {display: flex; flex-direction: column; width: 1200px; justify-content: space-around;}
#fuss_innen #fuss_adresse {display: flex; justify-content: space-between; width: calc(100% - 40px); max-width: 460px; align-self: center;padding: 30px 20px; align-items: flex-end; color: white; flex-wrap: wrap;}
#fuss_innen #fuss_adresse div {margin: 0 15px;}
#fuss_innen #fuss_adresse p {margin: 5px 0;}
#links_im_fuss {padding: 30px; display: flex; align-items: flex-end; flex: 1; justify-content: center; color: white;}
#links_im_fuss a {padding: 0 3%; border-right: 1px solid white; color: white; text-transform: uppercase; letter-spacing: 1px;}
#links_im_fuss a:hover {text-decoration: underline;}
#links_im_fuss a:last-of-type {border-right: none;}


#fuss #fuss_unten {background-color: ; min-height: 10vh; width: 100%; display: flex; justify-content: center; align-items: center;}
#fuss #fuss_unten_innen {background-color: ; min-height: 10vh; display: flex; flex-direction: column; width: 100%;}

#fuss #fuss_unten1 {display: flex; justify-content: center; align-items: flex-end; padding: 45px 0 35px 0;}
#fuss #fuss_unten1 a {display: flex; justify-content: center; align-items: flex-end; width: 20%; max-width: 300px; min-width: 225px; margin: 0 15px 0 0; transition: 0.3s;}
#fuss #fuss_unten1 a:hover {width: 22%; max-width: 320px; min-width: 225px;}
#fuss #fuss_unten1 a img {width: 100%;}

#fuss #fuss_unten2 {display: flex; justify-content: center; align-items: center; padding: 15px 0 60px 0;}
#fuss #fuss_unten2 a {display: flex; justify-content: center; align-items: flex-end; width: 15%; max-width: 200px; min-width: 175px; margin: 0 20px; transition: 0.3s; padding: 4.5px 10px;}
#fuss #fuss_unten2 a:hover {width: 17%; max-width: 220px; min-width: 175px; padding: 0;}
#fuss #fuss_unten2 a img {width: 100%;}



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

 #fuss #fuss_unten1 {flex-wrap: wrap; font-size: 1rem; line-height: 1.8rem;}
 #fuss #fuss_unten1 a {margin: 5% 10%; width: 100%; max-width: none;}
 #fuss #fuss_unten2 {flex-wrap: wrap;}
 #fuss #fuss_unten2 a {margin: 6% 4%; width: 55%; max-width: 100%;}

}














@media screen and (max-width: 768px) {
#bilderleiste a {max-width: 80%; display: flex; justify-content: center; align-items: center; height: 100%;}
#bilderleiste a img {max-width: 100%; height: auto;}
#indiv_vorlage1101 #webamor_pakete .kurztext_global .baustein_html_code_multi {max-height: 80px;}
}