/* Optimierte Darstellung für mobile Geräte */
@media screen and (max-width: 1024px) {

	/* --- BODY-BEREICH  --- */

	/* Body-Element wird formatiert */
	.hw-top {
		min-width: 20rem;
		font-size: .9rem;
		grid-template-rows: 4.5rem auto min-content;
	}

	/* --- FORMULARFELDER --- */

	/* Standardformatierungen für Formularelemente */
	button,
	input,
	select,
	textarea {
		font-size: .9rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-form-label,
	.hw-label-imagetext {
		font-size: .9rem;
	}

	/* Formatierung von Eingabefeldern in Formularen */
	.hw-input-text {
		font-size: .9rem;
		width: 14rem;
	}

	/* Formatierung von Eingabefeldern in Formularen */
	.hw-input-value {
		font-size: .9rem;
		width: 9rem;
	}

	/* Formatierung von Auswahlfeldern in Formularen */
	.hw-input-select {
		font-size: .9rem;
	}

	/* Eingabefeld für Datum wird definiert */
	.hw-input-barcode {
		width: 9rem;
		background-repeat: no-repeat;
		background-position: 95% center;
	}

	/* Eingabefeld für Datum wird definiert */
	.hw-input-datum {
		min-width: 6rem;
	}

	/* Eingabefeld für Datum wird definiert */
	.hw-input-datumzeit {
		min-width: 10rem;
	}

	/* Eingabefeld für Zeit wird definiert */
	.hw-input-zeit {
		min-width: 5rem;
	}

	/* Formularfeld für Datei-Uploads */
	.hw-input-file,
	.hw-input-textarea {
		max-width: 90%;
	}

	/* Zeile in Radioliste bzw. Checkboxliste */
	.hw-input-list-row {
		font-size: .9rem;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-header,
	.hw-formline-text,
	.hw-formline-check,
	.hw-formline-radio {
		font-size: .9rem;
	}

	/* Kürzere Darstellung von Eingabefeldern */
	.hw-input-text.hw-input-short,
	.hw-input-select.hw-input-short {
		width: 6rem;
	}

	/* Textzeilen in Eingabemaske */
	.hw-formline-firsthalf,
	.hw-formline-secondhalf {
		font-size: .9rem;
	}

	/* In der zweiten Spalte enthaltene Grids in Zeile anzeigen */
	.hw-formline-secondhalf.hw-form-grid {
		column-gap: .25rem;
	}

	/* Normale Textzeile in Eingabemaske */
	.hw-formline-hinweis {
		font-size: .8rem;
	}

	/* --- SETUP --- */

	/* Formatierung für Setup-Routine */
	.hw-setup {
		grid-row-start: 1;
		grid-row-end: 4;
	}

	/* Formatierung für Masterkeys in Setup-Routine */
	.hw-setup-masterkeys {
		overflow-x: auto;
		font-size: 1.1rem;
		line-height: 1.3rem;
	}

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

	/* Platzierung des Bildlogos in der Kopfleiste */
	.hw-logo-banner,
	.hw-logo-bild {
		height: 2.5rem;
	}

	/* Formatierung der Schriftzüge in der Kopfleiste */
	.hw-logo-schrift {
		font-size: 1rem;
		margin: 1rem 0;
	}

	/* Formatierung der Schriftzüge in der Kopfleiste */
	.hw-logo-firma,
	.hw-logo-titel {
		height: 1.25rem;
		line-height: 1.25rem;
		vertical-align: middle;
	}

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

	/* Formatierung der Footerleiste mit Datum */
	.hw-datum {
		font-size: .8rem;
		grid-row-start: 3;
		grid-row-end: 4;
		z-index: 9080;
	}

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

	/* Positionierung des Login-Feldes */
	.hw-login {
		grid-row-start: 2;
		grid-row-end: 3;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-login-label {
		font-size: .9rem;
	}

	/* Formatierung von Feldbezeichnern in Eingabemasken */
	.hw-login-label~.hw-input-text {
		width: 10rem;
	}

	/* --- LIZENZ-HINWEIS --- */

	/* Fehlermeldung bei fehlerhafter Lizenz */
	.hw-lizenz-fehler {
		font-size: .9rem;
		font-weight: bold;
		padding: 0;
		margin: .5 0 1rem 0;
	}

	/* --- MELDUNGEN --- */

	/* Meldestelle für Mitteilungskurzdarstellung */
	.hw-meldestelle {
		right: 1rem;
		top: 5.5rem;
		border-radius: .25rem;
		font-size: .8rem;
		display: grid;
		max-height: 50vh;
		max-width: 50%;
	}

	/* Meldestelle mit aktuellen Mitteilungen */
	.hw-meldestelle.aktiv {
		background-color: var(--hw-bgcolor);
		border: 1px solid var(--hw-linecol);
		padding: .25rem 0;
	}

	/* Es sind keine Mitteilungen vorhanden */
	.hw-meldeleer {
		display: none;
	}

	/* Meldungsblöcke in der Meldestelle werden formatiert */
	.hw-meldhinweis,
	.hw-meldwarnung,
	.hw-meldfehler {
		padding: .25rem .75rem;
		align-self: center;
		cursor: pointer;
		display: block;
	}

	/* Schriftfarbe für Hinweise wird festgesetzt */
	.hw-meldhinweis {
		color: var(--hw-dark);
	}

	/* Schriftfarbe für Warnungen wird festgesetzt */
	.hw-meldwarnung {
		color: var(--hw-light);
	}

	/* Schriftfarbe für Fehler wird festgesetzt */
	.hw-meldfehler {
		color: var(--hw-error);
	}

	/* Wenn das Mitteilungscenter aktiviert ist, wird dieses angezeigt */
	.hw-meldcheck:checked~.hw-meldhinweis,
	.hw-meldcheck:checked~.hw-meldwarnung,
	.hw-meldcheck:checked~.hw-meldfehler {
		display: none;
	}

	/* Gesammelte Fehler-, Warnungs- und Hinweismeldungen */
	.hw-meldungen {
		font-size: .8rem;
		padding: .25rem 0 .25rem .75rem;
		display: none;
	}

	/* Überschrift im Mitteilungscenter */
	.hw-meldover {
		margin-bottom: .5rem;
	}

	/* Schließen-Button im Mitteilungscenter */
	.hw-meldclose {
		margin-right: .75rem;
	}

	/* Meldungen müssen bei Bedarf gescrollt werden */
	.hw-meldinhalt {
		padding-right: .75rem;
	}

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

	/* Standard-Tabellenformatierungen */
	table {
		font-size: .9rem;
	}

	/* Überschrift 2. Ordnung */
	h2 {
		font-size: 1.1rem;
	}

	/* Tabelleninhalt erhält unteren Abstand */
	.hw-tabcont {
		margin-bottom: 1rem;
		display: grid;
		grid-template-columns: auto auto;
	}

	/* Sekundärer Eintrag */
	.hw-conttab-subline {
		font-size: .8rem;
	}

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

	/* Zusätze bei geänderten Buchungsdaten */
	.hw-conttab-symbolic.hw-icons-korrigiert::before,
	.hw-conttab-symbolic.hw-icons-abwesend::before {
		font-size: .6rem;
	}

	/* Inhaltsbereich wird definiert */
	.hw-content {
		grid-row-start: 2;
		grid-row-end: 3;
		overflow-y: auto;
		overflow-x: auto;
		padding: 1rem;
		box-sizing: border-box;
		position: relative;
	}

	/* Hauptüberschrift wird formatiert */
	.hw-head-title {
		font-size: 1.5rem;
		line-height: 2rem;
		margin-top: 0;
		margin-bottom: 1rem;
	}

	/* Titel in Filterbar wird formatiert */
	.hw-filter-title,
	.hw-seiten-title {
		font-size: .8rem;
		line-height: .8rem;
	}

	/* Größe der Icon-Buttons wird angepasst */
	.hw-button-imagesmall {
		height: 1.5rem;
		font-size: .9rem;
	}

	/* Felder für Filterbar verkleinern */
	input.hw-filter-widget,
	select.hw-filter-widget,
	button.hw-filter-widget,
	input.hw-seiten-widget,
	select.hw-seiten-widget,
	button.hw-seiten-widget,
	.hw-filter-widget.hw-button-imagesmall::before,
	.hw-seiten-widget.hw-button-imagesmall::before {
		font-size: .8rem;
		line-height: .8rem;
		height: 1.5rem;
	}

	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel {
		line-height: .8rem;
		height: 1.5rem;
	}

	/* Label-Suchfeld für Filterbar formatieren */
	.hw-filter-searchlabel::before {
		font-size: .8rem;
		line-height: .8rem;
	}

	/* Block mit Hinweis auf notwendige Pflichtfelder */
	.hw-pflichtfelder {
		color: var(--hw-dark);
		font-size: .8rem;
		margin-bottom: 1rem;
	}

	/* Akkordeon-Inhalt wird formatiert */
	.hw-akkordcont {
		font-size: .8rem;
	}

	/* Darstellung von Begriffserklärungen in Legendenform */
	.hw-legende {
		font-size: .8rem;
		line-height: 1.5rem;
		margin-bottom: 1rem;
	}

	/* Darstellung von Begriffserklärungen in Legendenform */
	.hw-legende-tabline {
		margin-bottom: .5rem;
	}

	/* Darstellung von Begriffserklärungen in Legendenform */
	.hw-legende-tabline .hw-legende-iconline,
	.hw-legende-tabline .hw-legende-textline {
		margin-bottom: .5rem;
	}

}

/* Optimierte Darstellung für kleine mobile Geräte */
@media screen and (max-width: 480px) {

	/* Formatierung der Schriftzüge in der Kopfleiste */
	.hw-logo-schrift {
		display: none;
	}

	/* Der Schließen-Button im Mitteilungscenter wird ohne Text angezeigt */
	.hw-meldclose {
		font-size: 0;
		width: 1rem;
		height: 1rem;
		padding-right: 0;
	}

	/* Einspaltige Darstellung von Formulargittern definieren */
	.hw-form-grid,
	.hw-login-grid {
		display: grid;
		grid-template-columns: auto;
		row-gap: .75rem;
	}

	/* Abstände bei Formularlabels verringern */
	.hw-form-label {
		padding-top: 0;
		padding-bottom: 0;
		white-space: normal;
	}

	/* Abstände von Login-Elementen werden geändert */
	.hw-login-grid .hw-button-imagetext,
	.hw-login-grid .hw-button-imagetext:last-child {
		margin-right: 1rem;
	}

	/* Zweispaltige Darstellung in Formularen auf einspaltig erzwingen */
	.hw-buttonline,
	.hw-input-textarea,
	.hw-input-file,
	.hw-formline-header,
	.hw-formline-text,
	.hw-formline-hinweis,
	.hw-formline-check,
	.hw-formline-radio,
	.hw-formline-secondhalf,
	.hw-formline-tabgrid,
	.hw-formline-rechtegrid {
		grid-column-start: 1;
		grid-column-end: 2;
	}

}