/* libre-franklin-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/libre-franklin-v18-latin-regular.woff2') format('woff2'),
       url('fonts/libre-franklin-v18-latin-regular.ttf') format('truetype');
}
/* libre-franklin-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/libre-franklin-v18-latin-700.woff2') format('woff2'),
       url('fonts/libre-franklin-v18-latin-700.ttf') format('truetype');
}
/* rubik-regular - latinv */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/rubik-v28-latin-regular.woff2') format('woff2'),
       url('fonts/rubik-v28-latin-regular.ttf') format('truetype');
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
	font: 400 16px / 25.2px "Libre Franklin", sans-serif;
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}


.containers {
	font-size: 1rem;
	margin: 0 auto;
	padding:0;
	background-color: #ffffff;
	/* min-width: 20.000em; */
}

.formContainer {
	background: #fff;
	padding: 1rem 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #00305D;
    font-family: "Rubik", sans-serif;
	font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top: 0;
}

.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.header {
	color: #fff;
	font-size: larger;
	font-weight: 700;
	width: auto;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	background: #00305D;
	text-align: left;
	text-transform: none;
}

a {
    color: #00305D;    
    text-decoration: underline;
}
a:focus, a:hover {
    color: #00305D;
    text-decoration: none;
}

div.tblbg:nth-child(even) {
	background: #f1f1f1;
	padding: 0.6rem 0.8rem 0.6rem 0.6rem; 
}

div.tblbg:nth-child(odd) {
	background: #fff;
	padding: 0.6rem 0.8rem 0.6rem 0.6rem; 
}
.bezWidth {
	display: inline-block; 
	width: 6rem;
	font-weight: 700;
}
.arrows {
	display: inline-block;
	float: right;
}
.pfeil {
	width: 1rem;
	height: 1rem;
}
fieldset {
	padding: 0.5rem 0 1rem 0;
	text-align: center;
	margin: 0;
	border: none;
}
.inputfield {
	height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #767676;
    border-radius: 0;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.errormsg {
  border: 1px dashed red;
  margin: 1rem 0;
  background-color: #f1f1f1;
  padding: .25rem .35rem .15rem .35rem;
}

#messagebox {
	margin-bottom: 1rem;
	margin-top: 1.5rem;
	padding: 1rem;
	background-color: #f1f1f1;
}

#messagebox h3 {
	font-family: "Libre Franklin", sans-serif;
	color: #000;
	font-style: italic;
	font-weight: 400;
	margin-top: -.5rem;
}

#messagebox strong {
	white-space: nowrap;
}

legend {
	color: #767676;
}

#rowlft,
#rowrgt { 
	vertical-align: top;
}

div#lft,
div#rgt {
	padding: .5rem;
}
div#lft { 
	float: right;
	text-align:right;
}
.btn {
    background-color: #00305D;
	border: 1px solid #00305D;
    border-radius: 0;
    color: #fff;
	font-size: 16px;
	padding: 12px 24px;
	font-family: "Rubik", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
.btn:active {
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}



/* key breakpoints */
/* Kann maximal 1280px darstellen. */
@media only screen and (max-width : 575.98px) {
    .bezWidth {
		display: block; 
	}
}

@media print {
	.donotprint {
		display: none;
		visibility: hidden;
	}
	.visually-hidden {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
		overflow: visible;
		white-space: normal;
	}
	h1.visually-hidden {
		margin-bottom: 2rem;
	}
}