/* Formatierungen im hellen Bildschirmmodus */
@media screen and (prefers-color-scheme: light) {

	/* Root-Element wird formatiert */
	html {
		--hw-color: #000000;
		--hw-bgcolor: #ffffff;
		--hw-contbg: #f2f9ff;
		--hw-dark: #004272;
		--hw-light: #0077cc;
		--hw-error: #990000;
		--hw-linecol: #757575;
		--hw-greyed: #f5f5f5;
		--hw-shadow: rgba(0, 0, 0, .5);
	}

}

/* Formatierungen im dunklen Bildschirmmodus */
@media screen and (prefers-color-scheme: dark) {

	/* Root-Element wird formatiert */
	html {
		--hw-color: #dddddd;
		--hw-bgcolor: #100500;
		--hw-contbg: #004272;
		--hw-dark: #ddccbb;
		--hw-light: #ccddee;
		--hw-error: #ff7777;
		--hw-linecol: #998877;
		--hw-greyed: #221100;
		--hw-shadow: rgba(150, 140, 130, 0.5);
	}

}

/* Formatierungen für alle Bildschirmansichten */
@media screen {

	/* --- BODY-BEREICH MIT VARIABLENDEFINITION --- */

	/* Body-Element wird formatiert */
	.hw-top {
		color: var(--hw-color);
		margin: 0;
		padding: 0;
		font-family: AsapWeb, Arial, Helvetica, sans-serif;
		background-color: var(--hw-greyed);
		display: grid;
		width: 100%;
		min-height: 100vh;
		height: 100vh;
		overflow: auto;
	}

	/* Keine Zeilenumbrüche */
	.hw-nowrap {
		white-space: nowrap;
	}

	/* --- FEHLER-, WARNUNGS- UND HINWEISFELDER --- */

	/* Formatierung für Hinweis-, Warnungs- und Fehlerfelder wird festgelegt */
	.hw-hinweisfeld,
	.hw-warnungfeld,
	.hw-fehlerfeld {
		padding: .5rem .75rem;
		margin-bottom: 1rem;
		background-color: var(--hw-bgcolor);
		box-sizing: border-box;
		border-radius: .25rem;
		border: 1px solid var(--hw-linecol);
		width: fit-content;
	}

	/* Formatierung für Hinweis-, Warnungs- und Fehlerfelder wird festgelegt */
	.hw-hinweisfeld::before,
	.hw-warnungfeld::before,
	.hw-fehlerfeld::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Abweichende Formatierung für Hinweisfeld */
	.hw-hinweisfeld,
	.hw-hinweis {
		color: var(--hw-dark);
	}

	/* Abweichende Formatierung für Warnungsfeld */
	.hw-warnungfeld,
	.hw-warnung {
		color: var(--hw-light);
	}

	/* Abweichende Formatierung für Fehlerfeld */
	.hw-fehlerfeld,
	.hw-fehler {
		color: var(--hw-error);
	}

	/* --- FORMULARFELDER --- */

	/* Standardeinstellungen für Formulare */
	form {
		font-size: 0;
		display: inline;
	}

	/* Standardformatierungen für Formularelemente */
	button,
	input,
	select,
	textarea {
		font-family: AsapWeb, Arial, Helvetica, sans-serif;
		outline: none;
		border-radius: 0;
		box-sizing: border-box;
	}

	/* Deaktivierte Buttons werden entsprechend dargestellt */
	button:disabled {
		background-color: var(--hw-greyed);
		color: var(--hw-linecol);
	}

	/* Deaktivierte Formularfelder werden entsprechend dargestellt */
	input:disabled,
	select:disabled {
		background-color: var(--hw-greyed);
		color: var(--hw-linecol);
		border: 1px solid var(--hw-linecol);
		opacity: 1;
	}

	/* Standardformatierungen für Formularelemente */
	input,
	select,
	textarea {
		background-color: var(--hw-bgcolor);
		color: var(--hw-dark);
		padding: .2rem .3rem;
		border: 1px solid var(--hw-dark);
	}

	/* Deaktivierte oder abgelaufene Elemente grau darstellen */
	.hw-disabled,
	.hw-input-checkbox+.hw-form-label.hw-disabled,
	.hw-input-checkbox:disabled+.hw-form-label,
	.hw-input-radio+.hw-form-label.hw-disabled,
	.hw-input-radio:disabled+.hw-form-label {
		color: var(--hw-linecol);
	}

	/* Standard-Button mit Icon und Text */
	.hw-button-imagetext,
	.hw-label-imagetext {
		background-color: var(--hw-light);
		color: var(--hw-bgcolor);
		border: 1px solid var(--hw-light);
		border-right-color: var(--hw-linecol);
		border-bottom-color: var(--hw-linecol);
		border-radius: .25rem;
		padding: .5rem .75rem;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagetext-content,
	.hw-label-imagetext-content {
		display: inline-block;
		white-space: nowrap;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagetext-content::before,
	.hw-label-imagetext-content::before,
	.hw-button-imagelink-content::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagesmall {
		background-color: var(--hw-light);
		width: 2rem;
		padding: 0;
		border: 1px solid var(--hw-light);
		border-right-color: var(--hw-linecol);
		border-bottom-color: var(--hw-linecol);
		border-radius: .25rem;
		color: var(--hw-bgcolor);
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagesmall::before {
		font-family: 'AwesomeWeb';
		text-align: center;
		font-style: normal;
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagesmall-content {
		display: none;
	}

	/* Zusätzliche Inhaltsformatierung, wenn ein Label als Button missbraucht wird */
	.hw-label-imagesmall {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	/* Button in Linkform mit Icon */
	.hw-button-imagelink {
		border: 0;
		padding: 0;
		background-color: transparent;
		text-align: left;
	}

	/* Inhaltsformatierung des Standard-Buttons mit Icon und Text */
	.hw-button-imagelink-content {
		display: inline-block;
		color: var(--hw-dark);
	}

	/* Inhaltsformatierung eines Buttons mit kleinem Icon */
	.hw-button-imagebig {
		background-color: transparent;
		font-size: 0;
		width: 2.4rem;
		height: 2.4rem;
		border: 0;
	}

	/* Container für Eingabemasken */
	.hw-form-container {
		width: fit-content;
		padding: 1rem;
		margin-bottom: 1rem;
		border-radius: .25rem;
		border: 1px solid var(--hw-linecol);
		background-color: var(--hw-bgcolor);
	}

	/* Formular als Grid-Layout anstelle bisheriger Formlines für bessere Breitenverwaltung */
	.hw-form-grid {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: 1rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-form-label {
		box-sizing: border-box;
		align-self: self-start;
		justify-self: self-start;
		white-space: nowrap;
		grid-column-start: 1;
		grid-column-end: 2;
		padding-top: .2rem;
		padding-bottom: .2rem;
		border-top: 1px solid transparent;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline {
		margin-bottom: -.5rem;
		grid-column-start: 1;
		grid-column-end: 3;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline button {
		margin-right: 1rem;
		margin-bottom: .5rem;
	}

	/* Formatierung für Formularzeile mit Buttons im Eingabeblock */
	.hw-buttonline button:last-child {
		margin-right: 0;
	}

	/* Formatierung von Eingabefeldern in Formularen */
	.hw-input-text,
	.hw-input-value,
	.hw-input-select,
	.hw-input-datum,
	.hw-input-datumzeit,
	.hw-input-zeit {
		justify-self: self-start;
	}

	/* Mehrzeiliges Eingabefeld wird formatiert */
	.hw-input-textarea,
	.hw-input-file {
		grid-column-start: 1;
		grid-column-end: 3;
		justify-self: self-start;
	}

	/* Formularfeld für Import-Daten */
	.hw-input-importdata {
		font-family: monospace;
	}

	/* Formularfeld für Checkboxen */
	.hw-input-checkbox,
	.hw-input-radio {
		width: 0;
		height: 0;
		display: inline;
		margin: 0;
		padding: 0;
	}

	/* Ganzseitige Informationen nach einer Checkbox werden verborgen */
	.hw-input-checkbox.hw-hidden~.hw-fullerror {
		display: none;
	}

	/* Wenn die entsprechende Information angezeigt werden soll */
	.hw-input-checkbox.hw-hidden:checked~.hw-fullerror {
		display: flex;
	}

	/* Checkbox-Label positionieren */
	.hw-input-checkbox+.hw-form-label,
	.hw-input-radio+.hw-form-label {
		vertical-align: middle;
		margin-right: 0;
		color: var(--hw-dark);
	}

	/* Checkbox-Label positionieren */
	.hw-input-checkbox+.hw-form-label::before,
	.hw-input-radio+.hw-form-label::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}

	/* Sonderform für Radiobuttons oder Checkboxen */
	.hw-input-radiolist,
	.hw-input-checkboxlist {
		border: 1px solid var(--hw-dark);
		margin: 0;
		max-height: 20rem;
		min-width: 15rem;
		max-width: fit-content;
		box-sizing: border-box;
		overflow-y: auto;
		padding: 0;
	}

	/* Bei ganzzeiligen Formularfeldern wird die Größe gestreckt */
	.hw-formline-text .hw-input-radiolist,
	.hw-formline-text .hw-input-checkboxlist {
		max-width: none;
	}

	/* Neue Zeile für Auswahllisten (Radio oder Checkbox) */
	.hw-input-list-row {
		display: grid;
		grid-template-columns: 0 auto;
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Letzte Zeile für Auswahllisten (Radio oder Checkbox) */
	.hw-input-list-row:last-child {
		border-bottom: 0;
	}

	/* Inputs in Auswahllisten (Radio oder Checkbox) verbergen */
	.hw-input-list-input {
		display: inline;
		width: 0;
		height: 0;
	}

	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-checker,
	.hw-input-list-radio {
		padding: 0 .5rem;
		display: block;
	}

	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-checker::before,
	.hw-input-list-radio::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}

	/* Labels für eigentliche Auswahlbuttons (Radio oder Checkbox) */
	.hw-input-list-label {
		display: grid;
		grid-template-columns: 2.2rem auto;
		padding: .5rem .75rem .5rem 0;
	}

	/* Ausgewählter Listeneintrag wird hervorgehoben */
	.hw-input-list-input:checked+.hw-input-list-label {
		color: var(--hw-dark);
	}

	/* Legende zu Checkbox- und Radiolisten wird ausgeblendet */
	.hw-input-legend {
		display: none;
	}

	/* Überschriftenzeile in Eingabemaske */
	.hw-formline-header {
		font-weight: bold;
		color: var(--hw-dark);
		margin: 0;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-header,
	.hw-formline-text,
	.hw-formline-hinweis,
	.hw-formline-check,
	.hw-formline-radio {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	/* Hinweiszeile in Eingabemaske */
	.hw-formline-hinweis {
		font-style: italic;
		color: var(--hw-dark);
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-firsthalf {
		grid-column-start: 1;
		grid-column-end: 2;
		justify-self: self-start;
		align-self: center;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-secondhalf {
		grid-column-start: 2;
		grid-column-end: 3;
		justify-self: self-start;
		align-self: center;
		justify-items: self-start;
		align-items: center;
	}

	/* In der zweiten Spalte enthaltene Grids in Zeile anzeigen */
	.hw-formline-secondhalf.hw-form-grid {
		grid-template-columns: min-content min-content;
		white-space: nowrap;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-rechtegrid {
		grid-column-start: 1;
		grid-column-end: 3;
		justify-self: self-start;
		align-self: center;
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 1rem;
		row-gap: .5rem;
		align-items: center;
	}

	/* Überschriften in einzelnen Gitterzellen positionieren */
	.hw-formline-rechtegrid .hw-formline-header {
		grid-column-start: auto;
		grid-column-end: auto;
		padding: .5rem 0;
	}

	/* Überschriften in einzelnen Gitterzellen positionieren */
	.hw-formline-rechtegrid.hw-trenner-top {
		padding-top: .5rem;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-einzelrechte {
		grid-column-start: 2;
		grid-column-end: 3;
		justify-self: self-start;
		align-self: center;
		display: grid;
		grid-template-columns: auto auto auto auto;
		column-gap: 1rem;
		row-gap: .5rem;
		align-items: center;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung */
	.hw-formline-tabgrid {
		text-align: left;
		width: fit-content;
		padding: 0;
		display: grid;
		grid-template-columns: auto auto;
		border-radius: .25rem;
		border: 1px solid var(--hw-linecol);
		margin: 0;
		justify-self: center;
		grid-column-start: 1;
		grid-column-end: 3;
		overflow: hidden;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung im Vollbildmodus */
	.hw-formline-tabgrid.hw-fullhinweis {
		border-radius: 0;
		border-color: var(--hw-dark);
	}

	/* Mehrere Gruppierte Elemente in einer Formularzeile mit Abstand */
	.hw-formline-multiple {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Mehrere Gruppierte Elemente in einer Formularzeile, letztes Element ohne Abstand */
	.hw-formline-multiple:last-child {
		margin-right: 0;
	}

	/* Formatierung von Feldern bei Eingabefehlern */
	.hw-einfehler {
		color: var(--hw-error);
		border: 1px solid var(--hw-error);
	}

	/* Formatierung von Labels bei Eingabefehlern */
	.hw-labfehler {
		color: var(--hw-error);
	}

	/* Formatierung von Labels bei Eingabefehlern */
	.hw-labfehler::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Trennlinie im Formular über dem aktuellen Eintrag */
	.hw-trenner-top {
		border-top: 1px solid var(--hw-linecol);
		padding-top: 1rem;
	}

	/* Trennlinie im Formular unter dem aktuellen Eintrag */
	.hw-trenner-bottom {
		border-bottom: 1px solid var(--hw-linecol);
		padding-bottom: 1rem;
	}

	/* --- SETUP --- */

	/* Formatierung für Fehlerdarstellung in Setup-Routine */
	.hw-setup-line {
		margin: 1rem;
		line-height: 1.5rem;
	}

	/* Formatierung für Masterkeys in Setup-Routine */
	.hw-setup-masterkeys {
		font-family: monospace;
		font-weight: bold;
		margin-top: .5rem;
	}

	/* Formatierung für Absatz in Setup-Routine */
	.hw-setup-absatz {
		margin-top: .5rem;
	}

	/* Button in der Setup-Routine */
	.hw-setup-button {
		margin-left: 1rem;
		margin-bottom: 1rem;
	}

	/* Abstände der Meldungsfelder in der Setup-Routine */
	.hw-setup .hw-fehlerfeld,
	.hw-setup .hw-warnungfeld,
	.hw-setup .hw-hinweisfeld {
		margin: 1rem;
	}

	/* --- LOGO-BANNER --- */

	/* Formatierung der Kopfleiste mit Logo im Programm */
	.hw-logo {
		width: 100%;
		background-color: var(--hw-dark);
		align-self: self-start;
		justify-self: stretch;
		text-align: left;
		z-index: 8000;
		box-sizing: border-box;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	/* Platzierung des Bildlogos in der Kopfleiste */
	.hw-logo-banner {
		margin: 1rem;
		font-size: 0;
		display: inline-block;
	}

	/* Platzierung der Bilddatei im Bildlogo der Kopfleiste */
	.hw-logo-bild {
		margin: 0;
		padding: 0;
	}

	/* Formatierung der Schriftzüge in der Kopfleiste */
	.hw-logo-schrift {
		margin-left: 0;
		vertical-align: top;
		display: inline-block;
		font-weight: bold;
		color: var(--hw-bgcolor);
	}

	/* --- FOOTER-LEISTE --- */

	/* Formatierung der Footerleiste mit Datum */
	.hw-datum {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		bottom: 0;
		text-align: center;
		padding: .5rem 1.5rem 0 1.5rem;
		box-sizing: border-box;
		color: var(--hw-bgcolor);
		background-color: var(--hw-dark);
		align-self: self-end;
		justify-self: center;
	}

	/* Meldung für Datenbankfehler wird platziert */
	.hw-datum-dbfehler {
		display: inline-block;
		font-weight: bold;
		margin-bottom: .5rem;
		margin-left: .5rem;
		margin-right: .5rem;
		vertical-align: baseline;
		color: var(--hw-contbg);
	}

	/* Hinweis im Datumsbereich wird platziert */
	.hw-datum-hinweis {
		display: inline-block;
		margin-bottom: .5rem;
		margin-left: .5rem;
		margin-right: .5rem;
		vertical-align: baseline;
	}

	/* Ausrichtung der Elemente im Datumsbereich wird definiert */
	.hw-datum-copy,
	.hw-datum-tag,
	.hw-datum-zeit {
		margin: 0;
		vertical-align: baseline;
		display: inline-block;
	}

	/* Abstände im Datumsbereich werden eingefügt */
	.hw-datum-copy,
	.hw-datum-tag {
		margin-right: .5rem;
	}

	/* Trennstriche werden bei der Datumsdarstellung eingefügt */
	.hw-datum-tag:before,
	.hw-datum-zeit:before {
		content: '-';
		vertical-align: baseline;
		display: inline-block;
		margin-right: .5rem;
	}

	/* Hinweisblöcke für PHP und JAVA im Datumsbereich */
	.hw-datum-php,
	.hw-datum-java {
		display: none;
	}

	/* --- LOGIN-SEITE --- */

	/* Positionierung des Login-Feldes */
	.hw-login {
		text-align: center;
		vertical-align: middle;
		margin: 1rem;
		padding: 0;
		box-sizing: border-box;
		align-self: center;
		justify-self: center;
		z-index: 10005;
	}

	/* Formatierung der Kopfleiste mit Logo im Login */
	.hw-login-logo {
		width: 100%;
		background-color: var(--hw-dark);
		text-align: left;
		box-sizing: border-box;
		border-radius: .25rem .25rem 0 0;
	}

	/* Formatierung der Kopfleiste mit Logo im Login */
	.hw-login-logo .hw-logo-banner {
		margin: 1rem;
	}

	/* Formular als Grid-Layout anstelle bisheriger Formlines für bessere Breitenverwaltung */
	.hw-login-grid {
		display: grid;
		grid-template-columns: min-content auto;
		column-gap: 1rem;
		row-gap: 1rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-login-label {
		box-sizing: border-box;
		align-self: center;
		justify-self: self-start;
		white-space: nowrap;
		grid-column-start: 1;
		grid-column-end: 2;
	}

	/* Login-Formular ohne unteren Abstand */
	.hw-login .hw-form-container {
		margin-bottom: 0;
		border-radius: 0 0 .25rem .25rem;
		text-align: left;
	}

	/* Passwortrücksetzung mit Abstand */
	.hw-login .hw-resetform {
		margin-top: 1.5rem;
		display: block;
	}

	/* Sekundensperre wird im Textfluss dargestellt */
	.hw-login .hw-sperre {
		display: inline;
	}

	/* --- MELDUNGEN --- */

	/* Meldestelle für Mitteilungskurzdarstellung */
	.hw-meldestelle {
		position: fixed;
		z-index: 8050;
		box-sizing: border-box;
	}

	/* Checkbox für Anzeige der Meldungen wird verborgen */
	.hw-meldcheck {
		display: none;
	}

	/* Gesammelte Fehler-, Warnungs- und Hinweismeldungen */
	.hw-meldungen {
		box-sizing: border-box;
		display: none;
	}

	/* Wenn das Mitteilungscenter aktiviert ist, wird dieses angezeigt */
	.hw-meldcheck:checked~.hw-meldungen {
		display: block;
	}

	/* Überschrift im Mitteilungscenter */
	.hw-meldover {
		font-weight: bold;
		display: inline-block;
		height: 1rem;
		overflow: visible;
	}

	/* Schließen-Button im Mitteilungscenter */
	.hw-meldclose {
		float: right;
		min-height: 1rem;
	}

	/* Schließen-Button im Mitteilungscenter */
	.hw-meldclose::after {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		text-align: right;
	}

	/* Meldungen müssen bei Bedarf gescrollt werden */
	.hw-meldinhalt {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: calc(50vh - 4rem);
	}

	/* Letzter Eintrag in Mitteilungsliste erhält keinen Abstand nach unten */
	.hw-meldinhalt .hw-hinweisfeld:last-child,
	.hw-meldinhalt .hw-warnungfeld:last-child,
	.hw-meldinhalt .hw-fehlerfeld:last-child {
		margin-bottom: 0;
	}

	/* Meldungsblöcke in der Meldestelle werden formatiert */
	.hw-meldhinweis::before,
	.hw-meldwarnung::before,
	.hw-meldfehler::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		width: 1.25rem;
		margin-right: .5rem;
		text-align: center;
	}

	/* --- HAUPT-INHALTE --- */

	/* Verborgener Inhalt */
	.hw-hidden {
		display: none;
	}

	/* Abstände von Überschriften werden angepasst */
	h1,
	h2,
	h3 {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	/* Farbe von Links wird angepasst */
	a {
		color: var(--hw-light);
	}

	/* Die Formatierung des Fieldsets wird zurückgesetzt */
	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	/* Die Formatierung von Fieldset-Legenden wird zurückgesetzt */
	legend {
		display: none;
	}

	/* Standard-Tabellenformatierungen */
	table {
		font-family: AsapWeb, Arial, Helvetica, sans-serif;
		border-spacing: 0;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung */
	.hw-tabcont {
		background-color: var(--hw-bgcolor);
		text-align: left;
		width: fit-content;
		box-sizing: border-box;
		padding: 0;
		border-radius: .25rem;
		border: 1px solid var(--hw-linecol);
		overflow: hidden;
	}

	/* Inhaltsblock für Filter und Tabellendarstellung */
	.hw-tabcont.hw-fullscreen {
		min-width: 100%;
	}

	/* Leere Filterbar zum Filtern von Tabellendarstellungen */
	.hw-filterbar-leer,
	.hw-seitenbar-leer {
		padding: 0;
		font-size: 0;
		background-color: var(--hw-dark);
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Filterbar zum Filtern von Tabellendarstellungen */
	.hw-filterbar,
	.hw-seitenbar {
		padding: .5rem .75rem;
		vertical-align: middle;
		font-size: 0;
		background-color: var(--hw-dark);
		border-bottom: 1px solid var(--hw-linecol);
		color: var(--hw-bgcolor);
	}

	/* Ausrichtung der Seitenzahlen für die aktuelle Tabelle nach rechts */
	.hw-seitenbar {
		text-align: right;
	}

	/* Ausrichtung von Formularfeldern korrigieren */
	.hw-filter-widget,
	.hw-seiten-widget {
		vertical-align: middle;
		margin-right: .5rem;
		display: inline-block;
	}

	/* Select-Feld für Filter verkleinern */
	input.hw-filter-widget,
	select.hw-filter-widget,
	select.hw-seiten-widget {
		padding: initial;
		border: 1px solid var(--hw-linecol);
	}

	/* Ausrichtung von Formularfeldern korrigieren */
	.hw-filter-container,
	.hw-seiten-container {
		vertical-align: middle;
		margin: 0;
		display: inline-block;
	}

	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: var(--hw-light);
		width: 2rem;
		padding: 0;
		border: 1px solid var(--hw-light);
		border-right-color: var(--hw-linecol);
		border-bottom-color: var(--hw-linecol);
		border-radius: .25rem;
		box-sizing: border-box;
		color: var(--hw-bgcolor);
		text-align: center;
	}

	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		text-align: center;
	}

	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-barsearch {
		max-width: 10rem;
	}

	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-searchbox:checked~.hw-filter-barselect,
	.hw-filter-searchbox:checked~.hw-filter-barinput,
	.hw-filter-searchbox~.hw-filter-barsearch {
		display: initial;
	}

	/* Auswahlfeld statt Suchfeld anzeigen */
	.hw-filter-searchbox:checked~.hw-filter-barsearch,
	.hw-filter-searchbox~.hw-filter-barselect,
	.hw-filter-searchbox~.hw-filter-barinput {
		display: none;
	}

	/* Aktionsbuttons in Darstellungsbereichen von Listendarstellungen */
	.hw-contaktionen {
		margin-bottom: .5rem;
		font-size: 0;
	}

	/* Aktionsbuttons bekommen Abstände zueinander */
	.hw-contaktionen .hw-button-imagetext {
		margin-right: 1rem;
		margin-bottom: .5rem;
	}

	/* Abstand des letzten Formularfelds korrigieren */
	.hw-filter-widget:last-child,
	.hw-seiten-widget:last-child {
		margin-right: 0;
	}

	/* Darstellung der Inhaltstabellen in einem Grid */
	.hw-tablebar {
		grid-column-start: 1;
		grid-column-end: 3;
		overflow-y: auto;
	}

	/* Inhaltstabelle für die Darstellung vorhandener Daten */
	.hw-conttab {
		padding: 0;
		width: 100%;
		grid-column-start: 1;
		grid-column-end: 3;
		overflow-y: auto;
	}

	/* Trennung bei direkt aufeinanderfolgenden Tabellen */
	.hw-conttab-topborder {
		border-top: 1px solid var(--hw-linecol);
	}

	/* Trennung bei direkt aufeinanderfolgenden Tabellen */
	.hw-conttab-toptrenner {
		border-top: 3px double var(--hw-linecol);
	}

	/* Die Überschriftenzeile wird fest positioniert - Auswirkung nur bei verkleinertem Container hw-tablebar */
	.hw-conttab thead {
		position: sticky;
		top: 0;
	}

	/* Formatierung der Kopfleiste einer Inhaltstabelle */
	.hw-conttab th {
		padding: .5rem .75rem;
		color: var(--hw-dark);
		font-weight: bold;
		background-color: var(--hw-contbg);
	}

	/* Letztes Element im Kopfbereich erhält einen Rahmen unten */
	.hw-conttab thead tr:last-child th {
		border-bottom: 1px solid var(--hw-linecol);
	}

	/* Abstände und Formatierung innerhalb einer Inhaltstabelle */
	.hw-conttab td {
		padding: .5rem .75rem;
		border-top: 1px solid var(--hw-linecol);
	}

	/* Die obere Linie der ersten Zeile im tbody wird unterdrückt */
	.hw-conttab tbody tr:first-child td {
		border-top: 0;
	}

	/* Kein Zeilenumbruch für Aktionsspalte */
	.hw-conttab td.hw-aktionen {
		text-wrap: nowrap;
		font-size: 0;
		padding-top: .25rem;
		padding-bottom: .25rem;
	}

	/* Rahmenlinie oberhalb der Untereinträge dezenter */
	.hw-conttab-subrow th {
		border-top: 1px solid var(--hw-linecol);
	}

	/* Rahmenlinie oberhalb der Untereinträge dezenter */
	.hw-conttab-subrow td {
		border-top: 1px solid var(--hw-greyed);
	}

	/* Ausrichtung von Formularfeldern wird korrigiert */
	.hw-conttab form {
		vertical-align: middle;
	}

	/* Icon in Tabellenzelle */
	.hw-conttab-iconline {
		display: inline-block;
		min-height: 1rem;
		vertical-align: middle;
	}

	/* Icon in Tabellenzelle */
	.hw-conttab-iconline::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
		font-style: normal;
	}

	/* Icon in Tabellenzelle */
	.hw-conttab-iconline::after {
		display: none;
	}

	/* Sekundärer Eintrag */
	.hw-conttab-subline {
		font-style: italic;
	}

	/* Mehrere Iconlines in einer TD */
	.hw-conttab-rechteline .hw-conttab-iconline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Mehrere Iconlines in einer TD */
	.hw-conttab-rechteline .hw-conttab-iconline:last-child {
		margin-right: 0;
	}

	/* Tabellenzelle mit Zeitangaben */
	.hw-conttab-zeitline,
	.hw-conttab-tagover {
		text-align: center;
	}

	/* Tabellenzeile mit normalen Buchungen */
	.hw-conttab-buchline td,
	.hw-conttab-endeline td {
		border-top: 1px solid var(--hw-greyed);
	}

	/* Tabellenzeile mit Summierungen */
	.hw-conttab-sumline td {
		color: var(--hw-dark);
	}

	/* Formatierung für genehmigte Abwesenheit */
	.hw-conttab-genline {
		color: var(--hw-bgcolor);
		background-color: var(--hw-light);
	}

	/* Formatierung für nicht genehmigte Abwesenheit */
	.hw-conttab-ungenline {
		color: var(--hw-bgcolor);
		background-color: var(--hw-dark);
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic {
		font-size: 0;
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
	}

	/* Tabellenzeile ohne Text */
	.hw-conttab-symbolic.hw-fehler::before {
		color: var(--hw-error);
	}

	/* Zusätze bei geänderten Buchungsdaten */
	.hw-conttab-symbolic.hw-icons-korrigiert::before,
	.hw-conttab-symbolic.hw-icons-abwesend::before {
		width: 1.25rem;
		vertical-align: super;
		text-align: right;
		padding: 0;
		margin-right: 0;
	}

	/* Tagesdarstellung in Tabelle erhält Trennlinie links */
	.hw-conttab-tagline {
		border-left: 1px solid var(--hw-linecol);
		min-width: 1rem;
		text-align: center;
		white-space: nowrap;
	}

	/* Tagesdarstellung für freie Tage */
	.hw-conttab-noline {
		background-color: var(--hw-greyed);
	}

	/* Tagesdarstellung für fehlerhafte Tage */
	.hw-conttab-nofield {
		color: var(--hw-linecol);
		background-color: var(--hw-linecol);
	}

	/* Inhaltsdarstellung in Tabellenzeile als Gitter untereinander */
	.hw-conttab-gridline {
		display: grid;
		row-gap: .5rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: row;
		align-content: center;
		min-width: 12rem;
	}

	/* Inhaltsdarstellung in Tabellenzeile als Gitter nebeneinander */
	.hw-conttab-gridbuch {
		display: grid;
		column-gap: 1rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: column;
		align-content: center;
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-hinweis,
	.hw-conttab-betrieb-ende,
	.hw-conttab-homeoffice-ende,
	.hw-conttab-abwesenheit {
		color: var(--hw-linecol);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-betrieb {
		color: var(--hw-dark);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-unterwegs,
	.hw-conttab-homeoffice {
		color: var(--hw-light);
	}

	/* Formatierungen für Personalstatus-Zeilen */
	.hw-conttab-fehler {
		color: var(--hw-error);
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-contleer {
		line-height: 1rem;
		grid-column-start: 1;
		grid-column-end: 3;
		padding: .5rem .75rem;
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-contleer::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Aktionsbuttons in Tabellen */
	.hw-aktform {
		display: inline-block;
		margin-right: .5rem;
		margin-top: .25rem;
		margin-bottom: .25rem;
		vertical-align: middle;
	}

	/* Letzter Aktionsbutton in Tabellenzelle */
	.hw-aktform:last-child {
		margin-right: 0;
	}

	/* Aktionsformular in Tabellen */
	.hw-aktform-grid {
		display: grid;
		column-gap: .5rem;
		justify-items: start;
		align-items: center;
		grid-auto-flow: column;
		align-content: center;
	}

	/* Sonderformatierung für Aktionen in Genehmigungsmodul */
	.hw-aktform-gentext,
	.hw-aktform-genok,
	.hw-aktform-genko {
		grid-row-start: 2;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-0 {
		margin-left: 0;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-1 {
		margin-left: 1.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-2 {
		margin-left: 3rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-3 {
		margin-left: 4.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-4 {
		margin-left: 6rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-5 {
		margin-left: 7.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-6 {
		margin-left: 9rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-7 {
		margin-left: 10.5rem;
	}

	/* Formatierung für Ebenen */
	.hw-ebene-8 {
		margin-left: 12rem;
	}

	/* Hauptüberschrift im Titelbereich ausblenden */
	.hw-head-haupt {
		display: none;
	}

	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben {
		color: var(--hw-dark);
	}

	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben::before {
		font-family: 'AwesomeWeb';
		display: inline-block;
		margin-right: 1rem;
	}

	/* Menüpunkt als Überschrift verwenden und Symbol einblenden */
	.hw-head-neben::after {
		display: none;
	}

	/* Darstellung einer ganzseitigen Meldung zur Bestätigung */
	.hw-fullerror {
		position: fixed;
		display: flex;
		align-content: center;
		justify-content: center;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		left: 0;
		top: 0;
		z-index: 10050;
		background-color: rgba(0, 0, 0, .75);
		text-align: center;
		vertical-align: middle;
		margin: 0;
		padding: 1rem;
		font-size: 1rem;
		color: var(--hw-color);
	}

	/* Bestätigungsmeldung in ganzseitiger Darstellung */
	.hw-fullborder {
		display: inline-block;
		align-self: center;
		padding: 1rem 1rem 0 1rem;
		background-color: var(--hw-bgcolor);
		border-radius: .25rem;
		border: 1px solid var(--hw-linecol);
		max-height: 90%;
		max-width: 90%;
	}

	/* Bestätigungsmeldung mit Positionierungsgitter */
	.hw-fullborder.hw-fullgrid {
		display: grid;
		grid-auto-flow: row;
		grid-template-rows: min-content 1fr min-content;
		grid-template-columns: 1fr;
	}

	/* Warnmeldung der Bestätigung in ganzseitiger Darstellung */
	.hw-fullwarnung {
		font-weight: bold;
		color: var(--hw-dark);
		margin-bottom: 1rem;
	}

	/* Hinweismeldungen der Bestätigung in ganzseitiger Darstellung */
	.hw-fullhinweis {
		margin-bottom: 1rem;
	}

	/* Hinweismeldungen der Bestätigung in ganzseitiger Darstellung */
	.hw-fullhinweis.hw-form-grid {
		width: fit-content;
		margin: 0 auto 1rem auto;
	}

	/* Abstände der Buttons in Vollbildmeldung ändern */
	.hw-fullborder .hw-button-imagetext {
		margin: 0 .5rem 1rem .5rem;
		display: inline-block;
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-icontext {
		padding: 0 1rem 1rem 0;
		color: var(--hw-dark);
	}

	/* Leermeldung statt hw-conttab innerhalb hw-tabcont */
	.hw-icontext::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Akkordeon-Checkbox verbergen */
	.hw-akkordcheck {
		display: none;
	}

	/* Akkordeon-Inhalt wird verborgen und mit Abstand erstellt */
	.hw-akkordcont {
		display: none;
		margin-top: .5rem;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: .5rem;
	}

	/* Text im Akkordeon anzeigen */
	.hw-akkordlabel {
		margin-bottom: .5rem;
	}

	/* Text im Akkordeon anzeigen */
	.hw-akkordlabel:after {
		content: ' anzeigen';
	}

	/* Inhalt nach Akkordeon nur anzeigen, wenn die Checkbox aktiv ist */
	.hw-akkordcheck:checked~.hw-akkordcont {
		display: grid;
	}

	/* Text im Akkordeon bei Auswahl verändern */
	.hw-akkordcheck:checked~.hw-akkordlabel:after {
		content: ' ausblenden';
	}

	/* Titel für Legenden */
	.hw-legende-titel {
		font-weight: bold;
		display: inline-block;
		margin-right: 1rem;
	}

	/* Text-Bereiche für Legenden */
	.hw-legende-textline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Icon-Bereiche für Legenden */
	.hw-legende-iconline {
		display: inline-block;
		margin-right: 1rem;
	}

	/* Icon-Bereiche für Legenden */
	.hw-legende-iconline::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Sonderformat für Jahreskalender: Erläuterung ohne Icon */
	.hw-legende-tabline .hw-legende-textline {
		padding: .25rem .5rem;
		border-radius: .25rem;
	}

	/* Sonderformat für Jahreskalender: Erläuterung mit Icon */
	.hw-legende-tabline .hw-legende-iconline {
		padding: .25rem .5rem;
		background-color: var(--hw-greyed);
		border: 1px solid var(--hw-linecol);
		border-radius: .25rem;
	}

	/* Abstand bei Neuladen-Info im Bereich Ansichten */
	.hw-ladestand {
		margin-bottom: .5rem;
	}

	/* Bestimmte Buttons und Inhalte werden rot dargestellt */
	.hw-button-imagesmall.hw-icons-aktdelete,
	.hw-button-imagesmall.hw-icons-aktdelall,
	.hw-button-imagesmall.hw-icons-ablehnung,
	.hw-button-imagesmall.hw-icons-aktdone,
	.hw-button-error {
		background-color: var(--hw-error);
		border-left-color: var(--hw-error);
		border-top-color: var(--hw-error);
	}

	/* Bestimmte Inhalte werden heller dargestellt */
	.hw-icons-akzeptiert {
		color: var(--hw-dark);
	}

}