body {
  font-family: Verdana, Arial, Sans-Serif;
  font-size: 1rem;
}

.box1 {
  width: 580px;
  max-width: 100%;
}



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

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

.buttons:hover{
  background-color: rgb(213, 213, 213);
    color:rgb(0, 0, 0);
    padding: 11px;
    /* border-radius: 0; */
}

.buttonwp {
  background-color: #165d00; /* dark green color */
  color: #FFFFFF; /* white text color */
  border: none;
  border-radius: 5px;
  padding: 10px 10px;
  font-size: 1em;
  cursor: pointer;
  border: .15em solid #1A3A3A; /* dark green border */
  box-shadow: 0 0 0 1px #1A3A3A; /* add a subtle shadow */
  width: 250px;
}

.buttonwp:hover{
  background-color: #1A3A3A;
}

.buttonwp2 {
  background-color: #b80000; /* dark green color */
  color: #FFFFFF; /* white text color */
  border: none;
  border-radius: 5px;
  padding: 10px 10px;
  font-size: 1em;
  cursor: pointer;
  border: .15em solid #560000; /* dark green border */
  box-shadow: 0 0 0 1px #560000; /* add a subtle shadow */
  width: 250px;
}

.buttonwp2:hover{
  background-color: #560000;
}






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

/* input[name="betreff"] {
  width: 380px;
} */

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

:focus-visible {
  outline: solid 1px royalblue;
}

span.hilfetext {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.85rem;
  font-style: oblique;
  color: #00a400;
  cursor: default;
  display: block;
  margin-top: 3px;
}

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

.Rahmenf {
  border: 5px solid black;
  border-radius: 2rem;
  background-color: #ff0000;
  padding: 10px;
  text-align: center;
}
.Rahmend {
  border: 5px solid black;
  border-radius: 2rem;
  background-color:  #5eff7e;
  padding: 10px;
  text-align: center;
}

.stil8 {
  background-color: red;
  color: white;
  padding: 1em;
  border-radius: 0.8em;
  border: 0.2em solid rgb(255, 189, 23);
  text-align: center;
  margin: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.redt {
  background-color: rgb(255, 0, 0);
  color: white;
  font-weight: bolder;
}

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


  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;
  
  
  }
    



  
.warning {
    color: red;
    display: none;
}


.warning.show {
    display: inline-block;
}




.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 */
.email1::before {
  content: "✉"; /* Unicode für Briefumschlag */
  font-size: 1.3em;
  color: #555;
}