@charset "utf-8";

@font-face {
	font-family: ABCFavorit-Light;
	src:url('/files/fonts/ABCFavorit-Light-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-Light-Trial.woff') format('woff');
}
@font-face {
	font-family: ABCFavorit-Book;
	src:url('/files/fonts/ABCFavorit-Book-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-Book-Trial.woff') format('woff');
}
@font-face {
	font-family: ABCFavorit-Regular;
	src:url('/files/fonts/ABCFavorit-Regular-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-Regular-Trial.woff') format('woff');
}
@font-face {
	font-family: ABCFavorit-LightItalic;
	src:url('/files/fonts/ABCFavorit-LightItalic-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-LightItalic-Trial.woff') format('woff');
}
@font-face {
	font-family: ABCFavorit-RegularItalic;
	src:url('/files/fonts/ABCFavorit-RegularItalic-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-RegularItalic-Trial.woff') format('woff');
}

@font-face {
	font-family: ABCFavorit-Bold;
	src:url('/files/fonts/ABCFavorit-Bold-Trial.woff2') format('woff2'),url('/files/fonts/ABCFavorit-Bold-Trial.woff') format('woff');
}

body {
	margin: 0;
	font-family: ABCFavorit-Book;
	color: #000;
	font-size: 18px;
	line-height: 23px;
	/*font-variant-numeric: oldstyle-nums;*/
	-webkit-text-size-adjust: 100%;
	font-display: auto;
}

#header {
    position: fixed;
    background-color: #FFF;
    z-index: 1;
	width: 100%;
}

#header h1 {
    font-size: 40px;
    font-weight: normal;
    line-height: 48px;
    margin: 0;
    padding: 21px 24px 73px;
    position: relative;
    top: 0;
    z-index: 1;
    width: calc(100% - 124px);
    letter-spacing: -0.5px;
    padding-right: 100px;
}

#header h1 a {
    text-decoration: none;
	color: #000;
	white-space: nowrap;
}

#header h1 + a {
    position: absolute;
	right: 21px;
	top: 21px;
	font-size: 40px;
    line-height: 48px;
	text-decoration: none;
	z-index: 1;
}
#header h1 a:hover, #header h1 a.active, #header h1 a.trail, #header h1 a:first-child.active:hover, #header h1 + a:hover {
    text-decoration: underline;
	text-decoration-thickness: 3px;
}

@media (max-width: 885px) {
   #header h1 {
		padding: 21px 15px 78px;
	}
	
	#header h1 + a {
		right: 13px;
	}	
	
	#header h1 a:hover, #header h1 a.active, #header h1 a.trail, #header h1 a:first-child.active:hover, #header h1 + a:hover {
		text-decoration-thickness: 0.4vw;
	}
}

@media (max-width: 625px) {
    #header h1, #header h1 + a {
        font-size: 6.5vw;
        line-height: 8.2vw;
        padding-bottom: 12vw;
    }
}

@media (max-width: 374px) {
    #header h1 {
        padding-bottom: 0;
    }
}

#header h1 a:first-child.active {
    text-decoration: none;
}

#main {
    padding: 142px 24px 70px;
}

@media (max-width: 885px) {
    #main {
        padding: 196px 15px 70px;
    }
}

@media (max-width: 625px) {
    #main {
        padding: 34vw 15px 70px;
    }
}

@media (max-height: 630px) {
	#header {
		position: relative;
	}	
	
	#main {
        padding-top: 0;
    }
}

.mod_article {
    position: relative;
}

#article_list {
	line-height: 0;
	font-size: 0;	
	display: flex;
	flex-flow: column wrap;
	align-content: space-between;
	/*height: 4000px;*/
	gap: 10px;
}

#article_list.archive {
	flex-flow: row wrap;
}

.teaser {
	position: relative;
	text-decoration: none;
	width: calc(50% - 5px);
}

.teaser:nth-child(odd) { order: 1; }
.teaser:nth-child(even) { order: 2; }
.archive .teaser:nth-child(even) { order: 1; }

.archive .teaser {
	margin: 0;
    width: calc(16.66667% - 9px);
}

.archive .teaser figure {
	width: 100%;
    height: calc(11.04vw - 10px);
    overflow: hidden;
}

.archive .teaser div.text {
	width: calc(100% - 18px);
    height: calc(11.04vw - 20px);
    overflow: hidden;
    font-size: 18px;
    line-height: 23px;
    padding: 5px 9px;
    background-color: rgb(255, 255, 199);
}

@media (max-width: 2000px) {
    .archive .teaser {
        width: calc(20% - 8px);
    }	
	
	.archive .teaser figure {
		height: calc(13.24vw - 10px);
	}
	
	.archive .teaser div.text {
		height: calc(13.24vw - 20px);
	}
}

@media (max-width: 1650px) {
    .archive .teaser {
        width: calc(25% - 8px);
    }	
	
	.archive .teaser figure {
		height: calc(16.45vw - 10px);
	}
	
	.archive .teaser div.text {
		height: calc(16.45vw - 20px);
	}
}

@media (max-width: 1330px) {
    .archive .teaser {
        width: calc(33.3333% - 7px);
    }
	
	.archive .teaser figure {
		height: calc(21.41vw - 10px);
	}
	
	.archive .teaser div.text {
		height: calc(21,41vw - 20px);
	}
}

@media (max-width: 1010px) {
    .archive .teaser {
        width: calc(50% - 5px);
    }
	
	.archive .teaser figure {
		height: calc(32vw - 10px);
	}
	
	.archive .teaser div.text {
		height: calc(32vw - 20px);
	}
}

.teaser img {
	max-width: 100%;
	height: auto;
}

.teaser .over {
	display: none;
	position: absolute;
    background-color: #000;
    width: calc(100% - 80px);
    height: calc(100% - 60px);
    top: 0;
    left: 0;
	color: #FFF;
	font-size: 22px;
	line-height: 28px;
	padding: 30px 40px;
}

.archive .teaser .over {
	font-size: 15px;
	line-height: 18px;
    width: calc(100% - 40px);
    height: calc(100% - 30px);
	padding: 15px 20px;
}

.teaser:hover .over {
	display: block;
}

#next {
	position: fixed;
    right: 24px;
	top: 137px;
}

.content-image {
	max-width: calc(100% - 160px);
}

.content-gallery {
	width: calc(50% - 24px);
	display: inline-block;
	vertical-align: top;
}

.content-gallery ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
	line-height: 0;
}

.content-gallery ul li {
	margin-bottom: 10px;
}

.content-gallery img {
	width: 100%;
	height: auto;
}

.content-image img.w100 {
	width: 100%;
	height: auto;
}

.content-image img.w75 {
	width: 75%;
	height: auto;
}

.content-image img.w50 {
	width: 50%;
	height: auto;
}

.content-image img.w30 {
	width: 30%;
	height: auto;
}

@media (max-width: 885px) {
	.content-image img.w100, .content-image img.w75, .content-image img.w50, .content-image img.w30 {
		width: 100%;
	}
}

.content-text {
	width: calc(50% - 210px);
	display: inline-block;
	vertical-align: top;
	position: fixed;
    margin-top: -4px;
}

.schreibt .content-text {
	width: 650px !important;
	max-width: calc(100% - 160px);
}

@media (max-width: 885px) {
	.schreibt .content-text {
		width: 100% !important;
		min-width: unset;
		max-width: 100%;
	}
}

div + .content-text, div + #next + .content-text {
	margin-left:48px;
}

@media (max-width: 885px) {
    .content-gallery {
        width: 100%;
		display: block;
    }
	
	.content-text {
		width: 100% !important;
		display: block;
		margin-left:0 !important;
		position: static;
	}
	
	.content-image {
		max-width: 100%;
	}
	
	#next {
		position: static;
		margin: 7px 0 25px calc(100% - 140px);
		display: block;
		text-align: right;
	}
}

.content-text .subhead{
	margin-bottom: 22px;
}

h2 {
	font-size: 18px;
	line-height: 22px;
	margin: 0;
	font-weight: normal;
}

#article_list h2 {
	font-size: 22px;
	line-height: 28px;
}

#article_list.archive h2 {
	font-size: 15px;
	line-height: 18px;
}

@media (max-width: 625px) {
    .teaser .over {        
		padding: 15px 20px;	
		width: calc(100% - 40px);
		height: calc(100% - 30px);
		font-size: 3vw;
        line-height: 4vw;
	}
	
	#article_list h2 {
		font-size: 3vw;
        line-height: 4vw;
	}
}

@media (max-width: 500px) {
	#article_list {
		height: auto !important;
	}
	
	.teaser {
		width: 100%;
	}
	
	.teaser:nth-child(even) {
		order: 1;
	}
	
    .teaser .over, .archive .teaser .over {  
		position: static;
		display: block;
		background-color: #FFF;
		color: #000;
		padding: 6px 0;
		width: 100%;
    }
	
    .teaser .over div {   
		position: static !important;
    }
	
	#article_list h2, #article_list p {
		font-size: 15px;
		line-height: 18px;
	}
}

.touch.teaser .over, .archive .touch.teaser .over {  
	position: static;
	display: block;
	background-color: #FFF;
	color: #000;
	padding: 6px 0;
	width: 100%;
}

.touch.teaser .over div {   
	position: static !important;
}

#article_list .touch h2, #article_list .touch p {
	font-size: 15px;
	line-height: 18px;
}
	
.hello #main .inside {
	display: flex;
    align-content: space-between;
	flex-flow: row wrap;
    gap: 30px;
}

.hello #main .inside .mod_article {
	width: calc(25% - 20px);
}

.hello #main .inside .mod_article:nth-child(2) {
	width: calc(50% - 20px);
}

.hello #main .inside .content-text {
	position: static;
    width: 100%;
	margin: 0 0 22px;
	max-width: 625px;
}

.hello #main .inside .content-text:last-child {
	margin-bottom: 0;
}

.hello #main .inside .mod_article:nth-child(2) h2 {
	margin-bottom: 22px;
}

@media (max-width: 900px) {
	.hello #main .inside {
		display: flex;
		align-content: space-between;
		flex-flow: column wrap;
		gap: 20px;
	}

	.hello #main .inside .mod_article {
		width: 100%;
	}

	.hello #main .inside .mod_article:nth-child(2) {
		width: 100%;
	}

	.hello #main .inside .mod_article img {
		max-width: 50%;
	}
}

.invisible {
	display: none;
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

p {
	margin: 0;
}

em {
	font-family: ABCFavorit-RegularItalic;
	font-style: normal;
}

a {
	text-underline-offset: 4px;
	color: #000;
}