@charset "utf-8"; 
/* Set the global variables for everything. Change these to use your own fonts/colours. */
:root {

  /* Set sans-serif & mono fonts 
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    */
  /* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
  --base-fontsize: 1.0rem;

  /* Major third scale progression - see https://type-scale.com/ */
  --header-scale: 1.2;

  /* Line height is set to the "Golden ratio" for optimal legibility */
  --line-height: 1.0;

  /* Default (light) theme */
  --bg: #FFF;
  --accent-bg: #f7dfdd;
  --text: #212121;
  --text-light: #585858;
  --border: #D8DAE1;
  --accent: #0D47A1;
  --accent-light: #90CAF9;
  --code: #D81B60;
  --preformatted: #444;
  --marked: #FFDD33;
  --disabled: #EFEFEF;
}


@font-face {
  font-family: 'OpenSans';
  /* Gewünschter Name */
  src: url('OpenSans-Light.ttf') format('truetype');
}


* {
  box-sizing: border-box;
}

a:link, a:visited {
  color:black;
  background-color:white;
  padding:2px 5px 2px 5px;
  border-radius:4px;
  font-weight:bold;
  text-decoration:none;
}

a:hover, a:active {
  background-color: rgb(10, 191, 249);
  color:white;
}

body {
  background-color: rgb(236, 236, 236);
}


h1 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
}

h2 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
}

h3 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
}

h4 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: calc(var(--base-fontsize) * var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
}

h5 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: var(--base-fontsize);
  margin-top: calc(var(--line-height) * 1.5rem);
  font-weight: bold;
}

h6 {
  font-family: 'OpenSans', Arial, sans-serif;
  font-size: calc(var(--base-fontsize) / var(--header-scale));
  margin-top: calc(var(--line-height) * 1.5rem);
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: none;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-family: 'OpenSans';
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* The checkbox container *****************************************************************/

.checkcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgb(192, 166, 166);
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked~.checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid rgb(255, 255, 255);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Column Auswahlboxen (Spalten ausblenden)  *****************************************************************/

.checkcol {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 17px;
  font-family: 'OpenSans', Arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkcol input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkcol {
  position: absolute;
  top: 2px;
  left: 10px;
  height: 20px;
  width: 20px;
  background-color: #2196F3;
}

/* On mouse-over, add a grey background color */
.checkcol:hover input~.checkmarkcol {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcol input:checked~.checkmarkcol {
  background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkcol:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkcol input:checked~.checkmarkcol:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkcol .checkmarkcol:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid rgb(255, 255, 255);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/**********************************************************************************************/

label{
  position: absolute;
}
.right{
  top: 0;
  left: 100%;
}
.left{
  top: 0;
  right: 100%;
}
.top{
  bottom: 100%;
  left: 0;
}
.bottom{
  top: 100%;
  left: 0;
}

select {
  width: auto;
  min-width: 300px;
  max-width: 300px;
  height: 60px;
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border: 2rem;
  border-radius: 4px;
  color: white;
  background-color:  #9d746fda;
  font-size: 25px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

/* Green */
.green {
  border-color: #04AA6D;
  color: green;
}

.green:hover {
  background-color: #04AA6D;
  color: white;
}

/* Blue */
.blue {
  border-color: #2196F3;
  color: dodgerblue
}

.blue:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.orange {
  border-color: #ff9800;
  color: orange;
}

.orange:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.red {
  border-color: rgb(196, 48, 78);
  color: rgb(196, 48, 78);
}

.red:hover {
  background: rgb(196, 48, 78);
  color: white;
}

/* Gray */
.grey {
  border-color: #e7e7e7;
  color: black;
}

.grey:hover {
  background: #e7e7e7;
}

.container {
  max-width: 45rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(248, 203, 203);
  opacity: 1;
  /* Firefox */
}

#zentrieren {
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type=submit] {
  background-color: rgb(187,4,43);
  height: 60px;
  width: 300px;
  border: 1px;
  border-radius: 4px;
  color: white;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 25px;
  align-content: center;
}

input[type=submit]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

input[type=buttonmenu]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

input[type=buttonsmall]:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

input[type=radio] {
  height: 40px;
  width: 300px;
  border: 1px;
  border-radius: 2px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 15px;
}

input[type=radio]:checked {
  height: 60px;
  width: 300px;
  border: 1px;
  border-radius: 2px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 15px;
}

input[type=file] {
  background-color: #a5a5a5da;
  height: 60px;
  width: 500px;
  border: 1px;
  border-radius: 4px;
  color: white;
  padding-top: 0.7rem;
  padding-bottom: 0.2rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 25px;
  align-content: center;
}

input[type=reset] {
  background-color: #9baa16;
  height: 60px;
  width: 300px;
  border: 1px;
  border-radius: 4px;
  color: white;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 25px;
}

input[type=button] {
  background-color: #ff280cda;
  height: 60px;
  width: 300px;
  border: 1px;
  border-radius: 4px;
  color: white;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 25px;
}

input[type=buttonsmall] {
  background-color: #2196F3;
  height: 30px;
  width: 100px;
  border: 1px;
  border-radius: 4px;
  color: white;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 15px;
}

input[type=buttonmenu] {
  background-color: #ffffff;
  height: 60px;
  width: 60px;
  border: 1px;
  border-radius: 4px;
  color: rgb(0, 0, 0);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  font-size: 60px;
}


input[type=text] {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 60px;
  width: 400px;
  text-decoration-color: #93141E;
  box-sizing: border-box;
  border-color: rgb(85, 214, 236);
  border: 1px;
  border-radius: 4px;
  border-style: solid;
  color: rgb(146, 23, 23);
  font-size: 25px;
}


input[type=suche] {
  width: 300px;
  height: 60px;
  box-sizing: border-box;
  border: 2px solid rgb(219, 219, 219);
  border-radius: 4px;
  font-size: 25px;
  background-color: white;
  background-image: url('search.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 40px 12px 60px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=number] {
  width: 300px;
  height: 60px;
  box-sizing: border-box;
  border: 2px solid rgb(219, 219, 219);
  border-radius: 4px;
  font-size: 25px;
  background-color: white;
  background-image: url('input.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 40px 12px 60px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}


input[type=date] {
  width: 300px;
  height: 60px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 25px;
  background-color: white;
  background-image: url('pfeil_l.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 40px 12px 60px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

textarea {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  max-width: 100%;
  width: 400px;
  line-height: 1.5;
  border-color: #93141E;
  border-width: 2px;
  border-radius: 4px;
  font-size: 25px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}


input[type=password] {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  height: 60px;
  width: 400px;
  text-decoration-color: #93141E;
  box-sizing: border-box;
  border-color: rgb(146, 4, 4);
  border: 2px;
  border-radius: 4px;
  border-style: solid;
  color: rgb(146, 23, 23);
  font-size: 25px;
}




article {
  border: none;
  display: grid;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #ffffff;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
  text-align: center;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

tr{
  line-height: 130%;
}

th,
td {
  text-align: left;
  padding: 5px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

[type="checkbox"] {
  font-family: 'OpenSans', Arial, sans-serif;
  position: relative;
  left: 10px;
  right: 10px;
  top: 30px;
  bottom: 10px;
  z-index: 10;
  -webkit-appearance: none;
  appearance: none;
}

[type="checkbox"]+label {
  font-family: 'OpenSans', Arial, sans-serif;
  position: relative;
  left: 80px;
  display: block;
  cursor: pointer;
  font-size: 20px;
  line-height: 1.5;
  padding-left: auto;
  position: relative;
  margin-top: 10px;
}

[type="checkbox"]+label:before {
  font-family: 'OpenSans', Arial, sans-serif;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}

[type="checkbox"]+label:after {
  font-family: 'OpenSans', Arial, sans-serif;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.3s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  z-index: 10;
}

[type="checkbox"]:checked+label:before {
  background-color: #2b8718;
}

[type="checkbox"]:checked+label:after {
  margin: 0 0 0 30px;
}

article {
  border: none;
  display: grid;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  background-color: #fffbfc;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1em;
  text-align: center;
}

section,
aside {
  border: none;
  padding: 5px;
}

.toggle label {
	position: relative;
	display: inline-flexbox;
	width: 10em;
	height: 3.5em;
}

.toggle input {
	display: none;
}

.toggle .slider {
	/* Grundfläche */
	
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: -2em;
  right: 1em;
	width: 4em;
	height: 2em;
	background-color: #9d746fda;
	/* red */
	
	transition: all .3s ease-in-out;
	border-radius: 2em;
}

.toggle .slider:before {
	/* verschiebbarer Button */
	
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
	background-color: #0d7a9b;
	/* green */
}

.toggle input:focus + .slider {
	background-color: pink;
	box-shadow: 0 0 1px #0d7a9b;
}

.toggle input:checked + .slider:before {
	transform: translateX(1.9em);
}

.paraset .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	
	position: absolute;
	content: "BASIS";
	color:  #ff280cda;
	font-weight: bold;
	height: 1.6em;
	left: -3.5em;
	bottom: 0.2em;
}

.paraset input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	
	position: absolute;
	content: "VARIANT";
	color: #0d7a9b;
	left: 4.5em;
}

.pview .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	
	position: absolute;
	content: "OFF";
	color:  #ff280cda;
	font-weight: bold;
	height: 1.6em;
	left: -2.5em;
	bottom: 0.2em;
}

.pview input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	
	position: absolute;
	content: "ON";
	color: #0d7a9b;
	left: 4.5em;
}


.version .slider:after {
	/* Text vor dem FlipFlop-Schalter */
	
	position: absolute;
	content: "TEST";
	color: #ff280cda;
	font-weight: bold;
	height: 1.6em;
	left: -3.5em;
	bottom: 0.2em;
}

.version input:checked + .slider:after {
	/* Text hinter dem FlipFlop-Schalter */
	
	position: absolute;
	content: "FINAL";
	color: #0d7a9b;
	left: 4.5em;
}


.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-container > div {
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

.stiebel-color {
  color: #93141E;
}

.stiebel-heading {
  color: #29020b;
  background-color: #fffbfc;
  text-transform: uppercase;
  text-align: center;
  font-size: 3rem;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
}

.stiebel-entry-label {
  display: block;
  color: #4c5866;
  font-size: 1rem;
}

.stiebel-entry-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  background-color: white;
  color: #4c5866;
  border: 0.0625rem solid #4c5866;
  font-family: inherit;
  line-height: 1.5em;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
}

.stiebel-entry-input:focus {
  outline: none;
  border: 0.0625rem solid #e97200;
}

.stiebel-form-buttons {
  text-align: center;
}

.button {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 0px solid transparent;
  background-color: #93141E;
  color: white;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border-radius: 0.5rem;
}

.button:hover {
  background-color: #641219;
}

.stiebel-separator {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0.03125rem solid #4c5866;
}

.stiebel-entry {
  background-color: white;
  color: #4c5866;
  border: 0.0625rem solid #4c5866;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.stiebel-entry-title {
  color: #93141E;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
}

.stiebel-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.stiebel-entry-author {
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.stiebel-entry-content>p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
  font-size: 1rem;
}

.stiebel-entry-content>p:last-child {
  margin-bottom: 0;
}

.stiebel-pagination {
  margin: 1.75rem -0.5rem;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.stiebel-pagination-a {
  display: block;
  min-width: 2.5rem;
  padding: 0.25rem 0.5rem;
  background-color: #93141E;
  color: white;
  line-height: 1.5rem;
  text-decoration: none;
  border-radius: 0.5rem;
  text-align: center;
  margin: 0.25rem 0.5rem;
}

.stiebel-pagination-a:hover {
  background-color: #b35802;
}

.stiebel-pagination-active,
.stiebel-pagination-active:hover {
  background-color: #4c5866;
}

.stiebel-footer {
  color: #4c5866;
}

.stiebel-footer {
  margin-bottom: 2rem;
}