/*  AUS      text-shadow: 0.05rem 0.05rem #CCCCCC;       AUS   */


/*   Schrift von 16vw auf 7rem = x0,4375                */


.classprojektfarbe {
  color: #7f0817;
  border-color: #7f0817;
}

.classgrau {
  color: #AAAAAA;
  border-color: #AAAAAA;
}



html {
  scroll-behavior: smooth;
  margin: 0 auto;           /* zentriert die Seite */
  font-family: Arial, Helvetica, Verdana, Trebuchet MS, Tahoma, Arial Narrow, sans-serif;
    font-size-adjust: 0.58;
    line-height: 1.4;
    letter-spacing: 0.005em;
    word-spacing: 0.005em;
         }
@media screen and (orientation:portrait)      
{  html {
  font-size: 2.2vw;
  border: 0px solid red;
}   }
@media screen and (orientation:landscape)      
{  html {
  font-size: 2.2vh;          /*   font-size: 2.2vh;   */
  border: 0px solid orange;
       }   }
@media screen and (min-width: 1800px)  
{  html {
  font-size: calc(24px + 0vw);
  border: 0px solid green;
       }   }

body {
  background: #FFFFFF;
  border: 0px solid orange;
         }

.briefpapier {
  background: #FFFFFF;
  border: 0px solid green;
         }
@media screen and (max-width: 1000px)           /*   ohne Rand   */
{  .briefpapier {
  background: #FFFFFF;
}   }
@media screen and (min-width: 1000px)             /*   mit Rand   */
{  .briefpapier {
  margin: 0.0rem calc(-70px + 10vw) 5.0rem calc(-70px + 10vw) ;            /*   bei 1000px: 100px = 10vw (10% der Breite)   */
  /*       margin: 0.0rem 10vw 5.0rem 10vw ;
      box-shadow: 2px 2px 2px #CCCCCC, -2px -2px 2px #EEEEEE;          */
       }   }

.inhalt {
  position: relative;
  z-index: 100;
  padding: 0rem 3% 0rem 3% ;     /*   % weil abgestimmt auf †berschrift-Referenz   */
  border: 0px solid orange;
            }

h1 {
  text-align: left;
  color: #7f0817;
  font-size: 2.9rem;    /*   volle Breite durch Ausprobieren finden   */
  font-weight: bold;
  margin: 0 auto;
}

p {
  font-size: 2.0rem;    /* ex: 3.5vw volle Breite durch Ausprobieren finden      */
    text-align: justify;
    color: black;
  margin: 0 auto;
  padding: 0.5rem 0.0rem;
}

.image_container {
  position: relative;
    width: inherit;
    height: 28.6rem;
  margin: 5.0rem 3% 0.5rem 3%;	  /*  3% abgestimmt auf "Inhalt"-Padding  */
  padding: 0.5rem 0.0rem 0vw 0.0rem;
  background-image: url("ballett1536.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-x: 0.0rem; 
  background-position-y: 0.0rem; 
  background-color: #FFFFFF;
}

.class_referenz_intro {
  position: relative;
  margin: 16rem 0% 0% 50%;
/*  Margin von oben REM perfekt (Schrift bleibt auch bei extrem horizontal im Bild+), seitlich % genau die Mitte  */
  border: 0px solid blue;
}


 /*  
   top: -17rem;     top: -25rem;
  padding: 9rem 0.0rem 5rem 0rem;
  padding: 13rem 0.0rem 15vw 0rem; 
*/


.startueberschrift1 {
  position: absolute;
  transform: translate(-50%, 0%);    /* % damit mittig (moves  X / Y)   */
  mix-blend-mode: screen;    /*  schneidet Schrift aus, Hintergrundbild sichtbar   */
  border: 5px solid white;      /*  schlie§t Spalten   */

 /*     left: 0%;        fŸr Animation: -65vw   ,an WortlŠnge anpassen  */
    bottom: -10rem;        /*   ...  */
    width: 205%;
    height: auto;
  background-color: #FFFFFF;
  text-align: center;
    font-size: 7rem;     /*   volle Breite durch Ausprobieren finden   */
    font-weight: bold;
    color: black;
  padding: 10rem 0.0rem 8rem 0rem;    /*   oben beliebig, unten mit "Bottom" abstimmen   */
}

@media screen and (orientation:landscape)      
{  .startueberschrift1 {
  font-size: 15vw;
  bottom: -25vw; 
  padding: 10rem 0.0rem 20vw 0rem;
       }   }


 /*  AUS

@media screen and (min-width: 1800px)  
{  .startueberschrift1 {
  font-size: calc(210px + 2.5vw);
    top: -26rem;
    height: 15.0rem;
      }   }

AUS  */


.startueberschrift2 {
  position: absolute;
  left: -2.3em;        /*   an WortlŠnge anpassen = ca. HŠlfte von 6 Buchstaben  */
  top: 0.0rem;        /*   0 lassen fŸr guten †berblick  */
  background-color: transparent;
    text-align: center;  
    color:#7f0817;                 /*  war 00FFFF fŸr Animation  */
    font-size: 3.5rem;
    font-weight: bold;
  margin: 0 auto;
  padding: 1.0rem 0% 0.0rem 0.0rem;       /*   hier den Abstand zur obereren Schrift einstellen  */ 

}

 /*    AUS
@media screen and (orientation:portrait)      
{  .startueberschrift2 {
  font-size: 3.5rem;
  padding: 0.0rem 0.0rem 0.0rem 0.0rem;
}   }
@media screen and (orientation:landscape)      
{  .startueberschrift2 {
  font-size: 6.5vw;
  padding: 0.0rem 0.0rem 0.0rem 0.0rem;
       }   }
AUS     */


/*  fŸr SPAN   */
/*  fŸr SPAN   */

.textumrandung {
  font-size: 90%;
    text-align: center;
    text-decoration-line: none;
    text-shadow: inherit;					/*  gegen Button-Default   */
    white-space: nowrap;
  border: 1px solid;
    border-radius: 0.5em;
    padding: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0.05rem 0.05rem #CCCCCC;
  background: transparent;				/*  gegen Button-Default   */
  opacity: 1.00 ;
  transition-duration: 0.15s;
            }
.textumrandung:hover {
   color: #66de4a;
 cursor: pointer;
 font-size: 100%;
 border: 2px solid #66de4a;
transition-duration: 0.15s;
            }

.textumrandung_klein {
  font-size: 90%;
    text-align: center;
    text-decoration-line: none;
    text-shadow: inherit;					/*  gegen Button-Default   */
    white-space: nowrap;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 1px solid;
    border-radius: 0.5em;
    padding: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0.05rem 0.05rem #CCCCCC;
  background: transparent;				/*  gegen Button-Default   */
  opacity: 1.00 ;
transition-duration: 0.15s;
            }
.textumrandung_klein:hover {
   color: #66de4a;
 cursor: pointer;
 font-size: 90%;				/*  war 100%  */
 border: 2px solid #66de4a;
transition-duration: 0.15s;
            }

.textumrandung_min {
  font-size: 90%;
    color: inherit;
    text-decoration-line: none;
    text-shadow: inherit;					/*  gegen Button-Default   */
    white-space: nowrap;
  margin: 0.0em 0.0em;
  border: 1px solid #777777;
    border-radius: 0.4em;
    padding: 0.1em 0.4em;
  background: transparent;				/*  gegen Button-Default   */
  opacity: 1.00 ;
  transition-duration: 0.15s;
            }
.textumrandung_min:hover {
   color: #66de4a;
 cursor: pointer;
 font-size: 100%;
 border: 2px solid #66de4a;
transition-duration: 0.15s;
            }