body {
    background-image: url("../img/bg_cof_2.gif");
    background-repeat: no-repeat;  
    margin: 0 auto;
    max-width: 50em; /* NEU wieder auf 50 geändert von 60 x 16 = 960px 01.01.24 Tabletgröße testen */
    width: 90%;
    background-color: #ff9933;
    color: #000000;
    font-family:Verdana, Arial, Helvetica, sans-serif; 
}

/* Farben eventuell noch anpassen */

a:link, a:visited, a:active {
    color: #006699;
    text-decoration: none;
}

a:hover {
  color: #F33328; /* #e6b5a7 Body Hintergundfarbe */
  text-decoration: underline; 
}

.container {
    margin-top: 10px;
    display: flex; /* NEU */
    flex-direction: column; /* NEU */
}


.main {
    margin-top: 30px; 
    padding: 5px;
    display: flex;
    border: 1px solid #684f1c;
    border-radius: 20px 20px 20px 20px;
}

.item {
    width: 100%;
}

.main_img {
    width: 30%;
    padding-right: 20px;
}

.main_content {
    width: 70%;
    /*padding-bottom: 10px; /* NEU für Abstand Rand und Submit Button */
    margin-bottom: 20px;
}


.img {
    border-radius: 50%;  /* border-radius: 20px 20px 20px 20px; */  
    max-width: 100%;
    width: 300px;
}

.rand {
    max-width: 100%;
    width: 300px;
    border-radius: 20px 20px 20px 20px;
    border: 4px solid #FFCC66;  
    box-shadow: 1px 1px 1px #000;
}


.thumb {
    width: 150px;
    max-width: 100%;
    border-radius: 20px 20px 20px 20px;
    border: 3px solid #684f1c;  
    box-shadow: 2px 2px 2px #000;
}


.center {
    text-align: center;
}


input[type="checkbox"]{
    display:inline-block;
    width:15px;
}
 
/* Alle 3 Placeholder machen rote farbe im Text und Umrandung */
::placeholder { 
    color: #f33328;
    opacity: 1;
    transition: opacity 1s;
}

:focus::placeholder {   /* Tippt man in das Inputfeld geht der Placeholder Text weg..*/
    opacity:0
}

:placeholder-shown {
    border:2px solid #f33328;   /*Orangener Rand um die Input Eingabefelder*/
}


input, textarea {
    font-size: inherit; /*  Erbt font-size vom body-Element.*/
    font-family: inherit; /*  Erbt font-family vom body-Element.*/
    width: 90%;
    padding: 6px 6px;
    margin: .3rem;  /*  Abstand zwischen den Eingabefeldern.*/
    border-radius: 20px 20px 20px 20px;   
    scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color: #cc6666 #000;   /* scroll thumb and track */
} 

input[type=submit] {
    font-size: 1.2em; 
    padding: 6px 16px; /* margin/padding machen den Submit Button mittig, kleiner oder größer*/
    font-family: Verdana, Helvetica, sans-serif, Arial; 
    color: black;  
    background-color: #f33328; 
    border: 3px solid #f33328; 
    border-radius: 20px 20px 20px 20px; 
    cursor: pointer; /* Macht aus dem Courser eine Hand bei Berührung*/
}


input[type=submit]:hover {
    background-color: #f33328; /*#7a372f; braun*/
    box-shadow: 4px 4px 4px #000000;
        /* Neu, der Schatten ist weg seitdem ich Code in style_neu.css ausgelagert habe
    1 Wert: Horizontal, 2 Wert: Vertikal, 3 Wert: Farebe und 
    4 Wert: Größe des Schatten. Optional inset - Schatten nach innen.
    Der rote Rand der Eingabefelder ist auch weg ???? */
}

#send {
  font-weight: bold;  /*bold auf Submit Input. Funktioniert oben in input[type=submit] nicht */
}

.feedback {
    width: 80%;
    padding: 20px;
    background-color: #f33328;
    opacity: 0.7;/* Farbe etwas heller gemacht. Wert muss zwischen 0 und 1 liegen */
    border-radius: 5px 5px 5px 5px;
    color: #fff;
}

.error {
    padding: 3px 12px;
    width: 80%;
    background-color: #f33328; 
    border-color: #000000; 
    box-shadow: 1px 2px 2px #000000;
}

.footer {
    text-align: center;
}

 @media only screen and (max-width: 480px) {    

    .main {  
        width: 90%;
        margin-left: 10px;  /* Ansonsten Umrandung zu weit links */
        padding: 8px;
        text-align: center; 
    }  
    .item {
        padding: 3px;
    }
    .main_img {
        width: 100%;
    }
    .main_content {
        width: 100%;
    }
}