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

html, body{
scroll-behavior: smooth;
}

 body{
font-family: Arial, Helvetica, sans-serif;
margin: 5px auto; max-width: 69em;
}

#startseite{
  background-color: rgb(50, 50, 50);
  background-image: url('essen.jpg');

   background-position: center 50px ; /* center center - alles mittig*/
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
}

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

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

#logo1 { margin: 0.5em 0em 0.5em .7em;
font-size: 1.2em; font-weight: bold; color: white;
/*text-shadow: black -2px 3px 4px;*/
}


#link1 {
        font-size: 1.1em; font-weight: bold;
        margin: 1.8em .5em ;
        /* padding: 0.3em;  bezieht sich auf hinterlegte Farbe
        background-color: white; */
        text-align: center;
        /* transform: skewY(-6deg);
        transform: rotate(-4.5deg); */
      /*  width: 5em;  bezieht sich nur auf hinterlegte Farbe,
        die Breite des Textes ist durch em festgelegt */
     }




.linktest {

  margin: 1.1em .2em ;

    transform: rotate(-4.5deg);
  }

  #link5 {
    font-size: 1.1em;
    background-color: green;
    text-align: center;
    transform: rotate(-4.5deg);
  }


/******* Allgemein Anweisungen **********
  article { clear: both;
      background-color: white;
      margin: 1em; padding: 0.5em 2em;
   } */

  section {
      padding: 2em 2em;
  }

h1 { font-size: 2em; font-weight: normal; text-align: center}
h2 { font-size: 1.8em; font-weight: bold; color: grey; text-align: center;}
h4 { font-size: 1.0em; font-weight: lighter; text-align: center}

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



  a {font-size: 1.1em; color: white; text-decoration: none}
  a img {text-decoration: none; border: none;}

  p {margin: 1em; color: black; }

       a:hover {color: red;
        /* text-decoration: underline red 2px;
       	 text-underline-position: under;  (mehr Abstand zum Text) */

       }

  

  /******************************************************
          Bilder mit Text drunter, verlinkt
********************************************************/

.boxmittig {
     margin-top: 8em;
     display: flex;
     flex-direction: row; /* standard, kann man weglassen */
     flex-wrap: wrap;
     justify-content: center;
}


.einzelbox {
     box-sizing:border-box;

     background-color: /*rgba(60, 60, 60, 0.5);*/
     border-bottom: 1px solid white;
     width: 180px; /* Breite schrumpft nicht */
     margin: 15px; /* Abstand zwischen den boxen */
     /* flex-wrap: wrap;  macht Text unter Bild */
/*transition: transform 0.2s;*/

}
 /*.einzelbox:hover {transform: scale(1.05, 1.05);}   breite, höhe */


.fotos img{
  border-radius: 100%; /* rund */
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;

  border: 2px solid white;
 width: 100%; /* in box passend */
 height: auto;
 object-fit: cover;
transition:  .3s ease-out;

}


.fotos img:hover {transform: scale(1.03, 1.03);}


.text {letter-spacing: 0.4em;
     padding: 0.5em;
     text-align: center;
}


.text a:hover, a:focus {color: red;}

.boxkreis {
        display: flex;
         flex-wrap: nowrap;
         justify-content: center;
         /*border: 1px solid white;  aber unsichtbar */
         margin: 15px auto; /* Abstand zwischen den boxen */

       }

 .kreis {background-color: rgba(255,69,0, 0.5);
           margin:4em 1em; /* Abstand zwischen den boxen */
           width: 4em;
           height: 4em;
           border: 2.5px dotted silver;
           border-radius: 50%;
         }

  .kreisgrid {background-color: rgba(25,70,200, 0.5);
            margin:4em 1em; /* Abstand zwischen den boxen */
            width: 4em;
            height: 4em;
            border: 2.5px dotted silver;
            border-radius: 50%
          }

 #linktest {
         margin: 1.1em .3em ;
         transform: rotate(-4.5deg);
       }
   #linktest a:hover {background-color: lightgray; }