*, *::before, *::after {
  box-sizing: border-box;
}
/* was macht das? */

ol, ul {
	list-style: none;
}

a {
  text-decoration: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* CD-Eigenschaften */

/*_________________________ Farben _________________________ */

:root {
  --color-primary: #4D8C9B;
  /* --color-secondary: #5A885A; */
  --color-secondary: #D9962A;
  --color-dark: #313131;
  --color-mediumdark: grey;
  --color-mediumbright: #F2F2F2;
  --color-bright: #f7f7f5;
}

/*_________________________ FONTS _________________________*/

html {
	font-size: 100%;
	/* sollte automatisch "safty-management" */
	/* rem sollte auf html sein */
	line-height: 1.4;
	font-family: 'Roboto Slab', serif;
  color: var(--color-dark)
}


h1 {
  font-family: ;
  font-size: 2rem;
  line-height: ;
}

h2 {
  font-size: 2rem;
  display: inline-block;
  line-height: ;
  margin: 40px 0;
}

h3 {
  font-size: 1.5rem;
  line-height: 2;
}

h4 {
  font-family: ;
  font-size: 0.9rem;
	font-weight: bold;
  line-height: ;
}

span {
  font-family: ;
  font-size:;
  line-height: ;
}

p {
  font-family: ;
  font-size: 1rem;
  line-height: 1.5;
}




figcaption {
  line-height: 1.6;
}

*::selection {
  background-color: var(--color-primary);
  /* background-color: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
  /* background-color: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
  /* background-color: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
  /* background-color: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
  /* background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); */
  /* background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); */
  color: white;
  /* background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

/*_________________________ special typ-comp _________________________*/

.additionaltitel {
  font-size: 1.2rem;
  display: block;
}



/*_________________________ mediaquery's _________________________*/
/* Tablet */

@media only screen and (max-width: 960px) {
  html {
    font-size: 110%;
  }
}

/* Phone */

@media only screen and (max-width: 540px){
  html {
    font-size: 120%;
  }
}





/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* Layout */

/*_________________________ Allgemein _________________________*/

img {
  max-width: 100%;
}

figure {
  margin-bottom: 20px;
  /* evlt nicht logisch hier */
  /* evtl aufteilen unten oben um UX-Button zu verbessern
      oder evtl. a reinnehmnen, so dass nur Bild klickbar ist */
}

/*_________________________ hide/show _________________________*/

.only-screen {
  display: block;
}

.no-screen {
  display: none;
}

@media only screen and (max-width: 960px) {
  .no-screen {
    display: block;
  }

  .only-screen {
    display: none;
  }
}

/*_________________________ Wrapper _________________________*/

.wrapper {
  max-width: 1040px;
  margin-left: auto;
	margin-right: auto;
}

section, footer{
	padding: 0 60px;
  /* könnte evtl. noch besser gelöst werden */
}


/* Phone */

@media only screen and (max-width: 540px){
  section, footer{
  	padding: 0 40px;
  }
}

/*_________________________ Flex Eigenschaften _________________________*/
/* Allg */

.flex {
	display: flex;
	flex-wrap: wrap;
}

.box {
  margin-left: -10px;
  margin-right: -10px;
}

.col {
  padding-left: 10px;
	padding-right: 10px;
}

/* Anordnung */

.space-between {
	justify-content: space-between;
}

.space-around {
	justify-content: space-around;
}

.row-reverse {
  flex-direction: row-reverse;
}

.flex-end {
  justify-content: flex-end;
}

.column{
  flex-direction: column;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}
/*_________________________ Grid _________________________*/
/* Desktop */

.col-1 {
  width: 100%;
}

.col-2 {
  width: 50%;
}

.col-3{
  width: 33.33%;
}

.col-4{
  width: 25%;
}

.col-6{
  width: 16.66%;
}

.col-12{
  width: 8.33%;
}

/* Tablet */

@media only screen and (max-width: 960px) {
	.col-1-tablet {
		width: 100%;
	}

	.col-2-tablet {
		width: 50%;
	}

	.col-3-tablet {
		width: 33%;
	}

	.col-4-tablet {
		width: 25%;
	}

	.col-6-tablet {
		width: 16.66%;
	}
}

/* Phone */

@media only screen and (max-width: 540px){
	.col-1-phone {
		width: 100%;
	}

	.col-2-phone {
		width: 50%;
	}

	.col-3-phone {
		width: 33%;
	}

	.col-4-phone {
		width: 25%;
	}

	.col-6-phone {
		width: 16.66%;
	}
}