main {
  overflow: hidden;
  background:#f8f8f6;
  min-height: 100vh;
}

/*Styling of headings*/
@media screen and (width > 992px) {
  h1 {
    font-size: 2em;
  }
}

@media screen and (576px < width <= 992px) {
  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.25em;
  }
}

@media screen and (width <= 576px) {
  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.25em;
  }
}

/*Styling of buttons*/
.button {
  display: inline-block;
  color:#586871;
  text-decoration: none;
}

.button:hover {
  background-color: #a6adb1;
  color: white;
  transition: color 0.5s, background-color 0.5s;
}

@media screen and (width > 992px) {
  .button {
    border-radius: 10px;
    border: 2px solid #586871;
    padding:10px;
    margin: 30px 0px;
  }
}

@media screen and (width <= 992px) {
  .button {
    border-radius: 10px;
    border: 3px solid #586871;
    padding:10px;
    margin: 30px 0px;
  }
}


/*Styling of underline svg-stroke*/

.underline {
  position:relative;
  display: inline-block;
}

.underline svg {
  position: absolute;
  top: 1.1em;
  left: 0;
  width: 100%;
  overflow: visible;
}

.underline svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 126.3;
  stroke-dashoffset: 126.3;
}

.visible {
  animation: dash 0.75s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/*Styling of page-loading screen*/

#page-loading-screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: whitesmoke;
  z-index: 20;
}

#page-loading-screen > svg {
  height: 100%; 
  width: 100%;
}

@media screen and (width > 576px) {
  #c1 {
    cx: calc(50% - 180px);
    cy: 50%;
    r: 15px;
    fill: #1b85b8;
    animation: resize 1s 0s alternate ease-in-out infinite;
  }

  #c2 {
    cx: calc(50% - 90px);
    cy: 50%;
    r: 15px;
    fill: #5a5255;
    animation: resize 1s -0.2s alternate ease-in-out infinite;
  }

  #c3 {
    cx: 50%;
    cy: 50%;
    r: 15px;
    fill: #559e83;
    animation: resize 1s -0.4s alternate ease-in-out infinite;
  }

  #c4 {
    cx: calc(50% + 90px);
    cy: 50%;
    r: 15px;
    fill: #ae5a41;
    animation: resize 1s -0.6s alternate ease-in-out infinite;
  }

  #c5 {
    cx: calc(50% + 180px);
    cy: 50%;
    r: 15px;
    fill: #c3cb71;
    animation: resize 1s -0.8s alternate ease-in-out infinite;
  }

  @keyframes resize {
    from { r: 15px; }
    to { r: 25px; }
  }
}

@media screen and (width <= 576px) {
  #c1 {
    cx: calc(50% - 120px);
    cy: 50%;
    r: 10px;
    fill: #1b85b8;
    animation: resize 1s 0s alternate ease-in-out infinite;
  }

  #c2 {
    cx: calc(50% - 60px);
    cy: 50%;
    r: 10px;
    fill: #5a5255;
    animation: resize 1s -0.2s alternate ease-in-out infinite;
  }

  #c3 {
    cx: 50%;
    cy: 50%;
    r: 10px;
    fill: #559e83;
    animation: resize 1s -0.4s alternate ease-in-out infinite;
  }

  #c4 {
    cx: calc(50% + 60px);
    cy: 50%;
    r: 10px;
    fill: #ae5a41;
    animation: resize 1s -0.6s alternate ease-in-out infinite;
  }

  #c5 {
    cx: calc(50% + 120px);
    cy: 50%;
    r: 10px;
    fill: #c3cb71;
    animation: resize 1s -0.8s alternate ease-in-out infinite;
  }

  @keyframes resize {
    from { r: 10px; }
    to { r: 18px; }
  }
}

/*Styling of background and portfolio-frames*/

#background-placeholder {
  width:100vw;
  height:100vh;
  position:fixed;
  background-image:url('/logo_back.png');
  background-repeat:no-repeat;
  background-position:center;
  background-color:#f8f8f6;
  background-size:contain;
  z-index:-10;
}

@media screen and (width > 992px) {
  #abiball, 
  #bewerbung, 
  #businessportraits, 
  #einschulung, 
  #erotik, 
  #familien, 
  #familienfeiern, 
  #fitness, 
  #fotobox, 
  #grossfamilien,
  #gutscheine,
  #hochzeit,  
  #hochzeit555, 
  #immobilien, 
  #jga, 
  #kids, 
  #konfirmation, 
  #merchandise, 
  #mitarbeiterportraits, 
  #neugeborene, 
  #paerchen, 
  #passbilder, 
  #portraits, 
  #probeshooting, 
  #raeume, 
  #regenbogen,
  #schwanger, 
  #singles, 
  #spiris,
  #sternenkinder, 
  #taufe, 
  #tiere,
  #vereine,
  #zukunftstag {
    padding:5vh 5vh 5vh 5vh;
  }

  #retuschen, 
  #schulen {
    padding: 3.5em 5vh 5vh 5vh;
  }

}

@media screen and (576px < width <= 992px) {
  #retuschen, 
  #schulen {
    padding: 10.5em 0 0 0;
  }

}

@media screen and (width <= 576px) {
  #retuschen, 
  #schulen {
    padding: 6.5em 0 0 0;
  }

}

/*Styling of "Willkommen" page*/

@media screen and (width <= 576px) {
  .frontpage-picture-flexbox {
    display:grid;
    height:fit-content;
    overflow:scroll;
    width:100vw;
    grid-template-columns:repeat(21,calc(100vw/3));
    grid-template-rows:repeat(3, calc(100vw/4));
    margin-top:6.5em;
  }

  .frontpage-picture-container-1-1 {
    flex: 1 1 30vh;
    height: calc(100vw/4);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-1-2 {
    flex: 1 1 30vh;
    height: calc(2*100vw/4);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-2-2 {
    flex: 1 1 30vh;
    height: calc(2*100vw/4);
    width:100%;
    overflow: hidden;
  }

  #left-half {
    position:absolute;
    height:calc(3*100vw/4);
    width:50vw;
  }

  #right-half {
    position:absolute;
    left:50vw;
    height:calc(3*100vw/4);
    width:50vw;
  }

  .flex-content-frame {
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    align-items:center;
    width:100vw;
    padding: 50px 25px;
  }

  .flex-content-frame img {
    width:80vw;
    margin:0;
    aspect-ratio:auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .flex-content-frame p {
    font-size:1.5em;
    width:80%;
    margin: 100px auto;
  }

  .content-frame {
    box-sizing: border-box;
    font-size: 1.5em;
    width: 100vw;
    padding: 50px 25px;
  }

  .content-frame > p {
    margin: 0.75em 0;
    font-size: 1em;
  }
}

@media screen and (576px < width <= 992px) {
  .frontpage-picture-flexbox {
    display:grid;
    height:fit-content;
    overflow:scroll;
    width:100vw;
    grid-template-columns:repeat(21,calc(100vw/3));
    grid-template-rows:repeat(3, calc(100vw/4));
    margin-top:10.5em;
  }

  .frontpage-picture-container-1-1 {
    flex: 1 1 30vh;
    height: calc(100vw/4);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-1-2 {
    flex: 1 1 30vh;
    height: calc(2*100vw/4);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-2-2 {
    flex: 1 1 30vh;
    height: calc(2*100vw/4);
    width:100%;
    overflow: hidden;
  }

  #left-half {
    position:absolute;
    height:calc(3*100vw/4);
    width:50vw;
  }

  #right-half {
    position:absolute;
    left:50vw;
    height:calc(3*100vw/4);
    width:50vw;
  }

  .flex-content-frame {
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    align-items:center;
    width:100vw;
    padding: 100px 100px;
  }

  .flex-content-frame img {
    width:80vw;
    margin:0;
    aspect-ratio:auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .flex-content-frame p {
    font-size:2em;
    width:80%;
    margin: 100px auto;
  }

  .content-frame {
    box-sizing: border-box;
    font-size: 2em;
    width: 100vw;
    padding: 100px 100px;
  }

  .content-frame > p {
    margin: 0.75em 0;
    font-size: 1em;
  }
}

@media screen and (width > 992px) {
  .frontpage-picture-flexbox {
    display:grid;
    height:fit-content;
    overflow:scroll;
    width:100vw;
    grid-template-columns:repeat(21,calc(100vw/7));
    grid-template-rows:repeat(3, calc(100vw/10));
    margin-top:3.2em;
  }

  .frontpage-picture-container-1-1 {
    flex: 1 1 30vh;
    height: calc(100vw/10);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-1-2 {
    flex: 1 1 30vh;
    height: calc(100vw/5);
    width:100%;
    overflow: hidden;
  }

  .frontpage-picture-container-2-2 {
    flex: 1 1 30vh;
    height: calc(100vw/5);
    width:100%;
    overflow: hidden;
  }  

  #left-half {
    position:absolute;
    height:calc(3*100vw/10);
    width:50vw;
    cursor: url('/arrow_left.png'), pointer;
  }

  #right-half {
    position:absolute;
    left:50vw;
    height:calc(3*100vw/10);
    width:50vw;
    cursor: url('/arrow_right.png'), pointer;
  }

  .flex-content-frame {
    box-sizing: border-box;
    display:flex;
    align-items:center;
    width:100vw;
    padding: 100px 100px;
  }

  .flex-content-frame img {
    width:40vw;
    margin:0;
    aspect-ratio:auto;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }

  .flex-content-frame p {
    font-size:2em;
    width:80%;
    margin:20% auto 10%;
  }

  .content-frame {
    box-sizing: border-box;
    font-size: 2em;
    width: 100vw;
    padding: 100px 100px;
  }

  .content-frame > p {
    margin: 0.75em 0;
    font-size: 1em;
  }
}

.frontpage-picture {
  width: calc(100% - 10px);
  height:calc(100% - 10px);
  padding:5px;
  object-fit: cover;
}

/* Styling of portfolio pages*/

.introduction-text-only > p{
  display: block;
  padding:10px 0;
}

@media screen and (width > 992px) {
  .introduction-container {
    display:flex;
    flex-wrap: nowrap;
    min-height: calc(100vh - 3.5em - 5vh);
    width:90vw;
    padding: 3.5em 5vw 5vh 5vw;
    background-color:#f8f8f6;
  }

  .introduction-text-only {
    font-size: 2em;
    padding: 20vh 5vw 0 5vw;
  }

  .introduction-description {
    font-size: 2em;
    max-width: 35vw;
    padding: 20vh 0 0 5vw;
  }

  .introduction-collage {
    padding: 35vh 0 0;
    max-width: 100vw;
  }

  .banner {
    display:flex;
    flex-direction: row;
    column-gap:10px;
    text-align: center;
    margin : 0 auto;
  }

  .banner > img {
    max-width: 14vw;
    max-height: 20vh;
  }
}

@media screen and (576px < width <= 992px) {
  .introduction-container {
    display:flex;
    flex-wrap: nowrap;
    min-height: calc(100vh - 10.5em - 5vh);
    width:90vw;
    padding: 10.5em 5vw 5vh 5vw;
    background-color:#f8f8f6;
  }

  .introduction-text-only {
    font-size: 2em;
    padding: 20vh 0 0 0;
  }

  .introduction-description {
    font-size: 2em;
    padding: 20vh 0 0 0;
  }

  .introduction-collage {
    display: none;
  }
}

@media screen and (width <= 576px) {
  .introduction-container {
    display:flex;
    flex-wrap: nowrap;
    min-height: calc(100vh - 6.5em - 5vh);
    width:90vw;
    padding: 6.5em 5vw 5vh 5vw;
    background-color:#f8f8f6;
  }

  .introduction-text-only {
    font-size: 1.5em;
    padding: 10vh 0 0 0;
  }

  .introduction-description {
    font-size: 1.5em;
    padding: 20vh 0 0 0;
  }

  .introduction-collage {
    display: none;
  }
}

.portfolio-container-left {
  display: flex;
  align-items: center;
  overflow-y: hidden;
  overflow-x: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.portfolio-container-right {
  display: flex;
  align-items: center;
  overflow-y: hidden;
  overflow-x: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

@media screen and (width <= 992px) {
  .portfolio-container-left, .portfolio-container-right {
      flex-direction: column;
  }
}

@media screen and (width > 992px) {
  .portfolio-container-left {
      flex-direction: row;
  }

  .portfolio-container-right {
      flex-direction: row-reverse;
  }
}

.img-overlay-container {
  position: relative;
  display: flex;
  overflow: visible;
  align-self: stretch;
}

.img-container {
  position: relative;
  display: flex;
  overflow: visible;
  align-self: stretch;
}
@media screen and (width > 992px) {
  .img-overlay-container a {
    display:flex;
    overflow: hidden;
    color: #3C3A3D;
  }

  .img-overlay-container:hover { 
    background-color: #f8f8f6;
  }

  .img-overlay-container:hover .overlay-img, .img-overlay-container:hover .slider-img{
    opacity: 0.4;
  }

  .img-overlay-container:hover .overlay-text, .overlay-text:hover {                 
    visibility: visible;
    text-decoration: none;
  }
}

.overlay-text {
  visibility: hidden;                 
  position: absolute;
  width: 100%;
  text-decoration: none;
  font-size: 3em;
  text-align: center;
  bottom: 40%;
}

.overlay-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (width <= 992px) {
  .overlay-img {
    min-height: 90vh;
  }

  .overlay-img.narrow {
    width: 100vw;
  }

  .overlay-img.wide {
    width: 100vw;
  }
}

@media screen and (width > 992px) {
  .overlay-img {
    min-height: 90vh;
  }

  .overlay-img.narrow {
    width: 40vw;
  }
  
  .overlay-img.wide {
    width: 55vw;
  }
}

@media screen and (width <= 576px) {
  .description-container {
    position:static;
    padding:15vh 5vw;
    width: 90vw;
    font-size:1.5em;
    bottom: 0;
  }
}

@media screen and (576px < width <= 992px) {
  .description-container {
    position:static;
    padding:15vh 5vw;
    width: 90vw;
    font-size:2em;
    bottom: 0;
  }
}

@media screen and (width > 992px) {
  .description-container {
    position:static;
    padding:5vw;
    font-size:2em;
  }
}

.portfolio-description {
  margin-top:2vh;
}

.portfolio-price {
  display:flex;
  flex-direction:row;
  column-gap: 50px;
  justify-content:flex-end;
  align-items:end;
  overflow:hidden;
  margin-top:1.5vh;
}

.price {
  font-size: 1.3em;
  text-align: end;
  position: relative;
  z-index: 0;
}

.price::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 0px;
  width: 80%;
  height: 14px;
  transform: skew(-12deg) translateX(0%);
  background: rgba(103, 212, 245, 0.5);
  z-index: -1;
}

/* Styling of "Hochzeiten" box*/

.portfolio-box-container {
  display: flex;
  background:white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.slider-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (width > 992px) {
  .portfolio-box-container {
    height: var(--maxBoxHeight);
    flex-direction: row;
  }

  .portfolio-slider {
    height: 100%;
    overflow: hidden;
  }

  .slider-img {
    height: 100%;
    width: 35vw;
  }

  .portfolio-box {
    display:flex;
    align-items:flex-start;
    overflow-y:hidden;
    overflow-x:auto;
    flex-direction:column;
    justify-content:space-evenly;
    width: 100%;
  }
}

@media screen and (width <= 992px) {
  .portfolio-box-container {
    flex-direction: column;
  }

  .portfolio-slider {
    height: 100vh;
    overflow: hidden;
  }

  .slider-img {
    width: 100vw;
    height: 100vh;
  }

  .portfolio-box {
    display:flex;
    align-items:flex-start;
    overflow-y:hidden;
    overflow-x:auto;
    flex-direction:column;
    justify-content:space-evenly;
    width: 100%;
    height: var(--maxBoxHeight);
  }
}

.portfolio-slider.one > div{
  transform: translateY(0%);
  transition: transform 0.2s ease-in-out;
}

.portfolio-slider.two > div{
  transform: translateY(-100%);
  transition: transform 0.2s ease-in-out;
}

.portfolio-slider.three > div{
  transform: translateY(-200%);
  transition: transform 0.2s ease-in-out;
}

.portfolio-slider.four > div{
  transform: translateY(-300%);
  transition: transform 0.2s ease-in-out;
}

.portfolio-box-header {
  width: 95%;
  margin: 0 auto;
  text-align:center;
}

.portfolio-switch {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.portfolio-switch > div {
  cursor: pointer;
  position: relative;
  background-color: transparent;
}

.portfolio-switch > div > p {
  position: relative;
}

.portfolio-switch > div.active::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 0px;
  width: 80%;
  height: 14px;
  transform: skew(-12deg) translateX(0%);
  background: rgba(103, 212, 245, 0.5);
}

.portfolio-box-price {
  font-size: 1.3em;
  float: right;
  position: relative;
  width: fit-content;
  z-index: 0;
  margin-bottom: 10px;
}

.portfolio-box-price::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 0px;
  width: 80%;
  height: 14px;
  transform: skew(-12deg) translateX(0%);
  background: rgba(103, 212, 245, 0.5);
  z-index: -1;
}

@media screen and (width > 992px) {
  .portfolio-box-header {
    font-size: 2em;
    padding: 50px 0px 0 0px;
  }

  .portfolio-switch {
    margin-top: 20px;
  }

  .portfolio-box-details {
    font-size: 1.5em;
    padding: 100px 50px 200px 50px;
  }
}

@media screen and (576px < width <= 992px) {
  .portfolio-box-header {
    font-size: 2em;
    padding: 75px 0px 0 0px;
  }

  .portfolio-switch {
    margin-top: 40px;
  }

  .portfolio-box-details {
    font-size: 1.5em;
    padding: 100px 50px 200px 50px;
  }
}

@media screen and (width <= 576px) {
  .portfolio-box-header {
    font-size: 1.5em;
    padding: 75px 0px 0 0px;
  }

  .portfolio-switch {
    margin-top: 40px;
  }

  .portfolio-box-details {
    font-size: 1em;
    padding: 100px 50px 200px 50px;
  }
}

/* Styling of "Gästebuch" section*/
/*
#guestbook {
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
}

@media screen and (width > 62em) {
  #guestbook {
    width: 45vw;
    padding-top: 2em;
    padding-bottom: 2em;
  }

  #guestbook > h2 {
    font-size: 2.5em;
  }

  .guest-section {
    font-size: 1.2em;
  }

  .guest-section > h2 {
    padding-bottom: 20px;
    font-size: 1.5em;
  }
}

@media screen and (width <= 62em) {
  #guestbook {
    width: 80vw;
    padding-top: 4em;
    padding-bottom: 4em;
  }

  #guestbook > h2 {
    font-size: 3em;
  }

  .guest-section {
    font-size: 1.8em;
  }

  .guest-section > h2 {
    padding-bottom: 20px;
    font-size: 1.3em;
  }
}

#guestbook > h2 {
  font-weight: normal;
  padding-bottom: 75px;
}

.guest-section {
  padding-bottom: 50px;
}

.guest-section > h2 {
  font-weight: normal;
}

.guest-section > p {
  padding-bottom: 10px;
}
*/
/* Styling of "Zur Person" page*/

#person {
  min-height: 100vh;
  margin: 0 auto;
}

@media screen and (width > 992px) {
  #person {
    width: 45vw;
    padding-top: 10em;
    padding-bottom: 2em;
  }

  #person > h1 {
    font-size: 2.5em;
    padding-bottom: 3vh;
  }

  #person > p {
    font-size: 1.75em;
    padding-bottom: 10px;
  }
}

@media screen and (576px < width <= 992px) {
  #person {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #person > h1 {
    font-size: 2.5em;
    padding-bottom: 3vh;
  }

  #person > p {
    font-size: 1.75em;
    padding-bottom: 10px;
  }
}

@media screen and (width <= 576px) {
  #person {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #person > h1 {
    font-size: 2em;
    padding-bottom: 3vh;
  }

  #person > p {
    font-size: 1.25em;
    padding-bottom: 10px;
  }
}

#person > h1 {
  font-weight: normal;
}

/* Styling of FAQ page*/

#faq {
  min-height: 100vh;
  margin: 0 auto;
}

@media screen and (width > 992px) {
  #faq {
    width: 45vw;
    padding-top: 10em;
    padding-bottom: 2em;
  }

  #faq > h1 {
    font-size: 2.5em;
    padding-bottom: 75px;
  }

  .faq-section {
    font-size: 1.75em;
    padding-bottom: 40px;
  }

  .faq-section > h2 {
    padding-bottom: 20px;
    font-size: 1.25em;
  }
}

@media screen and (576px < width <= 992px) {
  #faq {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #faq > h1 {
    font-size: 2.5em;
    padding-bottom: 50px;
  }

  .faq-section {
    font-size: 1.75em;
    padding-bottom: 40px;
  }

  .faq-section > h2 {
    padding-bottom: 20px;
    font-size: 1.25em;
  }
}

@media screen and (width <= 576px) {
  #faq {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #faq > h1 {
    font-size: 2em;
    padding-bottom: 50px;
  }

  .faq-section {
    font-size: 1.25em;
    padding-bottom: 40px;
  }

  .faq-section > h2 {
    padding-bottom: 20px;
    font-size: 1.25em;
  }
}

#faq > h1 {
  font-weight: normal;
}

.faq-section > h2 {
  font-weight: normal;
}

/* Styling of "Kontakt/Impressum page*/

#kontakt-impressum {
  min-height: 100vh;
  margin: 0 auto;
}

@media screen and (width > 992px) {
  #kontakt-impressum {
    width: 45vw;
    padding-top: 10em;
    padding-bottom: 2em;
  }

  #kontakt-impressum > h1 {
    font-size: 2.5em;
    padding-bottom: 50px;
  }

  #kontakt-impressum > div {
    padding-bottom: 40px;
    font-size: 1.2em;
  }
}

@media screen and (576px < width <= 992px) {
  #kontakt-impressum {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #kontakt-impressum > h1 {
    font-size: 2.5em;
    padding-bottom: 50px;
  }

  #kontakt-impressum > div {
    padding-bottom: 40px;
    font-size: 1.2em;
  }
}

@media screen and (width <= 576px) {
  #kontakt-impressum {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #kontakt-impressum > h1 {
    font-size: 2em;
    padding-bottom: 50px;
  }

  #kontakt-impressum > div {
    padding-bottom: 40px;
    font-size: 1em;
  }
}

#kontakt-impressum > h1 {
  font-weight: normal;
}

/* Styling of Datenschutz page*/

#datenschutz {
  min-height: 100vh;
  margin: 0 auto;
}

@media screen and (width > 992px) {
  #datenschutz {
    width: 45vw;
    padding-top: 10em;
    padding-bottom: 2em;
    font-size: 1.2em;
  }

  #datenschutz h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
  }

  #datenschutz h2 {
    font-size: 2em;
    margin-bottom: 0.3em;
  }

  #datenschutz h3 {
    font-size: 1.5em;
    margin-bottom: 0.3em;
  }

   #datenschutz h4 {
    font-size: 1.3em;
    margin-bottom: 0.3em;
  }

  #datenschutz div {
    margin-bottom: 2em;
  }

  #datenschutz p {
    margin: 0.5em 0;
  }
}

@media screen and (576px < width <= 992px) {
  #datenschutz {
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
    font-size: 1.2em;
  }

  #datenschutz h1 {
    font-size: 2.5em;
    margin-bottom: 0.75em;
  }

  #datenschutz h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
  }

  #datenschutz h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
  }

   #datenschutz h4 {
    font-size: 1.3em;
    margin-bottom: 0.3em;
  }

  #datenschutz div {
    margin-bottom: 2em;
  }

  #datenschutz p {
    margin: 0.8em 0;
  }
}

@media screen and (width <= 576px) {
  #datenschutz {
    font-size: 1em;
    width: 80vw;
    padding-top: 10.5em;
    padding-bottom: 2em;
  }

  #datenschutz h1 {
    font-size: 2em;
    margin-bottom: 0.75em;
  }

  #datenschutz h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
  }

  #datenschutz h3 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
  }

   #datenschutz h4 {
    font-size: 1em;
    margin-bottom: 0.3em;
  }

  #datenschutz div {
    font-size: 1em;
    margin-bottom: 2em;
  }

  #datenschutz p {
    font-size: 1em;
    margin: 0.8em 0;
  }
}

#datenschutz h1 {
  font-weight: normal;
}

#datenschutz h2 {
  font-weight: normal;
}

#datenschutz h3 {
  font-weight: normal;
}

/*Styling of footer*/

@media screen and (width > 992px) {
  .footer {
    width: 90vw;
    background-color:#2f2f2f;
    z-index:10;
    display:flex;
    color:white;
    justify-content:space-between;
    align-items:center;
    padding:50px 5vw 50px 5vw;
  }

  .icon-container {
    width: 25%;
  }

  .icon {
    padding: 10px;
  }

  .icon > svg {
    width: 25px;
    height: 25px;
  }

  .logo-container {
    width: 50%;
    font-size: 2em;
    text-align: center;
  }

  .link-container {
    width: 25%;
  }

  .link-container {
    font-size: 1.25em;
  }

  .link-container > a, a:visited {
    padding: 5px;
  }
}

@media screen and (576px < width <= 992px) {
  .footer {
    width: calc(100vw - 60px);
    background-color:#2f2f2f;
    z-index:10;
    display:flex;
    color:white;
    justify-content:space-between;
    align-items:center;
    padding:50px 30px 50px 30px;
  }

  .icon-container {
    width: 60%;
  }

  .icon {
    padding: 15px;
  }

  .icon > svg {
    width: 40px;
    height: 40px;
  }

  .logo-container {
    display: none;
  }

  .link-container {
    width: 40%;
  }

  .link-container {
    font-size: 1.3em;
  }

  .link-container > a, a:visited {
    padding: 10px 5px;
  }
}

@media screen and (width <= 576px) {
  .footer {
    width: calc(100vw - 60px);;
    background-color:#2f2f2f;
    z-index:10;
    display:flex;
    color:white;
    justify-content:space-between;
    align-items:center;
    padding:50px 30px 50px 30px;
  }

  .icon-container {
    width: 40%;
  }

  .icon {
    padding: 15px;
  }

  .icon > svg {
    width: 30px;
    height: 30px;
  }

  .logo-container {
    display: none;
  }

  .link-container {
    width: 60%;
  }

  .link-container {
    font-size: 1.3em;
  }

  .link-container > a, a:visited {
    padding: 10px 5px;
  }
}

.icon-container {
  display: flex;
  flex-wrap: wrap;
}

.icon-container > a{
  text-decoration: none;
}

.icon {
  color: white;
}

.link-container {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.link-container > a, a:visited {
  color: currentColor;
  text-decoration: none;
}