* {
  padding: 0px; margin:0px;
  box-sizing:border-box;
	}

html, body{
scroll-behavior: smooth;
}

  body {
    font-size: 1.0em; font-weight: lighter; font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(180, 209, 230);
    background-repeat: no-repeat;
    background-position: 10px 50px;
    background-size: 98% auto; height: auto;
    margin: 0px auto; max-width: 60em;
}

#cambrilsstart{
  background-image: url('home.jpg');
background-attachment: fixed;

}

#kathedralenstart{
  background-color: gray;
  background-image: url('homekath.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10px 50px;
background-size: 98% auto; height: auto;
}

img {
  max-width: 100%;
  height: auto;
}
/***************************************************************/
#logo { margin: 0.5em 0em 0.5em .7em;
font-size: 1.2em; font-weight: bold; color: white;
text-shadow: black -2px 3px 4px;
}

h1 { font-size: 2em; font-weight: normal; text-align: center}
h2 { font-weight: normal; font-size: 1.5em; color: dimgray; text-align: center;}
h4 { font-weight: lighter; font-size: 1.0em; text-align: center;
      margin: 0 .5em;}

a { display: block; /* macht bildchen bei hover button-füllend */
 color: white; text-decoration: none}


.haupt{ /* Zurück-button auf Unterseiten */
  text-align: center;
  max-width: 100%;
  font-size: 1.1em;
  margin: 10px 0px;
	padding: 10px 3px;
  background: blue;
              }

 /*************nach oben knopf *********************/

                .totop {
                  font-size: 2.2em;
                   position: fixed;
                   bottom: 30px;
                   right: 15px;
                   transition: background-color .3s;
                   z-index: 1000;

                 }

                 .totop a {
                   padding: 0 .2em;
                   color: white;
                   border-left: 1px solid white;
                   border-right: 1px solid white;
                 }

                .totop a:hover {
                  color: red;
                }

                .totop a:active {
                  color: gray;
                }
                .totop a:focus{
                  color: gray;
                }

  /****************************/

#c2016 { /* durchsichtiger Button */
text-align: center;  line-height: 80px;
font-size: 1.0em; font-family: Arial, Helvetica, sans-serif;

width:120px; height:80px;

margin: 5px 5px;
border-radius: 2px;

box-shadow:-4px 4px 8px #333333, inset -1px 0px 1px white;
}


.butt{ text-align: center; line-height:80px;
  font-size: 1.0em; font-family: Arial, Helvetica, sans-serif;
  width:120px; height:80px;
  margin: 15px 5px;
  border-radius: 2px;
  background: rgb(0, 160, 250);
  background: rgba(0, 160, 250, 0.6);
}

.butt-blau{ text-align: center; line-height:80px;
  font-size: 1.0em; font-family: Arial, Helvetica, sans-serif;
  width:120px; height:80px;
  margin: 15px 5px;
  border-radius: 2px;
  background: rgb(0, 100, 250);
  background: rgba(0, 100, 250, 0.6);
}

.butt-grun{ text-align: center; line-height:80px;
  font-size: 1.0em; font-family: Arial, Helvetica, sans-serif;
  width:120px; height:80px;
  margin: 15px 5px;
  border-radius: 2px;
  background: rgb(0, 200, 220);
  background: rgba(0, 200, 220, 0.6);
}



a.butt1:hover  {color: yellow; background-image:url(butt1.jpg); }
a.butt2:hover  {color: yellow; background-image:url(butt2.jpg); }
a.butt3:hover  {color: yellow; background-image:url(butt3.jpg); }
a.butt4:hover  {color: yellow; background-image:url(butt4.jpg); }
a.butt5:hover  {color: yellow; background-image:url(butt5.jpg); }
a.butt6:hover  {color: yellow; background-image:url(butt6.jpg); }
a.butt7:hover  {color: yellow; background-image:url(butt7.jpg); }
a.butt8:hover  {color: yellow; background-image:url(butt8.jpg); }
a.butt9:hover  {color: yellow; background-image:url(butt9.jpg); }