/**************************ALLGEMEIN***********************/
* {
    outline: none;
    border: 0;
    font-family: 'systopic', Arial;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    box-sizing: border-box;
    list-style-type: none;
    outline-style: none;
    -webkit-tap-highlight-color: transparent;
    font-weight: 300;
    font-synthesis: none !important;
}

.center{
    text-align: center;
}

img,
video{
	width:100%;
}

/**************************HEADLINES***********************/
h1{
    font-weight: 600;
	font-size: clamp(
		2rem,      /* Minimum */
		9cqw,     /* 10 % der Container-Breite */
		3.4rem       /* Maximum */
		);
    padding: 0;
    position: relative;
    display:inline-block;
    margin-bottom: 2.5rem;
    line-height: 1.2;
	position: relative;
	background-image: url(../img/bg.webp);
	background-size: cover;
	background-position: center;
	color: black; /* fallback */

	/* Macht den Text zur Maske */
	-webkit-mask-image: paint(text);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;

	/* wichtig für WebKit */
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: black;

    -webkit-mask-image: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	word-break: break-word;

	& span{
		margin:0;
		font-weight: 600;
		font-size: clamp(
			2rem,      /* Minimum */
			9cqw,     /* 10 % der Container-Breite */
			3.4rem       /* Maximum */
			);
		line-height:0;
	}
}

.boardAni h1{
	white-space: nowrap;
	word-break: unset;
}

h2 {
    display:block;
    line-height: 1.4;
    margin-bottom: 1.5rem;
	font-size: 1.1rem;
	font-weight: 300;

	& b{
		font-size: 1.2rem;
		font-weight: 500;
	}
}

h3{
    display:block;
    font-weight: 300;
    line-height: 1.4;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

h4{
	font-weight: 500;
	font-size: .9rem;
	& b{
		font-weight: 600;
	}
}



/**************************REST***********************/
a {
    text-decoration: none;

	&.external{
		display:inline-flex;
		align-items: center;
		&::before{
			content:'';
			background:url('../img/arrow.svg') no-repeat center center / 100% 100%;
			width:1rem;
			height:1rem;
			display:inline-block;
			margin-right: .5rem;
			transform: rotate(-45deg);
		}

		&:hover::before{
			transform: rotate(0);
		}
	}
}



p a:hover {
    color:var(--highlight);
}


p {
    font-size:0.9rem;
    margin-bottom: 1rem;
}

a {
    color:#000;
}


b,
strong {
    font-weight: 600;
}

i {
    font-style: normal;
}

iframe{
    width:100%;
    border:0;
    aspect-ratio:16/9;
}

/**************************ICONS***********************/
@font-face {
	font-family: 'Font Awesome 6 Pro';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../fonts/fa-sharp-regular-400.ttf") format("truetype");
}

@font-face {
	font-family: 'Font Awesome 6 Pro';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fonts/fa-sharp-solid-900.ttf") format("truetype");
}

.fa{
	font-family: 'Font Awesome 6 Pro';
	font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display, inline-block);
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;


	&.pause:before {
		content: "\f04c";
	}
	&.play:before {
		content: "\f04b";
	}
	&.muted:before {
		content: "\f6a9";
	}
	&.unmuted:before {
		content: "\f6a8";
	}
	&.fullscreen:before {
		content: "\f065";
	}
	&.fa-arrow-turn-down-right:before {
		content: "\e3d6";
	}

}