.grid-box.calculator {
	grid-auto-flow: column;
	grid-template-rows: auto;
	/* grid-template-columns: 388px auto;
	grid-template-columns: var(--input-width) auto; */
	column-gap: 15px;
	column-gap: var(--from20to10);
}
@media (hover: none) {
	.grid-box {
		overflow-x: auto;
	}
}
/* .grid-box.ui { (für upload gedacht
	top: 88px;
	top: calc(var(--header-height) - 1px);
	height: 48px;
	height: var(--ui-height);
} */

.ui { /* noch variable Höhe einbauen?*/
	position: sticky;
	grid-row-start: 1;
	width: 100%;
	height: auto;
	padding-top: 12px;
	padding-top: var(--from16to8);
	background-color: white;
	/* overflow: visible; */
	z-index: 8;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 10px;
	/* gap: var(--from16to8); */
}
.ui.col-1 {
	grid-column-start: 1;
}
.ui.col-2 {
	grid-column-start: 2;
	/* max-width: calc(100vw - var(--from18to8) - var(--input-width) - var(--from20to10) - var(--from16to6) - 15px); */
}
.flex-box.examples {
	margin: 0;
	padding: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: stretch;
	gap: 10px;
}
.input {
	grid-column-start: 1;
	grid-row-start: 2;
}
.result {
	grid-column-start: 2;
	grid-row-start: 2;
	width: 100%;
}
/*Fehlermeldungen unter 'How to'*/
div.fail {
	margin-top: var(--from16to8);
	margin-bottom: 8px;
	margin-inline: 1px;
	padding: 6px;
	padding-top: 0;
	border: 2px solid red;
	font-size: 0.96em;
}
ol.howTo {
	padding-bottom: 4px;
	padding-left: 17px;
	padding-left: var(--from20to14);
}

/* .buttons, .input {
	justify-self: start;
	align-self: start;
} */

/* .buttons, .guide {
	height: 24px;
	height: var(--button-height);
} */
/* buttons */
input[type="submit"], button.button {
	width: 100%;
	height: var(--button-height);
	padding-bottom: 2px;
	border: 1px solid #b4b4b4;
	-webkit-border-radius: 2px;
	border-radius: 3px;
	box-shadow: -0.5px -0.5px 4px 1px #a7a7a7 inset;
	color: #000000;
	text-align: center;
	line-height: 1.45;
	font-size: 0.83em;
	white-space: nowrap;
	cursor: pointer;
}
@media (hover: none) {
	input[type="submit"], button.button {
		padding-bottom: 0; }
}
button.button.example {
	width: min-content;
	padding-right: 10px;
	padding-left: 10px;
}
button.button.copy { /*zum kopieren vo Daten aus einer Eingabetabelle in die nächste*/
	margin-top: 6px;
	margin-top: var(--from8to4);
	padding-bottom: 3px;
	font-size: 0.8em;
	font-weight: 500;
}
input#how {
	display: none;
}
label[for="how"] {
	width: max-content;
	padding-top: 1px;
	padding-left: 2px;
	display: flex; /* damit der Pfeil in der selben Zeile ist wie "How to ... */
	flex-direction: row;
	justify-content: start;
	flex-wrap: nowrap;
	cursor: pointer;
}
/*label[for="how2"] > .chevron, */h3.after {
	margin-top: 6px;
	margin-top: var(--from8to4);
	font-size: 0.93em;
}
.chevron {
	position: relative;
	top: 0.6em;
	bottom: 0;
	display: inline-block;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	height: 0.7em;
	width: 0.7em;
	transform: rotate(225deg);
}
#how:checked + .ui > #how-label > .chevron {
	top: 0.2em;
	transform: rotate(45deg);
}
.result {
	overflow: visible;
	animation-name: display-result;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
}
@keyframes display-result {
	from { opacity: 0; }
	to { opacity: 1; }
}
aside, aside.after {
	width: auto;
	max-height: 100vh;
	margin-top: 12px;
	margin-top: var(--from16to8);
	padding-left: 2px;
	font-size: 0.89em;
	/* background-color: white; */
	overflow: hidden;
	opacity: 1;
	transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
#how:checked ~ .result > aside {
	max-height: 0;
	margin-top: 0;
	opacity: 0;
}
aside.after, aside.after > ol { /*.after genutzt?*/
	padding-bottom: 0;
}
/*Tables*/
table.stat {
	width: 100%;
	margin-top: 12px;
	margin-top: var(--from16to8);
	table-layout: fixed;
	border-collapse: collapse;
	border: 2px solid black;
	border-spacing: 0;
	text-align: left;
	white-space: nowrap;
	font-size: 0.89em;
	line-height: 1;
	overflow: hidden;
}
table.results, table.graph {
	/* min-width: 100%; */
	/* width: 717px;
	width: var(--table-results); */
	margin-right: 11px; /*wie padding-right von main*/
	margin-right: var(--from16to6);
	margin-right: 0;
}
table.stat th, table.stat td {
	border: 1px solid black;
	padding: 2px;
	/* padding-inline: 10px; */
	/* vertical-align: middle; */
	/* overflow: hidden; */
}
table.stat th {
	/* padding-top: 3px; */
	padding-bottom: 4px;
	padding-left: 1px;
	padding-right: 1px;
	text-align: center;
}
table.stat thead tr:nth-child(2) th {
	padding-top: 0;
	padding-bottom: 6px;
	font-size: 1em;
}
table.stat tbody th {
	font-weight: 400;
}
table.stat.data tbody th {
	font-size: 0.92em;
}
/* table.stat.general tbody tr td:first-child {
	padding-left: 10px;
} */

table.stat th.bord-top-0, table.stat td.bord-top-0 {
	border-top-style: none;
	padding-top: 2px;
}
table.stat th.bord-bot-0, table.stat td.bord-bot-0 {
	border-bottom-style: none;
	padding-bottom: 3px;
}
table.stat td.bord-righ-0, table.stat th.bord-righ-0 {
	border-right-style: none;
	padding-left: 10px;
}
table.stat td.bord-left-0, table.stat th.bord-left-0 {
	border-left-style: none;
}
table.stat td.bord-left-1-5, table.stat th.bord-left-1-5 {
	border-left-width: 2px;
}
table.stat th.l, table.stat td.l {
	text-align: left;
	padding-left: 10px;
}
.c {
	text-align: center;
	padding-inline: 1px;
}
.r {
	text-align: right;
	/* padding-right: 8px; */
}
table.stat td.note, table.stat.data tbody tr th.note {
	padding-top: 3px;
	padding-right: 4px;
	padding-left: 10px;
	padding-bottom: 4px;
	font-size: 0.9em;
	white-space: normal;
	line-height: 1.15;
	text-align: left;
}
table.stat td.note.indent {
	padding-left: 22px;
	text-indent: -12px;
}
table.data td {
	border-bottom-style: dashed;
	border-top-style: dashed;
	font-size: 0.9em;
	line-height: 0.9;
}

/*input fields*/
button.button.generate, table.stat th.field, table.stat td.field {
	padding-inline: 2px;
	background-color: #ffffb5;
}
input[type="text"], input[type="number"], select, option {
	appearance: textfield;
	width: 100%;
	/*padding-left: 8px;*/
	border-style: none;
	/* padding: 0;
	padding-inline: 6px;*/
	font-size: inherit;
	/*line-height: 1em; */
	background-color: #ffffb5;
}
input[type="number"], table.stat td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-right: 8px;
}
table.stat td.num {
	padding-right: 10px;
}
input[type="text"], select, option, input.text {
	text-align: left;
	padding-left: 8px;
}
td select {
	padding-left: 3px;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, select option {
	outline: 1px solid #a7a7a7;
}
::placeholder {
	color: #a7a7a7;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

div.note, p.note, ul.note {
	padding-top: 6px;
	padding-bottom: 0;
	font-size: 0.96em;
	line-height: 1.3;
}
li.note.class2.dash {
	padding-top: 3px;
	padding-left: 18px;
	text-indent: -18px;
	line-height: inherit;
}
ul.note {
	padding-top: 0;
}
math {
	font-size: 1.2em;
	math-shift: compact;
}

.variable {
	font-family: Calibri;
	font-size: 1.05em;
	white-space: nowrap;
}

/*Colors of buttons and tables*/
button.button.clear, button.button.copy, table.stat.general, table.stat.data {
	background-color: #fefee2;
}
input[type="submit"], button.button.generate, table.stat th.field, table.stat td.field, input[type="text"], input[type="number"], select, input:-internal-autofill-selected {
	background-color: #ffff9b;
	background-color: #ffffb5;
}
button.button.print {
	background-color: white;
}
button.button.print.disabled {
	color: #808080;
	background-color: #f3f3f3;
	font-size: 0.7em;
	line-height: 0.7;
}
input.fail, select.fail {
	outline: 1px solid red;
}
.invalid {
	color: #a7a7a7;
}
.invalid.footnote {
	margin-right: -8px;
}