html {
	font-size: 18px;
	scroll-behavior: smooth;

	/* ---------------------------- */
	/* Colors */

	--color-text-body: #111111;

	--color-background: hsl(232, 16%, 16%);

	--color-primary: hsla(233, 17%, 29%, 1);
	--color-primary-hover: hsla(233, 17%, 24%, 1);

	--color-capital: hsla(208, 71%, 57%, 1);
	--color-capital-bg: hsla(208, 71%, 57%, 0.25);

	--color-payment: hsla(50.7, 81.4%, 57.8%, 1);
	--color-payment-bg: hsla(50.7, 81.4%, 57.8%, 0.25);

	--color-costs: hsla(344, 65%, 59%, 1);
	--color-costs-bg: hsla(344, 65%, 59%, 0.25);
	--color-costs-hover: hsla(344, 65%, 55%, 1);

	--color-taxes: hsla(29, 66%, 58%, 1);
	--color-taxes-bg: hsla(29, 66%, 58%, 0.25);

	--color-period: hsla(254, 71%, 57%, 1);
	--color-period-bg: hsla(254, 71%, 57%, 0.25);
	--color-period-hover: hsla(254, 71%, 52%, 1);

	--color-withdrawal: hsla(208, 71%, 57%, 1);
	--color-withdrawal-bg: hsla(208, 71%, 57%, 0.25);
	--color-withdrawal-hover: hsla(208, 71%, 52%, 1);

	--color-rate: hsla(164, 71.3%, 52%, 1);
	--color-rate-bg: hsla(164, 71.3%, 52%, 0.3);

	--color-container: hsla(240, 100%, 99%, 1);
	--color-container-introduction: hsla(232, 16%, 18%, 1);;
	--color-container-introduction-text: #DDDEEE;

	--color-container-mobile-result: hsla(232, 16%, 18%, 0.8);;
	--color-container-mobile-result-text: #DDDEEE;

	--color-hint: hsl(232.3, 23.3%, 73.9%);

	--color-label-secondary: #6e7291;

	/* Table */

	--color-table-even-bg: #FFFFFF;
	--color-table-even-border: #F0F0F0;


	/* Sizes */

	--width-nav: 166px;
	--width-input-small: 78px;
	--padding-input-unit: 28px;
}

html[data-theme="light"] {

	/* Colors */

	--color-text-body: #111111;

	--color-background: hsl(230, 60%, 96%);

	--color-container: hsla(240, 100%, 99%, 1);
	--color-container-introduction-text: #5A5A66;

	/* Table */

	--color-table-even-bg: #FFFFFF;
	--color-table-even-border: #F0F0F0;
}

html[data-theme="dark"] {

	/* Colors */

	--color-text-body: #F1F1F1;

	--color-background: hsl(232, 16%, 16%);

	--color-container: hsla(232, 16%, 18%, 1);
	--color-container-introduction-text: #DDDEEE;

	--color-label-secondary: #8c8fa8;

	/* Table */

	--color-table-even-bg: #323440;
	--color-table-even-border: #232531;
}


body {
	font-family: 'Inter', sans-serif;
	color: var(--color-text-body);
	/*background: #F7F7F7;*/
	/*background: hsl(233, 17%, 29%);*/
	background: var(--color-background);
	margin: 0;
}

#app {
	display: grid;
	height: 100vh;
	max-width: 1700px;
	margin: 0 auto;
	grid-template-areas:
		"nav content"
		"footer footer";
	grid-template-rows: 1fr 160px;
	grid-template-columns: var(--width-nav) 1fr;
}

nav {
	grid-area: nav;
}

main {
	grid-area: content;
	margin: 0rem auto 0rem auto;
	display: block;
	width: 90%;
}

footer {
	grid-area: footer;
	padding: 40px;
	color: hsl(233.6, 36%, 85%);
	text-align: center;
	font-size: 0.8rem;
}


.show__inline--small-screen {
	display: none;
}


/* ---------------------------------------------- */
/* Transitions */

.fade-enter-active, .fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}


.slide-fade-enter-active {
  transition: all .2s ease;
}
.slide-fade-leave-active {
  transition: all .4s ease; /*cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  /*transform: translateX(-8px);*/
  opacity: 0;
}


.slide-leave-active,
.slide-enter-active {
  transition: 0.6s;
}
.slide-enter {
  transform: translate(0, -100%);
}
.slide-leave-to {
  transform: translate(0, -100%);
}



/* ---------------------------------------------- */

h1 {
	font-weight: 300;
	/*color: hsl(232.5, 22.9%, 58.8%);*/
	/*color: hsl(45, 54%, 58%);*/
	color: hsl(0.6, 63%, 69%);
	margin: 0px 0 20px 0;

	/*
	font-size: 3.5rem;
	line-height: 3.2rem;
	letter-spacing: -1px;
	*/

	font-size: 1.2rem;
	line-height: 1.4rem;
	letter-spacing: 3px;
}

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #dddeee; 
   line-height: 0.1em;
   margin: 10px 0 60px 0; 

   color: #9d9fbb;
   font-size: 30px;
   font-weight: 500;	
}

h2 span { 
    background: var(--color-container); 
    padding: 0 40px; 
}

h3 {
	margin-top: 2rem;
	font-size: 1rem;
	color: var(--color-primary);
}



.footer__contact {
	max-width: 40ch;
	margin: 0 auto 1rem auto;
}

.footer__copyright {

}



/* ----------------------------------------------------------- */


[v-cloak] { 
	display: none; 
} 

.bold {
	font-weight: 600;
}

.hint {
	font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    color: var(--color-hint);
    text-align: center;
    /*
    margin: 0 auto;
    max-width: 500px;
    */
}
.hint__content {
	display: inline-block; 
	text-align: left;
	max-width: 40ch;
}

.flexbreak {
	flex-basis: 100%;
	height: 0;
}

.spacer--1x::before {
	content: '';
	display: inline-block;
	height: 1rem;
}

.spacer--2x::before {
	content: '';
	display: inline-block;
	height: 2rem;
}

.spacer--3x::before {
	content: '';
	display: inline-block;
	height: 3rem;
}

.spacer--4x::before {
	content: '';
	display: inline-block;
	height: 4rem;
}

.spacer--5x::before {
	content: '';
	display: inline-block;
	height: 5rem;
}

.spacer--6x::before {
	content: '';
	display: inline-block;
	height: 6rem;
}

a {
	color: hsl(0.6, 63%, 69%);
	text-decoration: none;
}

a.datenschutz {
	color: hsl(233.6, 36%, 85%);
	text-decoration: none;
}

a.disguise-email {
	color: hsl(0.6, 63%, 69%);
	text-decoration: none;
}

.disguise-email:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}


/* ------------------------------------- */


.navigation {
	position: fixed;
	top: 2rem;
	left: 0.5rem;
	/*background: #000000;*/
	width: calc(var(--width-nav) - 4px);
	padding-left: 0;
	font-size: 0.8rem;
	/*border-left: 1px solid #efefef;*/
}


.navigation__headline {
	color: #FFFFFF;
	padding: 0.5rem 0.5rem;
	font-weight: 700;
	font-size: 0.6rem;
	text-transform: uppercase;
}

.navigation__help {
	margin-top: 2rem;
}


.navigation__help_text {
	font-weight: 300;
	/*color: hsl(233.6, 35.9%, 84.7%); für hellere hintergrundfarbe*/
	color: hsl(234.2, 16.1%, 62.2%);
	padding: 0rem 0.5rem;
}


.navigation ul, .navigation ol {
	list-style: none;
	margin: 0;
	padding: 0;
}


.navigation a {
	text-decoration: none;
	display: block;
	padding: 0.5rem 0.5rem;
	/*color: #ccc;*/
	color: hsl(234.2, 16.1%, 62.2%);
	transition: all 50ms ease-in-out; 
	font-weight: 300;
	border-radius: 8px;
}

.navigation a:hover,
.navigation a:focus {
	color: hsl(233.6, 36%, 85%);
}

.navigation li.navigation--active > a {
	color: hsl(233.6, 35.9%, 84.7%);
	/*font-weight: 500;*/
	background: #363748;
	
}

.navigation img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}


/* -------------------- */


#result-mobile {
	position: fixed;
	top: 0;
	left: 50px;
	right: 50px;
	/*background: hsla(0, 0%, 60%, 0.8);*/
	/*background: var(--color-container-mobile-result);*/
	background: hsla(337, 63%, 53%, 0.94);
	box-shadow: 0px 10px 36px -10px rgb(138 40 79);
	color: var(--color-container-mobile-result-text);
	border-radius: 0 0 10px 10px;

	/*
	border-bottom: 4px solid #e6739f;
    border-left: 4px solid #e6739f;
    border-right: 4px solid #e6739f;
    */

	padding: 10px 20px;
	/*height: 60px;*/
	
	display: none;
}

.panel__result {
	display: flex;
	justify-content: space-between;
}

.panel__result dl {
	margin: 0;
}

.panel__result dt {
	font-size: 0.8rem;
	color: #eab4c9;
}

.panel__result dd {
	margin: 0;
	font-weight: 600;
}

/* -------------------- */


.stack-chart {
	border-radius: 4px;
}


.stack-chart__rect-default {
	fill: var(--color-container);
}

.stack-chart__rect-paid-in {
	fill: var(--color-payment);
}

.stack-chart__rect-increase {
	fill: var(--color-rate);
}

.stack-chart__rect-costs {
	fill: var(--color-costs);
}



.stack-chart__label {
    fill: var(--color-label-secondary);
    font-size: 0.7rem;
}
.stack-chart__label-result {
	fill: var(--color-primary);
	font-size: 1rem;
	font-weight: bold;
}
.stack-chart__label-total {
	fill: var(--color-primary);
	font-weight: bold;
	font-size: 30px;
}
.stack-chart__corner {
	fill: var(--color-container);
}


/* -------------------- */

.container {
	/*
	margin: 0rem auto 0rem auto;
	width: 80%;
	*/
}


.container__inner {
	/*background: #FFFFFF;*/
	background: var(--color-container);
	border-radius: 30px;
	padding: 3rem;
	box-shadow: 0px 16px 62px -28px rgba(0,0,0,0.9); 
	/*box-shadow: 0px 16px 62px -28px rgba(0,0,0,0.44);*/
}

.container__inner__introduction {
	/*background: #FFFFFF;*/
	background-color: var(--color-container-introduction);
	background-image: url("../images/introduction_background.png");
	background-size: cover;
	/*background-position: 0% 0%;*/
	/*background-position: left 300px center;*/
	background-position: left 300px top -30px;
	background-repeat: no-repeat;

	border-radius: 30px;
	padding: 3rem;
	box-shadow: 0px 16px 62px -28px rgba(0,0,0,0.9); 
	/*box-shadow: 0px 16px 62px -28px rgba(0,0,0,0.44);*/

	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.container__inner__introduction__content {
	color: var(--color-container-introduction-text);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
	max-width: 60ch;
	padding-right: 3rem;
	flex-basis: 50%;
}

.container__inner__introduction__image {
	flex-basis: 50%;
	margin: auto;
	text-align: center;
	/*Primary Color for Image #E27E8A*/
}


.container__calc {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.container__calc__form {
	/*flex-basis: 50%;*/
	flex-grow: 1;
}

.container__calc__result {
	flex-basis: 30%;
	margin-left: 2rem;
}

.container__calc__result__chart {
	text-align: center;
}

.container__calc__result__overview {
	
}


.overview__label {
	/*float: left;
	width: 60%;*/
	font-weight: 300;
	font-size: 0.8rem;
	color: var(--color-label-secondary);
}

.overview__label__secondary {
	font-size: 0.8rem;
	color: #CCCCCC;
}

.overview__data {
	/*float: left;
	width: 40%;
	text-align: right;*/
	font-weight: 500;
	margin-bottom: 22px;

	/*
	display: flex;
	padding: 4px 0;
	align-items: center;
	*/
}

/*
.overview__data__info {
	font-weight: 300;
	font-size: 0.8rem;
	color: #6e7291;
}
*/

/*
.overview__data__highlight {
	display: inline-block;
	padding: 6px 20px;
	border-radius: 12px;
	margin-top: 6px;
}

.overview__data__highlight--capital {
	background: #c7eab7;
}

.overview__data__highlight--withdrawal {
	background: var(--color-withdrawal-bg);
}

.overview__data__highlight--negative {
	background: var(--color-costs-bg);
}
*/

.overview__data__highlight {
	display: flex;
	flex-wrap: wrap;
	padding: 4px 0;
	align-items: center;
}

.overview__data__highlight--secondary {
	font-size: 0.7rem;
	font-weight: 300;
	color: var(--color-text-body);
}

.overview__data__highlight--indent {
	margin-left: 16px;
}

.overview__data__highlight__line {
	height: 32px;
	width: 5px;
	border-radius: 99px;
	margin-right: 10px;
	background-color: #CCCCCC;
}

.overview__data__highlight__line--capital {
	background-color: var(--color-rate-bg);
}
.overview__data__highlight__line--taxes {
	background-color: var(--color-taxes-bg);
}
.overview__data__highlight__line--negative {
	background-color: var(--color-costs-bg);
}
.overview__data__highlight__line--withdrawal {
	background-color: var(--color-withdrawal-bg);
}



.container__table {
	/*margin-top: 5rem;*/
}

.table-content {
	display: block;
	/*justify-content: space-between;*/
}


/*in tabelle selbst scrollen*/
/*
.table-content--responsive {
	max-height: 800px;
	overflow: auto;	
}
*/

.table-content__hint{
	display: none;
}

/* -------------------- */
/* Form */

.form-section {
	/*margin-bottom: 2.2rem; design without input fields*/
	margin-bottom: 1.5rem;
}

.form-section__sidebyside{
	float: left;
}

.form-section__sidebyside:not(:last-child){
	margin-right: 2rem;
}


.form-section__data {
	display: flex;
	width: 100%;
}

.form-section-performance {
	margin-bottom: 1rem;
	text-align: center;
}


.form-section:after {
  content: "";
  display: table;
  clear: both;
}

.form-section label.form-section__label {
	display: block;
	margin-bottom: 12px;

	color: var(--color-text-body);
	font-weight: 600;
	font-size: 1rem;
}

.form-section label.form-section__label small, small {
	color: #9d9fbb; /*#959595;*/
	font-weight: 400;
	font-size: 0.8rem;
}

.form-section label.form-section__label--taxes {
	display: block;
	margin-bottom: 4px;

	color: #946c54;
	font-weight: 400;
	font-size: 0.8rem;
}


.form-section__input {
	/*
	float: left;
	width: 40%;
	*/
	flex: 1;
	max-width: 480px;
}

.form-section__result {
	width: 200px;
	/*padding-top: 34px;*/
	/*
	float: left;
	*/
	margin-left: 30px;
	margin-top: -12px;

	font-size: 0.9rem;
	color: var(--color-text-body);
	font-weight: bold;
}

.form-section__number {
	display: inline-block;
	min-width: 38px;
	float: left;
}

.form-section__switch {
	/*float: left;*/
	margin-top: -2px;
	margin-left: 4px;

	font-size: 1rem;
	color: var(--color-text-body);
	font-weight: bold;
	display: inline-block;
}

.form-section__switch--vertical {
	float: left;
	margin-left: 8px;
}

.form-section__taxes {
	background: #f9f0ea;
    padding: 1rem;
    border-radius: 8px;
}

/* -------------------- */
/* Text Input */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.input {
    padding: 10px;
    font-size: 0.9rem;
    border-radius: 8px;
    /*border: 3px solid hsl(235, 33%, 88%);*/
    border: 3px solid hsl(240, 59%, 96%);
    font-family: 'Inter', sans-serif;
    color: var(--color-text-body);
}

.input:focus {
    border-color: #545673;
    outline: none;
}

.input--small {
	width: var(--width-input-small);
}

.input--number {
	text-align: right;
	font-weight: 700;
}

.input--taxes {
	/*
	border-color: var(--color-taxes-bg);
	background-color: #fff8f3;
	*/
	/*background-color: #f6e9c9;*/
	border-color: var(--color-taxes-bg);
	/*color: #3e3730;*/
}
.input--taxes:focus {
    border-color: var(--color-taxes);
}


.input--seed_capital {
	/*border-color: var(--color-capital-bg);*/
}
.input--seed_capital:focus {
    border-color: var(--color-capital);
}


.input--payment {
	/*border-color: var(--color-payment-bg);*/
}
.input--payment:focus {
    border-color: var(--color-payment);
}


.input--payment_costs {
	/*border-color: var(--color-costs-bg);*/
}
.input--payment_costs:focus {
    border-color: var(--color-costs);
}


.input--period {
	/*border-color: var(--color-period-bg);*/
}
.input--period:focus {
    border-color: var(--color-period);
}


.input--rate {
	/*border-color: var(--color-rate-bg);*/
}
.input--rate:focus {
    border-color: var(--color-rate);
}


.input--withdrawal {
	/*border-color: var(--color-costs-bg);*/
}
.input--withdrawal:focus {
    border-color: var(--color-withdrawal);
}


.input--withdrawal_costs {
	/*border-color: var(--color-costs-bg);*/
}
.input--withdrawal_costs:focus {
    border-color: var(--color-costs);
}


.input-unit-integrate {
	width: calc(var(--width-input-small) + 10px - var(--padding-input-unit));
	padding-right: var(--padding-input-unit);
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

.input-attach-unit {
	margin-left: -26px;
	margin-top: 13px;
	/*color: #3e3730;*/
	color: var(--color-label-secondary);
	font-weight: 500;
}


/* -------------------- */
/* Radio toggle */

input[type="radio"].toggle {
    display: none;
}

/*
input[type="radio"].toggle:checked + label {
    color: #FFFFFF;
    background: hsla(344, 65%, 59%, 1);
}
input[type="radio"].toggle:checked + label:hover {
    background: hsla(344, 65%, 55%, 1);
}
*/

input[type="radio"].toggle--costs:checked + label {
    color: #FFFFFF;
    background: var(--color-costs);
}
input[type="radio"].toggle--costs:checked + label:hover {
    background: var(--color-costs-hover);
}


input[type="radio"].toggle--period:checked + label {
    color: #FFFFFF;
    background: var(--color-period);
}
input[type="radio"].toggle--period:checked + label:hover {
    background: var(--color-period-hover);
}


input[type="radio"].toggle--withdrawal:checked + label {
    color: #FFFFFF;
    background: var(--color-withdrawal);
}
input[type="radio"].toggle--withdrawal:checked + label:hover {
    background: var(--color-withdrawal-hover);
}


input[type="radio"].toggle--performance:checked + label {
    color: #FFFFFF;
    background: var(--color-primary);
}
input[type="radio"].toggle--performance:checked + label:hover {
    background: var(--color-primary-hover);
}


input[type="radio"].toggle--withdrawal-interval:checked + label {
    color: #FFFFFF;
    background: var(--color-withdrawal); /*hsl(233, 40%, 53%)*/
}
input[type="radio"].toggle--withdrawal-interval:checked + label:hover {
    background: var(--color-withdrawal-hover);
}



input[type="radio"].toggle + label {
    padding: 0px 14px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    cursor: pointer;

    background: hsl(235, 33%, 90%);
    color: #9b9cbb;
    font-size: 0.8rem;
    font-weight: 500;

    border-left: 1px solid hsl(235, 33%, 84%);
    border-right: 1px solid hsl(235, 33%, 84%);
    box-sizing: border-box; /*damit 100% width nicht über container schießen*/
}
input[type="radio"].toggle--big + label, input[type="radio"].toggle--medium + label {
    padding: 0px 36px;
    height: 30px;
    line-height: 30px;
    font-size: 1rem;
}
input[type="radio"].toggle + label:hover {
    background: hsl(235, 33%, 88%);
}

input[type="radio"].toggle:first-of-type + label {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 0;
}

input[type="radio"].toggle:last-of-type + label {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 0;
}

/* ------------ */

input[type="radio"].toggle--costs + label {
	min-width: 40px;
    text-align: center;
}


input[type="radio"].toggle--period + label {
	min-width: 80px;
    text-align: center;
}


input[type="radio"].toggle--withdrawal + label {
	min-width: 40px;
    text-align: center;
}


input[type="radio"].toggle--withdrawal_costs + label {
	min-width: 40px;
    text-align: center;
}


input[type="radio"].toggle--vertical:first-of-type + label {
    border-radius: 8px 8px 0 0;
    border: 0;
}

input[type="radio"].toggle--vertical:last-of-type + label {
    border-radius: 0 0 8px 8px;
    border: 0;
}

/*
input[type="radio"].toggle__left + label {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}


input[type="radio"].toggle__right + label {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
*/

/* -------------------- */


input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}


/* --- */


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 37px;
  width: 37px;
  border-color: transparent;
  border-radius: 50%;
  background: hsla(208, 71%, 57%, 1);
  cursor: pointer;
  margin-top: -12px;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 37px;
  width: 37px;
  border-radius: 50%;
  background: hsla(208, 71%, 57%, 1);
  cursor: pointer;
  border-color: transparent;
}


input[type=range].form-section__slider--capital::-webkit-slider-thumb {
  background: var(--color-capital);
}

input[type=range].form-section__slider--payment::-webkit-slider-thumb {
  background: var(--color-payment);
}

input[type=range].form-section__slider--costs::-webkit-slider-thumb {
  background: var(--color-costs);
}

input[type=range].form-section__slider--period::-webkit-slider-thumb {
  background: var(--color-period);
}

input[type=range].form-section__slider--rate::-webkit-slider-thumb {
  background: var(--color-rate);
}


input[type=range].form-section__slider--capital::-moz-range-thumb {
  background: var(--color-capital);
}

input[type=range].form-section__slider--payment::-moz-range-thumb {
  background: var(--color-payment);
}

input[type=range].form-section__slider--costs::-moz-range-thumb {
  background: var(--color-costs);
}

input[type=range].form-section__slider--period::-moz-range-thumb {
  background: var(--color-period);
}

input[type=range].form-section__slider--rate::-moz-range-thumb {
  background: var(--color-rate);
}

input[type=range].form-section__slider--withdrawal::-moz-range-thumb {
  background: var(--color-withdrawal);
}


/* --- */


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background-color: hsla(208, 71%, 57%, 0.3);
  border-radius: 4px;
}

/*
input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: hsla(208, 71%, 57%, 0.4);
}
*/

input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background-color: hsla(208, 71%, 57%, 0.3);
  border-radius: 4px;

}



input[type=range].form-section__slider--capital::-webkit-slider-runnable-track {
  background: var(--color-capital-bg);
}

input[type=range].form-section__slider--payment::-webkit-slider-runnable-track {
  background: var(--color-payment-bg);
}

input[type=range].form-section__slider--costs::-webkit-slider-runnable-track {
  background: var(--color-costs-bg);
}

input[type=range].form-section__slider--period::-webkit-slider-runnable-track {
  background: var(--color-period-bg);
}

input[type=range].form-section__slider--rate::-webkit-slider-runnable-track {
  background: var(--color-rate-bg);
}

input[type=range].form-section__slider--withdrawal::-webkit-slider-runnable-track {
  background: var(--color-withdrawal-bg);
}



input[type=range].form-section__slider--capital::-moz-range-track {
  background: var(--color-capital-bg);
}

input[type=range].form-section__slider--payment::-moz-range-track {
  background: var(--color-payment-bg);
}

input[type=range].form-section__slider--costs::-moz-range-track {
  background: var(--color-costs-bg);
}

input[type=range].form-section__slider--period::-moz-range-track {
  background: var(--color-period-bg);
}

input[type=range].form-section__slider--rate::-moz-range-track {
  background: var(--color-rate-bg);
}
input[type=range].form-section__slider--withdrawal::-moz-range-track {
  background: var(--color-withdrawal-bg);
}




input[type=range]::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;

}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;

}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}


/* -------------------- */


.link {
	color: hsl(236, 15%, 39%);;
	cursor: pointer;
	text-decoration: underline;
}

/* -------------------- */

input[type="range"] {
	cursor: pointer;
}


/* -------------------- */

.performance-chart {
	margin: 0 auto;
	width: 100%;
}

/* -------------------- */

table.performance {
	font-size: 0.8rem;
	border-spacing: 0px;
	border-collapse: collapse; 
	margin: 0 auto;
}


table.performance thead tr th {
	padding: 20px 20px;
	text-align: right;
	vertical-align: top;
	position: sticky;
	top: 0;
	background: var(--color-container);
}


table.performance thead tr {
	/*
	border-bottom: 1px solid #000000;
	*/
}

/*wegen position: sticky; im header klappt sonst border nicht*/
th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:after {
  bottom: -1px;
  border-bottom: 1px solid #000000;
}


table.performance tbody tr td {
	padding: 20px 20px;
	text-align: right;
	white-space: nowrap;
}
table.performance tbody tr td:first-child {
	
}

table.performance tbody tr:nth-child(even) {
	background: var(--color-table-even-bg);
	border-top: 1px solid var(--color-table-even-border);
	border-bottom: 1px solid var(--color-table-even-border);
}

table.performance tbody tr:nth-child(odd) {
	background: var(--color-container);
}

table.performance tbody tr:hover {
	background: hsla(240, 100%, 97%, 1);
}

table.performance tbody tr td.table-year {
	text-align: left;
	font-weight: bold;
	font-size: 0.8rem;
	/*
	background: var(--color-primary);
	color: #FFFFFF;
	*/

	/*
    background: hsl(233, 46%, 85%);
    color: var(--color-primary);
    */

    background: #545673;
    color: hsl(233.6, 35.9%, 84.7%);
}


/* ----------------------------------------------------------- */

@media only screen and (max-width: 1200px) {

	#app {
		grid-template-areas:
			"content"
			"footer";
		grid-template-rows: 1fr 300px;
		grid-template-columns: 1fr;
	}

	.navigation {
		display: none;
	}

	/*
	.container__calc__form {
	    flex-basis: 30%;
	    flex-grow: 1;
	}

	.container__calc__result {
	    flex-basis: 20%;
	}
	*/

}

@media only screen and (max-width: 1020px) {

	main {
		width: 96%;
	}

	h1 {
		/*
		font-size: 2.6rem;
		line-height: 2.6rem;
		*/
		font-size: 1.4rem;
		line-height: 1.6rem;
	}

	.hide--medium-screen {
		display: none;
	}

	.navigation__help {
		display: none;
	}
	
	#result-mobile {
		display: block;
	}

	.container__inner__introduction {
		flex-wrap: wrap; 
	}

	.container__inner__introduction__content {
		flex-basis: 100%;
		padding-right: 0px;
	}

	.container__inner__introduction__image {
		flex-basis: 70%%;
	}


	.container__calc__result {
	    flex-basis: 100%;
	    margin-left: 0rem;
	    margin-top: 2rem;
	}

	.table-content--responsive {
		width: 560px;
		overflow-y: auto;
		margin: 0 0 1em;		
	}

	.table-content--responsive::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 14px;
		height: 14px;
	}

	.table-content--responsive::-webkit-scrollbar-thumb {
		border-radius: 8px;
		border: 3px solid #fff;
		background-color: rgba(0, 0, 0, .3);
	}


	.table-content {
		display: flex;
		/*justify-content: space-between;*/
	}

	.table-content__hint {
		display: block;
		margin: 20px 0 20px 0;
		width: 16px;
		background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.24' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	}
}


@media only screen and (max-width: 768px) {

	html {
		font-size: 16px;
	}

	#app {
		grid-template-areas:
			"content"
			"footer";
		grid-template-rows: 1fr 300px;
		grid-template-columns: 1fr;
	}

	.navigation {
		display: none;
	}

	.container__inner {
		padding: 3rem 2rem;
	}

	.container__inner__introduction {
		background-position: left 60px top 120px;
	}

	.show__inline--small-screen {
		display: inline-block;
	}

	.hide--small-screen {
		display: none;
	}

	/*
	#result-mobile {
		display: block;
	}
	*/

	.input--period, .input--payment_costs {
		width: 24px;
	}

	.input--withdrawal {
		width: 48px;
	}

	.input--withdrawal_costs {
		width: 48px;
	}


	input[type="radio"].toggle--period + label {
	    min-width: 62px;
	    padding: 0;
    }

    .form-section__switch--vertical {
    	margin-top: 2px;
    }



	h1 {
		/*
		font-size: 2.2rem;
		line-height: 2.2rem;
		*/
	}

	h2 span {
		padding: 0 14px;
	}

	input[type="radio"].toggle--big + label {
		border-left: 0;
		width: 100%;
		border-radius: 8px;
		height: 40px;
		line-height: 40px;
	}

	input[type="radio"].toggle--big:not(:last-of-type) + label {
	    margin-bottom: 8px;
	}
	.form-section__result {
		width: 130px;
		margin-left: 12px;
	}	

	.table-content--responsive {
		width: 500px;
		/*
		float: left;
		*/
	}


	.apexcharts-datalabels {
		display: none;
	}

	.performance-chart--total .apexcharts-xaxis {
		display: none;
	}

	.performance-chart--growth .apexcharts-xaxis {
		display: none;
	}

	.performance-chart--withdrawal .apexcharts-xaxis {
		display: none;
	}
	

	/*
	.container {
		width: 96%;
	}

	.container__calc__result {
	    flex-basis: 100%;
	    margin-left: 0rem;
	    margin-top: 2rem;
	}
	*/
}


@media only screen and (max-width: 590px) {

	.container__inner {
		padding: 3rem 1rem;
	}

	.table-content--responsive {
		width: 390px;		
	}

	.input {
		font-size: 16px;
	}
	.form-section__sidebyside:not(:last-child) {
	    padding-bottom: 1rem;
	}
}


@media only screen and (max-width: 390px) {

	.container__inner {
		padding: 2.5rem 1rem;
	}

	.table-content--responsive {
		width: 290px;		
	}	

}