/* --- NAVIGATION --- */

/* Formatierungen für optimierte Mobil-Darstellung */
@media screen and (max-width: 1024px) {

	/* Inhaltselement für Navigation */
	.hw-navi {
		left: 0;
		top: 0;
		height: 0;
		width: 0;
		visibility: hidden;
	}

	/* Button zum Anzeigen der Navigation */
	.hw-navi-mobbut {
		margin: 1rem;
		padding: .5rem .75rem;
		background-color: var(--hw-contbg);
		border: 1px solid var(--hw-linecol);
		border-radius: .25rem;
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: bold;
		text-decoration: none;
		color: var(--hw-light);
		position: fixed;
		right: 0;
		top: 0;
		z-index: 12000;
		visibility: visible;
	}

	/* Button zum Anzeigen der Navigation */
	.hw-navi-mobbut::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Hinterlegung für Navigation - normal nicht sichtbar */
	.hw-navi-mobbgr {
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		box-sizing: border-box;
		width: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0);
		font-size: 0;
		z-index: 11500;
		transition: background-color .5s ease, width 0s ease .5s, height 0s ease .5s;
		visibility: visible;
	}

	/* Aktivierung der Hinterlegung bei aktiver Navigation */
	.hw-navi-mobsel:checked~.hw-navi-boxset .hw-navi-mobbgr {
		background-color: rgba(0, 0, 0, .75);
		width: 100%;
		height: 100%;
		transition: background-color .5s ease, width 0s ease 0s, height 0s ease 0s;
	}

	/* Grundformatierung der Navigation */
	.hw-navi-content {
		height: auto;
		max-height: calc(100% - 2rem);
		max-width: calc(100% - 1rem);
		left: -110%;
		top: 1rem;
		position: fixed;
		overflow: auto;
		display: block;
		margin: 0;
		padding: 1rem;
		box-sizing: border-box;
		text-align: left;
		background-color: var(--hw-bgcolor);
		border-radius: 0 .25rem .25rem 0;
		border: 1px solid var(--hw-linecol);
		z-index: 11999;
		opacity: 0;
		transition: all .5s ease;
		visibility: visible;
	}

	/* Navigation wird bei Bedarf eingeblendet */
	.hw-navi-mobsel:checked~.hw-navi-content {
		left: -1px;
		opacity: 1;
	}

	/* Formatierung der Navigationsblöcke */
	.hw-navi-part {
		display: block;
		text-align: left;
		margin-top: .5rem;
	}

	/* Formatierung der Navigationsblöcke */
	.hw-navi-part:first-child {
		margin-top: 0;
	}

	/* Formatierung der Navigationsüberschriften */
	.hw-navi-head {
		font-size: 1rem;
		font-weight: bold;
		display: inline-block;
		vertical-align: middle;
		padding: .5rem;
		line-height: 1rem;
		border: 0;
		background-color: transparent;
		margin: 0;
		color: var(--hw-dark);
		background-repeat: no-repeat;
		background-position: left center;
		pointer-events: none;
	}

	/* Überschrift Benutzer anders positionieren */
	.hw-navi-head.benutzer::after {
		display: none;
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print {
		padding: 0;
		font-weight: normal;
		color: var(--hw-linecol);
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print::before {
		margin: 0.5rem 0 0.5rem 0.5rem;
		display: inline-block;
		vertical-align: middle;
	}

	/* Formatierung der Navigationsüberschriften */
	.hw-navi-badge {
		font-size: .7rem;
		line-height: initial;
		font-weight: bold;
		position: relative;
		padding: .25rem .5rem;
		background-color: var(--hw-error);
		color: var(--hw-bgcolor);
		border-radius: .5rem;
		margin: 0 .5rem;
		display: inline-block;
		vertical-align: middle;
	}

	/* Formatierung der Navigationsblöcke */
	.hw-navi-tray {
		margin: 0;
		padding-left: 1.75rem;
		display: none;
	}

	/* Navigation wird bei Bedarf eingeblendet */
	.hw-navi-checker:checked~.hw-navi-tray {
		display: block;
	}

	/* Formatierung der Navigationseinträge */
	.hw-navi-entry {
		display: block;
	}

	/* Formatierung der Navigationsschalter */
	.hw-navi-button {
		font-size: 1rem;
		background-color: transparent;
		text-align: left;
		border: 0;
		color: var(--hw-color);
		line-height: 1rem;
		padding: 0;
		margin: 0;
		overflow: hidden;
		white-space: nowrap;
	}

	/* Aktiver Navigationsschalter */
	.hw-navi-button.aktiv {
		color: var(--hw-light);
	}

	/* Textinhalt des Navigationspunkts wird formatiert */
	.hw-navi-text {
		padding: .5rem;
		display: inline-block;
		vertical-align: middle;
	}

	/* Textinhalt des Navigationspunkts wird formatiert */
	.hw-navi-tray.benutzer .hw-navi-text::after {
		display: none;
	}

}

/* Formatierungen für optimierte Desktop-Darstellung */
@media screen and (min-width: 1025px) {

	/* Ausblenden mobiler Steuerelemente für die Navigation */
	.hw-navi-mobbut,
	.hw-navi-mobbgr {
		font-size: 1rem;
		display: none;
	}

	/* Ausblenden mobiler Steuerelemente für die Navigation */
	.hw-navi-boxset {
		width: 0;
		height: 0;
		left: 0;
		top: 0;
	}

	/* Formatierung der Navigationsleiste */
	.hw-navi {
		grid-row-start: 2;
		grid-row-end: 3;
		width: 100%;
		height: 3rem;
		box-sizing: border-box;
		background-color: var(--hw-bgcolor);
		padding: 0 calc(2.5rem - 2px) 0 1rem;
		margin: 0;
		z-index: 9000;
		font-size: 0;
		line-height: 0;
	}

	/* Formatierung für Inhaltsbereich */
	.hw-navi-content {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 3rem;
		box-sizing: border-box;
	}

	/* Formatierung der Navigationsblöcke */
	.hw-navi-part {
		display: inline-block;
		vertical-align: top;
		text-align: left;
		position: relative;
		margin: 0 0 0 .5rem;
	}

	/* Formatierung der Navigationsüberschriften */
	.hw-navi-head {
		font-size: 1rem;
		font-weight: bold;
		position: relative;
		padding: 1rem .5rem;
		line-height: 1rem;
		border: 0;
		background-color: transparent;
		display: inline-block;
		margin: 0;
		color: var(--hw-dark);
		vertical-align: middle;
	}

	/* Icons aus Awesome-Schriftart werden formatiert */
	.hw-navi-head::before {
		width: 1.25rem;
		text-align: center;
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-part:hover .hw-navi-head,
	.hw-navi-part:focus .hw-navi-head,
	.hw-navi-part:active .hw-navi-head {
		color: var(--hw-linecol);
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print {
		cursor: pointer;
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print:hover,
	.hw-navi-head.hw-navi-print:focus,
	.hw-navi-head.hw-navi-print:active {
		color: var(--hw-light);
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print::before {
		margin: 0;
	}

	/* Drucken-Icon wird separat behandelt */
	.hw-navi-head.hw-navi-print .hw-navi-text {
		display: none;
	}

	/* Formatierung der Navigationsüberschriften */
	.hw-navi-badge {
		font-size: .7rem;
		line-height: initial;
		font-weight: bold;
		position: relative;
		padding: .3rem .5rem;
		background-color: var(--hw-error);
		color: var(--hw-bgcolor);
		border-radius: .5rem;
		margin: 0 .5rem;
		cursor: pointer;
		vertical-align: middle;
		display: inline-block;
	}

	/* Formatierung der Navigationsblöcke */
	.hw-navi-tray {
		position: absolute;
		display: none;
		margin: 0;
		padding: .5rem;
		background-color: var(--hw-bgcolor);
		border: 1px solid var(--hw-linecol);
		border-top: 0;
		border-radius: 0 0 .25rem .25rem;
		left: calc(-.75rem + -2px);
		min-width: 11rem;
	}

	/* Formatierung der Navigationsschalter */
	.hw-navi-button {
		width: 100%;
		background-color: transparent;
		border: 1px solid transparent;
		text-align: left;
		color: var(--hw-color);
		font-size: 1rem;
		cursor: pointer;
		padding: 0 .75rem;
		margin-top: .5rem;
		border-radius: .25rem;
		white-space: nowrap;
	}

	/* Oberer Abstand des ersten Menüeintrags korrigiert */
	.hw-navi-entry:first-child .hw-navi-button {
		margin-top: 0;
	}

	/* Textinhalt des Navigationspunkts wird formatiert */
	.hw-navi-text {
		padding: .5rem 0;
		display: inline-block;
		vertical-align: middle;
	}

	/* Badge innerhalb Navigationseintrag */
	.hw-navi-button .hw-navi-badge {
		margin: 0 0 0 1rem;
		display: inline-block;
	}

	/* Fokussierter Navigationspunkt wird unterstrichen */
	.hw-navi-button:hover,
	.hw-navi-button:focus,
	.hw-navi-button:active {
		background-color: var(--hw-contbg);
		border: 1px solid var(--hw-linecol);
		color: var(--hw-dark);
	}

	/* Aktiver Navigationsschalter */
	.hw-navi-button.aktiv,
	.hw-navi-button.aktiv:hover,
	.hw-navi-button.aktiv:focus,
	.hw-navi-button.aktiv:active {
		color: var(--hw-light);
		font-weight: bold;
	}

	/* Fokussierter Menüpunkt klappt Menü auf */
	.hw-navi-part:hover .hw-navi-tray,
	.hw-navi-part:focus .hw-navi-tray,
	.hw-navi-part:focus-within .hw-navi-tray,
	.hw-navi-part:active .hw-navi-tray {
		display: block;
	}

	/* Menüeintrag Benutzer anders positionieren */
	.hw-navi-part.benutzer {
		float: right;
		text-align: right;
	}

	/* Überschrift Benutzer anders positionieren */
	.hw-navi-head.benutzer::before {
		display: none;
	}

	/* Menübereich Benutzer anders positionieren */
	.hw-navi-tray.benutzer {
		right: calc(-.75rem + -2px);
		left: auto;
	}

	/* Navigationsbuttons im Menü Benutzer anders ausrichten */
	.hw-navi-tray.benutzer .hw-navi-button {
		text-align: right;
	}

	/* Navigationstexte im Menü Benutzer anders ausrichten */
	.hw-navi-tray.benutzer .hw-navi-text::before {
		display: none;
	}

}

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

	/* Ausblenden mobiler Steuerelemente für die Navigation */
	.hw-navi-mobsel,
	.hw-navi-checker {
		display: none;
	}

	/* Formatierung der aktiven Navigationsüberschrift */
	.hw-navi-head.aktiv {
		color: var(--hw-light);
	}

	/* Icons aus Awesome-Schriftart werden formatiert */
	.hw-navi-head::before,
	.hw-navi-text::before {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-right: .5rem;
		text-align: center;
	}

	/* Icons aus Awesome-Schriftart werden formatiert */
	.hw-navi-head::after,
	.hw-navi-text::after {
		font-family: 'AwesomeWeb';
		width: 1.25rem;
		display: inline-block;
		margin-left: .5rem;
		text-align: center;
	}

}