/* layout.css */

/* ... Fonts ...
-----------------------------------------------*/
@font-face {
  font-family: OpenSans;
  src: url(fonts/OpenSans-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: OpenSans;
  src: url(fonts/OpenSans-SemiBold.ttf);
  font-weight: bold;
}
/* ... Fonts ... END
-----------------------------------------------*/



/* ... Basics ...
-----------------------------------------------*/
html {
  overflow-y: scroll;
}
body {
  font-family: OpenSans;
  font-size: 1.1rem;
  line-height: 1.4;
  background-color: var(--back-color);
  color: var(--font-color);
}
/* ... Basics ... END
-----------------------------------------------*/



/* ... Margins ...
-----------------------------------------------*/
[class^="mod_"] {
  margin-bottom: var(--margin-bottom-mod);
}
[class^="mod_"]:last-child {
  margin-bottom: 0;
}
[class^="ce_"] {
  margin-bottom: var(--margin-bottom-ce);
}
[class^="ce_"]:last-child {
  margin-bottom: 0;
}
.inside {
  padding: 0 var(--margin-x) 2rem;
}
header .inside {
  padding-bottom: 0;
}
.globals_footer {
}
.colors {
	margin-bottom: 40px;
}
.logo {
	padding-right: 40px;
}
.logo .image_container {
	border-bottom: 3px solid;
	padding-bottom: 2rem;
}
footer .inside {
  padding-bottom: 3rem;
}
/* ... Margins ... END
-----------------------------------------------*/



/* ... Columns ...
-----------------------------------------------*/
#wrapper {
	background-color: var(--back-color);
	color: var(--font-color);
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}
#container {
	flex-grow: 1;
}
.globals_footer {
	display: flex;
	gap: 1rem 0;
	flex-wrap: wrap;
	justify-content: space-between;
	border-top: 3px solid;
	padding-top: 2rem;
}
.globals_footer > * {
	margin: 0;
}
/* ... Columns ... END
-----------------------------------------------*/


/* ... Typo ...
-----------------------------------------------*/
a {
  color: var(--link-color);
  transition: all .1s ease 0s;
}
a:focus,
a:active,
a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}
h1, h2, h3, h4 {
}
h2 {
  font-size: 1.875rem;
  text-transform: uppercase;
	border-bottom: 5px solid;
}
.wasser h2 {
  color: var(--color-wasser);
}
.schnittgut h2 {
  color: var(--color-schnittgut);
}
.plastik h2 {
  color: var(--color-plastik);
}
.demut h2 {
  color: var(--color-demut);
}
.wandel h2 {
  color: var(--color-wandel);
}
.diefuenfps h2 {
  color: var(--color-diefuenfps);
}

/* ... Typo ... END
-----------------------------------------------*/



/* ... Misc ...
-----------------------------------------------*/
img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}
/* ... Misc ... END
-----------------------------------------------*/