/**
 * DAFA: Context: Frontend
 * 
 * @author alisch berlec hönow
 * @version 2.0.10
 */

body {
	--black: black;
	--white: white;
	--blue: blue;
	--red: #FF0000;
	--light-gray: rgb( 200, 200, 200 );
	--lighter-gray: rgb( 222, 222, 222 );

	--background-color: var( --white );
	--highlight-color: var( --red );
	--hover-color: var( --highlight-color );

	--border-width: calc( var( --font-size--regular ) * 0.1 );
	--border-style: solid;
	--border-color: currentColor;

	--title-spacing: calc( var( --grid-row-gap ) * 1.33333 );
	--line-spacing--regular: 0.5em;
	--section-spacing: calc( var( --grid-row-gap ) * 7 );
	--section-title-spacing: var( --title-spacing );

	--block-padding-top: 40%;
	--function-size: 1.75em;

	display: flex;
	flex-direction: column;
	min-height: 100svh;

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

#upper {
	min-height: 100svh;
}

main {
	flex: 1;
	padding-top: 0 !important;
}

footer {
	margin-top: auto;
}



.title {
	overflow: visible;
}

.title:not( :last-child ) {
	margin-bottom: var( --title-spacing );
}



section:not( :first-child ) {
	padding-top: var( --section-spacing );
}

.section:not( :last-child ) {
	margin-bottom: var( --grid-row-gap );
}

.sections:not( :last-child ),
.section[data-column-count="1"]:not( :last-child ) {
	margin-bottom: calc( var( --grid-row-gap ) * 1.1 );
}

.section__title:not( :last-child ) {
	margin-bottom: var( --section-title-spacing );
}

.section__sections {
	--block-padding-top: 25%;
}



.content-section:not( :last-child ) {
	margin-bottom: var( --grid-row-gap );
}

.content-section.headline {
	padding-top: var( --line-spacing--regular );
	border-top: var( --border-width ) var( --border-style ) var( --border-color );
}

.content-section.infobox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	padding: calc( var( --line-spacing--regular ) * 6 ) 0;
	border-top: var( --border-width ) var( --border-style ) var( --border-color );
	border-bottom: var( --border-width ) var( --border-style ) var( --border-color );
}

.content-section.infobox + .content-section.headline {
	padding-top: 0;
	border-top: none;
}

.content-section.infobox + .content-section.links {
	margin-top: calc( ( var( --grid-row-gap ) + var( --border-width ) ) * -1 );
}

.content-section[data-type="media-stack"] {
	display: flex;
	flex-wrap: wrap;
	row-gap: var( --grid-row-gap );
	column-gap: var( --grid-column-gap );
}

	.content-section[data-type="media-stack"] > * {
		flex: 1 0 100%;
	}

	.content-section[data-type="media-stack"][data-item-count="4"] > * {
		flex-basis: 40%;
	}



sjs-slider {
	margin: 0 calc( var( --grid-wrap-padding-horizontal ) * -1 );
}

sjs-slides {
	column-gap: var( --grid-column-gap );
}

sjs-slides > * {
	padding: 0 var( --grid-wrap-padding-horizontal );
}

sjs-slides > * + * {
	margin-left: calc( var( --grid-wrap-padding-horizontal ) * -2 );
}



dl {
	--column-gap: var( --grid-column-gap );
	--dt-width: max( 7em, 20% );

	display: flex;
	flex-wrap: wrap;
	column-gap: var( --column-gap );
}

dt {
	flex: 0 0 calc( var( --dt-width ) - var( --column-gap ) * 0.5 );
	font-variant-numeric: tabular-nums;
}

dt .dash {
	margin: 0 0.1em;
}

dd {
	flex: 1 0 calc( 100% - var( --dt-width ) - var( --column-gap ) * 0.5 );
}



.table {}

	.table > *,
	.table-row {
		display: flex;
		column-gap: var( --grid-column-gap );
	}

		.table > * > *,
		.table-column {
			flex: 1;
			padding: var( --line-spacing--regular ) 0;
			border-top: var( --border-width ) var( --border-style ) var( --border-color );
		}

		.table:not( .links ) > *:last-child {
			margin-bottom: calc( var( --line-spacing--regular ) * -1 );
		}

		.links.table > * > * {
			margin-bottom: calc( var( --border-width ) * -1 );
		}

		.links.table > *:last-child > * {
			border-bottom: var( --border-width ) var( --border-style ) var( --border-color );
		}



.grid {
	--gap: var( --grid-column-gap );
	--column-count: 1;

	display: grid;
	column-gap: var( --gap );
	grid-template-columns: repeat( var( --column-count ), 1fr );
}

	.grid > * {
		position: relative;
		border-top: var( --border-width ) var( --border-style ) var( --border-color );
		border-bottom: var( --border-width ) var( --border-style ) var( --border-color );
		margin-bottom: calc( var( --border-width ) * -1 );

		z-index: 10;
	}

	.grid > *::before,
	.grid > *::after {
		content: '';
		position: absolute;
		top: calc( var( --gap ) * 0.5 );
		width: var( --border-width );
		height: calc( 100% - var( --gap ) );

		pointer-events: none;
	}

	.grid > *::before {
		left: calc( var( --gap ) * -0.5 - var( --border-width ) * 0.5 );
	}

	.grid > *::after {
		right: calc( var( --gap ) * -0.5 - var( --border-width ) * 0.5 );
	}

	.grid > *:hover,
	.grid > *:active {
		z-index: 20;
	}

	.grid.is-hoverable > *:hover,
	.grid.is-hoverable > *:active {
		--border-color: var( --hover-color );
	}

	.grid > [data-span="full"] {
		grid-column-end: -1;
		grid-column-start: 1;
	}

	.grid > [data-span="full"]::before,
	.grid > [data-span="full"]::after {
		display: none;
	}



.block {}

.block-ratio {
	position: relative;
	padding-top: var( --padding-top, var( --block-padding-top ) );
}

.block-content {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	padding: var( --grid-row-gap ) var( --grid-column-gap );
}

.block-content.ta-c {
	align-items: center;
	justify-content: center;
}



.list-item {
	position: relative;
	overflow: hidden;

	z-index: 10;
}

.list-item:not( :last-child ) {
	margin-bottom: calc( var( --border-width ) * -1 );
}

.list-item:hover,
.list-item:active {
	z-index: 20;
}



.more-link {
	position: relative;
	display: block;	
	padding: 1em 0;
	border-top: var( --border-width ) var( --border-style ) var( --border-color );
	border-bottom: var( --border-width ) var( --border-style ) var( --border-color );

	z-index: 10;
}

.more-link:hover,
.more-link:active {
	z-index: 20;
}



/* ------- @grid sd ------- */
@media ( min-width: 500px ) {
	.grid[data-columns="2"] {
		--column-count: 2;
	}

		.grid[data-columns="2"] > *:nth-child( 2n + 1 )::after,
		.grid[data-columns="2"] > *:nth-child( 2n )::before {
			background-color: var( --border-color );
		}

	.grid[data-columns="3"] {
		--column-count: 3;
	}

		.grid[data-columns="3"] > *:nth-child( 3n + 1 )::after,
		.grid[data-columns="3"] > *:nth-child( 3n + 2 )::after,
		.grid[data-columns="3"] > *:nth-child( 3n + 2 )::before,
		.grid[data-columns="3"] > *:nth-child( 3n + 3 )::before {
			background-color: var( --border-color );
		}
}



/* ------- @grid < md ------- */
@media ( max-width: 699px ) {
	.list-item grid-col:first-child > div {
		padding-top: var( --line-spacing--regular );
		border-top: var( --border-width ) var( --border-style ) var( --border-color );
	}

	.list-item grid-col:last-child > div {
		padding-bottom: var( --line-spacing--regular ) !important;
		border-bottom: var( --border-width ) var( --border-style ) var( --border-color );
	}
}



/* ------- @grid md ------- */
@media ( min-width: 700px ) {
	.content-section[style*="--h"] {
		height: var( --h );
	}

	.content-section[data-type="media-stack"] > * {
		flex-basis: 20% !important;
	}

	.list-item grid-col > div {
		height: 100%;
		padding: var( --line-spacing--regular ) 0;
		border-top: var( --border-width ) var( --border-style ) var( --border-color );
		border-bottom: var( --border-width ) var( --border-style ) var( --border-color );
	}
}



/* ------- @grid lg ------- */
@media ( min-width: 1100px ) {

}