/* .................................................................................................................. */
/* CSS Reset, adjustments */

html,body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,cite,figure,fieldset,legend,textarea,pre,iframe,button,input,select,textarea{margin:0;padding:0;border:0;font:inherit}ul{list-style:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,svg,embed,iframe,object,audio{display:block;max-width:100%}img,svg{height:auto}
main{display:block;/*IE<11*/}
html{overflow-y:scroll;height:100%;}


/* .................................................................................................................. */
/* Fonts */

/* Webfonts */

@font-face { font-weight: 400; font-style: normal; font-family: 'Icons-Solid'; src: url('../fonts/fa-solid-900.woff2') format('woff2'), url('../fonts/fa-solid-900.woff') format('woff'); }
@font-face { font-weight: 400; font-style: normal; font-family: 'Icons-Regular'; src: url('../fonts/fa-regular-400.woff2') format('woff2'), url('../fonts/fa-regular-400.woff') format('woff'); }
@font-face { font-weight: 400; font-style: normal; font-family: 'Icons-Brand'; src: url('../fonts/fa-brands-400.woff2') format('woff2'), url('../fonts/fa-brands-400.woff') format('woff'); }
@font-face { font-weight: 400; font-style: normal; font-family: 'CrimsonPro'; src: url('../fonts/CrimsonPro-400.woff') format('woff'), url('../fonts/CrimsonPro-400.woff2') format('woff2'); }
@font-face { font-weight: 400; font-style: italic; font-family: 'CrimsonPro'; src: url('../fonts/CrimsonPro-400italic.woff') format('woff'), url('../fonts/CrimsonPro-400italic.woff2') format('woff2'); }
@font-face { font-weight: 700; font-style: normal; font-family: 'CrimsonPro'; src: url('../fonts/CrimsonPro-700.woff') format('woff'), url('../fonts/CrimsonPro-700.woff2') format('woff2'); }
@font-face { font-weight: 700; font-style: italic; font-family: 'CrimsonPro'; src: url('../fonts/CrimsonPro-700italic.woff') format('woff'), url('../fonts/CrimsonPro-700italic.woff2') format('woff2'); }

/* .................................................................................................................. */
/* Properties */

:root {

	--root-bgcolor:         #f3f3f3;
	--base-bgcolor:         #fff;
	--base-shadow:          0 1px 2px rgba(0,0,0,0.05);
	--base-color:           #333333;
	--base-font:            'CrimsonPro',serif;
	--accent-font:          'Verlag A','Verlag B',sans-serif;
	--accent-color:         #555;
	--accent-color-light:   #bbb;
	--accent-color-bar:     #999;
	--headline-font:        'Verlag A','Verlag B',sans-serif;
	--headline-font-weight: 700;

	--minor-color:          #9999a6;

}

/* Precalc */

:root {
	--margin-outer: calc( 8.681vw - 88.889px );
	--margin-major: calc( 1.563vw + 5px );
	--margin-minor: 1rem;
	--logo-height:  calc( 3.478vw + 64.348px );
}
@media screen and (min-width: 1600px) {
	:root {
		--margin-outer:   50px;
		--margin-major:   30px;
		--logo-height:   120px;
	}
}
:root {
	--header-height: calc( var(--margin-major) + var(--logo-height) + 3rem );
}

/* Branding variants */

.br--pv {
	--accent-color:         #009de0;
	--accent-color-light:   #ccebf9;
	--accent-color-bar:     #009de0;
}

.br--dn {
	--accent-color:         #003c7f;
	--accent-color-light:   #ccd8e5;
	--accent-color-bar:     #003c7f;
}

.br--fa {
	--accent-color:         #1554a6;
	--accent-color-light:   #dee3f1;
	--accent-color-bar:     #1554a6;
}

.br--su {
	--accent-color:         #1554a6;
	--accent-color-light:   #dee3f1;
	--accent-color-bar:     #1554a6;
}



/*
@media (prefers-color-scheme: dark) {
	:root {
		--root-bgcolor: #222;
		--base-bgcolor: #444;
		--base-shadow:  none;
		--base-color:   #ccc;
		--accent-color: #fff;
		--accent-color-bar: #000;
	}
}
*/


/* .................................................................................................................. */
/* Basics */


/* Base font size */

html { 
	font-size: 18px; line-height: 1.22;
}
@media screen and ( min-width: 1025px ) {
	html {
		font-size: calc( 0.348vw + 14.435px );
	}
}
@media screen and ( min-width: 1600px ) {
	html { 
		font-size: 20px; line-height: 1.2;
	}
}
html { 
	font-size: 18px; line-height: 1.235;
}

/* Page layout */

body {
	background-color: var(--root-bgcolor);
	color: var(--base-color); font-weight: 400; font-family: var(--base-font);
}

.container {
	position: relative;
	max-width: 1600px; margin: 0 auto;
}
@media screen and ( min-width: 768px ) {
	.container {
		padding: 0 var(--margin-outer);
	}
}


@media screen and ( min-width: 1025px ) {

	body::before {
		content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1;
		width: 100%; height: calc( var(--header-height) );
		background-color: var(--accent-color-bar); box-shadow: 0 20px 80px rgba(0,0,0,0.15);
	}
	.container {
		position: relative;
		margin-top: 2.5rem;
	}

	.page {
		display: flex;
	}
	.page-preside {
		flex: 1 1 auto; width: 26.865%; /* !!! recalculate with new padding */
		padding-right: var(--margin-minor);
	}
	.page-main {
		flex: 1 1 auto; width: 73.135%; /* !!! recalculate with new padding */
	}
	.page-side {
		flex: 1 1 auto; width: 26.865%; /* !!! recalculate with new padding */
		padding-left: var(--margin-minor);
	}

}

/* Page sections */

.page-header, .section, .page-footer {
	background: var(--base-bgcolor); box-shadow: var(--base-shadow);
}

* + .ad,
* + .rkl,
.rkl + *,
* + .section,
* + .page-footer {
	margin-top: var(--margin-minor);
}

@media screen and ( max-width: 1024px ) {

	.page-side {
		margin-top: var(--margin-minor);
	}

}
@media screen and ( min-width: 1025px ) {

	* + .page {
		margin-top: var(--margin-minor);
	}

}

.section, .page-footer {
	padding: var(--margin-major);
}

/* Ads */

.rkl a {
	display: block; position: relative; overflow: hidden;
	border: 0;
	color: transparent; /* to hide alt text */
}
.rkl:not(.rkl--top) .ad-content {
	border: 0;
}
.ad-content {
	text-align: center;
}
.ad-content a {
	position: relative;
	display: inline-block;
}
.ad-content img {
	display: block;
	height: auto !important;
}
.ad-content a::after {
	position: absolute; bottom: -0.8rem; right: 0;
	content: 'Anzeige';
	font-size: 0.5rem; color: #888; white-space: nowrap; text-transform: uppercase;
}



/* .................................................................................................................. */
/* Generic content */


/* Fonts */

h1 {
	font-weight: var(--headline-font-weight); line-height: 1.1; font-family: var(--headline-font);
}
h2 {
	font-family: var(--headline-font);
}

/* Intermargins */

.pagination + *, * + .pagination {
	margin-top: 1.2rem;
}


/* Links */

a {
	color: var(--accent-color);
	text-decoration: underline; text-decoration-color: var(--accent-color-light); text-underline-offset: 2px; text-decoration-thickness: 2px;	
}
a[href^='tel:'] {
	color: var(--base-color); text-decoration: none;
}
a:hover {
	color: var(--accent-color); text-decoration: underline; text-decoration-color: var(--accent-color); text-decoration-thickness: 2px;
}


/* Header Meta */

.header-meta {
	font-weight: 700; font-size: 0.667rem; letter-spacing: 0.03em; text-transform: uppercase; font-family: 'Verlag A', 'Verlag B', sans-serif;
	color: var(--minor-color);
}


/* Covered images */

.image--covered {
	position: relative; overflow: hidden;
}
.image--covered img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 50%; font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE */
}


/* .................................................................................................................. */
/* Header */

.page-header-logo a {
	display: block; float: left;
}
.page-header-logo::after {
	content: ''; display: table; width: 100%;
}

@media screen and ( max-width: 1024px ) {

	.page-header {
		position: fixed; top: 0; left: 0; z-index: 2000;
		width: 100%; height: 3.5rem; border-bottom: 1px solid var(--accent-color);
	}
	.page-header-logo {
		padding: 0.4rem var(--margin-major) 0;
	}
	.page-header-logo img {
		height: 2.7rem;
	}
	body {
		padding-top: 3.5rem;
	}

}

@media screen and ( min-width: 1025px ) {

	.page-header-logo {
		height: calc( var(--logo-height) + var(--margin-major ) ); padding: var(--margin-major) var(--margin-major) 0;
	}
	.page-header-logo img {
		width: auto; height: var(--logo-height);
	}

}


/* .................................................................................................................. */
/* Navigation */

.nav>nav>ul>li>a {
	font-family: 'Verlag A', 'Verlag B', sans-serif; line-height: 1.5rem;
	font-size: 0.833rem; font-weight: 700; text-transform: uppercase;
}
.nav>nav.nav--secondary>ul>li>a {
	font-weight: 400;
}
.nav>nav>ul>li>a {
	display: block;
	text-decoration: none;
	color: var(--minor-color);
}
.nav>nav>ul>li>a:hover {
	color: var(--accent-color);
}
.nav>nav>ul>li.active>a {
	color: var(--accent-color);
}

.nav-shade {
	position: fixed; top: 0; right: 0; z-index: 1999;
	width: 100%; height: 100%;
	background: var(--accent-color);
	opacity: 0.1;
}

.nav--mobile, .nav--full {
	display: none;
}

@media screen and ( max-width: 1024px ) {

	.nav--mobile {
		display: block;
		position: fixed; top: 3.5rem; bottom: 0; right: 0; z-index: 2000;
		width: 100%; max-width: 15rem; padding: 0.5rem 0;
		transform: translate3d(100%,0,0);
		transition: transform 0.5s;
		background-color: var(--base-bgcolor);
	}
	.nav-open .nav--mobile {
		transform: translate3d(0,0,0);
	}
	.nav--mobile a {
		padding: 0.5rem var(--margin-major);
	}
	.nav--mobile li + li,
	.nav--secondary {
		border-top: 1px solid var(--accent-color-light);
	}

	/* Hamberder toggle */

	.nav-toggle {
		position: fixed; top: 0; right: 0; z-index: 2001;
		width: 3.5rem; height: 3.5rem;
		cursor: pointer;
		transition: background-color 0.33s;
	}
	.nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after {
		display: block; content: '';
		position: absolute;
		width: 24px; height: 4px; border-radius: 2px;
		background-color: #ccc;
		transition: background-color 0.25s, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	.nav-open .nav-toggle-icon, .nav-open .nav-toggle-icon::before, .nav-open .nav-toggle-icon::after {
		transition: background-color 0.125s, transform 0.375s;
	}
	.nav-open .nav-toggle-icon, .nav-open .nav-toggle-icon::before, .nav-open .nav-toggle-icon::after {
		background-color: var(--accent-color);
	}
	.nav-toggle-icon::before, .nav-toggle-icon::after {
		left: 0;
	}
	.nav-toggle-icon {
		top: 50%; left: 50%;
		transform: translate3D(-50%,-50%,0);
	}
	.nav-toggle-icon::before {
		top: -8px;
	}
	.nav-toggle-icon::after {
		top: 8px;
	}
	.nav-open .nav-toggle {
		xbackground-color: #1006a0;
	}
	.nav-open .nav-toggle .nav-toggle-icon {
		background-color: transparent;
	}
	.nav-open .nav-toggle-icon::before {
		transform: translate3d(0, 8px, 0) rotate(45deg);
	}
	.nav-open .nav-toggle-icon::after {
		transform: translate3d(0, -8px, 0) rotate(-45deg);
	}

	.nav-shade {
		right: -100vw;
		opacity: 0;
		transition: right 0.5s, opacity 0.5s;
	}
	.nav-open .nav-shade {
		right: 0;
		opacity: 0.5;
	}

}


@media screen and ( min-width: 1025px ) {

	.nav--full {
		position: relative; z-index: 1000;
		display: flex;
		justify-content: space-between;
		background: rgba(255,255,255,0.92);
	}
	.nav--full>nav>ul {
		display: flex;
		padding: 0 calc( var(--margin-major) - 0.5rem );
	}
	.nav--full>nav>ul>li>a {
		position: relative;
		height: 3rem; padding: 0.75rem 0.5rem;
	}
	.nav--full>nav>ul>li>a::after {
		content: ''; position: absolute; bottom: 0.4rem; left: 0.5rem; right: 0.5rem;
		height: 0.3rem;
	}
	.nav--full>nav>ul>li.active>a::after {
		background-color: var(--accent-color);
	}
	.nav--full>nav>ul>li>a:hover {
		/* background-color: #eee; */
	}
	.nav--full>nav>ul>li>a:hover::after {
		background-color: var(--accent-color);
	}

	/* 2nd level */

	.nav--full>nav>ul>li>ul {
		display: none;
		position: absolute; left: var(--margin-outer); right: var(--margin-outer); z-index: 2;
		padding: 0 var(--margin-major);
		height: 20rem;
		background-color: var(--base-bgcolor); box-shadow: var(--base-shadow);
	}
	.nav--full>nav>ul>li:hover>ul {
		display: block;
	}

	/* Shade */

	.nav-shade {
		top: -100vh;
		opacity: 0;
		transition: top 0.5s, opacity 0.5s;
	}


}


/* .................................................................................................................. */
/* Footer */

.page-footer {
	background-color: var(--accent-color);
}
.page-footer, .page-footer a {
	color: #fff; text-decoration-color: #fff;
}

/* .................................................................................................................. */
/* Icons */

.is-icon span {
	display: none;
}
.is-icon::before,
.with-icon::before {
	display: inline-block;
	content: '\f360';
	color: #000; font-weight: 400; font-family: 'Icons-Solid';
}
a.is-icon:hover::before,
a.with-icon:hover::before {
	color: var(--accent-color);
}

.with-icon::before {
	margin-right: 0.3em;
}
.with-icon--after::before {
	float: right;
	margin-left: 0.3em; margin-right: 0;
}

.icon--facebook::before { content: '\f082'; font-family: 'Icons-Brand'; }
.icon--twitter::before { content: '\f081'; font-family: 'Icons-Brand'; }
.icon--instagram::before { content: '\f955'; font-family: 'Icons-Brand'; }
.icon--linkedin::before { content: '\f08c'; font-family: 'Icons-Brand'; }
.icon--xing::before { content: '\f169'; font-family: 'Icons-Brand'; }
.icon--youtube::before { content: '\f431'; font-family: 'Icons-Brand'; }

.icon--search::before { content: '\f002'; font-family: 'Icons-Solid'; }
.icon--login::before { content: '\f2f6'; font-family: 'Icons-Solid'; }
.icon--logout::before { content: '\f2f5'; font-family: 'Icons-Solid'; }
.icon--moredots::before { content: '\f141'; font-family: 'Icons-Solid'; }

.icon--phone::before { content: '\f098'; font-family: 'Icons-Solid'; }
.icon--email::before { content: '\f199'; font-family: 'Icons-Solid'; }

.icon--firstpage::before { content: '\f048'; font-family: 'Icons-Solid'; }
.icon--lastpage::before { content: '\f051'; font-family: 'Icons-Solid'; }
.icon--nextpage::before { content: '\f0da'; font-family: 'Icons-Solid'; }
.icon--prevpage::before { content: '\f0d9'; font-family: 'Icons-Solid'; }

.icon--download::before { content: '\f56d'; font-family: 'Icons-Solid'; }
.icon--pdf::before { content: '\f1c1'; font-family: 'Icons-Solid'; }
.icon--website::before { content: '\f0c1'; font-family: 'Icons-Solid'; }

.richtext a.external::after {
	content: '\f35d'; display: inline-block; font: 400 0.5em 'Icons-Solid';
	margin-left: 0.5em;
	vertical-align: super;
}


/* .................................................................................................................. */
/* Paginator */

.pagination {
	font-size: 0.8rem;
}
.pagination li {
	display: inline-block;
}
.pagination li>a, .pagination li>span {
	display: block;
	min-width: 2.5em; padding: 0.25em 0.5em; border: 1px solid var(--accent-color-light); border-radius: 3px; margin-right: 0.5em;
	text-align: center; text-decoration: none;
	background-color: var(--accent-color-light);
}
.pagination .pagination-page--current>span,
.pagination .pagination li>a:hover {
	background-color: var(--accent-color); border-color: var(--accent-color);
	color: #fff;
}
.pagination .pagination-info>span {
	background-color: #fff;
}


/* .................................................................................................................. */
/* Sections */


.section > header {
	overflow: hidden;
	margin-left: calc( 0px - var(--margin-major) ); margin-top: calc( 0px - var(--margin-major) ); margin-bottom: var(--margin-major);
}
.section > header h1 {
	display: block; float: left;
	padding: 0.5rem var(--margin-major) 0.41rem var(--margin-major);
	font-weight: 700; font-size: 0.833rem; text-transform: uppercase;
	color: #fff; background-color: var(--accent-color);
}

.section--message {
	background-color: #e5ffe5;
}


/* .................................................................................................................. */
/* lteasers */

.lteaser {
	display: flex;
	margin-bottom: var(--margin-minor); padding-bottom: var(--margin-minor); border-bottom: 1px solid var(--accent-color-light);
}

.page-main .lteaser-image {
	width: 25%; margin-right: var(--margin-minor);
}
.page-main .lteaser-main {
	width: 75%;
}

.lteaser-image figure.image--covered::after {
	content: ''; display: block; padding-bottom: 100%;
}
.lteaser-header + * {
	margin-top: 0.35rem;
}
.lteaser .header-meta + *,
.lteaser * + .header-meta {
	margin-top: 0.2rem;
}
.lteaser-content {
	display: none;
}
.lteaser h1 {
	font-size: 1.125rem;
}
.lteaser .subtitle {
	font-size: 1rem;
}

@media screen and ( min-width: 480px ) {
	.lteaser-image figure.image--covered::after {
		padding-bottom: 60%;
	}
	.lteaser-content {
		display: block;
	}
	.lteaser h1 {
		font-size: 1.25rem;
	}
}


.lteaser a {
	text-decoration-color: transparent;
}
.lteaser a:hover {
	text-decoration-color: var(--accent-color);
}

@media screen and ( min-width: 640px ) {

	.lteasers--firsthighlight .lteaser:first-child .lteaser-image,
	.lteasers--firsthighlight .lteaser:first-child .lteaser-main {
		width: 50%;
	}

	@supports ( display: grid ) {

		/*

		.lteasers--columns {
			display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--margin-minor);
		}
		.lteasers--columns .lteaser {
			margin-bottom: 0;
		}

		.lteasers--columns.lteasers--firsthighlight .lteaser:first-child {
			grid-column-end: span 2;
		}

		*/

		.lteasers--grid {
			display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: var(--margin-minor);
		}
		.lteasers--grid .lteaser,
		.lteasers--grid .lteaser-image,
		.lteasers--grid .lteaser-main {
			display: block;
			width: auto; margin: 0;
		}
		.lteasers--grid .lteaser-image {
			margin-bottom: 0.6rem;
		}

	}

}


/* Make whole lteaser clickable */

.lteaser {
	position: relative;
}
.lteaser a::after {
	content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}



/* .................................................................................................................. */
/* Articles (full size) */

.larticle--single .larticle-content {
	font-size: 1.055rem;
}

.larticle-content .abstract {
	margin-bottom: 1.4rem;
	font-weight: 700;
	font-family: var(--accent-font);
}


/* Article header */

.larticle .header-content,
.larticle-content {
	width: 100%; max-width: 36rem; margin: 0 auto;
}
.larticle > header h1 {
	font-size: 36px; line-height: 1;
	font-size: calc( 1.613vw + 30.194px );
}
.larticle > header .subtitle {
	margin-top: 0.35rem;
	font-size: 27px;
	font-size: calc( 0.242vw + 26.129px );
}
@mxedia screen and ( min-width: 1600px ) {
	.larticle > header h1 {
		font-size: 56px;
	}
	.larticle > header .subtitle {
		font-size: 30px;
	}
}

.larticle .header-meta + * {
	margin-top: 0.7rem;
}
.larticle * + .header-meta {
	margin-top: 1.4rem;
}
.larticle > header {
	margin-bottom: 2.1rem;
}

/* Article header w/ big image */

.larticle .header--withimage figure {
	margin: calc( 0px - var(--margin-major) ) calc( 0px - var(--margin-major) ) 1.4rem;
}	
.larticle .header--withimage figure::after {
	content: ''; display: block; padding-bottom: 10rem; min-height: 20vh;
}
@media screen and (min-width: 768px) {
	.larticle .header--withimage {
		position: relative;
		display: flex; flex-direction: column; justify-content: flex-end;
		min-height: 33vh; margin: calc( 0px - var(--margin-major) ) calc( 0px - var(--margin-major) ) 2.1rem; padding-top: 2.1rem; padding-bottom: 2.1rem;
	}
	.larticle .header--withimage:after {
		content: ''; display: block; position: absolute; top: 0; left: 0; z-index: 1;
		width: 100%; height: 100%;
		background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 65%, rgba(255,255,255,0.3) 100%); 
	}
	.larticle .header--withimage figure {
		position: absolute; top: 0; left: 0; z-index: 1;
		width: 100%; height: 100%; margin: 0;
	}
	.larticle .header--withimage .header-content {
		position: relative; z-index: 2;
	}
	.larticle .header--withimage .header-content * {
		color: #fff;
	}
}

/* Article content */

.larticle-content {
	line-height: 1.4;
}



/* Rich text formatting */

.richtext li + li {
	margin-top: 0.35rem;
}

.richtext * + p,
.richtext p + *,
.richtext * + ul,
.richtext ul + *,
.richtext * + ol,
.richtext ol + * {
	margin-top: 0.7em;
}
.richtext h2 + *,
.richtext h3 + *,
.richtext h4 + * {
	margin-top: 0.7em;
}
.richtext * + h2,
.richtext * + h3,
.richtext figure + *,
.richtext * + figure {
	margin-top: 1.4em;
}
.richtext * + h4 {
	margin-top: 0.7em;
}
.richtext h2 {
	font: 700 1.4em/1.1 var(--headline-font);
}
.richtext h3 {
	font: 700 1.2em/1.1 var(--headline-font);
}
.richtext h4 {
	font-weight: 700; font-family: var(--headline-font);
}

/* Lists */

.richtext ol {
	list-style: none;
}

.richtext ol>li {
	counter-increment: listcounter;
}

.richtext li {
	position: relative;
	padding-left: 1.5em;
}
.richtext ul>li::before {
	position: absolute; top: 0; left: 0;
	content: '-';
}
.richtext ol>li::before {
	position: absolute; top: 0; left: 0;
	content: counter(listcounter) '. ';
}
	

/* Fadeout */

.fadeout {
	position: relative;
}
.fadeout::before {
	display: block;
	content: 'Den vollen Fachbeitrag und viele weitere wie diesen finden Sie im Heft. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
	filter: blur(0.2em);
	opacity: 0.5;
}
.fadeout::after {
	position: absolute;
	content: '';
	top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem; z-index: 2;
	background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100% );
}


/* Images */

.image {
	position: relative;
	margin: 0 auto;
}
.larticle-content figure {
	padding: 0.85rem 1rem;
	background-color: rgba(0,0,0,0.02); border: 1px solid var(--accent-color-light);
}

.larticle-content figure img {
	display: block; max-height: 24rem; max-width: 100%; width: auto; height: auto; margin: 0 auto;
}
.image-notice {
	position: relative;
	width: 100%; height: 0; padding-bottom: 50%; border: 1px solid #ddd;
	background: #f8f8f8;
}
.image-notice-text {
	position: absolute; top: 50%; left: 10%;
	width: 80%; padding: 1rem;
	transform: translate3d(0,-50%,0);
	color: #555; text-align: center;
}
.image-source {
	position: absolute; top: 100%; left: 100%;
	margin: 0; /* todo: make * less greedy */
	color: #aaa; text-align: right; white-space: nowrap;
	transform: rotate(-90deg); transform-origin: top left;
	font-size: 0.5rem;
}
.formatted figcaption {
	margin-top: 0.85rem;
	font-size: 0.85rem;
} 



/* .................................................................................................................. */
/* Special: Subscriptions */


.subscription {
	position: relative;
	padding: var(--margin-major);
	background-color: var(--accent-color);
	color: #fff;
	transition: transform 0.25s;
}
.subscriptions>ul>li {
	border-radius: 10px;
}
.subscriptions>ul>li:hover {
	transform: scale(1.05);
}
@media screen and ( max-width: 767px ) {
	.subscriptions li + li {
		margin-top: var(--margin-minor);
	}
}
.subscription h1 {
	font-size: 2rem;
}
.subscription .price {
	margin-top: 0.7rem;
	font-weight: 400; font-family: 'Verlag Cond A', 'Verlag Cond B', sans-serif; line-height: 1;
}
.subscription .price--big {
	font-weight: 700; font-size: 3em;
}
.subscription .description {
	margin-top: 0.7rem;
}
.subscription .cta-button {
	display: inline-block;
	padding: 0.5rem 1rem; border-radius: 5px; margin-top: 0.7rem;
	background-color: var(--accent-color-light);
	text-decoration: none;
}
.subscription .cta-button:hover {
	background-color: #fff;
}
.subscriptions li a::after {
	content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}


@supports ( display: grid ) {

	@media screen and ( min-width: 768px ) {
		.subscriptions>ul {
			display: grid; grid-template-columns: repeat( 2, 1fr ); grid-gap: var(--margin-minor);
		}
	}

	@media screen and ( min-width: 1200px ) {
		.subscriptions>ul {
			grid-template-columns: repeat( 3, 1fr );
		}
	}

}


/* .................................................................................................................. */
/* Forms */

.ultiform {
	max-width: none;
	margin-left: calc( 0px - var(--margin-minor) / 2 ); margin-right: calc( 0px - var(--margin-minor) / 2 );
}


/* Form sections */

.ultiform-section + .ultiform-section {
	margin-top: 1rem;
}
.ultiform-section-title {
	margin: 0 0.5rem 0.5rem;
	font-weight: 700;
}
.ultiform-section-remark {
	margin: 0 0.5rem 0.5rem;
	font-size: 0.8125rem;
}
.ultiform-section-toggled {
	display: none;
}
.ultiform-section-toggled-on {
	display: block;
}


/* Form fields */

.ultiform-field {
	position: relative;
	width: 100%;
	padding: calc( var(--margin-minor) / 2 );
}
.ultiform-field + .ultiform-field {
	margin-top: 0.25rem;
}

@media screen and (min-width: 640px) {
	.ultiform-line {
		display: flex; flex-wrap: wrap;
		width: 100%;
	}
	.ultiform-field + .ultiform-field {
		margin-top: 0;
	}
	.ultiform-field--size-50 {
		width: 50%;
	}
	.ultiform-field--size-30 {
		width: 30%;
	}

}

/* Form inputs */

.ultiform input:invalid,
.ultiform-field--checkbox input:invalid + label::before,
.ultiform-field--error input {
	box-shadow: none !important;
	outline: 2px solid #c33;
	/* background: linear-gradient(160deg, rgba(255,0,0,0.2) 0%, rgba(255,0,0,1) 100%);  */
}

.ultiform label {
	display: block;
	padding-bottom: 0.25rem;
	font-size: 0.8125rem; line-height: 1;
}
.ultiform-field--required label::after {
	content: '*';
	margin-left: 0.5rem;
	font-weight: 400;
}

.ultiform input[type="text"],
.ultiform input[type="email"],
.ultiform input[type="number"] {
	width: 100%; border-radius: 5px; border: 2px solid #ccc;
	padding: 0.5em;
	-moz-appearance: textfield;
}
.ultiform input[type="text"]:invalid,
.ultiform input[type="email"]:invalid,
.ultiform input[type="number"]:invalid {
	outline: 0; border-color: #c00;
}
.ultiform button {
	padding: 0.5em 1em; border-radius: 5px;
	background-color: var(--accent-color);
	color: #fff;
	cursor: pointer;
}
.ultiform button:hover {
	background-color: #ccc;
}
.ultiform button:active {
	background-color: #333; border-color: #333;
	color: #fff;
}

.ultiform input[type="checkbox"] {
	position: absolute; bottom: 0.5rem; left: 2.5rem; z-index: -1;
	width: 1.5rem; height: 1.5rem;
	opacity: 0;
}
.ultiform input[type="checkbox"] + label {
	position: relative;
	padding-left: 1.5em;
	cursor: pointer;
	font-size: 0.85rem;
}
.ultiform input[type="checkbox"] + label::before {
	content: '\f0c8'; font-size: 1.15em; font-weight: 400; font-family: 'Icons-Regular';
	position: absolute; top: 0; left: 0;
	/* width: 1.25rem; height: 1.25rem; */
	/* background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC45ODQgM3EwLjc5NyAwIDEuNDA2IDAuNjA5dDAuNjA5IDEuNDA2djEzLjk2OXEwIDAuNzk3LTAuNjA5IDEuNDA2dC0xLjQwNiAwLjYwOWgtMTMuOTY5cS0wLjc5NyAwLTEuNDA2LTAuNjA5dC0wLjYwOS0xLjQwNnYtMTMuOTY5cTAtMC43OTcgMC42MDktMS40MDZ0MS40MDYtMC42MDloMTMuOTY5ek0xOC45ODQgNS4wMTZoLTEzLjk2OXYxMy45NjloMTMuOTY5di0xMy45Njl6Ij48L3BhdGg+PC9zdmc+); */
	/* background-size: cover; */
}
.ultiform input[type="checkbox"]:checked + label::before {
	content: '\f14a';
	/* background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik05Ljk4NCAxNy4wMTZsOS05LTEuNDA2LTEuNDUzLTcuNTk0IDcuNTk0LTMuNTYzLTMuNTYzLTEuNDA2IDEuNDA2ek0xOC45ODQgM3EwLjg0NCAwIDEuNDMgMC41ODZ0MC41ODYgMS40M3YxMy45NjlxMCAwLjg0NC0wLjU4NiAxLjQzdC0xLjQzIDAuNTg2aC0xMy45NjlxLTAuODQ0IDAtMS40My0wLjU4NnQtMC41ODYtMS40M3YtMTMuOTY5cTAtMC44NDQgMC41ODYtMS40M3QxLjQzLTAuNTg2aDEzLjk2OXoiPjwvcGF0aD48L3N2Zz4=); */
}
.ultiform input[type="checkbox"]:invalid + label::before {
	outline: 0; color: #c00;
}

/* square = regular:\f0c8 */


/* Prlm */

.cta-proposal {
	margin: 1.4rem 0;
}
.cta-proposal span {
	font-size: 1.2rem;
}

.richtext .linkboxes + *, .richtext * + .linkboxes {
	margin-top: 1.4rem;
}

.linkbox {
	display: flex;
	padding: var(--margin-major);
	background-color: var(--accent-color-light);
}
.linkbox + .linkbox {
	margin-top: 0.7rem;
}

@media screen and ( min-width: 640px ) {
	.linkbox img {
		width: auto; max-width: none;
		height: 5rem;
	}
}
.linkbox-badge {
	padding-left: var(--margin-minor);
}

.block--issue h1 {
	font-size: 2rem;
}
.block--issue .header-meta + *,
.block--issue * + .header-meta {
	margin-top: 0.7rem;
}
.block--issue header {
	margin-bottom: 1.4rem;
}
.block--issue .issue-image {
	margin-bottom: 1.4rem;
}

@media screen and ( min-width: 640px ) {
	.block--issue {
		display: flex;
	}
	.block--issue .issue-image {
		width: 30%; margin-right: var(--margin-minor); margin-bottom: 0;
	}
	.block--issue .issue-image figure,
	.block--issue .issue-image img {
		width: 100%;
	}
	.block--issue .issue-content {
		width: 70%;
	}
}

.buttonlike {
	display: inline-block;
	padding: 0.5rem 1rem; border-radius: 5px;
	text-decoration: none;
	background-color: var(--accent-color-light);
}
.buttonlike:hover {
	background-color: var(--accent-color);
	color: #fff;
}

.form--bstyle {
	padding: var(--margin-major);
	background-color: var(--accent-color-light);
}
.form--bstyle label {
	display: block;
}
.form--bstyle input {
	padding: 0.5rem 1rem;
	width: 100%;
}
.form--bstyle input + *,
.form--bstyle * + button {
	margin-top: 0.7rem;
}
.form--bstyle button {
	padding: 0.5rem 3rem; border-radius: 5px;
	background-color: var(--accent-color);
	color: #fff;
}
.form--bstyle button:hover {
	background-color: #fff;
	color: var(--accent-color);
}

.message {
	padding: var(--margin-major); margin-bottom: 0.7rem;
}
.message--info {
	background-color: #e5ffe5;
}
.message--failure {
	background-color: #ffe5e5;
}


/* Special: Promo/Currentissue */

.promo--currentissue {
	position: relative;
	overflow: hidden; height: 8rem;
	display: flex;
}
/* ?
.promo a::before {
	content: ''; position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
}
*/
.promo-image {
	position: relative; top: -1rem;
	margin-right: 2rem;
}
.promo-image img {
	transform: rotate(7deg); box-shadow: 8px 8px 16px rgba(0,0,0,0.1);
}
.promo-content {
	display: flex; flex-direction: column; align-content: center;
	font-weight: 700; line-height: 1.2; font-family: 'Verlag A', 'Verlag B', sans-serif;
}
.promo-overline,
.promo-cta {
	margin-bottom: 0.25rem;
	color: var(--minor-color); font-size: 0.667rem; text-transform: uppercase;
}
.promo-title {
	margin-bottom: 0.25rem;
	color: var(--accent-color); font-size: 1.2rem;
}

@media screen and ( min-width: 1025px ) {

	.promo {
		position: absolute; top: -2rem; right: var(--margin-outer);
		height: calc( var(--header-height) + 2rem ); padding-top: 2rem; margin: 0;
		background: none; box-shadow: none;
	}
	.promo + * {
		margin-top: 0;
	}
	.promo--currentissue {
		width: 32rem;
	}
	.promo-content {
		padding-top: 2rem;
	}
}



/* .................................................................................................................................................................................................................................... */
/* .................................................................................................................................................................................................................................... */
/* .................................................................................................................................................................................................................................... */
/* .................................................................................................................................................................................................................................... */
/* .................................................................................................................................................................................................................................... */



/* .................................................................................................................. */
/* Fitted images */

.image-fit {
	position: relative; overflow: hidden;
}
.image-fit img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 50%; font-family: 'object-fit: cover; object-position: 50% 50%;'; /* IE */
}



/* .................................................................................................................. */
/* Columns */

@media screen and (max-width: 1023px) {

	.column + .column {
		margin-top: var(--margin-minor);
	}

}

@media screen and (min-width: 1024px) {

	.columns {
		display: flex;
		width: calc( 100% + var(--margin-minor) ); margin-left: calc( 0px - var(--margin-minor) / 2 ); margin-right: calc( 0px - var(--margin-minor) / 2 );
	}
	.column {
		flex-basis: 100%;
		margin-left: calc( var(--margin-minor) / 2 ); margin-right: calc( var(--margin-minor) / 2 );
	}
	.column--goldenmajor { flex-basis: 62%; }
	.column--goldenminor { flex-basis: 38%; }
	.column--equal { flex-basis: 50%; }

}


/* .................................................................................................................. */
/* Areas */


.area {
	padding: var(--margin-major);
	background: var(--base-bgcolor); box-shadow: var(--base-shadow);
}
.area + .area {
	margin-top: var(--margin-minor);
}



/* .................................................................................................................. */
/* Grids */

/* Fallback (mostly IE) */

@supports ( display: grid ) {

	.grid {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
		grid-gap: var(--margin-major);
	}
	.grid--large {
		grid-template-columns: repeat( auto-fit, minmax( 32rem, 1fr ) );
	}
	.grid--small {
		grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	}
	.grid--tiny {
		grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	}

	.grid > * {
	}
	.grid-header {
		grid-column: 1/-1;
		/* padding-bottom: var(--margin-minor); */
	}
	* + .grid-header {
		/* padding-top: calc( var(--margin-major) - var(--margin-minor) ); */
	}

}

.headline-bar {
	overflow: hidden;
}
.grid-header h2 {
	position: relative;
	display: inline-block;
	padding-right: 0.5rem;
	margin-right: auto;
	font-weight: 700; line-height: 1; text-transform: uppercase;
}
.grid-header h2::after {
	content: ''; position: absolute; top: 0; left: 100%;
	width: 100vw; height: 100%;
	/* background-color: var(--accent-color-light); */
}


/* .................................................................................................................. */
/* Articles */


/* <article> Header (generic formatting, also applies to teaser header) */

article header {
	font-family: 'Verlag A', 'Verlag B', sans-serif; letter-spacing: 0.03em;
}
article header + * {
	margin-top: var(--margin-major);
}
article header .overline,
article header .meta {
	color: var(--minor-color); font-weight: 700; font-size: 0.667rem; text-transform: uppercase;
}
article header .meta + *,
article header h1 + * {
	margin-top: 0.35rem;
}

/* Header */

.article header figure {
	height: 33vh; max-height: 30rem; margin: calc( 0px - var(--margin-major) ) calc( 0px - var(--margin-major) ) var(--margin-major);
}


.article header {
	font-size: 1.2rem;
}
.article header h1 {
	font-size: 2rem;
}


/* .................................................................................................................. */
/* Richtext formatting */

.richtext {
	font-size: 19px; line-height: 1.21;
}
.smallprint {
	font-size: 0.8rem; line-height: 1;
}

@media screen and ( min-width: 1024px) {
	.article header h1, .article header .meta, .article header .subtitle, .richtext h1, .richtext h2, .richtext p, .richtext ol, .richtext ul, .richtext table {
		width: 100%; max-width: 44rem; padding-right: 4rem;
	}
}
.richtext * + p {
	margin-top: 0.7em;
}
.richtext * + ol, .richtext * + ul, .richtext * + .block, .richtext .block + * {
	margin-top: 1.4em;
}

.richtext .abstract {
	font-weight: 700; font-family: var(--accent-font);
}
.richtext .abstract + * {
	margin-top: var(--margin-major);
}

.richtext table {
	table-layout: fixed;
	border: 1px solid var(--accent-color); border-collapse: collapse;
}
.richtext th, td {
	width: 67%;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--accent-color);
}
.richtext th {
	width: 33%;
	background-color: var(--accent-color-light);
}


/* .................................................................................................................. */
/* Teasers */

.teaser {
	display: flex;
}
.teaser + .teaser {
	margin-top: var(--margin-minor);
}
.teaser-image {
	flex-basis: 5rem; margin-right: var(--margin-minor);
}


@supports ( display: grid ) {

	.teaser {
		display: grid;
		grid-gap: var(--margin-minor);
	}
	.teaser + .teaser,
	.teaser-image {
		margin: 0;
	}

}

.teaser header h1 {
	font-size: 1.1rem;
}
.teaser header + * {
	margin-top: 0.7rem;
}
.teaser a {
	text-decoration-color: transparent;
}
.teaser a:hover {
	text-decoration-color: var(--accent-color);
}

/* Vertical teasers */

.teaser--vertical.teaser--withimage {
	grid-template-rows: min-content 1fr;
}

/* Horizontal teasers */

.teaser--horizontal.teaser--withimage {
	grid-template-columns: 25% 1fr;
}

/* Fullsize teasers */

.teaser--fullsize {
	grid-column: 1/-1;
}

/* Teaser images */

.teaser-image .image-fit::after {
	content: ''; display: block;
	padding-bottom: 56.25%;
}

/* "Covered" teasers: first link extends to whole teaser area */

.teaser--cover {
	position: relative;
}
.teaser--cover a::after {
	content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}

/* Card teasers */

.teaser--person,
.teaser--product,
.partial--download,
.teaser--card {
	padding: 1rem; border: 1px solid #eee; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@supports ( display: grid ) {

	.teaser--card.teaser--vertical .teaser-image {
		margin: -1rem -1rem 0;
	}
	.teaser--card.teaser--horizontal .teaser-image {
		margin: -1rem 0 -1rem -1rem;
	}

	.teaser--person.teaser--horizontal.teaser--withimage {
		grid-template-columns: 5rem 1fr;
	}

}


/* .................................................................................................................. */
/* Clists */


.clist + *, * + .clist {
	margin-top: 1.5rem;
}

.clist-item {
	border-top: 1px solid #eee; padding-top: 1rem; margin-top: 1rem;
}
@media screen and ( min-width: 1024px ) {
	.clist-item, .clist-header {
		display: table; table-layout: fixed;
		width: 100%;
	}
	.clist-header .clist-column {
		font-size: 0.85rem;
	}
	.clist-column {
		display: table-cell;
		width: 1%;
	}
	.clist-column + .clist-column {
		padding-left: 1rem;
	}
}




/* .................................................................................................................. */
/* Blocks */


.block + .block {
	margin-top: 2.1rem;
}
.block--imagetext figure {
	border: 0; background: none; padding: 0; margin-bottom: 0.7rem;
}
.block--imagetext figure img {
	margin: 0;
}
@media screen and ( min-width: 1025px ) {
	.block--imagetext {
		display: flex;
	}
	.block--imagetext figure {
		width: 33%; margin-right: var(--margin-minor); margin-bottom: 0;
	}
	.block--imagetext .content {
		width: 67%;
	}
}


.factsfigure {
	display: flex; flex-direction: column; justify-content: center;
	padding: 1rem; border: 1px solid var(--accent-color-light);
	text-align: center;
}
.factsfigure strong {
	display: block;
	font-size: 2rem; font-family: var(--accent-font);
}


.gallery-thumbnail {
	position: relative;
	width: 100%; height: 0; padding-bottom: 70%;
}
.gallery-thumbnail img {
	position: absolute;
	width: 100%; height: 100%;
	object-fit: contain;
}


/* Appstore links */

.linkblock {
	padding: 1rem;
	background-color: var(--accent-color-light);
}
.linkblock--appstores img {
	display: block; width: auto; height: auto; max-height: 3.5rem; margin: auto;
}
	


/* EOL */