html {
   scroll-behavior: smooth;
}

body {
      margin: 0;
      padding: 0;
      font-family: 'comfortaa' , sans-serif;
      font-size: 1em;
      scroll-behavior: smooth;

    }

.container {
  max-width: 1024px;
  margin: 0 auto; /* zentriert den Container */
  background-color: rgb(215, 228, 195); 
      /* Der eigentliche Inhaltsbereich */
  position: relative;
  height: auto;
  overflow: clip;
}

.between {
  margin-bottom: 5em;
}



                                                 /*logo*/

.hg-gray__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
  position: relative; /* wichtig für z-index */
  z-index: 10;
  width: 100%;
  height:auto;
  padding: 2em 0em 0em 1em;
  box-sizing: border-box;
  margin-bottom: 3em;

}

.logo-wrapper {
  display: inline-block;
  text-align: center;
}

.logo {
  width: 100%;
  position:relative;
  text-align: left;
  color: rgb(20, 20, 20);
  margin-bottom: 0;
}

.logo-design {
  margin-top: 0;
  font-size: small;
 align-self: center; /* P wird zentriert im Header */
}

.a-with-dot {
  position: relative;
  display: inline-block;
  font-family: Comfortaa, sans-serif;
}

.a-with-dot::after {
  content: "";
  position: absolute;
  top: 8px; 
  left: 2px; 
  width: 6px;
  height: 6px;
  background-color: #E7511E;
  border-radius: 50%;
  pointer-events: none;
}


                                              /*slogan mit button*/
.hg-gray__slogan {
  position: relative; /* wichtig für z-index */
  z-index: 10;
  width: 100%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2em 0em 2em 1em;
  box-sizing: border-box;
}

.slogan {
  font-weight: normal;
  text-align: center;

 }

.button-einblicke {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: #A9BA1F;
  top: 90%;
  left: 10%;
  border-radius: 50%;
  transform: rotate(-20deg);
  text-decoration: none;
  position: absolute;
  color: black;
  font-size: small;
  }

.button-probono {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: #1A6494;
  top: -32%;
  left: 58%;
  border-radius: 50%;
  transform: rotate(20deg);
  text-decoration: none;
  position: absolute;
  color: black;
  text-align: center;
  font-size: small;
  }

.button-kontakt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: #E78E1E;
  top: 76%;
  left: 72%;
  border-radius: 50%;
  text-decoration: none;
  position: absolute;
  color: black;
  text-align: center;
  font-size: small;
 }

 a:hover {
  border-radius: 20px;
 }

                                                /*about me*/
.hg-gray__aboutme {
  display: flex;
  flex-direction: column;
  position: relative; /* wichtig für z-index */
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.4);
 padding: 2em 1em 2em 1em;
  box-sizing: border-box;
}

    .hg-gray__aboutme--probono p{
      margin-bottom: 0.5em;
    }

    .aboutme-logo {
      text-align: center;
    }

    .o-with-dot {
      position: relative;
      display: inline-block;
      font-family: Comfortaa, sans-serif;
    }

    .o-with-dot::after {
      content: "";
      position: absolute;
      top: 11px;
      left: 4px;
      width: 6px;
      height: 6px;
      background-color: #1A6494;
      border-radius: 50%;
      pointer-events: none;
    }

.hg-gray__aboutme--text {
  line-height: 1.6em;
  width: 100%;
}

.button-name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background: #E85221;
  top: 95%;
  left: 72%;
  border-radius: 50%;
  transform: rotate(20deg);
  text-decoration: none;
  position: absolute;
  color: black;
  font-size: small;
  text-align: center;
  line-height: 1.2em;
  }


                                                  /*gallery*/
.hg-gray__gallery {
  position: relative; /* wichtig für z-index */
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2em 1em;
  box-sizing: border-box;
}
 
.gallery-headline {
  text-align: center;
  font-size: 1.3em;
  max-width: 100%;
}

.i-with-dot {
  position: relative;
  display: inline-block;
  font-family: Comfortaa, sans-serif;
 }

.i-with-dot::after {
  content: "";
  position: absolute; 
  top: 0.9px; 
  left: 0.5px; 
  height: 6px;
  width: 6px;
  background-color: #A9BA1F;
  border-radius: 50%;
  pointer-events: none;
 }

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap; /* Bilder werden umbrochen */
  list-style: none;
  padding: 0;
  box-sizing: border-box;
}

.pic {
  text-align: center;
}

img {
  width: auto;
  height: auto;
  margin: 0.2em 0em;
}

.pic__gray {
  margin: 0;
  text-align: center;
  width: 300px;
  height: auto;
  box-shadow: 3px 3px 5px rgba( 0,0,0,0.3);
  filter: grayscale(100%);
  transition: width 0.3s ease;
}

.pic:hover .text-images {
  height: auto; 
  opacity: 1;
}

.pic__gray:hover {
  filter: none;
 }



.text-images {
  color: #A9BA1F;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
  height: 0; /* Anfangs versteckt */
  overflow: hidden; 
  /*Verhindert, dass Text über den Rand 
  hinausgeht */
  opacity: 0; /* Anfangs unsichtbar */
  transition: height 5s ease, opacity 1s ease; 
}


                                              /*kontakt*/
.hg-gray__kontakt {
  display: flex;
  flex-direction: column;
  position: relative; /* wichtig für z-index */
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2em 1em;
  box-sizing: border-box;
}

.button-mail {
  width: 180px;
  height: 180px;
  text-decoration: none;
  color: black;
  background-color: #E78E1E;
  border-radius: 50%;
}

 .kontakt-headline {
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  max-width: 100%;
  z-index: 10;
  margin-top: 1.5em;
}

.kontakt-name{
  font-size: smaller;
  text-align: center;
  line-height: 1.6em;
  z-index: 10;
}

.t-with-dot {
  position: relative;
  display: inline-block;
  font-family: Comfortaa, sans-serif;
 }

.t-with-dot::after {
  content: "";
  position: absolute;
  top: 13.9px;
  left: 5.5px;
  width: 6px;
  height: 6px;
  background-color: #E7511E;
  border-radius: 50%;
  pointer-events: none;
}

.contact__disclaimer {
  margin-top: 3em;
  margin-bottom: 0px;
  color: rgb(0, 0, 0);
  font-size: smaller;
  text-align: center;
}


                                                      /*impressum*/
.DaIm {
  display: flex;
  position: relative; /* wichtig für z-index */
  z-index: 10;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height:4em;
  background-color: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  margin-top: -4em;

}
.protection {
  color:black;
  text-decoration: none;
}

.imprint {
  color:black;
  text-decoration: none;
}

a:protection {
  text-decoration: none;
}

a:imprint {
  text-decoration: none;
}

.ssl-logo img {
    width: 70px !important;
    height: auto !important;
}

@media (min-width: 400px) {
.button-kontakt {
  left: 77%;
 }}


 @media (min-width: 556px) {
  .logo {
  font-size: 1.3em;
}

.slogan {
  font-size: 2em;
}

.a-with-dot::after {
  top: 9px; 
  left: 3px; 
  width: 7px;
  height: 7px;
}

.o-with-dot::after {
  top: 11px; 
  left: 4px; 
  width: 7px;
  height: 7px;
}

.i-with-dot::after {
  top: -0.1px; 
  left: 0.5px; 
  width: 7px;
  height: 7px;
}

.t-with-dot::after {
  top: 12.9px; 
  left: 4.5px; 
  width: 7px;
  height: 7px;
}

.aboutme-logo{
  font-size: 1.3em;
}}


 @media (min-width: 650px) {
.logo {
  font-size: 1.5em;
}

.slogan {
  font-size: 2.3em;
}

.a-with-dot::after {
  top: 9px; 
  left: 2px; 
  width: 10px;
  height: 10px;
}

.button-einblicke {
  width: 90px;
  height: 90px;
  font-size: 1em;
}

.button-probono {
  width: 90px;
  height: 90px;
  font-size: 1em;
}

.button-kontakt {
  width: 90px;
  height: 90px;
  font-size: 1em;
}

.i-with-dot::after {
  top: -1.1px; 
  left: -0.5px; 
}

.aboutme-logo{
  font-size: 1.5em;
}

.pic__gray {
  cursor: zoom-in;
}

.pic__gray.enlarged {
  width: 500px;
  cursor: zoom-out;
}

.hg-gray__aboutme--probono{
  width: 100%;
  font-size: 1.5em;
}

.o-with-dot::after {
  top: 10px;
  left: 2px;
  width: 10px;
  height: 10px;
}

.i-with-dot::after {
  top: -2.1px;
  left: -0.5px;
  width: 10px;
  height: 10px;
}

.t-with-dot::after {
  top: 9.9px;
  left: 3.5px;
  width: 10px;
  height: 10px;
}

.gallery-headline {
  font-size: 1.5em;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; /* Bilder werden umbrochen */
  justify-content: space-evenly;
  list-style: none;
  padding: 0;
}}



 @media (min-width: 830px) {
  .text-column {
    column-count: 2; 
    column-gap: 2em;
    vertical-align: top;
    margin-top: 0em;
    margin-bottom: 1.3em;
    font-size: 1em;
}

  .text-column p{
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 1.6em;
    break-inside: avoid;
}

.hg-gray__aboutme {
  display: flex;
  flex-direction: column;
  position: relative; /* wichtig für z-index */
  z-index: 10;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:auto;
  background-color: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;}

  .button-name {
  top: 75%;
  left: 60%;
}}


 @media (min-width: 1024px) {

.button-einblicke {
  width: 110px;
  height: 110px;
  font-size: 1.3em;
}

.button-probono {
  width: 110px;
  height: 110px;
  font-size: 1.3em;
}

.button-kontakt {
  width: 110px;
  height: 110px;
  font-size: 1.3em;
}
}