@charset "utf-8";

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

.f_row { display:-webkit-flex; display:-ms-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }

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

/* Feldergruppen */
.f_form fieldset {  }
.f_form legend {  }

/* Eingabefelder */
/* Grundeinstellung */
.f_label { display:block; padding:.4em .8em; height:100%; color:#000; font-size:.8em; text-align:right; border:1px solid #ddd; background-color:#eee; }

form[class*="f_form"] input[type="text"],
form[class*="f_form"] input[type="number"],
form[class*="f_form"] input[type="date"],
form[class*="f_form"] input[type="time"],
form[class*="f_form"] input[type="datetime"],
form[class*="f_form"] input[type="email"],
form[class*="f_form"] input[type="search"],
form[class*="f_form"] input[type="url"],
form[class*="f_form"] input[type="password"],
form[class*="f_form"] textarea,
form[class*="f_form"] select,
form[class*="f_form"] .f_string,
.f_select, .f_input { display:block; width:100%; padding:.4em .8em; color:#000; font-size:1em; border:1px solid #ddd; -moz-appearance:none; -webkit-appearance:none; appearance:none; /* Schatten in einigen Browsern */ }
form[class*="f_form"] select::-ms-expand { display:none; border:0; } /* entfernt open-Pfeil in der Select-Liste */

/* Focus */
form[class*="f_form"] input:focus,
form[class*="f_form"] textarea:focus,
form[class*="f_form"] select:focus,
.f_select:focus, .f_input:focus { outline:0; color:#330; border-bottom:1px solid #dbcd00; background-color:rgb(219, 205, 0, 0.1); }

/* Checkbox und Radio */
.f_range_hor, .f_range_ver { display:block; padding:.4em .8em; width:100%; overflow:hidden; list-style:none; color:#666; border:1px solid #ddd; }
.f_range_hor li { float:left; margin-right:1em; width:auto; font-weight:normal; }
.f_range_ver li { display:block; width:auto; padding:.2em 0; }

/* Checkbox */
label.f_checkbox { display:inline-block; margin:0; padding:0; cursor:pointer; font-weight:normal; } 
label.f_checkbox input[type="checkbox"], label.f_checkbox .icon-check { display:none; } 
label.f_checkbox input[type="checkbox"]:checked ~ .icon-check { display:inline-block; color:#666; }
label.f_checkbox input[type="checkbox"]:checked ~ .icon-check-empty { display:none; }
label.f_checkbox i { color:#666; font-size:1.2em; } 

/* Radio */
label.f_radio { display:inline-block; margin:0; padding:0; cursor:pointer; color:#666; font-weight:normal; } 
label.f_radio input[type="radio"], label.f_radio .icon-circle { display:none; } 
label.f_radio input[type="radio"]:checked ~ .icon-circle { display:inline-block; color:#666; }
label.f_radio input[type="radio"]:checked ~ .icon-circle-empty { display:none; }
label.f_radio i { color:#666; font-size:1.2em; } 

/* 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; }

table.f_table { margin:0; width:100%; border-spacing:0; empty-cells:show; border-collapse:separate; background-color:#fff; }
table.f_table td { padding:.6em .4em .6em .4em; overflow:hidden; line-height:1.2em; vertical-align:middle; }

/* Editor */
div.f_editor { display:block; width:100%; min-height:10em; max-height:30em; padding:.8em .4em; overflow-y:scroll; color:#666; border:1px solid #ddd; background-color:#fff; }

.f_editor_control { display:block; margin-bottom:.4em; padding:0; width:100%; }
.f_editor_control textarea { display:none; }
.f_editor_control button { display:inline-block; margin-right:.4em; padding:.4em 0; width:3em; cursor:pointer; line-height:1em; color:#333; text-decoration:none; text-align:center; border:1px solid #333; background-color:#ddd; transition:0.5s; box-shadow:none; }
button.f_btn_editor:hover { color:#666; background-color:#eee; }

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

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

/* 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:.6em;  }
.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:.8em; border-bottom-left-radius:.8em; }
.f_btnbar >*:last-child { border-top-right-radius:.8em; border-bottom-right-radius:.8em; }




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




/* 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; }








/* 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) {
	

}