.haupt1 {
    width: 900px;
    max-width: 100%;
    padding: 3em;
}

.hallo {
    background-color:#1D1D1D;
}

.fettlogo {
    font-weight: bold;
    Color: #FFA000;
    font-size: 0.9em;
}

.twlogo {
        color: white;
        font-size: 0.9em;
}

.STA {
    text-shadow: 3px 3px 4px #000000;
}

.bildsta {
    box-shadow: 3px 3px 3px black;
    
}

.mittev {
   margin-top:1em;
   margin-bottom: 1em;
}

.mittev2 {
    margin-top:0.5em;
    margin-bottom: 0.5em;
 }

.abstand {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.leftm
{
    padding-left:1em
}

.htext {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.8em;
    /* text-shadow: .15rem .15rem 0.45rem rgb(0 0 0/ 1); */
}



.Schulung {
    Color: white;
    text-decoration: underline;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.5em;
}

.Themah {
    Color: #FFE4B6;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
}

.ThemaB {
    Color: #FDAF2B;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2em;
    font-weight: bold;
}

.ThemaG {
    color: #17FFDC;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: bold;
}

.wbfett
    {
        font-weight: bold;
        color: #100064;
        font-size:1.1em;
        text-decoration: underline;
  
    }

.wsfett {
    font-weight: bold;
}

.wrfett {
    font-weight: bold;
    color: red;
}

.weissf {
    color:white;
    font-weight: bold;
}
.weiss {
    color:white
}

.Geld {
    color:white;
    background-color: #1D1D1D;
    font-size: 1.5em;
    text-decoration: underline;
}

.hinweisgeld {
    color: rgb(248, 255, 166);
    align-items: center;
    text-align: center;
}

.sblau {
    color:#00017B;
    font-weight: bolder;
    font-size:1.5em;
}

.sT {
    font-size: 1.2em;
}

.button1 {
    background-color:rgb(255, 255, 255);
    color: black;
    border: .3em solid #dd382c;
    border-radius: 1em;
    padding: 0.4em;
    font-size: large;
    transition: background-color 0.3s;
    box-shadow: 0 .2em .4em rgb(0 0 0 / 0.5) 
}

.button1:hover {
    background-color: rgb(230, 231, 229);
    color:rgb(0, 0, 0);
    padding: 0.6em;
    /* border-radius: 0; */
}

.buttons1 {
    background-color: white;
    color:black;
    border: .3em solid rgb(0, 9, 132);
    border-radius: 1em;
    padding: 1em;
    font-size: large;
    transition: background-color 0.3s;
    box-shadow: 0 .2em .4em rgb(0 0 0 / 0.5); 
    width: 500px;

} 

.buttons2 {
    background-color: white;
    color:black;
    border: .3em solid rgb(255, 102, 0);
    border-radius: 1em;
    padding: 1em;
    font-size: large;
    transition: background-color 0.3s;
    box-shadow: 0 .2em .4em rgb(0 0 0 / 0.5);
    width: 500px; 

}

.buttonnachricht1 {
    background-color: rgb(255, 255, 255);
    color:rgb(121, 0, 0);
    border: .3em solid rgb(84, 0, 0);
    border-radius: 1em;
    padding: 1em;
    font-size: large;
    transition: background-color 0.3s;
    box-shadow: 0 .2em .4em rgb(0 0 0 / 0.5); 
   

} 

.buttonnachricht1:hover {
    background-color: rgb(72, 0, 0);
    color:rgb(255, 255, 255);
    border: .3em solid rgb(84, 0, 0);
    border-radius: 1em;
    padding: 1em;
    font-size: large;
    transition: background-color 0.3s;
    box-shadow: 0 .2em .4em rgb(0 0 0 / 0.5); 
   

} 

@media screen and (min-width: 600px) { 
    .text5 {
        display: none;
    }
    }

@media screen and (max-width: 600px) { 
.buttons1 ,.buttons2 {
width: 400px;
}
}


.thema1 {
    font-size: xx-large;
    color: rgb(0, 3, 171);
    text-decoration: underline;
}

.thema2 {
    font-size: xx-large;
    color: rgb(0, 3, 171);
    text-decoration: underline;
}

.bild1 {
  
    background-size:cover;
}

input,
button,
textarea {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 1rem;
  border: 1px solid rgb(0, 0, 0);
  border-radius: .375rem;
  padding: 5px;
}


input[name="vorname"],
input[name="nachname"],
input[type="email"] {
  width: 300px;
}

input[name="betreff"] {
  width: 300px;
}


textarea {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 1rem;
  max-width: 380px;
  min-width: 300px;
  max-height: 260px;
  min-height: 260px;
  padding: 5px;
}


  input:invalid {
    border: .15em solid red;
    color: red;
  }
  
  input:invalid:focus {
    border: .15em solid darkred;
  }
   
  select:invalid {
    border: .15em solid red;
    /* box-shadow: 0 0 5px red; */
    color: red;
  }
  
  select:invalid:focus {
    border: .2em solid darkred;
    
  }
  
  input[type="radio"] {
    width: 1.4em;
    height: 1.4em;
  }


  input[type="radio"]:invalid {
    appearance: none;
    background-color: #fff;
    border: .17em solid red;
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    position: relative;
  }
  

  
  input[type="radio"]:invalid:focus {
    outline: .17em solid darkred;
    outline-offset: 2px;
  }
  

   
input[type="checkbox"] {
  transform: scale(1.6);
  margin: .5em;
}

input[type="checkbox"]:invalid {
  appearance: none;
  background-color: #fff;
  border: .15em solid red;
  width: 1em;
  height: 1em;
  }

textarea:invalid {
  border: .15em red solid;
}

.input-group {
  position: relative;
}

.input-group input {
  padding: .7em 0.7em .7em 2.2em; /* Abstand für das Symbol */
  border-radius: .5em;
  font-size: 16px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  /* border-color: #007bff; */
  outline: none;
}

.input-group::before {
  content: '';
  position: absolute;
  left: .625em;
  top: 50%;
  transform: translateY(-50%);
  /* width: 1em;
  height: 1em; */
  background-size: contain;
  background-repeat: no-repeat;
}

.person1::before {
  content: "👤"; /* Unicode für Person */
  font-size: 1.2em;
  color: #555;
}

/* Symbol für E-Mail */
.mail1::before {
  content: "✉"; /* Unicode für Briefumschlag */
  font-size: 1.3em;
  color: #555;
}


.Rahmenfehler1 {
  border: 5px solid black;
  border-radius: 2rem;
  background-color: #ff0000;
  padding: 10px;
  text-align: center;
  color: rgb(255, 255, 255);
}

.Rahmendanke1 {
  border: 5px solid black;
  border-radius: 2rem;
  background-color: #ffaf58;
  padding: 10px;
  text-align: center;
  color: black;
}