/* -------------------- Fonts -------------------- */
/* roboto-100 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2'); 
}

/* roboto-100italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2'); 
}

/* roboto-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2'); 
}

/* roboto-300italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'); 
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); 
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'); 
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); 
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'); 
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2'); 
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'); 
}


@font-face {
  font-display: swap;
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kaushan-script-v16-latin-regular.woff2') format('woff2');
}
/* Material Icons */
@font-face {
	font-family: 'Material Icons Outlined';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/MaterialIconsOutlined-Regular.eot'); /* For IE6-8 */
	src: local('Material Icons'),
	local('MaterialIconsOutlines-Regular'),
		url('../fonts/MaterialIconsOutlined-Regular.eot?#iefix') format('embedded-opentype'), 
		url('../fonts/MaterialIconsOutlined-Regular.woff2') format('woff2'), 
		url('../fonts/MaterialIconsOutlined-Regular.woff') format('woff'), 
}
.material-icons-outlined {
	font-family: 'Material Icons Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: inherit;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;	
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;	
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;	
	/* Support for IE. */
	font-feature-settings: 'liga';
}

/* -------------------- Größen & Farben -------------------- */
html {
	margin: 0;
	padding: 0;
	--colorBlack: #343e48;
	--colorGoldLight: rgba(193,144,65,.075);
	--colorGold: #c19041;
	--colorRed: #7a1b34;
	--colorWhite: #fff;
	--maxWidthS: 1200px;
	--maxWidthL: 1400px;
	--paddingMin: 20px;
	--paddingMax: 50px;
	--padding: calc(20px + (50 - 20) * (100vw - 320px) / (1300 - 320));
	--fontsizeMin: 15px;
	--fontsizeMax: 18px;
	--fontsize: calc(15px + (18 - 15) * (100vw - 320px) / (1300 - 320));
	--rounding-interval-font: 1px;
	--rounding-interval-padding: 5px;
	--rounding-interval-headline: 1px;
	font-size: var(--paddingMin);
}
body {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: var(--fontsizeMin);
	line-height: 1;
	color: var(--colorBlack);
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
	hyphens: manual;
    font-family: 'Kaushan Script';
	color: var(--colorRed);
}
h1,
h2 {
	font-size: 2.4em;
	line-height: 1.2;
	color: var(--colorRed);
}
h3 {
	font-size: 1.8em;
	line-height: 1.3;
	margin: 1em 0 .75em 0;
}
h4 {
	font-size: 1.4em;
	line-height: 1.4;
	margin: 1em 0 .75em 0;
}
p, ol, ul {
	line-height: 1.5;
    font-size: 1em;
	margin: 1em 0;
}
ul {
	list-style: inside;
	padding: 0;
}
ol {
	padding: 0 0 0 1em;
}
b, strong {
    font-weight: 600;
}
/* -------------------- Links -------------------- */
a {
	color: inherit;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}
a:hover,
a:focus, 
a:active {
	color: var(--colorRed);
	outline: none;
	text-decoration: none;
}

/* -------------------- Buttons -------------------- */
p:has(a.button),
p:has(button) {
	margin-top: 1.5em;
}
button,
a.button {
	display: inline-block;
	padding: .5em 1.5em;
	background-color: var(--colorRed);
	color: var(--colorWhite);
	border-radius: 1.5em;
	text-transform: uppercase;
	font-family: 'Kaushan Script';
	font-size: 1.125em;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	border: none;
}
button:hover,
a.button:hover {
	background-color: var(--colorGold);
}

/* -------------------- Responsiv -------------------- */
@media only screen and (min-width: 320px) {
	html {
		font-size: round(var(--padding), var(--rounding-interval-padding));
	}
	body {
		font-size: round(var(--fontsize), var(--rounding-interval-font));
	}
}
@media only screen and (min-width: 1300px) {
	html {
		font-size: var(--paddingMax);
	}
	body {
		font-size: var(--fontsizeMax);
	}
}

/* -------------------- First & Last Child -------------------- */
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, ul:first-child, ol:first-child, hr:first-child, table:first-child, figure:first-child {
    margin-top: 0;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, hr:last-child, table:last-child, figure:last-child, p:last-child > img {
    margin-bottom: 0;
}