/** ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 
 
    content.css  
    wird in style.css per @import eingebunden  

    ======================================= */


/**
  * Hyperlinks im Inhaltsbereich gestalten
  */
  .site-content a:link { color: var(--linkfarbe); }
  .site-content a:visited { color: var(--linkfarbe-visited); }
  
  .site-content a:hover, .site-content a:focus { color: var(--linkfarbe-hover-focus); }
  .site-content a:active { color: var(--linkfarbe-active); }
  
  /* .site-content a[target="_blank"]::after {
    content: " (in neuem Tab oder Fenster)";
  } */
  .site-content a[target="_blank"]::after {
    content: "\00A0\2197";
  }
  /* nicht bei buttons */
   .button_artsy a[target="_blank"]::after {
    content: "";
  }


.seitentitel {
    display: flex;
    justify-content: ;
}

.seiteninhalt h1 {
    font-size: 1.1rem;
}
.seitentitel h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    }

.fontred {
    color: red;
}

/* Preisangaben */
/* Unicode Euro und geschütztes Leerzeichen */
.preis-soloseite::before {
     content: "\20AC\00A0";
 }

 .preis-soloseite {
     font-size: 1.5rem;
     font-weight: bold;
     text-align: left;
 }


@media screen and (min-width: 600px) {

.seitentitel h2 {
    font-size: 1.6rem;
   }
   .seiteninhalt h1 {
    font-size: 1.5rem;
 }
}


/*  G a l l e r y  */

.to_gallery {
    text-align: center;
}

.sprungziel-gallery {
    .margin-top: 2rem;
}

/* gallery header */
.gallery-header-content {
    display: flex;
    justify-content: space-between;
    max-width: 600px;
    margin: auto;
}

@media screen and (max-width: 799px) {
.gallerytext1 {
    text-align: center;
    font-size: 1.0rem;
}
}
@media screen and (min-width: 800px) {
.gallerytext1 {
    text-align: center;
    font-size: 1.4rem;
}
}

.gallery-site-flex {
    display: flex;
    justify-content: space-between;
      }

.gallery-site-flex-items {
     margin: 0.5rem;
}

.gallery-site-flex-items a:link,
.gallery-site-flex-items a:hover,
.gallery-site-flex-items a:visited,
.gallery-site-flex-items a:active {
    text-decoration: none;
    color: black;
   }

@media screen and (max-width: 799px) {
.gallery-site-flex-items a {
      font-size: 0.9rem;
}
}

@media screen and (min-width: 800px) {
.gallery-site-flex-items a {
      font-size: 1.1rem;
}
}

.gallery-site-flex-items img {
   max-height: 70vh;
      width: auto;
}


.gallery figcaption{
    text-align: left;
}

/* Einzelseiten Solosites */
 .about_the_work {
     display: flex;
     width: 100%;
     margin-bottom: 0.4rem;
  }

/* Abstand der Elemente ist für mobil zu groß */
@media screen and (min-width: 600px) {
   .about_the_work div:first-child {
      width: 250px;
}
}

@media screen and (max-width: 599px) {
  .about_the_work div:first-child {
      width: 130px;
 }
 }

.footer-solo {
    margin-top: 1.5rem;
}

.soloflex {
    display: flex;
    justify-content: center;
    }

.soloflex img {
    display: flex;
    max-width: 90%;
    }


    @media screen and (min-width: 850px) {

.soloflex img {
    height: 70vh;


}
}

.soloflex-items {
    display: flex;
    margin-top: 2rem;
    justify-content: space-between;
}




/*   sitemap  */

.underconstruction {
    margin-top: 2rem;
}



/* gridtest  */
/* umgebendes Element */
.intro-soloseite {
    width: 100%;
    height: 100%;
}

.soloimg {
    display: block;
    text-align: center;
}

.soloimg img {
      max-height: 65vh;
      width: auto;
      margin-top: 0.5rem;
        }

/* grid-container */

/*
.boxsolo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0;
    justify-items: center;
    background-color:var(--grau-hell);
   }
.boxsolo img {
      max-height: 65vh;
      width: auto;
      margin-top: 0.5rem;
      }
 */
/* grid items */

/*
.boxsolo .boxitemsolo {
    background-color: ;
    padding: 0rem;
   }
.boxsolo .boxitemsolo:first-child {
    grid-column: 1/6;
     }

.boxsolo .boxitemsolo:nth-child(n+2) img {
    max-height: 150px;
    width: auto;
     }
 */


/* make an offer html button  */


/* flextest */

.flextest {
    display: flex;
}

.blass-rot{
    color: var(--blass-rot);
}










  /* Ende content.css */