/*FARBEN*/
/*#14152D <-- "schwarz" 100%
/*#434457 <-- "schwarz" 80%
/*#727381 <-- "schwarz" 60%
/*#D0D0D5 <-- "schwarz" 20%
/*#E7E7EA <-- "schwarz" 10%
/*#F3F3F4 <-- "schwarz" 5%
/*#F8F8F8 <-- "schwarz" 3%

/*#F47920 <-- orange*/
/*#DD5D01 <-- orange (hover)*/
/*#F8AE79 <-- orange 80%*/
/*#FDE4D2 <-- orange 60%*/

/*#12ADCF <-- blau*/
/*#70CEE2 <-- blau 80%*/
/*#CFEFF6 <-- blau 60%*/

/* ICON SAMMLUNG */
@import "general_icons.css";

/* SCHRIFT */
@import "general_fonts.css";

/* CUSTOMIZE-KLASSEN */
@import "general_basic_customize_classes.css";

:root {
	/* Standard Farben */
	--color_primary: #F47920; /* orange */
	--color_primary_hover: #DD5D01; /* orange:hover */
	--color_secondary: #12ADCF; /* blau */
	--color_positive: #1EC280; /* grün */
	--color_negative: #D71920; /* rot */
	--color_information: #f7bd30; /* gelb */
	--color_default: #727381; /* grau */
	--color_transparent: transparent;

	/* Abstufungen von Grau */
	--color_dark: #14152D; /* "schwarz" */

	--color_grey_600: #434457;
	--color_grey_500: #727381;
	--color_grey_400: #D0D0D5;
	--color_grey_300: #E7E7EA;
	--color_grey_200: #F3F3F4;
	--color_grey_100: #F8F8F8;

	--color_light: #FFF;

	/* Box-Shadow Farbe */
	--color_boxshadow: #14152D20;

	/* Icon Farbe */
	--color_icon: #898995;

	/* Modalfenster BG (Backdrop-Farbe) */
	--color_dialog_backdrop: #14152D80;

	/* Hover-Effekt Tabellen */
	--color_table_hover: #CFEFF6;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////GENERAL*/
* {
	/*box-sizing lässt den footer verschwinden und die sticky Kopfzeile bei langen Tabellen verrutscht.
	Da box-sizing recht praktisch ist, kann man das evtl irgendwann "reparieren" und wieder auskommentieren. */
	/*box-sizing: border-box;*/
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Roboto', sans-serif !important;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	letter-spacing: 0.4px;
}

.url {
	color: var(--color_secondary);
	margin: auto;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.url:hover {
	color: var(--color_primary_hover);
}

:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
	border-radius: 0;
}


:disabled {
	cursor: not-allowed !important;
	opacity: 0.4;
	background-color: var(--color_grey_300);
	border: 1px solid var(--color_grey_500);
}

:disabled:hover {
	border: 1px solid var(--color_grey_400);
}

/* Wenn Text Markiert wird, dann sollen Hintergrundfarbe und Textfarbe IMMER überschieben werden */
::selection {
	-webkit-text-fill-color: var(--color_light) !important; /* für Safari/Chrome */
	color: var(--color_light) !important;
	background-color: var(--color_secondary) !important;
}

kbd {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 12px;
	color: var(--color_grey_500);
	text-align: left;
	margin: 2px 2px 0 2px;
}

pre {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	text-align: left;
	margin: 2px 0 0 0;
}

small {
	font-weight: 400;
	font-size: 12px;
	color: var(--color_grey_500);
	text-align: left;
	margin: 4px 2px 0 2px;
}

hr {
	margin: 6px 0;
	color: var(--color_grey_300);
	border-style: solid;
	border-width: 1px;
}

span {
	display: inline-block;
	vertical-align: middle;
}

sub.footnote {
	font-size: 12px;
	font-weight: 700;
	color: var(--color_primary);
	padding: 2px;
	vertical-align: top;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<FIELDSET> <LEGENDE> <H1>-<H6> <P>*/
fieldset {
	padding: 32px 40px;
}

fieldset legend {
	font-weight: 400;
	display: contents;
	font-size: 20px;
	color: var(--color_dark);
	letter-spacing: 0.2px;
}

fieldset p {
	font-weight: 400;
	font-size: 16px;
	color: var(--color_dark);
	margin: 8px 24px 0 0;
	line-height: 1.4;
}

fieldset a {
	margin: auto auto auto 4px;
	text-decoration: none;
}

fieldset b {
	font-weight: 500;
}

p.p_label {
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
	margin: 4px 24px 0 0;
}

p.p_label_headline {
	font-weight: 500;
	font-size: 14px;
	color: var(--color_dark);
	margin: 12px 24px -12px 0;
}

section.sub_options > p.p_label_headline {
	font-weight: 500;
	font-size: 14px;
	color: var(--color_grey_600);
	margin: 0 24px -10px 0;
}

.notice {
	font-weight: 500;
	color: var(--color_secondary);
}

.warning {
	font-weight: 500;
	color: var(--color_primary);
}

.error {
	font-weight: 500;
	color: var(--color_negative);
}

.success {
	font-weight: 500;
	color: var(--color_positive);
}


h1 {
	font-weight: 700;
	font-size: 32px;
}

h2 {
	font-weight: 400;
	font-size: 20px;
	color: var(--color_dark);
	margin: 32px 0 0 0;
}

h3 {
	font-weight: 700;
	color: var(--color_dark);
	font-size: 18px;
	margin: 32px 0 0 0;
	letter-spacing: 0.4px;
}

.modal_main_inner_head h3 {
	font-weight: 700;
	color: var(--color_grey_600);
	font-size: 18px;
	margin: 0;
	letter-spacing: 0.4px;
}

h4 {
	font-weight: 700;
	color: var(--color_dark);
	font-size: 16px;
	margin: 24px 0 0 0;
	letter-spacing: 0.4px;
}

h5 {
	font-weight: 700;
	color: var(--color_dark);
	font-size: 14px;
	margin: 24px 0 0 0;
	letter-spacing: 0.4px;
}

h6 {
	font-weight: 500;
	color: var(--color_grey_600);
	font-size: 14px;
	margin: 0 0 0 0;
	letter-spacing: 0.4px;
}

legend + h3,
h3 + h4,
h4 + h5 {
	margin: 12px 0 0 0;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////DIALOG-TAG*/
dialog {
	background-color: var(--color_light);
	min-width: 320px;
	max-width: 1652px;
	padding: 24px 24px 12px 24px;
	top: 50%;
	left: 50%;
	resize: none;
	transform: translate(-50%, -50%);
	border: 0;
	box-shadow: 3px 3px 6px var(--color_boxshadow);
	position: fixed;
}

dialog::backdrop {
	background-color: var(--color_dialog_backdrop);
}

dialog .dialog_container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	max-height: 80vh;
}

.dialog_container .dialog_head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 6px 0;
}

.dialog_container .dialog_head h3,
.dialog_container .dialog_head h4 {
	margin: 0 24px 0 0;
}

.dialog_container .dialog_body {
	flex: 1;
	overflow: auto;
	margin: 6px 0;
}

.dialog_container .dialog_body p {
	margin: 8px 0 0 0;
}

.dialog_container .dialog_body section:first-child,
.dialog_container .dialog_body h5:first-child,
.dialog_container .dialog_body h4:first-child,
.dialog_container .dialog_body h3:first-child,
.dialog_container .dialog_body p:first-child {
	margin-top: 0;
}

.dialog_container .dialog_footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 6px 0 0 0;
}

.dialog_container .dialog_footer button {
	margin: 0 12px 0 0;
}

/* dialog-Element(small) braucht individuelle Abstände für head, body und footer, da es hier keine hr-Elemente im Layout gibt  */
.small_dialog {
	resize: none;
	padding: 24px;
	max-width: 20%;
}

.small_dialog .dialog_container .dialog_head {
	margin: 0;
}

.small_dialog .dialog_container .dialog_body {
	margin: 12px 0;
}

.small_dialog .dialog_container .dialog_footer {
	margin: 0;
}

.medium_dialog {
	resize: none;
	width: 100%;
	max-width: 600px;
}

.big_dialog {
	resize: none;
	width: 100%;
	max-width: 1652px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////YES-NO-MODALFENSTER (aus general.css kopiert)*/
@-webkit-keyframes pop-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.7);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale(1.1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes pop-in {
	0% {
		opacity: 0;
		-moz-transform: scale(0.7);
	}
	50% {
		opacity: 1;
		-moz-transform: scale(1.1);
	}
	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@keyframes pop-in {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.YesNoDialog {
	min-width: 320px;
	max-width: 360px;
	height: auto;
	font-weight: 500;
	padding: 24px;
	top: 0;
	left: 0;
	box-shadow: 3px 3px 6px var(--color_boxshadow);
	background-color: var(--color_grey_100);
	position: relative;
	opacity: 0;
	transform: scale(0.7);
}

.YesNoDialog.activeYND {
	top: 0;
	left: 0;
	opacity: 1;
	transform: scale(1);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////DBG*/

p.dbg_option {
	font-weight: 400;
	display: inline;
	font-size: 14px;
	color: var(--color_dark);
	margin: 4px 24px 0 0;
}

span.dbg_option {
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
	margin: 4px 24px 0 0;
}

a.dbg_option {
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
	padding: 2px;
}

img.dbg_option {
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
	padding: 2px;
	vertical-align: sub;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<SECTION> <LABEL> <IMG> <SPAN> .SUB_OPTIONS  <HR>*/
section {
	margin: 12px 0 0 0;
	width: auto;
	position: relative;
}

section label {
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
}

.section_inline_block {
	margin: 12px 12px 0 0;
	display: inline-block;
}

section.sub_options {
	margin: 12px 12px 0 24px;
}

section.sub_options:last-of-type {
	margin: 12px 12px 24px 24px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<UL><LI>*/
ul {
	padding: 6px 0 0 12px;
}

ol {
	padding: 6px 0 0 18px;
}

li {
	padding: 2px 0;
}

ul li::marker {
	color: var(--color_primary);
}

ol li::marker {
	font-weight: 500;
	color: var(--color_dark);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="NUMBER"*/
section input[type="number"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	padding: 4px 8px;
	margin: 2px 12px 2px 0;
	height: 30px;
	width: 60px;
	text-align: right;
	box-sizing: unset;
	border-radius: 2px;
}

section input[type="number"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

section input[type="number"]:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

#section input[type="number"][size] {
	width: 160px;
}

section input[type="number"][size="10"] {
	width: 105px;
}

section input[type="number"][size="9"] {
	width: 95px;
}

section input[type="number"][size="8"] {
	width: 85px;
}

section input[type="number"][size="7"] {
	width: 80px;
}

section input[type="number"][size="6"] {
	width: 70px;
}

section input[type="number"][size="5"] {
	width: 60px;
}

section input[type="number"][size="4"] {
	width: 55px;
}

section input[type="number"][size="3"] {
	width: 45px;
}

section input[type="number"][size="2"] {
	width: 35px;
}

section input[type="number"][size="1"] {
	width: 30px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="FILE"*/
section input[type="file"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	background-color: var(--color_grey_100);
	border: 1px solid var(--color_grey_400);
	font-size: 14px;
	color: var(--color_grey_600);
	padding: 4px 8px;
	margin: 2px 12px 0 0;
	width: 362px;
	min-height: 24px;
	border-radius: 2px;
}

section input[type="file"]::file-selector-button {
	font-family: 'Roboto Mono', monospace;
	font-weight: 500;
	color: var(--color_light);
	background-color: var(--color_primary);
	border: 1px solid var(--color_primary);
	border-radius: 3px;
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.4px;
	vertical-align: middle;
	margin: 6px 12px 6px 4px;
	padding: 4px 8px;
}

section input[type="file"]:hover::file-selector-button {
	color: var(--color_light);
	background-color: var(--color_primary_hover);
	border: 1px solid var(--color_primary_hover);
}

section input[type="file"]::file-selector-button:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

progress {
	margin: 0 0 4px 0;
	width: 378px;
	border-style: none;
	background-color: var(--color_grey_100);
	border: 1px solid var(--color_grey_400);
	border-radius: 2px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> <INPUT> TYPE="COLOR"*/
section input[type="color"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	background-color: var(--color_grey_100);
	border: 1px solid var(--color_grey_400);
	font-size: 14px;
	color: var(--color_grey_600);
	padding: 4px;
	margin: 2px 6px 0 0;
	height: 40px;
	width: 40px;
	border-radius: 2px;
}

section input[type="color"]:hover {
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_500);
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////DRAG & DROP MULTIMEDIA UPLOAD*/
.drop-zone-single-file {
	position: relative;
	max-width: 378px;
	height: 200px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	border: 1px solid var(--color_grey_400);
	border-radius: 2px;
	background-color: var(--color_grey_100);
}

.drop-zone-single-file:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

.drop-zone-prompt {
	z-index: 0;
	position: absolute;
}

.drop-zone-prompt-icon {
	max-height: 67px;
}

.drop-zone-prompt p {
	width: inherit;
	color: #707070;
}

.drop-zone-over {
	background-color: rgba(0, 0, 0, 0.2);
}

.drop-zone-single-input {
	display: none;
}

.drop-zone-thumb {
	width: 100%;
	height: 100%;
	border-radius: 0;
	overflow: hidden;
	background-color: var(--color_light);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	z-index: 0;
}

.drop-zone-title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--color_light);
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 14px;
	text-align: center;
	display: none;
	z-index: 10;
}

.drop-error-type, .drop-error-size, .drop-error-max {
	display: none;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="DATE"*/
section input[type="date"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	font-size: 14px;
	padding: 4px 8px;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	border-radius: 2px;
}

section input[type="date"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

/*Funktioniert noch nicht mit dem Blau von ingress. Aktuell noch Standard vom Browser*/
::-webkit-datetime-edit-day-field::selection,
::-webkit-datetime-edit-month-field::selection,
::-webkit-datetime-edit-year-field::selection {
	background-color: var(--color_secondary);
	color: var(--color_light);
	outline: none;
}

::-webkit-datetime-edit-day-field::selection,
::-webkit-datetime-edit-month-field::selection,
::-webkit-datetime-edit-year-field::selection {
	-webkit-text-fill-color: var(--color_light);
	background: var(--color_secondary) linear-gradient(0deg, var(--color_secondary) 0%, var(--color_secondary) 100%);
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="TIME"*/
section input[type="time"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	padding: 4px 8px;
	margin: 2px 12px 2px 0;
	height: 30px;
	border-radius: 2px;
}

section input[type="time"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="DATETIME-LOCAL"*/
section input[type="datetime-local"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	padding: 4px 8px;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	border-radius: 2px;
}

section input[type="datetime-local"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="PASSWORD"*/
section input[type="password"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	padding: 4px 8px;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	width: 240px;
	border-radius: 2px;
}

section input[type="password"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

section input[type="password"]:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="TEXT"*/
section input[type="text"] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	padding: 8px;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	width: 240px;
	vertical-align: middle;
	border-radius: 2px;
}

section input[type="text"]:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

section input[type="text"]:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}


section input.text_25 {
	width: 25%;
	min-width: 25%;
}

section input.text_50 {
	width: 50%;
	min-width: 50%;
}

section input.text_75 {
	width: 75%;
	min-width: 75%;
}

section input.text_100 {
	margin: 2px 0 2px 0;
	width: 100%;
	min-width: 100%;
}


section input[maxlength="20"],
section input[size="20"] {
	width: 195px;
}

section input[maxlength="19"],
section input[size="19"] {
	width: 185px;
}

section input[maxlength="18"],
section input[size="18"] {
	width: 175px;
}

section input[maxlength="17"],
section input[size="17"] {
	width: 165px;
}

section input[maxlength="16"],
section input[size="16"] {
	width: 155px;
}

section input[maxlength="15"],
section input[size="15"] {
	width: 150px;
}

section input[maxlength="14"],
section input[size="14"] {
	width: 145px;
}

section input[maxlength="13"],
section input[size="13"] {
	width: 135px;
}

section input[maxlength="12"],
section input[size="12"] {
	width: 125px;
}

section input[maxlength="11"],
section input[size="11"] {
	width: 115px;
}

section input[maxlength="10"],
section input[size="10"] {
	width: 105px;
}

section input[maxlength="9"],
section input[size="9"] {
	width: 95px;
}

section input[maxlength="8"],
section input[size="8"] {
	width: 85px;
}

section input[maxlength="7"],
section input[size="7"] {
	width: 80px;
}

section input[maxlength="6"],
section input[size="6"] {
	width: 70px;
}

section input[maxlength="5"],
section input[size="5"] {
	width: 65px;
}

section input[maxlength="4"],
section input[size="4"] {
	width: 55px;
}

section input[maxlength="3"],
section input[size="3"] {
	width: 45px;
}

section input[maxlength="2"],
section input[size="2"] {
	width: 35px;
}

section input[maxlength="1"],
section input[size="1"] {
	width: 25px;
}

/*Unter Befragung > Allgemein gibt es Eingabefelder die zwischen
Text stehen und hier separat angepasst wurden. Schöner wäre es wenn
der Text auch klassisch im Label stehen würde*/
input[type="text"].input_between_text,
input[type="number"].input_between_text {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	border-radius: 2px;
	font-size: 14px;
	color: var(--color_grey_600);
	text-align: center;
	margin: 0 4px;
	padding: 4px 4px;
	box-sizing: border-box;
	min-height: 18px;
	height: 18px;
	max-height: 18px;
}

input[type="text"].input_between_text:disabled,
input[type="number"].input_between_text:disabled {
	cursor: not-allowed;
	opacity: 0.4;
	background-color: var(--color_grey_300);
	border: 1px solid var(--color_grey_500);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> READONLY="READONLY"*/
section input[readonly="readonly"].input_readonly {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	background-color: transparent;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	font-size: 14px;
	color: var(--color_dark);
	text-align: center;
	vertical-align: middle;
	margin: 0 0 6px 0;
	padding: 0;
	box-sizing: border-box;
	min-height: 16px;
	height: 16px;
	max-height: 16px;
	user-select: none;
}

section input[readonly="readonly"].input_readonly:hover {
	outline: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<SUCHFELD>*/
.search_container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.search_container label {
	flex-grow: 1;
	flex-shrink: 0;
}

input[type="search"].input_search,
input[type="text"].input_search {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_primary);
	background-color: var(--color_light);
	border-top: 1px solid var(--color_grey_400);
	border-right: 1px solid var(--color_primary);;
	border-bottom: 1px solid var(--color_grey_400);
	border-left: 1px solid var(--color_grey_400);
	padding: 8px 28px 8px 8px;
	margin: 2px 0 0 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	width: 100%;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

input[type="search"].input_search:hover,
input[type="text"].input_search:hover {
	outline: 1px solid var(--color_primary);
	outline-offset: -1px;
}

input[type="search"].input_search:focus-visible,
input[type="text"].input_search:focus-visible {
	outline: 1px solid var(--color_primary);
	outline-offset: -1px;
}

input[type="button"].btn_search,
button.btn_search,
a.btn_search {
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	line-height: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-grow: 0;
	flex-shrink: 1;
	letter-spacing: 0.4px;
	vertical-align: middle;
	margin: 2px 0 0 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	min-width: 60px;
	max-width: 60px;
	padding: 12px 6px;
	border: 1px solid transparent;
	border-radius: 0 3px 3px 0;
	color: var(--color_light);
	background-color: var(--color_primary);
}

input[type="button"].btn_search:hover,
button.btn_search:hover,
a.btn_search:hover {
	background-color: var(--color_primary_hover);
}

input[type="button"].btn_search:focus-visible,
button.btn_search:focus-visible,
a.btn_search:focus-visible {
	outline: 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TEXTAREA>*/
textarea {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	background-color: var(--color_light);
	border: 1px solid var(--color_grey_400);
	color: var(--color_grey_600);
	font-size: 14px;
	padding: 8px;
	line-height: 1.6;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 100px;
	width: auto;
	resize: vertical;
	text-align: left;
	border-radius: 2px;
}

textarea:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

textarea:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

textarea.textarea_higher {
	width: 100%;
	height: 600px !important;
	margin: 2px 0 2px 0;
}

textarea.textarea_lower {
	min-height: 40px;
	height: 40px;
	margin: 2px 0 2px 0;
}

textarea.textarea_fit {
	width: 100%;
	height: 100%;
	margin: 2px 0 2px 0;
}

textarea.textarea_25 {
	text-align: left;
	width: 25%;
}

textarea.textarea_50 {
	text-align: left;
	width: 50%;
}

textarea.textarea_75 {
	text-align: left;
	width: 75%;
}

textarea.textarea_100 {
	text-align: left;
	width: 100%;
	margin: 2px 0 2px 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<SELECT>*/
section select {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_600);
	background-color: var(--color_light);
	padding: 8px 48px 8px 12px;
	margin: 2px 12px 2px 0;
	height: 40px;
	min-width: 100px;
	background-image: url(../images/buttons/icon_dropdown.svg);
	border-radius: 1px;
}

section select:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

section select optgroup {
	font-family: 'Roboto Mono', monospace;
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	color: var(--color_grey_600);
	padding: 12px 0 4px 0;
}

section select option {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_500);
	padding: 4px 0 4px 12px;
}

section select optgroup option {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_500);
	padding: 4px 0 4px 24px;
}

section select[multiple] {
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_grey_500);
	margin: 2px 12px 0 0;
	min-height: 80px;
	min-width: 400px;
	padding: 0;
	border-radius: 2px;
}

section select[multiple][size] {
	height: 260px;
}

section select[multiple][size="14"] {
	height: 210px;
}

section select[multiple][size="13"] {
	height: 200px;
}

section select[multiple][size="12"] {
	height: 190px;
}

section select[multiple][size="11"] {
	height: 180px;
}

section select[multiple][size="10"] {
	height: 170px;
}

section select[multiple][size="9"] {
	height: 160px;
}

section select[multiple][size="8"] {
	height: 150px;
}

section select[multiple][size="7"] {
	height: 140px;
}

section select[multiple][size="6"] {
	height: 130px;
}

section select[multiple][size="5"] {
	height: 120px;
}

section select[multiple][size="4"] {
	height: 110px;
}

section select[multiple][size="3"] {
	height: 100px;
}

section select[multiple][size="2"] {
	height: 90px;
}

section select[multiple][size="1"] {
	height: 80px;
}

section select[multiple] optgroup {
	font-size: 14px;
	-webkit-text-fill-color: var(--color_grey_600);
	padding: 6px 0 6px 12px;
}

section select[multiple] option {
	-webkit-text-fill-color: var(--color_grey_500);
	padding: 6px 0 6px 12px;
}

section select[multiple] optgroup option {
	padding: 6px 0 6px 24px;
}

section select[multiple] option:hover {
	-webkit-text-fill-color: var(--color_dark);
	background: var(--color_grey_300) linear-gradient(0deg, var(--color_grey_200) 0%, var(--color_grey_200) 100%);
}

/*Styling wenn man innerhalb einer Multi-Select_liste eine Auswahl getroffen hat*/
section select[multiple]:focus option:checked {
	font-family: 'Roboto Mono', sans-serif;
	font-weight: 500;
	-webkit-text-fill-color: var(--color_light);
	background: var(--color_primary) linear-gradient(0deg, var(--color_primary) 0%, var(--color_primary) 100%);
}

/*Styling wenn man außerhalb einer Multi-Select_liste klickt nachdem man eine Auswahl getroffen hat*/
section select[multiple] option:checked {
	font-family: 'Roboto Mono', sans-serif;
	font-weight: 500;
	-webkit-text-fill-color: var(--color_light);
	background: var(--color_primary) linear-gradient(0deg, var(--color_primary) 0%, var(--color_primary) 100%);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<DETAILS>*/
section details {
	margin: 2px 0 0 0;
	box-shadow: 3px 3px 6px var(--color_boxshadow);
	border-radius: 2px;
}

section details:hover {
	cursor: pointer;
}

section details summary {
	font-weight: 500;
	font-size: 16px;
	box-sizing: border-box;
	min-height: 40px;
	max-height: fit-content;
	min-width: 100px;
	color: var(--color_dark);
	background-color: var(--color_grey_200);
	border: none;
	padding: 4px 12px 6px 12px;
	margin: 0;
	width: 100%;
}

section details summary::marker {
	font-size: 24px;
	color: var(--color_icon);
}

section details[open] summary::marker {
	color: var(--color_primary);
}

section details p {
	font-weight: 400;
	font-size: 16px;
	color: var(--color_dark);
	padding: 12px;
	margin: 0;
	box-sizing: border-box;
	min-height: 40px;
	max-height: fit-content;
	width: 100%;
	background-color: var(--color_light);
}

section table.compact details {
	box-shadow: none;
}

section table.compact details summary {
	font-size: 0.875rem; /* 14px */
	min-height: 1.5rem; /* 24px */
	color: var(--color_grey_600);
	background-color: transparent;
	padding-left:0;
	padding-right:0;
}
section table.compact details summary::marker {
	font-size: 0.875rem; /* 14px */
}
section table.compact details p {
	font-size: 0.875rem; /* 14px */
	margin: 0 !important;
	padding: 0.25rem; /* 4px */
	min-height: auto;
	background-color: transparent;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="BUTTON"*/
input[type="button"].btn_primary,
input[type="button"].btn_secondary,
input[type="button"].btn_positive,
input[type="button"].btn_negative,
input[type="button"].btn_default,
input[type="button"].btn_light,
input[type="submit"].btn_primary,
input[type="submit"].btn_secondary,
input[type="submit"].btn_positive,
input[type="submit"].btn_negative,
input[type="submit"].btn_default,
input[type="submit"].btn_light,
button.btn_primary,
button.btn_secondary,
button.btn_positive,
button.btn_negative,
button.btn_default,
button.btn_light,
a.btn_primary,
a.btn_secondary,
a.btn_positive,
a.btn_negative,
a.btn_default,
a.btn_light,
a.btn_disabled {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	line-height: normal;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	letter-spacing: 0.4px;
	vertical-align: middle;
	margin: 2px 12px 2px 0;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
	max-height: 40px;
	min-width: 80px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 3px;
	color: var(--color_light);
	background-color: var(--color_default);
	box-shadow: 3px 3px 6px var(--color_boxshadow);
	transition: background-color 0.2s ease;
}

input[type="button"].btn_primary,
input[type="submit"].btn_primary,
button.btn_primary,
a.btn_primary {
	background-color: var(--color_primary);
}

input[type="button"].btn_primary:hover,
input[type="submit"].btn_primary:hover,
button.btn_primary:hover,
a.btn_primary:hover {
	background-color: var(--color_primary_hover);
}

input[type="button"].btn_secondary,
input[type="submit"].btn_secondary,
button.btn_secondary,
a.btn_secondary {
	background-color: var(--color_secondary);
}

input[type="button"].btn_secondary:hover,
input[type="submit"].btn_secondary:hover,
button.btn_secondary:hover,
a.btn_secondary:hover {
	background-color: #0094B5;
}

input[type="button"].btn_positive,
input[type="submit"].btn_positive,
button.btn_positive,
a.btn_positive {
	background-color: var(--color_positive);
}

input[type="button"].btn_positive:hover,
input[type="submit"].btn_positive:hover,
button.btn_positive:hover,
a.btn_positive:hover {
	background-color: #00A865;
}

input[type="button"].btn_negative,
input[type="submit"].btn_negative,
button.btn_negative,
a.btn_negative {
	background-color: var(--color_negative);
}

input[type="button"].btn_negative:hover,
input[type="submit"].btn_negative:hover,
button.btn_negative:hover,
a.btn_negative:hover {
	background-color: #BD0007;
}

input[type="button"].btn_default,
input[type="submit"].btn_default,
button.btn_default,
a.btn_default {
	background-color: var(--color_grey_500);
}

input[type="button"].btn_default:hover,
input[type="submit"].btn_default:hover,
button.btn_default:hover,
a.btn_default:hover {
	background-color: #575869;
}

input[type="button"].btn_light,
input[type="submit"].btn_light,
button.btn_light,
a.btn_light {
	color: var(--color_grey_600);
	background-color: var(--color_light);
}

input[type="button"].btn_light:hover,
input[type="submit"].btn_light:hover,
button.btn_light:hover,
a.btn_light:hover {
	background-color: var(--color_grey_200);
}

input[type="button"]:disabled,
input[type="button"]:disabled:hover,
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover,
button:disabled,
button:disabled:hover {
	cursor: not-allowed !important;
	color: var(--color_light);
	background-color: var(--color_grey_500);
	border: 1px solid transparent;
}

a.btn_disabled,
a.btn_disabled:hover {
	cursor: not-allowed!important;
	pointer-events: none!important;
	opacity: 0.4;
	color: var(--color_light);
	background-color: var(--color_grey_500);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="RADIO"*/
input[type="radio"] {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--color_light);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color_grey_500);
	border-radius: 100%;
	padding: 0;
	margin: 2px 6px 2px 0;
	transform: translateY(-0.075em);
	display: inline-grid;
	place-content: center;
	vertical-align: initial;
	background-image: none;
}

input[type="radio"]:hover {
	border: 2px solid var(--color_primary);
}

input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: scale(0);
	transition: 1ms transform;
}

input[type="radio"]:checked {
	background-color: var(--color_light);
	border: 2px solid var(--color_primary);
	background-image: none;
}

input[type="radio"]:checked::before {
	transform: scale(1);
	background-color: var(--color_primary);
	color: #000;
}

input[type="radio"]:disabled,
input[type="radio"]:disabled:hover {
	cursor: not-allowed;
	opacity: 0.4;
	background-color: var(--color_light);
	border: 2px solid var(--color_grey_500);
}

input[type="radio"]:checked:disabled,
input[type="radio"]:checked:disabled:hover {
	cursor: not-allowed;
	opacity: 0.4;
	background-color: var(--color_light);
	border: 2px solid var(--color_primary);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<INPUT> TYPE="CHECKBOX"*/
input[type="checkbox"] {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--color_light);
	width: 18px;
	height: 18px;
	border: 2px solid var(--color_grey_500);
	border-radius: 2px;
	padding: 0;
	margin: 2px 6px 2px 0;
	transform: translateY(-0.075em);
	display: inline-grid;
	place-content: center;
	vertical-align: initial;
	background-image: none;
}

input[type="checkbox"]:hover {
	border: 2px solid var(--color_primary);
}

input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: 1ms transform;
	background-color: #000;
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked {
	background-color: var(--color_primary);
	border: 2px solid var(--color_primary);
	background-image: none;
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
	background-color: var(--color_light);
}

input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled:hover {
	cursor: not-allowed;
	opacity: 0.4;
	background-color: var(--color_light);
	border: 2px solid var(--color_grey_500);
}

input[type="checkbox"]:checked:disabled,
input[type="checkbox"]:checked:disabled:hover {
	cursor: not-allowed;
	opacity: 0.4;
	background-color: var(--color_primary);
	border: 2px solid var(--color_primary);
}


input[type="checkbox"].positive_information {
	background-color: var(--color_light);
	border: 2px solid var(--color_grey_500);
}

input[type="checkbox"].positive_information:hover {
	border: 2px solid var(--color_positive);
}

input[type="checkbox"].positive_information:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

input[type="checkbox"].positive_information:checked {
	background-color: var(--color_positive);
	border: 2px solid var(--color_positive);
}

input[type="checkbox"].negative_information {
	background-color: var(--color_light);
	border: 2px solid var(--color_grey_500);
}

input[type="checkbox"].negative_information:hover {
	border: 2px solid var(--color_negative);
}

input[type="checkbox"].negative_information:focus-visible {
	outline: 3px solid var(--color_secondary);
	outline-offset: -3px;
}

input[type="checkbox"].negative_information:checked {
	background-color: var(--color_negative);
	border: 2px solid var(--color_negative);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<OUTPUT>*/
/* Wird genutzt um den Textinhalt des Feedbacks der copyToClipboard Funktion korrekt darzustellen (zu sehen in Editiermaske>Link/Text kopieren) */
/* und auch für Tooltips wie z.B. im Backend für Datenschutzeinschränkenden bzw. -freundliche Optionen oder generellen Informationen die hinter einem Icon hinterlegt sind */
output.infobox {
	color: var(--color_light);
	background-color: var(--color_primary);
	font-weight: 500;
	font-size: 14px;
	border-radius: 3px;
	box-sizing: border-box;
	display: block;
	width: auto;
	min-width: auto;
	max-width: 320px;
	height: auto;
	min-height: 20px;
	max-height: fit-content;
	padding: 4px 8px;
	position: absolute;
	z-index: 10;
}

output.infobox h2,
output.infobox h3,
output.infobox h4,
output.infobox h5 {
	color: var(--color_light);
	margin: 0;
}

output.infobox.negative_information {
	background-color: var(--color_negative);
}

output.infobox.positive_information {
	background-color: var(--color_positive);
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////CONTEXT MENU*/
div#outercontent div.defaultlist_context_menu {
	padding: 20px 24px 12px 24px;
}

div#outercontent div.defaultlist_context_menu span.defaultlist_context_menu_entry {
	padding: 0 6px;
	margin: 0 0 8px 0;
}

div#outercontent div.defaultlist_context_menu span.defaultlist_context_menu_entry a {
	font-weight: 500;
	padding: 0;
	height: 100%;
	width: 100%;
	display: inline-block;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <INPUT> TYPE="TEXT"*/
section table td input[type="text"] {
	font-family: 'Roboto Mono', monospace;
	box-sizing: border-box;
	min-height: 28px;
	height: 28px;
	max-height: 28px;
	width: auto;
	padding: 0 8px;
	margin: 2px 4px 2px 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <TEXTAREA>*/
section table tr td textarea {
	font-family: 'Roboto Mono', monospace;
	padding: 4px 8px;
	margin: 2px 4px 2px 0;
	width: 100%;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <A>*/
section table tr td a {
	/*max-width für Herr Puschzian gesetzt, damit die Tabellen in Wiedervorlagen nicht mehr so lang werden und schneller umbrechen*/
	max-width: 400px;
	color: var(--color_dark);
	display: inline-block;
	text-align: left;
	margin: 0 4px;
}

section table tr th a {
	min-width: max-content;
	color: var(--color_grey_600);
	display: inline-block;
	margin: 2px 4px;
	text-align: center;
	font-weight: 500;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <INPUT> TYPE="DATE"*/
table td input[type="date"] {
	font-family: 'Roboto Mono', monospace;
	box-sizing: border-box;
	min-height: 28px;
	height: 28px;
	max-height: 28px;
	width: auto;
	padding: 0 8px;
	margin: 2px 4px 2px 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <INPUT> TYPE="NUMBER"*/
section table tr td input[type="number"] {
	font-family: 'Roboto Mono', monospace;
	padding: 10px 4px;
	margin: 2px 4px 2px 0;
	height: 6px;
	width: 60px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <INPUT> TYPE="FILE"*/
section table tr td input[type="file"] {
	font-family: 'Roboto Mono', monospace;
	background-color: var(--color_light);
	padding: 0 8px;
	margin: 2px 4px 2px 0;
	max-height: 26px;
}

section table tr td input[type="file"]::file-selector-button {
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	margin: 4px 8px 4px 0;
	padding: 0px 8px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <INPUT> TYPE="BUTTON", TYPE="SUBMIT"*/
table tr td input[type="button"].btn_primary,
table tr td input[type="button"].btn_secondary,
table tr td input[type="button"].btn_positive,
table tr td input[type="button"].btn_negative,
table tr td input[type="button"].btn_default,
table tr td input[type="button"].btn_light,
table tr td input[type="submit"].btn_primary,
table tr td input[type="submit"].btn_secondary,
table tr td input[type="submit"].btn_positive,
table tr td input[type="submit"].btn_negative,
table tr td input[type="submit"].btn_default,
table tr td input[type="submit"].btn_light,
table tr td button.btn_primary,
table tr td button.btn_secondary,
table tr td button.btn_positive,
table tr td button.btn_negative,
table tr td button.btn_default,
table tr td button.btn_light,
table tr td a.btn_primary,
table tr td a.btn_secondary,
table tr td a.btn_positive,
table tr td a.btn_negative,
table tr td a.btn_default,
table tr td a.btn_light {
	vertical-align: top;
	margin: 2px 4px 2px 0;
	box-sizing: border-box;
	min-height: 28px;
	height: 28px;
	max-height: 28px;
	width: fit-content;
	min-width: 40px;
	padding: 6px 12px;
	border-radius: 1px;
}

table tr td input[type="button"].btn_search,
table tr td button.btn_search,
table tr td a.btn_search {
	margin: 2px 12px 2px 0;
	border-radius: 0 3px 3px 0;
	background-color: var(--color_grey_500);
	box-shadow: none;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <SELECT>*/
section table select {
	font-family: 'Roboto Mono', monospace;
	padding: 0 48px 0 8px;
	margin: 2px 4px 2px 0;
	height: 28px;
	float: left;
}

section table select:hover {
	outline: 1px solid var(--color_grey_500);
	outline-offset: -1px;
}

section table select optgroup {
	font-family: 'Roboto Mono', monospace;
	padding: 16px 48px 0 8px;
}

section table select option {
	font-family: 'Roboto Mono', monospace;
	padding: 6px 48px 6px 8px;
}

section table select[multiple] {
	font-family: 'Roboto Mono', monospace;
	margin: 2px 4px 2px 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> <P> <SMALL> <SPAN> <H4>*/
section table tr th small {
	color: var(--color_dark);
	text-align: center;
	margin: 2px 4px;
}

section table tr th.table_name small {
	color: var(--color_light);
	font-weight: 500;
}

section table tr td small {
	color: var(--color_grey_500);
	text-align: left;
	font-size: 12px;
}

section table tr td p {
	color: var(--color_dark);
	font-size: 14px;
}

section table tr td span {
	color: var(--color_dark);
}

section table h4 {
	font-weight: 700;
	color: var(--color_dark);
	font-size: 16px;
	margin: 32px 0 0 0;
	letter-spacing: 0.4px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE>*/
section table {
	width: auto;
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	color: var(--color_dark);
	border-collapse: collapse;
	background-color: transparent;
	line-height: 1.6;
}

section table td {
	hyphens: none;
	padding: 6px 16px;
	border-top: 1px solid var(--color_grey_400);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	vertical-align: top;
	line-height: 1.6;
}

section table td:first-of-type {
	border-left: 0;
}

section table tr:first-of-type td {
	border-top: 1px solid transparent;
}

section table td:last-of-type {
	border-right: 0;
}

section table tr:last-of-type td {
	border-bottom: 1px solid transparent;
}

section table tr th {
	font-weight: 500;
	white-space: nowrap;
	padding: 10px 16px;
	color: var(--color_grey_600);
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--color_grey_400);
	border-bottom: 2px solid var(--color_grey_500);
	line-height: 1.6;
}

/* Die Klasse "clickable" sorgt dafür, dass beim Hovern die Elemente in einer Tabelle mit einem Dreieck markiert werden, die auch anklickbar sind. */
tr .clickable {
	cursor: pointer;
	position: relative;
}

tr .clickable::before {
	content: '\25B6';
	color: transparent;
	font-size: 0.625rem;
	vertical-align: middle;
	position: absolute;
	left: -12px;
	height: 100%;
	display: flex;
	align-items: center;
}

tr:hover .clickable::before {
	color: var(--color_secondary);
}

/* Die Klasse "clickable_placeholder" braucht man für z.B. Text-Elemente die nach einem Element mit der Klasse "clickable" stehen, damit es eingerückt ist */
tr .clickable_placeholder {
	display: block;
	padding-left: 12px;
}


section table tr.sticky_header th {
	z-index: 99;
	position: sticky;
	top: 48px;
}
section table tr.sticky_header_top_0 th {
	z-index: 99;
	position: sticky;
	top: 0;
}

section table th.second_th {
	font-weight: 500;
	white-space: nowrap;
	padding: 10px 16px;
	color: var(--color_grey_600);
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
	background-color: var(--color_grey_300);
	border-top: 1px solid var(--color_grey_400);
	border-bottom: 0;
}

section table th.table_name {
	padding: 10px 16px;
	color: var(--color_light);
	text-align: left;
	font-size: 14px;
	vertical-align: middle;
	background-color: var(--color_grey_500);
}

section table tr:hover td {
	background-color: #FDE4D2;
}

section table tr:hover:has(th) {
	outline: 2px solid transparent;
	outline-offset: -2px;
	background-color: transparent;
}

section table td:nth-child(odd) {
	background-color: var(--color_grey_200);
}

section table td:nth-child(even) {
	background-color: var(--color_grey_100);
}

section table td.group_odd {
	background-color: var(--color_grey_200);
}

section table td.group_even {
	background-color: var(--color_grey_100);
}

section table .table_cell_empty {
	padding: 32px 16px 8px 16px;
	border: 0;
	visibility: hidden;
}

section table th.table_cell_group,
section table td.table_cell_group_vertical {
	font-weight: 500;
	background-color: transparent;
	font-size: 12px;
	text-transform: uppercase;
	color: var(--color_grey_600);
	padding: 32px 16px 8px 16px;
	position: relative;
	border: 0;
	vertical-align: bottom;
}

/* Wenn eine Tabelle mit einer Kopfzeile für Gruppierungen genutzt wird, sollen die Abstände beim padding-top auf 0 gesetzt werden. */
/* Wenn eine Tabelle jedoch mehrere Zeilen mit Gruppierungen enthält, benötigen diese Zellen einen oberen Abstand von 32px um sich zur vorherigen Tabelle abzugrenzen (siehe Tabelle „Befragungen“). */
section table tr:first-child .table_cell_empty {
	padding: 0 16px 8px 16px;
}

section table tr:first-child th.table_cell_group {
	padding: 0 16px 8px 16px;
}

section table tr:hover td.table_cell_group_vertical {
	background-color: transparent;
}

section table td.table_cell_group_vertical {
	vertical-align: middle;
	text-align: right;
	word-break: break-word;
	max-width: 200px;
}

section table th.table_cell_group::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 16px;
	right: 16px;
	height: 8px;
	background-color: var(--color_grey_500);
}

section table td.table_cell_group_vertical::after {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	right: 0;
	width: 8px;
	background-color: var(--color_grey_500);
}

section table.table_no_hover tr td {
	background-color: var(--color_grey_200);
}

section table.table_no_hover tr:hover td {
	background-color: var(--color_grey_200);
	border-top: 1px solid var(--color_grey_400);
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--color_grey_400);
}

section table.table_no_hover tr:hover td:first-of-type {
	border-left: 0;
}

section table.table_no_hover tr:hover:first-of-type td {
	border-top: 0;
}

section table.table_no_hover td:hover:last-of-type {
	border-right: 0;
}

section table.table_no_hover tr:hover:last-of-type td {
	border-bottom: 0;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> TABLE_NAVIGATION*/
section table.table_navigation tr td {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: fit-content;
	background-color: var(--color_transparent);
}

section table.table_navigation tr:hover td {
	background-color: var(--color_transparent);
}

section table.table_navigation tr:nth-of-type(2) td,
section table.table_navigation tr:nth-of-type(3) td {
	background-color: var(--color_transparent);
	border-bottom: 2px solid var(--color_transparent);
}

section table.table_navigation tr:last-of-type td {
	border-top: 2px solid var(--color_transparent);
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////<TABLE> TABLE_BLANK*/
section table.table_blank {
	width: auto;
	background-color: transparent;
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	border-collapse: collapse;
	filter: none;

}

section table.table_blank tr {
	background-color: transparent;
}

section table.table_blank th {
	font-weight: 700;
	padding: 12px 32px 12px 0;
	text-align: left;
	color: var(--color_grey_600);
	background-color: transparent;
	outline: 0;
	border: 0;
	z-index: 1;
	position: static;
	top: 49px;
	font-size: 16px;
	margin: 32px 0 0 0;
	letter-spacing: 0.4px;
}

section table.table_blank td {
	padding: 8px 12px 8px 0;
	color: var(--color_dark);
	background-color: transparent;
	outline: 0;
	border: 0;
}

section table.table_blank tr:hover {
	outline: 0;
}

section table.table_blank tr:hover td {
	background-color: transparent;
	border: 0;
}

section table.table_blank tr:hover:has(th) {
	background-color: transparent;
	outline: 0;
}

section table.table_blank td:nth-child(odd) {
	background-color: transparent;
}

section table.table_blank td:nth-child(even) {
	background-color: transparent;
}

section table.table_blank textarea {
	margin: 2px 4px 2px 0;
}

section table.table_blank select {
	margin: 2px 4px 2px 0;
}

section table.table_blank select[multiple] {
	margin: 2px 4px 2px 0;
}

section table.table_blank input[type="text"] {
	margin: 2px 4px 2px 0;
}

section table.table_blank input[type="number"] {
	margin: 2px 4px 2px 0;
}

section table.table_blank input[type="radio"] {
	margin: 2px 4px 2px 0;
}

section table.table_blank input[type="checkbox"] {
	margin: 2px 4px 2px 0;
}

section table.table_blank input[type="file"] {
	margin: 2px 4px 2px 0;
}