/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj: Typography
 */

body {

	--font-size--small: 10px;
	--line-height--small: 1.15;
	--letter-spacing--small: -0.005em;
	--one-line--small: calc( var( --font-size--small ) * var( --line-height--small ) );

	--font-size--regular: 13px;
	--line-height--regular: 1.2; 
	--letter-spacing--regular: -0.008em;
	--one-line--regular: calc( var( --font-size--regular ) * var( --line-height--regular ) );

	--font-size--branding: calc( var( --font-size--regular ) * 1.25 );
	--line-height--branding: 1.15;
	--letter-spacing--branding: -0.008em;
	--one-line--branding: calc( var( --font-size--branding ) * var( --line-height--branding ) );

	--font-size--medium: 18px;
	--line-height--medium: 1.2;
	--letter-spacing--medium: -0.011em;
	--one-line--medium: calc( var( --font-size--medium ) * var( --line-height--medium ) );

	--font-size--plus: calc( var( --font-size--medium ) );
	--line-height--plus: 1.2;
	--letter-spacing--plus: -0.02em;
	--one-line--plus: calc( var( --font-size--plus ) * var( --line-height--plus ) );

	--font-size--plusplus: calc( var( --font-size--regular ) * 2.25 );
	--line-height--plusplus: 1;
	--letter-spacing--plusplus: -0.02em;
	--one-line--plusplus: calc( var( --font-size--plusplus ) * var( --line-height--plusplus ) );

	--font-size--large: 9.25vw; /* 35px */
	--line-height--large: 0.9;
	--letter-spacing--large: -0.02em;
	--one-line--large: calc( var( --font-size--large ) * var( --line-height--large ) );

	--font-stretch--regular: 5;
	--font-weight--regular: 415;
	--font-stretch--bold: 4.9;
	--font-weight--bold: 625;

	--font-size: var( --font-size--regular );
	--line-height: var( --line-height--regular );
	--letter-spacing: var( --letter-spacing--regular );
	--font-stretch: var( --font-stretch--regular );
	--font-weight: var( --font-weight--regular );
	--font-slant: 0;

	--text-color: var( --font-color );
	--font-color: var( --black );
}

body,
a {
	--link-underline-width: calc( var( --font-weight ) / 6000 * 1em );
	--text-shadow: 	0px -1px var( --background-color ), 1px -1px var( --background-color ), 1px 0px var( --background-color ), 1px 1px var( --background-color ), 0px 1px var( --background-color ), -1px 1px var( --background-color ), -1px 0px var( --background-color ),

					/* 2 */
					0px -2px var( --background-color ), 2px -2px var( --background-color ), 2px 0px var( --background-color ), 2px 2px var( --background-color ), 0px 2px var( --background-color ), -2px 2px var( --background-color ), -2px 0px var( --background-color ),

					2px 1px var( --background-color ),
					2px -1px var( --background-color ),
					-2px 1px var( --background-color ),
					-2px -1px var( --background-color ),
					1px 2px var( --background-color ),
					-1px 2px var( --background-color ),
					1px -2px var( --background-color ),
					-1px -2px var( --background-color )
					;
}

* {
	--one-line: calc( var( --font-size ) * var( --line-height ) );
}



.is-dark-mode,
.style--eclat {
	--font-color: rgb( 233, 233, 233 );
	color: var( --font-color );
}

.style--eclat .title h1,
.style--eclat .date-title h2,
.style--eclat .concert__title h1,
.style--eclat .news_title h1,
.style--eclat .material__title h1 {
	--font-weight: 1000;
	--font-stretch: 7;
}

.style--nvs .title h1,
.style--nvs .date-title h2,
.style--nvs .concert__title h1 {
	--font-weight: 475;
	--font-color: var( --highlight-color );
}

.style--nvs {
	--font-stretch: 4.3;
}

.style--nvs * {
	font-feature-settings: 'ss10', 'ss12';
}



.branding {
	--font-size: var( --font-size--branding );
	--line-height: 0.925;
	--letter-spacing: -0.01em;
	--font-weight: 710;
	--font-stretch: 5;

	text-transform: uppercase;
	font-variation-settings: 'wdth' var( --font-stretch ), 'wght' var( --font-weight ), 'slnt' 0;
	font-size: var( --font-size );
	line-height: var( --line-height );
	font-weight: var( --font-weight );
	letter-spacing: var( --letter-spacing );
}



body,
input,
select,
textarea,

h1,
h2,
h3,
h4,
h5,
h6,

p,
span,
strong,
a {
	font-family: 'Raufaser', sans-serif;
	font-variation-settings: 'wdth' var( --font-stretch ), 'wght' var( --font-weight ), 'slnt' var( --font-slant );
	font-feature-settings: 'ss10';

	font-size: var( --font-size );
	line-height: var( --line-height );
	font-weight: var( --font-weight );
	letter-spacing: var( --letter-spacing );
	color: var( --font-color );
}

::-moz-selection {
	--background-color: var( --highlight-color );
	background: var( --background-color );
	text-shadow: none;
}

::selection {
	--background-color: var( --highlight-color );
	background: var( --background-color );
	text-shadow: none;
}

.dash {
	margin: 0 0.125em;
	display: inline-block;
}

.slash {
	margin: 0 0.1em;
	display: inline-block;
}

.unit {
	margin-left: 0.125em;
}

i[class^="bt"] {
	--stroke-width: 0.04em;

	font-size: 0.85em;
	position: relative;
	line-height: 1;

	-webkit-text-stroke: var( --stroke-width ) currentColor;
	-moz-text-stroke: var( --stroke-width ) currentColor;
	text-stroke: var( --stroke-width ) currentColor;
} 



.fs--sm {
	--font-size: var( --font-size--small );
	--line-height: var( --line-height--small );
	--letter-spacing: var( --letter-spacing--small );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--rg {
	--font-size: var( --font-size--regular );
	--line-height: var( --line-height--regular );
	--letter-spacing: var( --letter-spacing--regular );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--branding {
	--font-size: var( --font-size--branding );
	--line-height: var( --line-height--branding );
	--letter-spacing: var( --letter-spacing--branding );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--md {
	--font-size: var( --font-size--medium );
	--line-height: var( --line-height--medium );
	--letter-spacing: var( --letter-spacing--medium );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--plus {
	--font-size: var( --font-size--plus );
	--line-height: var( --line-height--plus );
	--letter-spacing: var( --letter-spacing--plus );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--plusplus {
	--font-size: var( --font-size--plusplus );
	--line-height: var( --line-height--plusplus );
	--letter-spacing: var( --letter-spacing--plusplus );

	font-size: var( --font-size );
	line-height: var( --line-height );
}

.fs--lg {
	--font-size: var( --font-size--large );
	--line-height: var( --line-height--large );
	--letter-spacing: var( --letter-spacing--large );

	font-size: var( --font-size );
	line-height: var( --line-height );
}



.lh--tight {
	--line-height: 1;
	line-height: var( --line-height );
}



.fw--regular {
	--font-weight: var( --font-weight--regular );
	--font-stretch: var( --font-stretch--regular );

	font-variation-settings: 'wdth' var( --font-stretch ), 'wght' var( --font-weight ), 'slnt' var( --font-slant );
	font-weight: var( --font-weight );
}

.fw--bold {
	--font-weight: var( --font-weight--bold );
	--font-stretch: var( --font-stretch--bold );

	font-variation-settings: 'wdth' var( --font-stretch ), 'wght' var( --font-weight ), 'slnt' var( --font-slant );
	font-weight: var( --font-weight );
}



.ta--left {
	text-align: left;
}

.ta--center {
	text-align: center;
}

.ta--right {
	text-align: right;
}


.tt--uppercase {
	text-transform: uppercase;
}

.tt--none {
	text-transform: none;
}



a,
a:link,
a:visited,
a:hover,
a:active {
	color: inherit;
	text-decoration: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

a:not( .is-anonymous ) {
	text-shadow: var( --text-shadow );
	background: linear-gradient( 0deg, currentColor, currentColor var( --link-underline-width ), transparent var( --link-underline-width ) );
	padding-bottom: 0em;
}

ul,
ul > li {
	margin: 0;
	padding: 0;
}

ul:not( .menu ):not( .drop-down__options ):not( :last-child ) {
	margin-bottom: var( --one-line );
}

ul:not( .menu ):not( .drop-down__options ) > li {
	position: relative;
	padding-left: 0.8em;
}

ul:not( .menu ):not( .drop-down__options ) > li::before {
	--indicator-size: 0.25em;

	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: var( --indicator-size );
	height: var( --indicator-size );
	border-radius: var( --indicator-size );
	background: currentColor;
}

strong {
	--font-weight: var( --font-weight--bold );
	--font-stretch: var( --font-stretch--bold );
}

sup {
	font-size: 0.7em;
	letter-spacing: 0.01em;

	font-variation-settings: 'wdth' var( --font-stretch ), 'wght' calc( var( --font-weight ) * 1.2 ), 'slnt' var( --font-slant );
}



/* ---------- sd ---------- */
@media ( min-width: 500px ) {

}



/* ---------- md ---------- */
@media ( max-width: 699px ) {

	i[class^="bt"] {
		top: -0.02em;
	}
}

@media ( min-width: 700px ) {
	
	body {
		--font-size--small: 11px;
		--font-size--regular: 13.5px;
		--font-size--medium: 20px;
		
		--font-size--large: 55px; /* 35px */
		--line-height--large: 0.89;
	}

	i.bt-bars {
		top: -0.05em;
	}

	i.bt-calendar {
		top: -0.07em;
	}
}



/* ---------- ml ----------- */
@media ( min-width: 1000px ) {
	
	body {
		--font-size--medium: 21px;
		--font-size--regular: 14px;
		--font-size--plus: calc( var( --font-size--regular ) * 1.75 );

		--font-size--large: 62px; /* 35px */
		--line-height--large: 0.88;
		--line-height--plus: 1.1;
	}
}



/* ---------- lg ----------- */
@media ( min-width: 1200px ) {
	
	body {
		--font-size--small: 12px;
		--line-height--small: 1.125;

		--font-size--regular: 15px;
		--font-size--medium: 22px;	

		--font-size--large: 70px;
		--line-height--large: 0.875;
	}
}



/* ---------- ll ----------- */
@media ( min-width: 1500px ) {
	
}



/* ---------- xl ----------- */
@media ( min-width: 1800px ) {
	
	body {
		--font-size--small: 13px;
		--font-size--regular: 16.5px;
		--font-size--medium: 24px;
	}
}