body {
    margin: 0 auto;
    max-width: 50em; /* NEU 60 x 16 = 960px Vorher 50em Testen auf tablet */
    width: 90%;
    /*background: no-repeat url("../img/bg_main_neu.gif");*/
    /*background-color: #ffcc66;  gelb */
    background-color: #f3dbc1; /*bgcolor="#F7E7C5"*/
    color: #000000;
    font-family: Verdana, Helvetica, sans-serif, Arial;
}
/* Scrollbalken farblich anpassen NEU am 28.03.24 eingefügt*/
        /* 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;
}

/*.eingabe_feld{
    width: 330px;
    margin-left: 30px;
}*/

.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: 100px;
    max-width: 100%;
    border-radius: 20px 20px 20px 20px;
    border: 4px solid #FFCC66;  
    box-shadow: 1px 1px 1px #000;
}

 .headline{
    margin-top: 0px;
}

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

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

.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{
    display: flex;
    margin-top: 10px;
}
.arrow_txt{
    margin-top: 5px;
    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%;
    }
}