/*-- 
Name:          Beatrice von Singen, Hessisch Oldendorf
Url:           https://beatrice-von-singen.de
Description:   Beatrice von Singen, Hessisch Oldendorf | Symbolik, Magie und Kreativität Weserbergland
Version:       1.0 (elf42 Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */

/*-- 
_________________________ HTML > CSS; [© by elf42] -- */


/*-- 
_________________________ HTML > CSS; [© by elf42] -- */


form, 
.f-row, .f-row-1 {  display: flex; justify-content: flex-start;
                    flex-direction: column; }

.f-row, .f-row-1 {  flex-direction: row; margin: var(--ab) 0; }


form {         width: auto; overflow:auto;
               margin:0 auto 0 auto; padding: 0; 
               background: none; }


/* adresse */
.f-row {            width: 100%; align-items: flex-start; } 
.f-row label {      width: 48%; }
.f-row label:nth-child(1) { margin-right: 4%; }
.f-row label span { display: block; }

/* checkbox, radio */
.f-row-1 {          width: 100%; margin: 0; 
                    align-items: flex-start; flex-wrap: wrap; 
                    /*border-bottom: 1px solid var(--m212);*/ }
.f-row-1 label {    display: flex; flex-direction: row; }
.f-row-1 label {    width: 48%; }

form span {         margin: var(--a5) 0; padding: 0; 
                    color: var(--ci01); background: var(--tr); }

@media only screen and (max-width: 979px ) {
.f-row-1 label {    width: 100%; }
.f-row {            width: 100%; flex-wrap : wrap; } 
} @media only screen and (orientation: landscape) {}


form label {              width: 100%; padding: var(--a10) 0; 
                          display:flex; flex-wrap : wrap;
                          background: none; text-align:left; cursor: pointer; }
form label {              color: var(--m112); }


::placeholder {       opacity:1; padding: 10px; color: transparent; transition: opacity 1s;  }
:focus::placeholder { opacity:0; }

input, textarea, 
input[type="checkbox"], input[type="radio"], input[name="dsgvo"] { 
                      appearance: none; -webkit-appearance: none; -moz-appearance: none; }

input, textarea { 
                      width: 100%; padding: 6px; 
                      box-sizing: border-box; outline: none; 
                      background: var(--tr); border: 1px solid var(--m182); border-bottom: 2px solid var(--m182); border-radius: var(--abora); }

textarea {            min-height: 100px; overflow: auto; }

input:invalid {                  background: var(--m255); }
input:hover, input:focus, 
textarea:hover, textarea:focus { border-bottom-color: var(--ci01); border-radius:0; }

input[type="checkbox"], 
input[type="radio"], 
input[name="dsgvo"] {     width: 20px; height: 20px; margin: 0 8px 0 0; padding: 10px;
                          display: inline-block; vertical-align: middle; cursor: pointer;
                          background: var(--m255); border: 1px solid var(--m182); border-radius: var(--abora); } 
input[type="radio"] {                                                             border-radius: 18px; } 

input[type="checkbox"]:hover, 
input[type="radio"]:hover, 
input[name="dsgvo"]:hover {    background: var(--m255); border: 1px solid var(--ci01); } 

input[type=checkbox]:checked { background: url(../others/img/hg-form-checkbox.svg) center no-repeat; background-size: 70%; background-color: var(--ci01); }
input[type=radio]:checked {    background: url(../others/img/hg-form-radio.svg) center no-repeat;    background-size: 70%; background-color: var(--ci01); }

input[type="file"] {           background: var(--tr); padding:10px 20px; border: none; }

/* hanni */
label[for=fax], input[type=fax] { display: none; }

/* dsgvo */
.dschutz {  display:flex; justify-content: space-between; align-content: flex-start; 
            margin: var(--ab) 0; }
.dschutz label { width: 5%; }
.dschutz span {  width: 92%; font-weight: 300; }

label.dsgvo {                        margin: 0; padding: 0 20px;
display:block;
                                     color: rgb(82,82,82); text-align:left; }
label.dsgvo input[type="checkbox"] { margin: 0; padding: 0; }
label.dsgvo a:any-link {             color: rgb(82,82,82); text-decoration: underline; background: none; border: none; }


button { margin: var(--ab) 0 var(--a10) 0; padding: 15px; }


.nv { display: none; }