@charset "utf-8";

/* ------------------------------
Formular
------------------------------ */
.f_form { display:block; margin:0 auto; width:100%; }

/* Struktur */
.f_row { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; }

[class*="f_col"] { padding:.4em .2em; }
.f_col1 { flex:0 0 8.3333333333%; }
.f_col2 { flex:0 0 16.6666666666%; }
.f_col3 { flex:0 0 25%; }
.f_col4 { flex:0 0 33.3333333333%;}
.f_col5 { flex:0 0 41.6666666666%; }
.f_col6 { flex:0 0 50%; }
.f_col7 { flex:0 0 58.3333333333%; }
.f_col8 { flex:0 0 66.6666666666%; }
.f_col9 { flex:0 0 75%; }
.f_col10 { flex:0 0 83.3333333333%; }
.f_col11 { flex:0 0 91.6666666666%; }
.f_col12 { flex:0 0 100%; }


.f_form .f_container { display:inline-block; position:relative; padding:1em .4em .4em .4em; width:100%; border:1px solid #ccc; }
.f_form .f_container:has(> input:focus),
.f_form .f_container:has(> select:focus) { border:1px solid #ba0; }
.f_form .f_label { position:absolute; top:-.6em; left:.2em; padding:0 .2em .4em .2em; pointer-events:none; color:#870; font-size:.9em; background-color:#fff; }
.f_form .f_info { position:relative; padding:0; width:100%; }

/* Input */
.f_form input[type="text"],
.f_form input[type="number"],
.f_form input[type="date"],
.f_form input[type="time"],
.f_form input[type="datetime"],
.f_form input[type="email"],
.f_form input[type="search"],
.f_form input[type="url"],
.f_form input[type="password"],
.f_form textarea,
.f_form select,
.f_form .f_string,
.f_select, .f_input { display:block; width:100%; padding:.2em; color:#000; outline:none; border:none; background-color:#fff; -moz-appearance:none; -webkit-appearance:none; appearance:none; /* Schatten in einigen Browsern */ }

/*.f_form input { width:100%; padding:.6em .4em; outline:none; border:none; background-color:#fff; }*/
.f_form input + .f_label,
.f_form textarea + .f_label { position:absolute; top:.8em; left:.2em; width:90%; padding:0 .2em .4em .2em; pointer-events:none; color:#870; font-size:1em; background-color:#fff; transition:.35s; }
.f_form input:focus ~ .f_label,
.f_form input:not(:placeholder-shown) ~ .f_label,
.f_form textarea:focus ~ .f_label,
.f_form textarea:not(:placeholder-shown) ~ .f_label { top:-.6em; width:auto; font-size:.9em; background-color:#fff; }


/* Checkbox Single Field */
.f_check_single label { padding:0 .2em; width:100%; cursor:pointer; transition:.35s; }
.f_check_single label input[type="checkbox"] { display:none; }
.f_check_single label .ico_checkbox_on { display:none; }
.f_check_single label input[type="checkbox"]:checked ~ .ico_checkbox_on { display:inline-block; }
.f_check_single label input[type="checkbox"]:checked ~ .ico_checkbox_off { display:none; }

/* Checkbox- und Radio-Button*/
.f_checkradio_btn { display:flex; padding:.2em .2em; flex-wrap:wrap; }
.f_checkradio_btn div { display:flex; padding:.2em .2em; }
.f_checkradio_btn label { padding:.2em .6em; width:100%; cursor:pointer; text-align:center; background-color:#eee; transition:.35s; }
.f_checkradio_btn label input[type="checkbox"],
.f_checkradio_btn label input[type="radio"] { display:none; }
.f_checkradio_btn label:has(> input:checked) { color:#fff; background-color:#ba0; }

/* Checkbox- und Radio-Liste*/
.f_checkradio_list { display:block; padding:0; }
.f_checkradio_list div { display:block; padding:.2em 0; }
.f_checkradio_list label { padding:0 .2em; width:100%; cursor:pointer; transition:.35s; }
.f_checkradio_list label input[type="checkbox"],
.f_checkradio_list label input[type="radio"] { display:none; }
.f_checkradio_list label .ico_checkbox_on { display:none; }
.f_checkradio_list label input[type="checkbox"]:checked ~ .ico_checkbox_on { display:inline-block; }
.f_checkradio_list label input[type="checkbox"]:checked ~ .ico_checkbox_off { display:none; }
.f_checkradio_list label .ico_radio_on { display:none; }
.f_checkradio_list label input[type="radio"]:checked ~ .ico_radio_on { display:inline-block; }
.f_checkradio_list label input[type="radio"]:checked ~ .ico_radio_off { display:none; }

/* Höhe Textarea */
textarea.f_textarea_xs { height:2em; }
textarea.f_textarea_s { height:4em; }
textarea.f_textarea_m { height:8em; }
textarea.f_textarea_l { height:16em; }
textarea.f_textarea_xl { height:32em; }

/* sepzielle Eigenschaften */
.f_disabled { color:#ccc!important; background-color:#fff!important; }

/* Error-Markierung von Formular_Elementen */
.f_error {  }
.f_error_msg { display:block; padding:.2em .6em; color:#fff; font-size:.8em; background-color:#966; }
.f_error_msg i { font-weight:bold; }

/* im Formular soll dieser Bereich mit Feldern nicht angezeigt werden. Die Felder sind leer bzw. werden beim Absenden über die Submit-Schaltfläche geleert.
Der normale Nutzer kann diese Felder nicht sehen und damit auch nicht füllen. Sollten die Felder trotzdem gefüllt sein, wurden diese wohlmöglich automatisch gefüllt */
.f_dn { margin:0!important; padding:0!important; height:0px; display:block; overflow:hidden; }
.f_dn input { display:none; border:none; }



/* ------------------------------
Schaltflächen
------------------------------ */
.f_command { display:block; width:100%; padding:.6em; text-align:center; }
/*
.f_command [class*="f_btn"] { display:inline-block; padding:.4em 1em; cursor:pointer; line-height:1em; font-size:1em; text-decoration:none; text-align:center; border-radius:.8em; transition:0.5s; box-shadow:none; }
*/

.f_btnbar:before, .f_btnbar:after { content:""; display:table; }
.f_btnbar:after { clear:both; }
.f_btnbar { display:block; width:100%; padding:0; }
.f_btnbar [class*="f_btn"] { float:left; padding:.4em 1em; cursor:pointer; line-height:1em; font-size:1em; text-decoration:none; text-align:center; transition:0.5s; box-shadow:none; border-radius:0; }
.f_btnbar >*:first-child { border-top-left-radius:.4em; border-bottom-left-radius:.4em; }
.f_btnbar >*:last-child { border-top-right-radius:.4em; border-bottom-right-radius:.4em; }




[class*="f_btn"], [class*="f_sbtn"] { display:inline-block; cursor:pointer; line-height:1em; font-size:1em; text-decoration:none; text-align:center; border-radius:.4em; transition:0.5s; box-shadow:none; }
button[class*="f_btn"] { padding:.4em 1em; }
a[class*="f_btn"], span[class*="f_btn"] { padding:.4em 1em; }
button[class*="f_sbtn"] { padding:.4em 1em; }
a[class*="f_sbtn"], span[class*="f_sbtn"] { padding:.1em .6em; }
[class*="f_btn"] i { font-size:1em; }
[class*="f_sbtn"] i { font-size:1em; }
[class*="f_btn"] em, [class*="f_sbtn"] em { font-size:.85em; }
.f_btn, .f_sbtn { color:#330; border:1px solid #ba0; background-color:#dbcd00; } /* normal */
.f_btn:hover, .f_sbtn:hover { background-color:#ed2; }
.f_btn_s, .f_sbtn_s { color:#333; border:1px solid #999; background-color:#fff; } /* untergeordnet (subordinate) */
.f_btn_s:hover, .f_sbtn_s:hover { background-color:#eee; }
.f_btn_a, .f_sbtn_a { color:#fff; border:1px solid #600; background-color:#966; } /* Achtung (attent) */
.f_btn_a:hover, .f_sbtn_a:hover { background-color:#b68; }
.f_btn_d, .f_sbtn_d { color:#666; border:1px solid #999; background-color:#eee; } /* deaktiv (disable) */


.f_copy { position:relative; display:block; margin:0; padding:0 .1em; }
.f_copy { zoom:1; }
.f_copy:before { display:table; content:""; }
.f_copy:after { display:table; clear:both; content:""; }
.f_copy span { float:right; padding:.2em; width:10em; cursor:pointer; line-height:.9em; font-size:.9em; text-decoration:none; text-align:center; border-radius:4px; transition:0.5s; box-shadow:none; color:#330; border:1px solid #ba0; background-color:#dbcd00; } /* Copy-Button */
.f_copy span:hover { background-color:#ed2; }



/* Hauptschaltfläche */
.f_control { position:fixed; top:5em; right:0; width:5em; height:100%; padding-top:5em; z-index:30; }
.f_control >*:first-child { border-top:1px solid #ba0; border-top-left-radius:.8em; }
.f_control >*:last-child { border-bottom-left-radius:.8em; }



[class*="f_mbtn"] { position:relative; display:block; width:5em; height:5em; cursor:pointer; line-height:1em; text-decoration:none; text-align:center; box-shadow:none; border:0; border-left:1px solid #ba0; border-bottom:1px solid #ba0; transition:0.5s; }
a[class*="f_mbtn"], span[class*="f_mbtn"] { padding-top:2em; }
button[class*="f_mbtn"] { padding-top:.3em; }
[class*="f_mbtn"] i { font-size:2em; }
[class*="f_mbtn"] em { position:absolute; display:block; left:0; bottom:.1em; width:100%; overflow:hidden; text-align:center; font-size:.9em; }
.f_mbtn { color:#fff; background-color:#dbcd00; } /* normal */
.f_mbtn:hover { background-color:#ed2; }
.f_mbtn_a { color:#fff; background-color:#966; } /* Warnung */
.f_mbtn_a:hover { background-color:#b78; }
.f_mbtn_h { color:#fff; background-color:#ad2; } /* hervorgehoben */
.f_mbtn_h:hover { background-color:#ad2; }
.f_mbtn_b { color:#666; background-color:#ccc; } /* untergeordnet */
.f_mbtn_b:hover { background-color:#eee; }
.f_mbtn_d { color:#999; background-color:#ccc; }









/* Auswahl-Schaltfläche */
.f_choice { display:-webkit-flex; display:-ms-flex; display:flex; overflow:auto; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; padding:0; }
.f_choice::after { content:""; clear:both; display:table; }

.f_choice [class*="f_col"] { display:block; float:left; padding:1em; border-right:1px solid #ccc; }
.f_choice [class*="f_col"]:last-child { border-right:none; }

/* feste Spalten, unabhängig vom viewport */
.f_choice .f_col1 { width:8.333333333%; }
.f_choice .f_col2 { width:16.666666667%; }
.f_choice .f_col3 { width:25%; }
.f_choice .f_col4 { width:33.333333333%; }
.f_choice .f_col5 { width:41.666666667%; }
.f_choice .f_col6 { width:50%; }
.f_choice .f_col7 { width:58.333333333%; }
.f_choice .f_col8 { width:66.666666667%; }
.f_choice .f_col9 { width:75%; }
.f_choice .f_col10 { width:83.333333333%; }
.f_choice .f_col11 { width:91.666666667%; }
.f_choice .f_col12 { width:100%; }

.f_choice .o_middle { display:flex; flex-direction:column; overflow:hidden; justify-content:center; }
.f_choice .o_bottom { display:flex; flex-direction:column; overflow:hidden; justify-content:flex-end; }

.f_choice [class*="f_col"] h3 { display:block; margin:0 0 1em 0; padding:.4em; color:#330; text-align:center; font-size:1em; background-color:#dbcd00; }

.f_choice [class*="f_col"].o_content { background-color:#fff; transition:0.5s; }
.f_choice [class*="f_col"].o_content:hover { color:#000; background-color:#ccc; }





.f_push_inline { display:inline-block; padding:.2em .8em; color:#444; line-height:1.2em; font-size:.8em; font-style:normal; font-weight:normal; background-color:#dbcd00; border-radius:.4em; transition:0.3s; }
.f_push_inline:hover { color:#fff; }



.f_push_circle { display:inline-block; width:2em; line-height:2em; color:#444; text-align:center; font-style:normal; font-weight:bold; border:1px solid #ccc; border-radius:50%; background-color:#dbcd00; transition:0.5s; }
.f_push_circle i { font-size:.9em; }
.f_push_circle:hover { color:#fff; }



/* Radio als Button
<div class="f_push_radio">
	<input type="radio" id="ppRed" name="color" value="rot" checked><label for="ppRed">rot</label>
	<input type="radio" id="ppYellow" name="color" value="gelb"><label for="ppYellow">gelb</label>
	<input type="radio" id="ppGreen" name="color" value="grün"><label for="ppGreen">grün</label> 
</div>
*/
.f_push_radio { position:relative; display:inline-block; }
.f_push_radio input[type="radio"] { position:fixed; width:0; opacity:0; }
.f_push_radio label { display:inline-block; margin-bottom:.2em; padding:.4em 1em; cursor:pointer; text-align:center; background-color:#fff; border:1px solid #ccc; border-radius:.8em; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.f_push_radio label:hover { color:#330; }
.f_push_radio input[type="radio"]:focus + label { color:#330; background-color:#eee; }
.f_push_radio input[type="radio"]:checked + label { color:#330; background-color:#eee; }





/* Schiebeschalter ein/aus
<div class="f_switch_onoff">
	<input id="ppSswitch-1" type="checkbox" />
	<label for="ppSwitch-1">On/Off</label>
</div>
*/
.f_switch_onoff { position:relative; display:inline-block; }
.f_switch_onoff input { display:none; }
.f_switch_onoff label { display:block; width:2.8em; height:1.4em; text-indent:-150%; clip:rect(0 0 0 0); color:transparent; user-select:none; }
.f_switch_onoff label::before,
.f_switch_onoff label::after { display:block; position:absolute; cursor:pointer; content:""; }
.f_switch_onoff label::before { width:100%; height:100%; border-radius:9999em; background-color:#dedede; -webkit-transition:background-color 0.25s ease; transition:background-color 0.25s ease; }
.f_switch_onoff label::after { top:0; left:0; width:1.4em; height:1.4em; border-radius:50%; background-color:#fff; box-shadow:0 0 2px rgba(0, 0, 0, 0.45); -webkit-transition:left 0.25s ease; transition:left 0.25s ease; }
.f_switch_onoff input:checked + label::before { color:#330; background-color:#dbcd00; }
.f_switch_onoff input:checked + label::after { left:1.4em; }




/*
<div class="f_dropdown">
	<input type="checkbox" id="ppDrowDown-1">
	<label for="ppDrowDown-1">Wählen Sie bitte</label>
	<ul class="f_dropdown">
		<li><input type="radio" id="ppFine" name="linewidth" value="1" checked><label for="ppFine">fein</label></li>
		<li><input type="radio" id="ppNormal" name="linewidth" value="3"><label for="ppNormal">normal</label></li>
		<li><input type="radio" id="ppStrong" name="linewidth" value="6"><label for="ppStrong">dick</label></li>
	</ul>
</div>
*/
.f_dropdown { position:relative; display:inline-block; width:auto; }
.f_dropdown > input[type=checkbox] { display:none; }
.f_dropdown > label { display:inline-block; margin-bottom:.2em; padding:.4em 1em; width:100%; box-sizing:border-box; cursor:pointer; text-align:center; background-color:#fff; border:1px solid #ccc; border-radius:.8em; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.f_dropdown input[type=checkbox]:checked ~ label { color:#330; background-color:#eee; }
.f_dropdown input[type=checkbox]:checked ~ ul { display:block; height:auto; }

.f_dropdown ul { position:absolute; display:none; margin:0; padding:.2em 0; width:auto; height:0; z-index:1; list-style:none; text-align:left; background-color:#fff; border:1px solid #ccc; border-radius:.4em; }
.f_dropdown ul li { margin:0; padding:0; width:100%; background-color:#fff; }
/*.f_dropdown ul li:hover { background-color:#48b; color:#fff; }*/
.f_dropdown ul li a { display:block; margin-bottom:.1em; padding:.4em 1em; color:inherit; text-decoration:none; }

.f_dropdown ul li input[type="radio"] { position:fixed; width:0; opacity:0; }
.f_dropdown ul li label { display:block; margin-bottom:.1em; padding:.4em 1em; cursor:pointer; text-align:left; background-color:#fff; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.f_dropdown ul li label:hover { color:#330; }
.f_dropdown ul li input[type="radio"]:focus + label { color:#330; background-color:#ccc; }
.f_dropdown ul li input[type="radio"]:checked + label { color:#330; background-color:#ccc; }



@media screen and (min-width:320px) {


}



@media screen and (min-width:480px) {
	
}



@media screen and (min-width:620px) {


}



@media screen and (min-width:800px) {
	

}



@media screen and (min-width:960px) {



}



@media screen and (min-width:1150px) {
	

}



@media screen and (min-width:1500px) {
	

}