html {
  scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
body{
    background-color: fuchsia;
}
.footer{
    margin-top: 50px;
    background-color: rgba(0, 0, 0, 0.5);
}

.TextContainer {
    /*    position: relative;*/
    background-color: var(--ThemeColor_rbga);
    border-style: solid;
    border-color: var(--ThemeColor);
    border-radius: 20px;

    width: 80%;
    max-width: 650px;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

.TextContainer p {
    margin: 0 20px 0 20px;
    font-size: 1em;
    text-align: center;
}

.TextContainer p a {
    color: beige;
    text-decoration: none;
}



h1 {
    margin: auto;
    font-size: 24px;
    background: -webkit-linear-gradient(#eee, var(--ThemeColor));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-decoration: none;
}
h1:hover{
    background: -webkit-linear-gradient(var(--ThemeColor), #eee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  
a{
    text-decoration: none;
}

p {
    margin: 0 20px 0 20px;
    color: beige;
    font-size: 12px;
    text-align: center;
    font: 12px Arial, Helvetica, sans-serif;
}



.menustreifen {
    width: 100%;
    height: 175px;
    display: flex;

    background-color: black;
}

.str_box {
    flex-grow: 1;
    line-height: 175px;
    text-align: center;
    transition: 1s;

    /* wenn Schrift unten platziert wird */
    position: relative;
}

.str_box:hover {
    flex-grow: 2;
}

/*.str_box:nth-child(1) { background-color: hsla(40, 100%, 50%, 1); }
.str_box:nth-child(2) { background-color: hsla(70, 100%, 50%, 1); }
.str_box:nth-child(3) { background-color: hsla(100, 100%, 50%, 1); }
.str_box:nth-child(4) { background-color: hsla(210, 100%, 50%, 1); }
.str_box:nth-child(5) { background-color: hsla(240, 100%, 50%, 1); }
.str_box:nth-child(6) { background-color: hsla(270, 100%, 50%, 1); }*/

.str_box {
    background-size: cover;
    background-position: center;
    cursor: default;
}

.str_box a {
    /*    display: block;*/
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 0 10px black;
}

.str_box a:hover {
    color: orangered;
}

.str_box a span {
    display: block;
    /* wenn Link nur Teilbereich sein soll */
    width: 100%;
    line-height: 1.3em;
    background-color: rgba(0, 0, 0, 0.4);

    position: absolute;
    /* wenn Schrift unten */
    bottom: 0;
    /* wenn Schrift unten */
    left: 0;
}

.str_box a spanA {
    /* wenn Link nur Teilbereich sein soll */
    width: 100%;
    line-height: 1.3em;
    background-color: rgba(0, 255, 0, 0.4);

    position: absolute;
    /* wenn Schrift unten */
    bottom: 0;
    /* wenn Schrift unten */
    left: 0;
}

.menueactive {
    background-color: rgba(0, 255, 0, 0.4);
}

/* Definition für 5 Menüpunkte */
/*.str_box:nth-child(1) {    background-image: url(../nav/aquarelle01.jpg);}
.str_box:nth-child(1):hover {    background-image: url(../nav/aquarelle02.jpg);}

.str_box;nth-child(1):any-link {src: url(http://mailing.auberle.de);}
.str_box:nth-child(2) {    background-image: url(../nav/knipser01.jpg);}

.str_box:nth-child(2):hover {    background-image: url(../nav/knipser02.jpg);}

.str_box:nth-child(3) {    background-image: url(../media/KiraLuna37_large.jpg);}

.str_box:nth-child(4) {    background-image: url(../nav/mailing.jpg);}

.str_box:nth-child(4):hover {    background-image: url(../nav/mailing01.jpg);}

.str_box:nth-child(5) {    background-image: url(../nav/katzen.jpg);}

.str_box:nth-child(5):hover {    background-image: url(../nav/KiraLuna01.jpg);}*/

/* Definition für 4 Menüpunkte */
.str_box:nth-child(1) {    background-image: url(../nav/aquarelle01.jpg);}
.str_box:nth-child(1):hover {    background-image: url(../nav/aquarelle02.jpg);}

/*.str_box;nth-child(1):any-link {src: url(http://mailing.auberle.de);}*/
.str_box:nth-child(2) {    background-image: url(../nav/knipser01.jpg);}

.str_box:nth-child(2):hover {    background-image: url(../nav/knipser02.jpg);}


.str_box:nth-child(3) {    background-image: url(../nav/mailing.jpg);}

.str_box:nth-child(3):hover {    background-image: url(../nav/mailing01.jpg);}

.str_box:nth-child(4) {    background-image: url(../nav/katzen.jpg);}

.str_box:nth-child(4):hover {    background-image: url(../nav/KiraLuna01.jpg);}

.et-run {
    background: red;
}

.CenterBox {
    width: 500px;
    margin: auto;
}
#menue2{
    margin-top: 0;
    margin-bottom: 0px;
}
ul#menue2, ul#menue2 ul {
      display: flex; 
  justify-content: center;
  flex-direction: row;
    flex-flow: wrap;
 list-style-type: None;
 height: auto;
}

ul#menue2 li {
 float: left;
 width: auto;
    margin: 10px;
 position: Relative;
}

ul#menue2 li a {
  
 font: arial;
 display: Block;
    padding: 0 10px;
 width: auto;
 line-height: 30px;
 text-align: Center;
 color: #FFFFFF;
 text-decoration: None;
 background-color: rgba(247, 247, 248, 0.1);
 border: 1px Solid #fff;
 border-bottom: 1;
 border-radius: 5px;
}

ul#menue2 li a:hover,
 ul#menue2 li a:active {
 background-color: rgba(248, 3, 3, 0.42);
 cursor: Pointer;
}

ul#menue2 li ul {
    
 display: None;
 position: Absolute;
 left: 0px;
 top: 31px;
 z-index: 100;
}

ul#menue2 li:hover > ul,
 ul#menue2 li:active > ul {
 display: Block;
}

ul#menue2 li ul a {
 background-color: rgba(0, 128, 128, 0.35);
}