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

html, body{
scroll-behavior: smooth;
}

body {

font-family: Arial, Helvetica, sans-serif; font-weight: lighter;
background-color: rgb(50, 50, 50);
margin: 5px auto; max-width: 60em;
hyphens: auto;
}

img {
  max-width: 100%;
  height: auto;
}


#logo1 { margin: 0.5em 0em 0.5em .7em;
font-size: 1.2em; font-weight: bold; color: white;}



h1 {font-weight: lighter;  font-size: 1.5em; color: white; text-align: center;}
h2 {font-weight: lighter;  font-size: 1.3em; color: white; text-align: center;}
h3 {font-weight: lighter;  font-size: 1.1em; color: white; text-align: left;; margin-left: 1em;}
h4 { font-weight: lighter; font-size: 1.0em; color: white; text-align: center}

td, u, ul, ol { font-family: Arial, Helvetica; color: white}

a { display: block;
font-family: Arial, Helvetica; color: white; text-decoration: none}

/**************************************************
                  Boot
***************************************************/

/* Untermenü */

.untermenu {
  text-align: center;/* margin - Rand bzw Abstand zwischen den boxen  */
  margin: 1em;  /* abstand zu h1 */

}
.untermenu li{
  color: lightgray;

  font-size: 1.2em;
  display: inline; /* li nebeneinander anzeigen */
  margin: .2em; /*Abstand zw li-elementen */
  padding: 0em;
}
.untermenu a{
  color: lightgray;
  padding: .2em 0;  /***  1=ob unt, 2= re li ***/
  /*border-bottom: 1px solid lightgray;*/

  display: inline;
}
.untermenu li a:hover {
  color: lightblue;
}

.untermenu li a {
  text-decoration: underline;
  text-underline-position: under;
}
.untermenu li a:focus {
    color: white;
  }
.untermenu li a:active{
    color: white;
}
hr {    /* Linie */
    background-color: white;
     padding: .0rem;
     color: white;
     margin: .6rem;
  }

/* Ende Untermenü */

.boot-txt {
  color: white; font-size: 1rem;
      line-height: 140%;

       margin: .6rem; /* Abstand zwischen den boxen */
       padding: .6rem;
  columns: 2 250px; /*2-spaltige Darstellung */
column-gap: 3em;
}

.boot-item {color: white; font-size: .9rem;
    line-height: 140%;
     max-width: 400px; /* Breite schrumpft nicht */
     margin: .6rem; /* Abstand zwischen den boxen */
     padding-bottom: .6rem;
     }


.boot-img {
  margin-bottom: .4em;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}


.boxmittig {
      display: flex;
      flex-direction: row; /* standard, kann man weglassen */
      flex-wrap: wrap;
      justify-content: center;
max-width: 60em;

 }



/*************** Arbeiten ***************/
.foto{
   text-align: center;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    border:10px solid transparent;
    float:left;
}

.fotoeinzel{

   text-align: center;
    width:60%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin: 0 auto;

}


.fotoseich{
  display: flex;
			flex-direction: row; /* standard, kann man weglassen */
			flex-wrap: wrap;
			justify-content: center;
}

.einzeleich {
			box-sizing:border-box;
			width: 80%; /* Breite schrumpft nicht */
			margin: 2em; /* Abstand zwischen den boxen */
  		/* flex-wrap: wrap;  macht Text unter Bild */
}

.text2 {   text-align: center;
              max-width: 100%;
              margin: 0.8em 0 2em 0;
              }


.haupt{

  max-width: 100%;
  font-size: 1.1em; font-family: Arial, Helvetica; text-align: center;
  margin: 10px 0px;
	padding: 10px 3px;
  background: rgb(90, 90, 90);
  clear:both;
}

/*******nach oben knopf ********/
  .totop {
    font-size: 2.2em;
     position: fixed;
     bottom: 35px;
     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: gray;
  }

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