/*---------------------------------------------*/
/*---------- Autor: Enrico Baumann ------------*/
/*---------- Copyright: Enrico Baumann --------*/
/*---------- Datum: 18.03.2024 ----------------*/
/*---------------------------------------------*/

.karte {
    border-top: 0 ;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    border-bottom: 0 ;
    margin: 0 2%;
    padding: 40px;
    background-color: #e6f1ff  ;
}

address {
    border-top: 1px solid silver;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    border-bottom: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin: 0 2%;
    padding:5px 15px;
    text-align: left;
    font-style: normal;
    font-size: 110% ;
    color: #003415;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 1px;
    background: #f6faff ;
    min-height: 140px;
}

img {
    max-width: 160px;
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 2px;
    background: lightyellow ;
    float: left;
    margin: 0 15px 3px 0;
}

a {
    text-decoration: none;
    color: darkblue;
}
a:hover {
    text-decoration: underline ;
    color: blue ;
}

div.anschrift {
    border: 1px dotted silver;
    display: inline-block;
    margin: 2px;
    padding: 6px 10px;
    border-radius: 5px;
    min-width: 35%;
    width: 280px;
    background-color: white;
}

div.tel::before {
    /* content: ' ☎️ ';*/
    font-size: 115%;
    line-height: 100%;
    padding: 0;
    margin: 0;
}

div.mail::before {
    /*content:  '✉️ ';*/ /*📬📨 */
    font-size: 105%;
    padding: 0;
    margin: 0;
    line-height: 100%;
}

div.web::before             /*a.log[href^='index']::before*/ {
    /*   content: ' 🌍 ';   */
    font-size: 115%;
    padding: 0;
    margin: 0;
    line-height: 100%;
}

div.tel:hover, div.mail:hover, div.web:hover, div.cb:hover {
    background-color: #f3f3f3 ;
}
/* ************ */

form.kontakt {
    border: 0 solid red;
    font-family: 'Open Sans', sans-serif;
}

fieldset {
    border: 1px dashed  #004727;
    margin: 15px auto 25px auto;
    border-radius: 4px;
    background-color: #fcfcfc ;
    padding: 0;
    width: 90%;
    min-width: 310px;
    box-shadow: rgb(38, 57, 77) 0 20px 30px -10px;
}

legend {
    border: 1px dashed  #004727;
    border-radius: 15px;
    background-color: #fcfbff;
    color: #004727;
    margin: 0 0 3% 4%;
}

legend > h3 {
    padding: 4px 6px;
    line-height: 90%;
    margin: 5px;
    font-weight: normal;
}

fieldset > div.bereich {
    width: 90%;
    min-width: 230px;
    padding: 8px 2px;
    margin-left: 3%;
    margin-right: 3%;
    color: #004727 ;
    border: 1px solid lightgrey;
    border-radius: 4px;
    background-color: #fdffff  ;
    display: inline-block;
}

.anrede > select > option {
    color: #4d1600;
    font-size: 120%;
    border-radius: 2px;
}

div.nam {
    width: 90px;
    border: 0 solid pink;
    float: left;
    padding: 2px;
    margin-left: 4%;
    text-align: left;
    font-size: 105%;
}
div.lab {
    width: 200px;
    border: 0 solid orange;
    float: left;
    padding: 1px;
    margin-left: 5px;
    font-size: 105%;
}

div.code {
    color: #fbb320  ;
    border: 1px solid green;
    border-radius: 3px;
    padding: 2px 0;
    letter-spacing: 12px;
    /* background-color: #ECE6C0;    */
    font-weight: bolder;
    text-align: center;
    background-image: url('../bilder/bg.jpg');
    background-position: left top;
}

div.code:hover {
    color: #4d1600 ;
    /* background-color:#976100 ;   */
}

input {
    color: #4d1600  ;/*grey; */
    border-radius: 3px;
    font-size: 100%;
    padding: 3px 5px;
    margin: 1px 3px;
    border: 1px solid silver;
    width: 185px;
    background-color: #fffbf4 ;
}

input:valid, textarea.text:valid {
    border: 1px solid green;
}
input:invalid, textarea.text:invalid {
    border: 1px solid red;
}

input:hover, .anrede:hover, textarea.text:hover {
    border-color: orange;
}

select {
    width: 195px;
    margin-left: 2px;
    border: 1px solid silver;
    border-radius: 3px;
    padding: 3px 4px;
    background-color: #fffbf4 ;
    color: #4d1600 ;
    font-size: 100%;
}

div.but {
    border: 0 solid blue;
    margin: 25px auto 25px auto ;
    padding: 5px;
    text-align: center;
}

div.cb {
    color: #272754;
    font-size: 88%;
    font-style: normal;
}

input.rot {
    color: red;
    width: 200px;
    font-size: 98%;
    border-radius: 15px;
    border: 1px outset silver;
    margin: 3px 20px;
    padding: 3px 2px;
    background-color: #f6f6ff  ;
    font-style: normal;
}

span.orange {
    color: #cc6000  ;
}

span.orange > a {
    text-decoration: none;
    font-size: 120%;
}

span.orange > a:hover {
    color: red;
}

input.rot:hover {
    background-color: red;
    color: white;
    box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
    border: 1px solid white;
}
input.gruen {
    color: green;
    width: 200px;
    font-size: 98%;
    border-radius: 15px;
    border: 1px outset silver;
    margin: 3px 20px;
    padding: 3px 2px;
    background-color: #f6f6ff  ;
    font-style: normal;
}

input.gruen:hover {
    background-color: green;
    color: white;
    box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px;
    border: 1px solid white;
}

input.zahl {
    letter-spacing: 7px;
    text-align: center;
}

span.stern {
    color: red;
}

textarea.text {
    min-width: 120%;
    max-width: 260%;
    min-height: 180px;
    max-height: 310px;
    border: 1px solid silver;
    border-radius: 3px;
    overflow: auto;
    color: #4d1600  ;
    margin: 2px;
    font-size: 130%;
    padding: 5px;
    background-color: #fffbf4 ;
}
div > small {
    background-color: white;
    color: darkgrey;
    font-style: italic;
    margin-left: 3%;
}

#fieldfuss {
    border-top: 1px dashed grey;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 3px 1px;
    text-align: center;
    font-size: 91%;
    color: #8a5a00;
    background-color: #fff9ea  ;
    letter-spacing: 2px;
}

a.filddes {
    font-size: 92%;
    font-weight: normal;
}

#fieldfuss:hover {
    color: #6c4600  ;
    background-color: #f0f7ee ;
}

/* ************ */

.karteframe {
    border-top: 0 ;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    margin: 0 2% 10px 2%; /* orul */
    padding: 20px;
    background-color: #d1e5ff ;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    text-align: center;
}


iframe {
    border: 1px solid darkgreen;
    border-radius: 6px;
    padding: 1px;
    width: 88%;
    height: 385px;
    margin: 20px auto 30px auto;
}