body {
    margin: 0 auto;
    max-width: 50em; /* NEU 60 x 16 = 960px Vorher 50em Testen auf tablet */
    width: 90%;
    background-image: url("../img/bg_main.gif");
    background-repeat: no-repeat; 
    background-color: #F7E7C5;
    color: #000000;
    font-family: Verdana, Helvetica, sans-serif, Arial;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;         
    scrollbar-color: #cc6666 #000; 
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #000;
}
*::-webkit-scrollbar-thumb {
  background-color: #cc6666;
  border-radius: 20px;
  border: 3px solid #fff;
}
/* ENDE Scrollbalken farblich 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 */
}


.item {
    width: 100%;
}

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

.main_img {
    width: 45%;
    /*padding-bottom: 10px; /* NEU für Abstand Rand und Submit Button */
}

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

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


.headline{
    margin-top: 0px;
}

.emoji{
        background: #684f1c;
        border-radius: 6px;
        font-size: 20px;
        padding: 2px;
}

.center {
    text-align: center;
}

input {
    background-color: #e8baab;
}

textarea {
    font-size: inherit; /*  Erbt font-size vom body-Element.*/
    font-family: inherit; /*  Erbt font-family vom body-Element.*/
    background-color: #e8baab; /* #e6b5a7 */ 
    border-color: #f33328; 
    border-radius: 20px 20px 20px 20px;
    border: 3px solid #f33328;
    padding: 5px;
    scrollbar-width: thin;         
    scrollbar-color: #f33328 #e6b5a7; /*#cc6666 */
} 
 
/* Alle 3 Placeholder machen rote farbe im Text und Umrandung */
::placeholder { 
    color: #000;
    font-style: italic;
    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 {
    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;   
    background-color: #e8baab;
    scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color: #cc6666 #000;   /* scroll thumb and track */
} 

select {
            /* Browser-Styles entfernen */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    width: 90%;
    height: 35px;
     /* -moz-padding-start: calc(10px - 3px); */
    padding-left: 20px;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid #f33328;    
    background-color: #e8baab;/*#e6b5a7;*/ 
    box-shadow: 1px 1px 1px #000;
    outline: none; /*  kein blauer Rahmen mehr, wenn der Fokus im select ist */
    cursor: pointer;
}


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 {
    margin-top: 20px;
    margin-left: 80px;
    width: 60%;
}
#send{/*bold für Submit Button. bei .send und input[type=submit] hat font-weight: bold; keinen Einfluss*/
    font-weight: bold;
}

.error_text {
    margin-top: 0px;
    margin-bottom: 20px;
}

.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;
}
/* zurück Links außerhalb von main. */
.li_nav{
    width: 100%;
    display: flex;
    margin-top: 30px;
}
.arrow_txt{
    margin-top: 3px;
    margin-left: 6px;
}
/* ENDE zurück Links außerhalb von main. */
.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%;
    }
}