/**
 * @author Valentin Alisch, Off Office <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Rettberg: Frontend
 */

.stock {
	display: none;
}



body {
	--horizontal-spacing: 10px;
	--vertical-spacing: 0px;
	--outer-spacing: 20px;

	--spacing--large: 50px;
	--spacing--medium: 30px;
	--spacing--medium--fixed: 50px;
	--spacing--small: 15px;
	--spacing--tiny: 15px;
	--spacing--text: 5px;
	--spacing--image: 8px;

	--header-height: 100px;
	--header-background: rgba( 255, 255, 255, 0.95 );
	--header-background--active: rgba( 234, 234, 234, 0.95 );
	--header-blur: calc( 10px * 3.5 );
	--header-radius: 20px;

	--overlay-background: rgba( 234, 234, 234, 0.95 );
	--overlay-background--blurred: rgba( 234, 234, 234, 0.95 );
	--overlay-blur: calc( var( --header-blur ) * 1 );

	background: var( --background-color );
}

@supports ( ( -webkit-backdrop-filter: blur( 10px ) ) or ( backdrop-filter: blur( 10px ) ) ) {

	body {
		--header-background: rgba( 255, 255, 255, 0.4 );
		--header-background--active: rgba( 234, 234, 234, 0.4 );
		--overlay-background--blurred: rgba( 234, 234, 234, 0.75 );
	}
}

.grid-col::after, 
[class*=col-]::after, 
grid-col::after {
	display: none;
}

#page {
	padding: 0 var( --outer-spacing );
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}



.title-section {
	margin-top: var( --outer-spacing );
	margin-bottom: var( --spacing--small );
}

.title-section--double {
	margin-top: var( --outer-spacing );
	margin-bottom: calc( var( --spacing--tiny ) * 2 );
}

.content-section {
	margin-bottom: var( --spacing--large );
}

.content-section--medium {
	margin-bottom: var( --spacing--medium );
}

.list {
	margin-bottom: calc( var( --spacing--tiny ) * 2 );
}

.list__title {
	margin-bottom: calc( var( --spacing--tiny ) );
}

.list-entry__date {
	color: var( --gray );
}



.content-section > .title-section:first-child {
	margin-top: 0;
}



.icon {
	width: 1em;
	height: 1em;
	overflow: hidden;
}

	.icon.active .icon--inactive,
	.active:not( .overlay ) .icon .icon--inactive,
	.icon:not( .active ) .icon--active {
		display: none;
	}

	.active .icon .icon--active {
		display: block;
	}





/* ------------------------ */
@media ( max-width: 899px ) {

	.list-entry {
		margin-bottom: var( --spacing--tiny );
	}

	.list-entry__date {
		margin-top: calc( var( --spacing--tiny ) * 0.33333 );
		font-size: var( --font-size--small );
		line-height: var( --line-height--small );
	}
}

@media ( min-width: 900px ) {

	body {
		--horizontal-spacing: 30px;
		--vertical-spacing: 0px;
		--outer-spacing: 30px;

		--spacing--large: 100px;
		--spacing--medium: 50px;
		--spacing--small: 30px;
		--spacing--tiny: 15px;
		--spacing--text: 5px;
		--spacing--image: 15px;

		--header-height: 70px;
	}

	.list-entry__date {
		opacity: 0;
		text-align: right;
	}

	.list-entry:hover .list-entry__date,
	.list-entry:active .list-entry__date {
		opacity: 1;
	}
}