@charset "utf-8";
:root {
  --text: #444;
  --box: #EDEDED;
  --highlight: #ddd;
  --white: #fff;
  --warning: #F55759;
  --success: #4CC982;
  --neutral: #5DB4FC;
}

/* General */
body { color: var(--text); font-family: interstate, sans-serif; font-weight: 400; font-style: normal; }
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
.clearfix:before,.clearfix:after { content: " "; display: table; }  
.clearfix:after { clear: both; }  
.clearfix { *zoom: 1; }
a { color: var(--text);  }
strong, b { font-weight: 700; }

h1, h2, h3 { font-family: interstate-condensed, sans-serif; font-weight: 700; }
h3 { font-weight: 500; }

main { padding: 2%; }

#changeMsg { display: none; background: var(--neutral); color: var(--white); padding: 5px 10px; position: fixed; bottom: 0; left: 0;}

.flex_container { display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex_el { display: -webkit-flex; display: -ms-flexbox; display: flex; }
.flex_el .hilfscontainer { display: block; width: 100%; }

header { padding: 10px 2%; border-bottom: 1px solid var(--highlight); position: relative; }
header .logo.margin { margin-top: 30px; }
header .logo img { float: left; width: auto; height: 80px; user-select: none; }
header .logo h2 { float: left; line-height: 80px; margin: 0 0 0 20px; user-select: none; }
header .logo h2 .hiddenbr { display: none; }
header .backBtn { position: absolute; top: 0; left: 0; margin: 0; height: 100%; padding: 0; text-align: center; }
header .backBtn:before { font-size: 25px; width: 20px; line-height: 100px; }

main h1:first-child { margin-top: 0; }

footer { margin-top: 3%; background: var(--box); font-size: 90%; padding: 1% 2%; position: relative; }
footer h3 { margin: 0; }
footer a { text-decoration: none; }
footer .footer_el { display: block; float: left; width: 33.33%; }
footer .footer_links { text-align: right; }
footer .footer_links a { margin-left: 10px; }
footer .footer_center h3 { margin: 0; text-align: center; }
footer .footer_center img { display: block; width: 100%; margin-top: 10px; }

.fifty_wrapper { width: 100%; margin: -1%; }
.fifty_wrapper .fifty { width: 48%; margin: 1%; float: left; }

.button { display: inline-block; color: var(--white); background: var(--text); padding: 0 5px; line-height: 30px; font-size: 100%; text-decoration: none; margin-top: 10px; cursor: pointer; }
.button.deleteBtn { background: var(--warning); }
.box { padding: 10px; background: var(--box); display: inline-block; }

.note { display: inline-block; padding: 10px 12px; color: #fff; background: var(--neutral); user-select: none; }
.note.warning { background: var(--warning); }
.note.success { background: var(--success); }

input, textarea, select { border: 1px solid var(--highlight); border-radius: 0; box-shadow: none; color: var(--text); display: block; font-size: 100%; padding: 10px; width: 100%; font-weight: 300; }
input:active, textarea:active, input:focus, textarea:focus { border: 1px solid var(--highlight); }
textarea { height: auto; }
#kontakt textarea { height: 116px; }
label:first-child { margin-top: 0; }
label { display: block; margin-top: 15px; }
label h3 { margin-bottom: 5px; }
label span { font-weight: 600; }
input[type="submit"] { display: inline-block; width: auto; cursor: pointer; border: none; padding: 10px 20px; background: var(--box); }
input[type="submit"]:hover { background: var(--text); color: var(--white); }
.warning { background: rgba(255,0,0,0.5); }
#ds_container { margin: 10px 0 20px 0; }
#ds_container.warning { border: 1px solid var(--warning); }
#ds_container label { width: 95%; float: left; margin-top: 0; }
#ds_container input[type="checkbox"], input[type="checkbox"] { margin-right: 0.5%; margin-top: 3px; width: auto; float: left; }

table { width: 100%; text-align: left; }