/**
 * @author Sven Tillack, Studio Tillack Knöll
 * @version 2.7
 */

* {
	box-sizing: border-box;
}

:root {
	--col-red: rgb(232, 54, 0);
}

::selection {
	background-color: var(--col-red);
	color: white;
}

::placeholder {
  color: var(--col-red);
}

:-ms-input-placeholder {
  color: var(--col-red);	
}

::-ms-input-placeholder {
  color: var(--col-red);
}

a {
	text-decoration: none;
}

#page > .wrap {
	padding-top: 0px;
	padding-bottom: 0px;
}

#site_title {
	display: inline-flex;
}

#site_title img {
	height: 87px;
}

#navigation-main {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;			
	border-right: 1px solid var(--col-red);
	width: calc( 5.55555555556% );
}

	#site-map .page-item-2 {
		display: none;
	}

	#site-map > li,
	#navigation-main #menu-primary > li {
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid rgb(235, 54, 1);
	}

	@media (max-width: 1024px) {
		#navigation-main {
			width: calc( 11.1111111% - 20px );
		}
	}

	@media (max-width: 768px) {
		#navigation-main {
			width: calc( 12.666667% - 10px );
		}
		
		#site_title {
			flex-direction: column;
		}
		
		#site_title img {
			max-width: calc( 100% - 10px );
    		height: auto !important;
		}
	}

	.trigger {
		top: 14px;
		left: 14px;
		position: fixed;
		cursor: pointer;
	}

	@media (max-width: 768px) {
		.trigger {
			left: 10px;
		}
	}

	#navigation-main #menu-secondary,
	#menu-primary {
		display: none;
	}

		#navigation-main #menu-secondary.not-hidden,
		#menu-primary.not-hidden {
			display: block;
		}

		#navigation-main.open {
			width: 25%;
    		min-width: 300px;
			padding: 60px 10px 10px 15px;
			box-sizing: border-box;
			z-index: 2;
			background: white;
			overflow-y: scroll;
		}

		#page {
			transition: .2s opacity ease;
		}

		#page.open {
			padding-left: calc( 25% + 10px );
			width: 100vw;
			box-sizing: content-box;
			position: fixed;
			opacity: .3;
		}

		#page.open section {
			margin-left: 0%;
		}

		#site-map .children,
		#menu-primary .sub-menu {
			margin-left: 25px;
		}

		#site-map .children li,
		#menu-primary .sub-menu li {
			position: relative;
		}

		#site-map .children li::before,
		#menu-primary .sub-menu li::before {
			content: ' ';
			width: 17px;
			height: 21px;
			background: url('arrow-h_sm.svg');
			position: absolute;
			left: -23px;
			top: 5px;
		}

		@media (max-width: 1024px) {
			#menu-primary .sub-menu li::before {
				height: 18px;
				left: -23px;
				background-size: cover;
				background-position: center center;
			}
		}

		@media (max-width: 768px) {
			#menu-primary .sub-menu li::before {
				height: 15px;
				top: 4px;
			}
		}

footer #menu-secondary-1 {
	display: flex;
	color: var(--col-red);
}

footer #menu-secondary-1 li:not(last-of-type) {
	margin-right: 10px;
}

header {
	margin-top: 15px;
}

#page { 
	width: 100vw;
	padding-left: 0px;
}

main {
	margin-top: 10px;
}

footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--col-red);
}

footer a {
	color: rgb(232, 54, 0);
}

.borderRight {
	border-right: 1px solid var(--col-red);
}

	@media (max-width: 768px) {
		.borderRight {
			border-right: none;
		}
	}

article {
	position: relative;
}

.front__page--self {
	display: flex;
}

.kolleg__grid,
.front__page--furtherPosts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px 10px;
	margin-top: 10px;
}

	@media (max-width: 1024px) {
		.front__page--self {
			display: inherit;
		}
		
		.front__page--furtherPosts {
			grid-template-columns: repeat(1, 1fr);
		}
	}

	@media (max-width: 768px) {		
		.front__page--furtherPosts {
			grid-template-columns: repeat(1, 1fr);
		}
	}

.front__page--right article:last-of-type .wrap {
	padding-bottom: 0px;
}

.front__page--right .row:last-of-type {
	margin-bottom: none;
}


.withUnderline {
	border-bottom: 4px solid currentColor;
}

.article__sidebar a {
	width: 100%;
	display: block;
}

.article__sidebar a h2 {
	display: inline-block;
}

.front__page--right article:not(:first-of-type) {
	margin-top: 20px;
}

#postImageStage img {
    display: inherit;
    object-fit: cover;
}

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
	position: relative;
  }
  [style*="--aspect-ratio"]::before {
	content: "";
	display: block;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
  }  
}

.rowLayout:not(.home .rowLayout) {
	margin-top: 40px !important;
}

	.rowLayout a {
		text-decoration: underline;
	}

	.img-tag {
		position: absolute;
		margin-top: -15px;
		margin-left: 12.5px;
	}

.img-tag .indicator {
	display: block;
    position: absolute;
    content: '';
    width: 29px;
    height: 31px;
    left: -14px;
    top: 50%;
    z-index: 101;
    transform: translateY(-50%);
	text-align: center;
	color: white;
	background: url('arrow-v_sm.svg');
	filter: grayscale(1);
	opacity: .2;
}

.img-tag .indicator .number {
	padding-top: 6px;
	display: inline-block;
}

.img-tag .label {
	top: 1px;
	position: relative;
	background: white;
	padding: 10px 12px 10px 25px;
	border: 1px solid var(--col-red);
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
	pointer-events: none;
	z-index: 10;
	color: rgb(232, 54, 0);
}

.img-tag.active {
	z-index: 9999;
}

.img-tag:hover .indicator {
	z-index: 10001;
}

.img-tag:hover .label {
	z-index: 10000;
	opacity: 1;
	pointer-events: auto;
}

#tags a {
	transition: .2s ease all;
}

#tags a.img-tag.active .indicator {
	filter: grayscale(0) !important;
	opacity: 1 !important;
}

.page-archiv .postWrapper {
	padding: 10px 0;
	border-bottom: 1px solid var(--col-red);
	position: relative;
}

	.page-archiv .postWrapper:last-of-type {
		border-bottom: none;
	}

.postWrapper .postWrapper-content {
	position: relative;
}

.postWrapper time {
	display: block;
}

.postWrapper .tags {
	margin-top: 20px;
}

.postWrapper .tags a {
	border: 1px solid var(--col-red);
    padding: 2px 5px 2px 5px;
    display: inline-block;
    color: var(--col-red);
	margin-right: 10px;
	margin-bottom: 10px;
}

	.postWrapper .tags a:hover {
		background-color: var(--col-red);
		color: white;
	}

	.postWrapper .tags a:last-of-type {
		margin-right: 0px;
		margin-bottom: 0px;
	}

body {
  counter-reset: rowNumberedCounter;
}

.rowNumbered li::before {
	counter-increment: rowNumberedCounter;
	content: counter(rowNumberedCounter);
	margin-right: 50px;
	
}

.table__cell_kopf {
	min-width: 110px;
}

#navigation--elem-search {
	padding-top: 10px;
	height: 16%;
	border-top: 2px solid black;
}

	@media (max-width: 768px) {
		#navigation--elem-search {
			height: 15%;
		}
	}

#navigation--elem-search .wrap {
	padding: 0px 20px;
}

#navigation--elem-search-wrap {
	margin-top: 20px;
	position: relative;
}

#navigation--elem-search-wrap #s {
	width: 100%;
	color: var(--col-red);
	background: #efefef;
	border-bottom: 2px solid var(--col-red);
	padding: 4px 0px 2px 6px;
}

#navigation--elem-searchsubmit {
	height: 30px;
	width: 30px;
	position: absolute;
	bottom: 7px;
	right: 5px;
	transition: transform .2s ease;
}

#navigation--elem-searchsubmit:hover {
	cursor: pointer;
	transform: rotateX(10deg);
}

svg path {
	fill: var(--col-red);
}

.container--archiveLink {
	margin-top: 20px;
}

	@media (max-width: 768px) {
		.container--archiveLink {
			padding-bottom: 20px;
			border-bottom: 1px solid var(--col-red);
		}
	}

article.event--item {
	border-bottom: 1px solid var(--col-red);
	padding-top: 10px;
	overflow: hidden;
}

	article.event--item:last-of-type {
		border-bottom: none;
	}

.event--single-container h1 {
	transition: .2s all ease;
	color: black;	
} 

.event--single-container:hover h1 {
	color: var(--col-red);
	cursor: pointer;
}

accordion-wrap,
accordion-header,
accordion-content {
	display: block;
}

	accordion-header {
		cursor: pointer;
	}

	accordion-content {
		overflow: hidden;
		transition: height 0.3s ease-in-out;
	}

accordion-wrap:not( .open ) accordion-content {
	height: 0px;
}

.m40 {
	margin-top: 40px;
}

.breadcrumb {
	color: var(--col-red);
	font-size: .85em;
	margin-bottom: 20px;
}

.postWrapper:not(first-of-type) {
	padding-top: 10px;
}

.postWrapper:not(:last-of-type),
.breadcrumb a {
	border-bottom: 1px solid var(--col-red);
}

.elem__liste--mittelstaedte {
	padding-top: 20px;
}

.elem__liste--mittelstaedte .mittelstadt--number,
.elem__liste--mittelstaedte .mittelstadt--title {
	margin-bottom: 0px !important;
}

.elem__liste--mittelstaedte .row {
	transition: .2s all ease;
}


.elem__liste--mittelstaedte .row:hover {
	color: var(--col-red);
}