/* Deklaration der globalen CSS-"Variablen" */

:root {
   --color-bg-body: gainsboro;
   --color-bg-img: linear-gradient(to top, white, gainsboro 30%, white);
   --color-bg-content: #FFF;
   --color-grundfarbe: #FFE657;
   --color-complementary: hsla(231, 100%, 67%, 1);
   --color-weiss: #FFF;
}

/* Deklaration des Bodys */

     body {
                margin: 0px;
                background-image: var(--color-bg-img);
                background-repeat:  no-repeat;
                font-color: #070809;
                font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
                font-size: 52.5%;
                text-align:center;
        }



/* Deklaration der Boxen */

        .box-kopf {
                 font-size: 5.0em;
                 letter-spacing: 5px;
                 text-shadow: 1px 1px 0 #000000,
                      1px -1px 0 #000000,
                      -1px 1px 0 #000000,
                      -1px -1px 0 #000000,
                      1px -1px 0 #000000,
                      -1px 1px 0 #000000,
                      -1px 1px 0 #000000,
                      -1px -1px 0 #000000;
                color: var(--color-grundfarbe);
                background: var(--color-weiss);
                border-radius: 0px;
                border-bottom: 3px solid var(--color-grundfarbe);
                text-align: center;
                padding: 4px 6px;
        }

        .box-footer {
                font-size: 1.0em;
                color: #555555;
                border-radius: 0px;
                padding: 0px;
                background-color: var(--color-weiss);
                border-top: 3px solid var(--color-grundfarbe);
                align-self: start
        }

        .box-leistungen {
                font-size: 1.6em;
                line-height: 1.7em;
                color: var(--color-weiss);
                align-self: start;
                background-color: var(--color-complementary);
                padding: 10px;
                max-width: 380px;
                text-align: left;
                border-bottom: 15px solid var(--color-grundfarbe);
                border-radius: 0px 22px 0px 22px;
        }

        .box-kontakt {
                font-size: 1.4em;
                line-height: 1.4em;
                color: #fff;
                align-self: end;
                background-color: var(--color-complementary);
                padding: 10px;
                max-width: 200px;
                text-align: left;
                border-bottom: 10px solid var(--color-grundfarbe);
                border-radius: 0px 22px 0px 22px;
        }

        .beschreibung-ausrichtung {
                 -moz-transform: rotate(355deg) translate(30px, -10px);
                 -webkit-transform: rotate(355deg) translate(30px, -10px);
                 -o-transform: rotate(355deg) translate(30px, -10px);
                 -ms-transform: rotate(355deg) translate(30px, -10px);
                 transform: rotate(355deg) translate(30px, -10px);
        }

        .box-beschreibung {
                text-decoration: underline;
                max-width: 380px;
                font-size: 2.5em;
                font-weight: bold;
                color:  var(--color-grundfarbe);
                align-self: start;
                background-color: var(--color-complementary);
                padding: 10px;
                text-align: center;
                 -webkit-box-shadow: 5px 5px 15px 5px #bbb;
                 box-shadow: 5px 5px 15px 5px #bbb;
        }

        .box-selbst {
                font-size: 1.6em;
                line-height: 1.6em;
                color: #555555;
                padding: 0px 10px;
                text-align: left;
                border-left: 1px solid var(--color-complementary);
        }

/* für die Flexboxen im vertikalen Scroll-Balken (Galerie)*/

.box-scroll-container {
  max-width: 500px;
  margin: auto;
  padding-left: 5px;
  padding-right: 5px;
}

/*SCROLL SNAP SYLES*/

.scroll-container {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
  height: 300px;
  scroll-snap-type: mandatory;
  scroll-behavior: smooth;
  font-size: 0px;
  margin-bottom: 0px;
}

.scroll-container .scroll-section {
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  border: solid 1px var(--color-grundfarbe);
  margin-bottom: 50px;
}

.scroll-container.diff-size {
  scroll-snap-destination: 0% 50%;
  padding: 0px 15px;
  text-align: center;
  width: auto;
  height: 470px;
  max-width: 500px;
  background-image: var(--color-bg-img);
  background-repeat:  no-repeat;
  border: solid 1px #ccc;
}

.scroll-container.diff-size .scroll-section {
  width: auto;
  height: auto;
  max-width: 100%;
  scroll-snap-coordinate: 0% 50%;
  margin-bottom: 15px;
  border: solid 1px #ccc;
  background: #eee
}

.scroll-container.diff-size .scroll-section:first-child {
  scroll-snap-coordinate: 0% 5%;
  margin-top: 5%;
}

.scroll-container.diff-size .scroll-section:last-child {
  scroll-snap-coordinate: 0% 20%;
  margin-bottom: 20%;
}

/* layout*/
        .arr-kopf {
                grid-area: arr-kopf;
        }

        .arr-leistungen {
                grid-area: arr-leistungen;
        }

        .arr-beschreibung {
                grid-area: arr-beschreibung;
        }

        .arr-slider {
                grid-area: arr-slider;
        }

        .arr-kontakt {
                grid-area: arr-kontakt;
        }

        .arr-selbst {
                grid-area: arr-selbst;
        }

        .arr-footer {
                grid-area: arr-footer;
        }

/* Einstellungen für den Seitenkörper font-size: 1.5em; line-height: 1.5em;*/

        .wrapper {
                 display: flex;
                 margin:auto;
                 padding: 5px 10px;
                 text-align:left;
                 max-width: 1200px;
                 background-color: var(--color-bg-content);
        }

    /* Extra small devices (portrait phones, less than 576px) */
          @media only screen
          and (max-width: 39.9375em)  {
        .box-kopf {
                 font-size: 4.0em;
                 letter-spacing: 2px;
                 }
                 
        .box-beschreibung {
                max-width: 250px;
                font-size: 2.0em;
                padding: 6px;
        }
        
        .box-leistungen {
                font-size: 1.5em;
                line-height: 1.5em;
                padding: 6px;
                max-width: 320px;
        }
                
        .box-selbst {
                font-size: 1.6em;
                line-height: 1.6em;
                padding: 10px 10px;
                border-left: 0px solid var(--color-complementary);
                border-right: 0px solid var(--color-complementary);
                border-top: 0px solid var(--color-complementary);
                border-bottom: 1px solid var(--color-complementary); 
 
        }
          
  .wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-areas:
     "arr-kopf"
      "arr-beschreibung"    
     "arr-leistungen"     
     "arr-slider"

     "arr-selbst"
     "arr-kontakt"
     "arr-footer";
        }
        }

    /* Small devices (landscape phones, 576px and up) */
          @media (min-width: 576px)  {
     body {
                font-size: 52.5%;
                margin: 0px;
        }
        .box-kopf {
                 letter-spacing: 3px;
                 }
                 
        .box-beschreibung {
                max-width: 340px;
                padding: 8px;
        }
        
        .box-leistungen {
                padding: 10px;
                max-width: 380px;
        }
                
        .box-selbst {
                padding: 10px 10px;
                max-width: 380px;
                border-left: 0px solid var(--color-complementary);
                border-right: 0px solid var(--color-complementary);
                border-top: 0px solid var(--color-complementary);
                border-bottom: 1px solid var(--color-complementary); 
 
        }
          
  .wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-areas:
     "arr-kopf"
      "arr-beschreibung"    
     "arr-leistungen"     
     "arr-slider"

     "arr-selbst"
     "arr-kontakt"
     "arr-footer";
        }
        }

    /* Medium devices (tablets, 768px and up) */       
@media (min-width: 768px) {
     body {
                font-size: 60.5%;
                margin: 0px;
        }
        .box-kopf {
                 letter-spacing: 3px;
                 }
                 
        .box-beschreibung {
                max-width: 250px;
                padding: 10px;
        }
        
        .box-leistungen {
                padding: 10px;
                max-width: 380px;
        }
        
        .box-selbst {
                padding: 10px 10px;
                max-width: 380px;
                border-left: 0px solid var(--color-complementary);
                border-right: 1px solid var(--color-complementary);
                border-top: 0px solid var(--color-complementary);
                border-bottom: 1px solid var(--color-complementary); 
 
        } 
        
  .wrapper {
    display: grid;
      grid-gap: 20px;
      grid-template-columns: 50% 50%;
      grid-template-areas:
         "arr-kopf           arr-kopf"
         "arr-leistungen     arr-beschreibung"
         "arr-slider         arr-slider"
         "arr-selbst        arr-kontakt"     
         "arr-footer         arr-footer";
        }
        }

    /* Large devices (desktops, 992px and up) */  
@media (min-width: 800px) {
     body {
                font-size: 62.5%;
                margin: 0px;
        }
        .box-kopf {
                 font-size: 5.5em;
                 letter-spacing: 5px;
                 }
                 
        .box-beschreibung {
                max-width: 350px;
                padding: 5px;
        }
        
        .box-leistungen {
                padding: 10px;
                max-width: 390px;
        }
        .box-selbst {
                font-size: 1.2em;
                padding: 10px 10px;
                border-left: 1px solid var(--color-complementary);
                border-right: 1px solid var(--color-complementary);
                border-top: 0px solid var(--color-complementary);
                border-bottom: 1px solid var(--color-complementary); 
 
        } 
                 
  .wrapper {
    display: grid;
      grid-gap: 10px;
      grid-template-columns: auto 400px 25% ;
      grid-template-areas:
         "arr-kopf           arr-kopf            arr-kopf"
         "arr-beschreibung   arr-beschreibung         arr-selbst"
         ".   arr-leistungen         arr-selbst"
         "arr-slider         arr-slider           arr-selbst"
         "arr-slider         arr-slider           arr-kontakt"
         "arr-footer         arr-footer          arr-footer";
        }
        }

    /* Extra large devices (large desktops, 1200px and up) */ 
@media (min-width: 1000px) {
     body {
                font-size: 62.5%;
                margin: 0px;
        }
        .box-leistungen {
                padding: 10px;
                max-width: 400px;
        }
        .box-kopf {
                 font-size: 5.5em;
                 letter-spacing: 5px;
                 }
  .wrapper {
    display: grid;
      grid-gap: 20px;
      grid-template-columns: auto auto auto 20%;
      grid-template-areas:
         "arr-kopf           arr-kopf            arr-kopf        arr-selbst"
         "arr-beschreibung   .          arr-slider              arr-selbst"
         "arr-leistungen     .          arr-slider     arr-selbst"
         "arr-kontakt        arr-kontakt          arr-slider     arr-selbst"
         "arr-footer         arr-footer          arr-footer      arr-selbst";
        }
        }


kopf-text-v {
vertical-align: 6px;
}

zeichen-kontakt {
font-size: 1.6em;
vertical-align: -4px;
}

zeichen-kontakt2 {
font-size: 1.2em;
vertical-align: -2px;
}

  hr {
         border: 0;
         height: 2px;
         background-image: linear-gradient(to right,
         var(--color-complementary) 0%,
         var(--color-grundfarbe) 50%,
         var(--color-complementary) 100%);
}

 a {
 color: var(--color-weiss);
}