/*@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}*/

@font-face {
  font-family: 'Tomorrow';
  src: url('fonts/Tomorrow-ExtraBold.woff2') format('woff2'),
        url('fonts/Tomorrow-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"Clan";
  src:url("fonts/Clan.woff2") format("woff2"),
  url("fonts/Clan.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"Clan";
  src:url("fonts/Clan-Bold.woff2") format("woff2"),
  url("fonts/Clan-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
	--gray-50: #F9F9F9;
	--gray-900: #161922;
	--blue: #00B1ED;
	--purple: #A82576;
	--red: #FF0048;
	--font: 'Clan', Arial, Helvetica, sans-serif;
	--font-condensed: 'Clan', Arial, Helvetica, sans-serif;
	--font-headline: 'Tomorrow', Arial, Helvetica, sans-serif;
}

body {
    color: var(--gray-900);
    font-family: var(--font);
    /*background-image: url('img/background.png');
    background-position: bottom left;
    background-attachment: fixed;
    background-size: cover;*/
    background-image: url('img/noise_tile.webp');
}

h1 {
	font-family: var(--font-headline);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.625rem;
	line-height: 110%;
	color: var(--gray-900);
}
h2, h3, h4, h5 {
	font-family: var(--font);
	font-weight: 700;
	color: var(--gray-900);
}
h2 {
	font-size: 1.5rem;
	line-height: 120%;
}
h3 {
	font-size: 1.125rem;
	line-height: 130%;
}
h4 {
	font-size: 1rem;
	line-height: 150%;
}

@media (min-width: 576px) {
	h1 {
		font-size: 2.25rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	h4 {
		font-size: 1.0625rem;
	}
}
@media (min-width: 768px) {
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 1.85rem;
	}
	h4 {
		font-size: 1.5rem;
	}
}
@media (min-width: 1200px) {
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 4rem;
	}
	h3 {
		font-size: 2.25rem;
	}
	h4 {
		font-size: 1.75rem;
	}
}

p, li {
	font-size: 0.875rem;
	line-height: 165%;
}
p {
	margin-bottom: 1rem;
  margin-top: 
}
@media (min-width: 768px) {
	p, li {
		font-size: 1rem;
	}
}
@media (min-width: 1200px) {
	p, li {
		font-size: 1.125rem;
	}
}

b, strong {
    font-weight: bold;
}

a, a:visited {
	text-decoration: underline;
	color: var(--gray-900);
}
a:hover {
	color: #ff6781;
}
a:active {
	color: #cf003a;
}

.site-wrapper {
    max-width: 1900px;
    margin: 0 auto;
}

.sticky-line {
	position: sticky;
	top: 0;
	display: flex;
	align-items: flex-start;
	flex-shrink: 0; 
	height: 0.25rem;
	width: 100%;
	z-index: 99;
	height: 0.3125rem;
}

.sticky-line .sticky-line-blue {
	background: var(--blue);
	flex: 1 0 0;
	align-self: stretch;
}
.sticky-line .sticky-line-purple {
	background: var(--purple);
	flex: 1 0 0;
	align-self: stretch;
}
.sticky-line .sticky-line-red {
	background: var(--red);
	flex: 1 0 0;
	align-self: stretch;
}

@media (min-width: 1200px) {
	.sticky-line {
		height: 0.375rem;
	}
}

.navbar {
	padding: 2.25rem 0 0;
}

.navbar + .container-fluid {
  padding-bottom: 2rem;
  padding-top: 1.5rem;
}
@media (min-width: 768px) {
	.navbar + .container-fluid {
		padding-top: 2.5rem;
	}
}

.navbar-brand {
  background: url('img/zukunfts-industrie-logo.svg') left center no-repeat;
  background-size: contain;
  height: 27px;
  width: 130px;
}
@media (min-width: 576px) {
	.navbar-brand {
		height: 52px;
    width: 250px;
	}
}

.content {
	padding-bottom: 100px;
}

footer.navbar {
  justify-content: center;
  text-align: center;
  padding: 1.5rem 2rem;
	background: var(--gray-900);
	color: var(--gray-50);
	font-size: 0.8125rem;
}
footer a {
	font-weight: 700;
	margin: 0 .5rem;
	text-transform: uppercase;
	text-decoration: none;
}
footer span {
	margin: 0 .5rem;
}
footer a, footer a:visited {
	color: var(--gray-50);
}
.footer-below .col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}