/* @group FONTS */

@font-face {
  font-family: 'Cabin';
  src: url('../fonts/Cabin-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Cabin-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Cabin';
  src: url('../fonts/Cabin-Italic-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Cabin-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "BC Sklonar";
  src: url("../fonts/BC-Sklonar-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--font-family: 					'Cabin', Helvetica, Arial, sans-serif;
	--font-family-heading: 	'BC Sklonar', Courier, monospace;
	
	--font-xl:			400 clamp(1.3rem, 3.2vw, 1.6rem)/1.3em var(--font-family);
	--font-lg:			400 clamp(1rem, 2.6vw, 1.3rem)/1.6em var(--font-family);
	--font: 			400 20px/1.6em var(--font-family);
	--font-sm:		400 .9rem/1.4em var(--font-family);
	
	--font-heading-h1:	500 clamp(2.0rem, 5.0vw, 2.5rem)/1.2em var(--font-family-heading);
	--font-heading-h2:	500 clamp(1.5rem, 3.8vw, 1.9rem)/1.2em var(--font-family-heading);
	--font-heading-h3:	500 clamp(1.2rem, 2.5vw, 1.25rem)/1.3em var(--font-family-heading);
	--font-heading:			500 1rem/1.6em var(--font-family-heading);
	--font-heading-sm:	500 .85rem/1.6em var(--font-family-heading);
	
	--font-heading-text-transform: 	uppercase;
	
	--font-button:			500 .9rem/1.2em var(--font-family-heading);
	
	--font-menu: 						500 18px/1.2em var(--font-family-heading);
	--font-menu-transform: 	uppercase;
	
	--min-width: 		320px;
	--max-width-sm: 900px;
	--max-width: 		1200px;
	--max-width-lg: 1600px;
	
	--spacing-inline: 	clamp(1rem, 6vw, 3rem);

	--spacing-block-xs: clamp(1.5rem, 4vw, 2rem);
	--spacing-block-sm: 	clamp(1.5rem, 6vw, 3rem);
	--spacing-block: 		clamp(3rem, 12vw, 6rem);
	
	--padding: 		clamp(1rem, 2vw, 1.5rem);
	--padding-lg: clamp(1rem, 2vw, 2rem);
	
	--border-radius: 5px;
	
}

@media (max-width: 1199px) {
	
	:root {
		
		--font-menu-lg: 500 24px/1.2em var(--font-family-heading);
		
	}
	
}

/* @group Colors */

@property --color-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #F810DB;
}

@property --color-primary-light {
  syntax: "<color>";
  inherits: true;
  initial-value: #FFAFFF;
}

@property --color-background {
  syntax: "<color>";
  inherits: true;
  initial-value: #E0E8F1;
}

@property --color-white {
  syntax: "<color>";
  inherits: true;
  initial-value: #FFFFFF;
}

@property --color-black {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --color-grey {
  syntax: "<color>";
  inherits: true;
  initial-value: #808080;
}

@property --color-grey-light {
  syntax: "<color>";
  inherits: true;
  initial-value: #ededed;
}

/* @end */

/* @end */

/* @group BASE */

html,
body {
	min-width: var(--min-width);
	color: var(--color-base);
	background-color: var(--color-background);
	font: var(--font);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "ss01" on;
}

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

strong {
	font-weight: 700;
}

h1 {
	font: var(--font-heading-h1);
	text-transform: var(--font-heading-text-transform);
}

h1:has(+ *) {
	margin-bottom: .5em;
}

h1:has(+ .subtitle),
h1:has(+ .date) {
	margin-bottom: .1em;
}

h2 {
	font: var(--font-heading-h2);
	text-transform: var(--font-heading-text-transform);
}

* + h2 {
	margin-top: 1.5em;
}

h2:has(+ *) {
	margin-bottom: .5em;
}

h2:has(+ .cards) {
	margin-bottom: 1em;
}

h2:has(+ .subtitle),
h2:has(+ .date) {
	margin-bottom: .1em;
}

h3 {
	font: var(--font-heading-h3);
	text-transform: var(--font-heading-text-transform);
}

* + h3 {
	margin-top: 2rem;
}

h3:has(+ *) {
	margin-bottom: 1rem;
}

p:has(+ *) {
	margin-bottom: 1em;
}

.subtitle,
.date {
	font: var(--font-heading);
}

.subtitle:has(+ *) {
	margin-bottom: 1rem;
}

p:has(.button:only-child):not(:first-child) {
	margin-top: 1.5em;
}

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1.5em;
}

	.main ul:not([class]) li {
	   position: relative;
		 padding-left: 1.25em;
	}
	
		.main ul:not([class]) li::before {
	    content: "•";
			position: absolute;
			top: 0;
			left: 0;
			width: 1em;
			text-align: center;
		}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: unset;
	}
	
[class*="-section"] ol {
  counter-reset: counter;
}

[class*="-section"] ol:has(+ *) {
	margin-bottom: 1em;
}

	[class*="-section"] ol li {
		display: table;
	  counter-increment: counter;
	}
	
		[class*="-section"] ol li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Links */

.menu a,
.footer-menu a {
	transition: color .15s ease-in-out 0s;
}

.menu a.active,
.menu a:hover,
.footer-menu a.active,
.footer-menu a:hover {
	color: var(--color-primary);
}

.breadcrumb a,
p a:not([class]),
.blocks-section a:not([class]),
.event a,
.next-event a,
.article a,
.comments a,
.download--title,
.more-downloads {
	text-decoration: underline;
	text-decoration-color: var(--color-primary-light);
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

.breadcrumb a:hover,
p a:not([class]):hover,
.blocks-section a:not([class]):hover,
.event a:hover,
.next-event a:hover,
.article a:hover,
.comments a:hover,
.download:hover .download--title,
.more-downloads:hover {
	text-decoration-color: var(--color-primary);
}

/* @end */

/* @group Buttons */

.button {
	display: inline-block;
	padding: .4em clamp(1em, 3vw, 2.5em);
	border: 2px solid currentColor;
	border-radius: var(--border-radius);
	font: var(--font-button);
	text-decoration: none !important;
	text-align: center;
	text-transform: var(--font-heading-text-transform);
	transition: all .15s ease-in-out 0s;
}

	.button:hover,
	.button:active {
		cursor: pointer;
		color: var(--color-white);
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

/* @end */

/* @end */

/* @group Header */

.header {
	margin-bottom: var(--spacing-block);
}

.header:has(+ .hero) {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

	@media (max-width: 1499px) {
		
		.header {
			
		}
		
	}

	@media (min-width: 1500px) {
		
		.header {
			display: flex;
			justify-content: center;
			padding-block: 1.5rem;
		}
		
	}


/* @group Logo */

.page--home .logo {
	display: none;
}

	.logo img {
		margin-block: clamp(.5rem, 3vw, 1.5rem);
		margin-inline: calc(.5 * var(--spacing-inline));
		width: clamp(6rem, 18vw, 9rem);
		height: auto;
	}

	@media (min-width: 1500px) {
		
		.logo {
			position: absolute;
			z-index: 4;
			top: 0;
			right: 0;
		}
		
	}

/* @end */

/* @group Toggle */

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 3rem;
	color: var(--color-white);
	background-color: var(--color-black);
	border-radius: 50%;
	text-align: center;
	transition: all .15s ease-in-out 0s;
}

.toggle:hover {
	cursor: pointer;
	background-color: var(--color-primary);
}

	.toggle.open {
		color: var(--color-black);
		background-color: var(--color-primary);
	}
	
	@media (max-width: 1499px) {
		
		.toggle {
			position: fixed;
			z-index: 100;
			top: 1rem;
			right: var(--spacing-inline);
		}
		
	}

	@media (min-width: 1500px) {
		
		.toggle {
			display: none;
		}
		
	}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 1.3em;
	height: 1.3em;
	color: var(--color-white);
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: .25em;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .5em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .5em));
	}
	
	.hamburger.open {
		margin-top: -.3em;
	}
	
	.hamburger.open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @group Menu */

.menu {
	display: flex;
	color: var(--color-white);
	background-color: var(--color-black);
	font: var(--font-menu);
	text-transform: var(--font-menu-transform);
}

	@media (max-width: 1499px) {
		
		.menu {
			position: fixed;
			z-index: 5;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			flex-direction: column;
			row-gap: 1.25em;
			padding: 6em 2em 3em;
			transform: translateX(-100%);
			transition: all .3s ease-in-out 0s;
		}
		
		.menu.open {
			transform: translateX(0);
		}
		
	}
	
	@media (min-width: 1500px) {
		
		.menu {
			position: relative;
			z-index: 5;
			flex-wrap: wrap;
			justify-content: center;
			column-gap: 2em;
			width: calc(100% - 2 * var(--spacing-inline));
			max-width: calc(var(--max-width) - 2 * var(--spacing-inline));
			padding-block: .75em;
			padding-inline: 2em;
			border-radius: .25em;
		}
		
	}

/* @end */

/* @end */

/* @group Hero */

.hero {
	margin-bottom: var(--spacing-block-sm);
}

	.hero img,
	.hero video {
		width: 100%;
		height: 700px;
		max-height: 70vh;
		object-fit: cover;
	}
	
	@media (max-width: 999px) and (orientation: portrait) {
		
		.hero img,
		.hero video {
			aspect-ratio: 1/1;
			height: auto;
		}
		
	}

/* @end */

/* @group Breadcrumb */

.breadcrumb {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	padding-bottom: .5rem;
	font: var(--font-heading-sm);
	text-transform: var(--font-heading-text-transform);
}

	.breadcrumb ol {
		display: flex;
		flex-wrap: wrap;
	}
	
		.breadcrumb ol > *:last-child {
			display: none;
		}
	
		.breadcrumb ol > * {
			display: inline-block;
		}
	
			.breadcrumb ol > *:after {
				content: url('../images/arrow.svg');
				display: inline-block;
				width: 2em;
				text-align: center;
			}

/* @end */

/* @group Sections */

[class*="-section"] {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

[class*="-section"]:has(+ *) {
	margin-bottom: var(--spacing-block);
}

	.section__buttonbar {
		margin-top: var(--spacing-block-sm);
		text-align: center;
	}
		
		.section__buttonbar .button {
			min-width: 50%;
		}

/* @group Blocks section */

.blocks-section {
	max-width: var(--max-width-sm);
}

	.blocks-section h2 {
		font: var(--font-heading-h3);
		text-transform: var(--font-heading-text-transform);
	}
	
	.blocks-section h3 {
		font: var(--font-heading);
		text-transform: var(--font-heading-text-transform);
	}
	
	.blocks-section * + figure {
		margin-top: 1.5rem;
	}
	
	.blocks-section figure:has(+ *) {
		margin-bottom: 1.5rem;
	}
	
		.blocks-section figure img {
			width: 100%;
		}
		
		.blocks-section figure figcaption {
			margin-top: .5em;
			font: var(--font-sm);
		}

/* @end */

/* @group Intro section */

.intro-section {
	font: var(--font-lg);
}

	.intro-section p:has(> .button){
		text-align: center;
	}

/* @end */

/* @group Next events section */

.next-events-section {
	position: relative;
	z-index: 2;
	max-width: var(--max-width-sm);
}

	.next-events-section > * {
		padding: var(--padding);
		background-color: var(--color-white);
		border-radius: var(--border-radius);
	}
	
	.next-events-section h2 {
		margin-bottom: .1em;
		color: var(--color-primary);
	}
	
	.next-events-section h2 + p {
		font: var(--font-heading);
	}

/* @end */

/* @group News section */

.news-section {
	max-width: var(--max-width-sm);
}

.hero + .main:has(.next-events-section:first-child),
.hero + .main:has(.news-section:first-child),
.hero + .main:has(.shows-section:first-child),
.hero + .main:has(.publications-section:first-child),
.hero + .main:has(.podcast-section:first-child) {
	margin-top: calc(-1 * (var(--spacing-block)));
}

/* @end */

/* @group Awards section */

.awards-section {
	max-width: unset;
	margin-inline: unset;
	padding-top: 3rem;
	padding-bottom: var(--spacing-block);
	padding-inline: unset;
	background-color: var(--color-black);
	color: var(--color-white);
}

/* @end */

/* @group Podcast section */

.podcast-section {
	max-width: var(--max-width-lg);
	margin-bottom: var(--spacing-block-sm);
}

/* @end */

/* @end */

/* @group Cards & Card */

.cards {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	row-gap: var(--spacing-block-sm);
}

.cards:has(> .card.slim) {
	row-gap: var(--spacing-block);
}

.card {
	display: grid;
	overflow: hidden;
	border-radius: var(--border-radius);
}

	.card h2 {
		color: var(--color-primary);
		font: var(--font-heading-h3);
	}

	.card img {
		width: 100%;
	}
	
	.card__figure a img {
		object-fit: cover;
		transform: scale(1);
		transition: transform .15s ease-in-out 0s;
	}
	
	.card__figure a:hover img {
		transform: scale(1.1);
	}
	
	.card__main {
		display: flex;
		flex-direction: column;
		row-gap: 1.5rem;
		padding: var(--padding);
		background-color: var(--color-white);
	}
	
	.card__main:has(+ .card__label) {
		justify-content: space-between;
	}
	
	.card__label {
		margin-top: calc(-.5 * var(--padding-lg));
		font: var(--font-heading-sm);
		text-align: right;
	}

@media (max-width: 799px) {
		
		body:has(> .hero) .main > *:first-child > .cards:first-child > .card:first-child .card__main {
			order: 1;
		}
		
		body:has(> .hero) .main > *:first-child > .cards:first-child > .card:first-child .card__figure {
			order: 2;
		}
		
	}
	
	@media (max-width: 999px) {
		
		.card {
			font: var(--font-sm);
		}
		
	}

/* @group Card slim */

.card.slim {
	gap: .75rem;
	font: var(--font-sm);
}

.card.slim .card__figure {
	overflow: hidden;
	border-radius: var(--border-radius);
}

.card.slim .card__main {
	justify-content: space-between;
	aspect-ratio: 1/1;
	border-radius: var(--border-radius);
}

.card.slim .card__buttons {
	padding-inline: 1rem;
}

	.card.slim .card__buttons .button {
		width: 100%;
	}
	
	@media (min-width: 800px) {
		
		.card.slim {
			grid-template-columns: 1fr 1fr;
			/*aspect-ratio: 2/1;*/
		}
		
			.card.slim .card__figure {
				grid-column: 2;
				grid-row: 1;
			}
			
			.card.slim:nth-child(odd) .card__figure {
				grid-column: 1;
			}
		
	}

/* @end */

/* @group Card wide */

	.card.wide .card__main {
		padding: var(--padding-lg);
	}
	
	.card.wide .card__buttons {
			margin-top: auto;
			display: flex;
			column-gap: clamp(.5rem, 2vw, 1.5rem);
		}
		
			.card.wide .card__buttons > *:nth-child(1) {
				flex-basis: 60%;
			}
			
			.card.wide .card__buttons > *:nth-child(2) {
				flex-basis: 40%;
			}
			
	@media (min-width: 900px) {
		
		.card.wide {
			grid-template-columns: 1fr 1fr;
			aspect-ratio: 2/1;
		}
		
			.card.wide .card__figure {
				grid-column: 2;
				grid-row: 1;
			}
			
			.card.wide .card__main {
				height: 100%;
			}
		
	}
	
	@media (min-width: 1000px) {
		
		.card.wide {
			grid-template-columns: 5fr 3fr;
			aspect-ratio: 8/3;
		}
		
	}
	
	/* @end */

/* @end */

/* @group  Next events & Next event */

.next-events {
	
}

.next-event {
	display: grid;
	column-gap: clamp(.5rem, 3vw, 2rem);
	padding-top: 1rem;
}

.next-event:not(:last-child) {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-black);
}

	@media (max-width: 599px) {
		
		.next-event > *:first-child {
			display: grid;
			grid-template-columns: max-content 1fr;
			column-gap: clamp(0.5rem, 3vw, 2rem);
		}
		
	}
	
	@media (min-width: 600px) {
		
		.next-event {
			grid-template-columns: 7rem 1fr;
			align-items: baseline;
		}
		
	}

	.next-event__date {
		color: var(--color-primary);
		font: var(--font-heading);
	}

	.next-event__show {
		margin-bottom: .2em;
		font: var(--font-heading-h3);
		text-transform: var(--font-heading-text-transform);
	}
	
	.next-event__team {
		line-height: 1.4em;
	}
	
		.next-event__team::before {
			content: "Mit ";
		}
	
		.next-event__team > * {
			display: inline-block;
		}
		
		.next-event__team > *:not(:last-child)::after {
			content: ", ";
		}
		
	.next-event__city {
		
	}

/* @end */

/* @group Events & Event */

.events {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}

.event {
	display: grid;
	column-gap: clamp(.5rem, 3vw, 2rem);
	row-gap: 1rem;
	align-items: baseline;
	padding: var(--padding);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
}

	@media (max-width: 799px) {
		
		.event {
			grid-template-columns: 5.5rem 1fr;
		}
		
			.event > *:first-child {
				grid-column: span 2;
			}
			
			.event > *:last-child {
				grid-column: span 2;
				padding-top: .5rem;
			}
		
	}
	
	@media (min-width: 800px) {
		
		.event {
			grid-template-columns: 7rem 1fr 2fr max-content;
			align-items: center;
		}
		
			.event > *:first-child {
				order: 3;
				margin-top: -.3rem;
			}
			
			.event > *:last-child {
				order: 4;
			}
		
	}

	.event__date,
	.event__time {
		font: var(--font-heading);
	}

	.event__show {
		margin-bottom: .2em;
		color: var(--color-primary);
		font: var(--font-heading-h3);
		text-transform: var(--font-heading-text-transform);
	}
	
	.event__team {
		line-height: 1.4em;
	}
	
		.event__team::before {
			content: "Mit ";
		}
	
		.event__team > * {
			display: inline-block;
		}
		
		.event__team > *:not(:last-child)::after {
			content: ", ";
		}
		
	.event__city {
		color: var(--color-primary);
	}
		
	.event__tickets {
		text-align: center;
	}

/* @end */

/* @group Persons & Person */

.persons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

.person {
	position: relative;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: var(--border-radius);
}

	.person h2 {
		margin-bottom: .25em;
		color: var(--color-base);
		font: var(--font-heading-h3);
	}
	
	.person__figure {
		position: relative;
		aspect-ratio: 5/4;
	}
	
		.person__figure img {
			
		}
		
		.person__figure::before {
	    content: '';
	    position: absolute;
	    top: 0;
			bottom: 0;
			right: 0;
	    left: 0;
	    background-color: #F810DB;
	    mix-blend-mode: screen;
			opacity: 1;
			transition: opacity .15s ease-in-out 0s;
		}
		
		.person:hover .person__figure::before {
			opacity: 0;
		}
	
	.person__main {
		padding: var(--padding);
		text-align: center;
	}
	
	.person__link {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}

/* @end */

/* @group Comments & Comment */

.comments {
	padding: var(--padding-lg);
	background-color: var(--color-white);
	border-radius: var(--border-radius);
}

.comments:has(+ *) {
	margin-bottom: 1rem;
}

	.comments h3 {
		margin-bottom: var(--spacing-block-xs);
		color: var(--color-primary);
	}
	
.comment:has(+ *) {
	margin-bottom: var(--spacing-block-xs);
}

	.comment__text {
		margin-bottom: unset;
		font: var(--font-xl);
		font-weight: 700;
		font-style: italic;
	}
	
	.comment__text::before {
		content: "„";
	}
	
	.comment__text::after {
		content: "“";
	}
	
	.comment__author {
		margin-top: .25em;
		font: var(--font-sm);
	}

/* @end */

/* @group Awards & Award */

.awards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	column-gap: var(--spacing-inline);
	row-gap: clamp(3rem, 8vw, 4rem);
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	font: var(--font-sm);
	text-align: center;
}

.award {
	display: flex;
	align-items: center;
	max-width: 13rem;
	margin-inline: auto;
}

.award:has(> figure > figcaption:only-child) {
	align-items: center;
}

	.award > * {
		width: 100%;
	}

	.award img {
		width: auto;
		max-width: 160px;
		max-height: 100px;
		margin-bottom: 1rem;
	}

/* @end */

/* @group Downloads & Download */

.downloads-container:has(+ *) {
	margin-bottom: 3rem;
}

.downloads {
	display: flex;
	flex-direction: column;
	font: var(--font-sm);
}

	.downloads > * {
		margin-bottom: .5em;
		transition: all .5s ease-in-out 0s;
	}

	.downloads:not(.expanded) > *:nth-of-type(n+4) {
		min-height: unset;
		max-height: 0;
		overflow: hidden;
		margin-bottom: unset;
	}
	
	.downloads.expanded > *:nth-of-type(n+4) {
		max-height: 10em;
	}
	
.more-downloads {
	display: block;
	position: relative;
	font: var(--font-sm);
	font-weight: bold;
}

.more-downloads:hover {
	cursor: pointer;
}

.more-downloads::after {
	content: "Mehr anzeigen";
}

	.more-downloads::before {
    content: url('../images/arrow-bottom.svg');
		width: 1em;
		margin-right: .5em;
		vertical-align: baseline;
	}
	
.more-downloads.expanded::after {
	content: "Weniger anzeigen";
}
	
	.more-downloads.expanded::before {
		content: url('../images/arrow-top.svg');
	}

.download {
	display: grid;
	grid-template-columns: 5.2em 1fr;
	align-items: center;
	min-height: 5.2em;
	background-color: var(--color-white);
	border-radius: var(--border-radius);
}

	.download > *:nth-child(1) {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		background-color: var(--color-grey-light);
		border-top-left-radius: var(--border-radius);
		border-bottom-left-radius: var(--border-radius);
		overflow: hidden;
	}
	
		.download > *:nth-child(1)::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: inline-flex;
			-webkit-mask-image: url(../images/download.svg);
		  mask-image: url(../images/download.svg);
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1rem;
			height: 1rem;
			background-color: var(--color-primary);
		}
	
	.download > *:nth-child(2) {
		padding-block: .5em;
		padding-inline: 1em;
	}
	
	.download img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 5.2em;
		margin-inline: auto;
	}

	.download--title {
		font-weight: 700;
	}
	
	.download--credit {
		
	}
	
	.download--info {
		display: inline-flex;
		flex-wrap: wrap;
		column-gap: .5em;
		color: var(--color-grey);
		text-decoration: none;
	}
	
		.download--info > *:not(:last-child)::after {
			content: " · ";
		}
	
	.download--extension {
		text-transform: uppercase;
	}

/* @end */

/* @group Article */

.article {
	display: grid;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: var(--border-radius);
}

	.article__header {
		padding-top: var(--padding);
		padding-bottom: var(--padding-lg);
		padding-inline: var(--padding-lg);
	}

	.article__main {
		padding-inline: var(--padding-lg);
		padding-bottom: var(--spacing-block-sm);
	}
	
	.article__aside {
		font: var(--font-heading-sm);
		text-transform: var(--font-heading-text-transform);
	}
	
	.article:not(.person) .article__aside {
		padding-inline: var(--padding-lg);
		padding-bottom: var(--spacing-block-sm);
	}

	@media (min-width: 600px) and (max-width: 899px) {

			.article__aside {
				column-count: 2;
				column-gap: 0;
			}

	}

	@media (min-width: 900px) {
		
		.article {
			grid-template-columns: 2fr 1fr;
		}
		
			.article__cover {
				grid-column: span 2;
			}
			
			.article__header {
				grid-column: span 2;
				padding-right: calc(var(--padding-lg) + 33.333333333%);
			}
			
			.article.person .article__header {
				grid-column: unset;
			}
			
			.article__main {
				grid-column: 1;
			}
			
			.article.person {
				grid-template-rows: auto auto 1fr;
			}
			
			.article.person .article__aside {
				grid-column: 2;
				grid-row: 2 / span 2;
			}
		
	}
	
	.article h1 {
		color: var(--color-primary);
		font: var(--font-heading-h3);
		text-transform: var(--font-heading-text-transform);
	}
	
	.article .channels {
		margin-top: 2rem;
	}
	
	.article .channels:has(+ *) {
		margin-bottom: var(--spacing-block-sm);
	}
		
	.article__list {
		font: var(--font-sm);
	}
	
	.article__list:has(+ *) {
		margin-bottom: 2rem;
	}
	
		.article__list ul:not([class]) li {
			padding-left: 1.5em;
		}
		
		.article__list ul:not([class]) li:has(+ li) {
			margin-bottom: 1em;
		}
		
			.article__list ul:not([class]) li::before {
		    content: url('../images/arrow.svg');
				position: absolute;
				top: 0;
				left: 0;
				width: .8em;
			}
	
	.article__persons {
		display: flex;
		flex-direction: column;
		row-gap: .4em;
	}
	
		.article__persons::before {
			content: "Mit";
		}
		
		.article__persons a {
			text-transform: var(--font-heading-text-transform);
		}
		
	.article__gallery {
		
	}
	
		.article__gallery img {
			width: 100%;
		}

/* @end */

/* @group Channels */

.channels {
	display: flex;
	column-gap: 1.5rem;
}

.channels a {
	display: inline-flex;
	transition: all .15s ease-in-out 0s;
}

	.channels a:hover {
		color: var(--color-primary);
	}

	.channels a::before {
	  content: "";
		position: relative;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1.75rem;
		height: 1.75rem;
	  background-color: currentColor;
	}
	
	.channels a[title="youtube"]::before {
	  -webkit-mask-image: url(../images/youtube.svg);
	  mask-image: url(../images/youtube.svg);
	}
	
	.channels a[title="facebook"]::before {
	  -webkit-mask-image: url(../images/facebook.svg);
	  mask-image: url(../images/facebook.svg);
	}
	
	.channels a[title="instagram"]::before {
	  -webkit-mask-image: url(../images/instagram.svg);
	  mask-image: url(../images/instagram.svg);
	}
	
	.channels a[title="x"]::before {
	  -webkit-mask-image: url(../images/x.svg);
	  mask-image: url(../images/x.svg);
	}
	
	.channels a[title="website"]::before {
	  -webkit-mask-image: url(../images/website.svg);
	  mask-image: url(../images/website.svg);
	}

/* @end */

/* @group Video */

.video {
  position: relative;
  width: 100%;
  padding-bottom: 177.77%; /* 9:16 */
  height: 0;
  overflow: hidden;
	vertical-align: bottom;
}

.video.landscape {
	padding-bottom: 56.25%; /* 16:9 */
}

	.video iframe,
	.video figcaption {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	
	.video__placeholder {
		display: flex;
		align-items: center;
		padding: var(--padding);
		background-color: var(--color-grey-light);
		font: var(--font-sm);
		text-transform: none;
		text-align: center;
	}

/* @end */

/* @group Footer */

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
	max-width: var(--max-width);
	margin-top: var(--spacing-block);
	margin-bottom: var(--spacing-block-sm);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	text-align: center;
}

	.footer .bottombar {
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: .5rem;
	}

.footer-menu {
	display: inline-flex;
	justify-content: center;
	font: var(--font-menu);
	text-transform: var(--font-menu-transform);
}
	
		.footer-menu a:not(:last-child)::after {
			content: " / ";
		}
		
		.footer-menu a.active::after,
		.footer-menu a:hover::after {
			color: var(--color-base);
		}
		
.copyright {
	font: var(--font-sm);
}

/* @end */