:root {
	--blau: 	#00397f;
	--blau2:    #0694d3;
	--schwarz: 	#0e1319;
	--weiss:    #FFF;
		
	--grau1: 	#34383e;
	--grau2: 	#595d63;
	--grau3: 	#7f8388;
	--grau4: 	#a4a8ad; 
	--grau5: 	#cacdd2; 
	--grau6: 	#d4d8dc;
	--grau7: 	#eaebed;
	--grau8:    #f4f5f6;
}




html { 
	height: 100%; 
	width: 100%;
}

body {
  	background: var(--grau6);
	transform: scale(1);
	color: var(--schwarz);
  	display: grid;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 15px;
	line-height: 160%;
	overflow-x: hidden;
	grid-template-rows: auto 1fr auto;
	grid-template-areas: 
	"header" 
	"main"
	"footer";
}


#header {
	grid-area: header;
}

#main {
	grid-area: main;
}

#footer {
	grid-area: footer;
	z-index: -10;
}

img, object, embed, video {
	max-width: 100%;
}

#box_cookieagreement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    z-index: 6000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}


#HyphenatorToggleBox {
	display: none;
}

/* =============================================================================
   Links
   ========================================================================== */

a { color: var(--blau); text-decoration:none; }
a:visited { color: #662d91; }
a:hover { color: var(--blau2); text-decoration:underline; }
a:focus { outline: thin dotted; }

.clearfix {
	clear:both;
}


.haslink {
	cursor: pointer;
	opacity: 1;
	transition: all ease-in-out 0.5ms;
	filter: grayscale(100%);
}

/*.haslink::after {
	content: 'mehr lesen';
	background-image:url(../img/mehrlesen.png);
	background-repeat: no-repeat;
	background-position: left;
	position: absolute;
	color: var(--weiss);
	text-transform: uppercase;
	font-size: 0.8em;
	right: 0;
	bottom: 0;
	z-index: +1;
	height: 34px;
	width: 150px;
	text-align: right;
    padding: 5px 20px 0 0;
    box-sizing: border-box;
	transition: opacity ease-in-out 1ms;
	opacity: 0;
} */

.haslink:hover {
	cursor: pointer;
	opacity: 1;
	filter: none;
	transition: all ease-in-out 1ms;
	box-shadow: 0 4px 4px 0 var(--grau2);
}
.leistung.haslink:hover {
	box-shadow: none;
}

/*.haslink:hover::after {
	content: 'mehr lesen';
	background-image:url(../img/mehrlesen.png);
	background-repeat: no-repeat;
	background-position: left;
	position: absolute;
	color: var(--weiss);
	text-transform: uppercase;
	font-size: 0.8em;
	right: 0;
	bottom: 0;
	z-index: +1;
	height: 34px;
	width: 150px;
	text-align: right;
    padding: 5px 20px 0 0;
    box-sizing: border-box;
	transition: opacity ease-in-out 1ms;
	opacity: 1;
} */

hr { 	
	margin-bottom:50px;
	margin-top:30px;
	border: 0;
	border-top:1px solid var(--grau6);
 	border-bottom: 1px solid #fff;
}

/* LISTE */
ul {list-style:none; padding:0; text-align:left;}
li {line-height:3em; border-bottom:1px solid #d9caca;}
/*ul li::before {content: "▪"; color: #00397f;
  display: inline-block; width: 1.3em;}*/
ul {list-style: url(../media/list.png);list-style-position: inside;}


/* TABELLE */

table { 
	border-collapse: collapse; 
	border-spacing: 0;
	background:var(--grau8);
	text-align:left;
	border:none;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
}

td, th { 
	vertical-align: top;
	border-bottom: 1px solid var(--grau4);
	background:var(--grau8);
	padding:1%;
}

.table-fill {
  background: white;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  	color: #fff;
	background: var(--grau2);
  	font-weight: normal;
  	padding:5px 20px;
  	text-align:left;
  	vertical-align:middle;
	text-transform: uppercase;
	font-size: 1em;
}

tr:first-child {
	background:#fff;
}


tr {
  border-top: 1px solid var(grau7);
  border-bottom: 1px solid var(grau7);
  color:var(--schwarz);
  font-weight:normal;
}
 
tr:hover td, 
tr:nth-child(even):hover td{
  background:var(--grau6);
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(even) td {
  background:var(--var7);
}
 
/*
tr:nth-child(even):hover td.leer, tr:hover td.leer {
  background:none;
  color:#514a4a;
} */

 
td {
  background:#FFFFFF;
  text-align:left;
  vertical-align:middle;
  /*font-weight:300;
  font-size:14px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
  border-right: 1px solid #C1C3D1;
  border-left: 1px solid #C1C3D1;
	line-height: 1em;
	padding: 10px 1%;
}
td p{
	margin: 0;
	padding: 0;
}

th:last-child, td:last-child {
  /*width:100px;*/
}
/*
th.text-left {
  text-align: left;
}

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

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

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

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

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

th.leer, td.leer {
	background:none;
} */


/* KONTAKT */

table.kontakttable{
	background:white;
}

table.kontakttable td, table.kontakttable th{
	background:none;
	border:none;
}

table.kontakttable td:hover, table.kontakttable th:hover{
	background:none;
	border:none;
	color:#514a4a;
}
table.kontakttable tr:nth-child(even):hover td {
  	background:none;
  	border:none;
	color:#514a4a;
}
table.kontakttable tr:hover td {
  background:none;
  color:#514a4a;
}
table.kontakttable tr{
	border:none;
}



/* HEADER ========================*/
/*================================*/

header {
	float:none;
	margin:0 auto;
	padding:0;
	height:auto;
	grid-area: header;
	width: 100%;
	background:var(--grau8);
	border-bottom: 1px solid var(--grau6);
}


#logo {
	width: 100%;
	text-align:left;
	margin:0 auto;
	max-width:1300px;
	padding:0 4%;
}

img.logo {
	border:0;
	float:none;
	margin:0;
	text-align:left;
	max-width: 200px;
	padding: 20px 0;
	transition: all 0.3s ease-in-out;
}

#scrollup {
	width: 40px;
	height: 30px;
	position: fixed;
	bottom: 30px;
	right: 20px;
	font-size: 40px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	display: none;
	background-color: #FFF;
	border-radius: 5px;
	z-index: 1000;
}

#scrollup:hover {
	color: var(--grau1);
}


#mobilswitch {
	position: absolute;
	top: 14px;
	right: 10px;
	width: 50px;
	height: 45px;
	padding: 0;
	text-align: center;
	background-image: url("/img/menu.png");
	background-size: 60% auto;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	z-index: 2000;
	color: #fff;
	transition: all 0.3s ease-in-out;
}
#mobilswitch:hover, #mobilswitch:active {
	transition: all 0.3s ease-in-out;
	background-image: url("/img/menu.png");
	background-size: 65% auto;
	background-position: center;
	background-repeat: no-repeat;
}


/* ARTIKEL */
/* ============================================ */

#main article,
#main article.box100 {
	flex: none;
	width: 100%;
	margin: 0 auto;
	padding: 20px 4%;
	animation: 3s ease 0s 1 normal none running grow;
	box-sizing: border-box;
	min-width: 100%;
	position: relative;
}
#main article.box100 {
	padding: 50px 4%;
}


@keyframes grow {
    0% { opacity:0; }
    100% { opacity:1; }
}

.boxmitlink:hover {
	cursor: pointer;	
}

.contentbox {
	width: 100%;
	height: auto;
}


#main article.box50 {
	width: 100%;;
	float: none;
}

#main article.box33 {
	width: 100%;;
	float: none;
}

.zentriert{
	text-align: center;
}

.color {
	width: calc(100% - 30px);
	background-color: var(--grau5);
	padding:45px 15px;
	margin: 50px auto;
}

.dark {
	background-color: var(--grau2);
	padding:45px 15px;
	margin: 50px auto;
	color:#fff;
}

.dark h2, .dark h4, .dark h5, .dark h6{
	color: #fff;
}

.dark h3{
	color:var(--grau3);
}

.dark h3:after{
	content: " ";
	background: var(--grau3);
	width: 86px;
	height: 2px;
	display: block;
	margin: 15px auto 5px auto;
} 


/*.colorbackground h1, .colorbackground h2, .colorbackground h3, .colorbackground h4, .colorbackground h5, .colorbackground h6, .colorbackground p, .colorbackground a, .colorbackground li, */
.darkbackground h1, .darkbackground h2, .darkbackground h3, .darkbackground h4, .darkbackground h5, .darkbackground h6, .darkbackground p, .darkbackground a, .darkbackground li, 
.backgroundimage h1, .backgroundimage h2, .backgroundimage h3, .backgroundimage h4, .backgroundimage h5, .backgroundimage h6, .backgroundimage p, .backgroundimage a, .backgroundimage li
{
	color: var(--weiss);
}

/*.colorbackground h1, .colorbackground h2, .colorbackground h3, .colorbackground h4, .colorbackground h5, .colorbackground h6{
	color: var(--grau1);
} */

.center {
	text-align: center;
}

.center p, .center h1, .center h2, .center h3, .center h4, .center h5, .center h6, 
.leistungencontainer h1, .leistungencontainer h2, .leistungencontainer h3, .leistungencontainer h4, .leistungencontainer h5, .leistungencontainer h6, .leistungencontainer p {
	max-width: 800px;
	margin-left:auto;
	margin-right: auto;
}

#main article.colorbackground {
	background-color: var(--grau6);
	/*color: var(--weiss); */
	z-index: +1;
	position: relative;
	padding-top: 50px;
    padding-bottom: 30px;
}

#main article.lightbackground {
	background-color: var(--grau8);
	z-index: +1;
	padding-top: 50px;
    padding-bottom: 30px;
}

#main article.darkbackground {
	background-color: var(--grau3);
	color: var(--weiss);
	z-index: +1;
	padding-top: 50px;
    padding-bottom: 30px;
}
/*
#main article.graybackground {
	background-color: var(--grau6);
	overflow: hidden;
	z-index: +1;
	padding-top: 50px;
    padding-bottom: 30px;
} */




#main article.fotobackground {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	min-height: 200px;
	padding: 0;
	transition: all .5s;
}

#main article.fotobackground div {
	box-sizing: border-box;
	width: 40%;
    float: right;

	background:rgba(0,0,0,0.3);
    padding: 20px 2%;
	height: 80%;
    transform: translateY(10%);
	margin-right: 10px;
	border: 1px solid var(--weiss);
	color: var(--weiss);
}

#main article.fotobackground div h2{
	font-size: 2em;
	color: var(--weiss);
}

#main article.fotobackgroundleft {
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	min-height: 200px;
	padding: 0;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#main article.fotobackgroundleft div {
	box-sizing: border-box;
	width: 100%;
    float: right;
    background: var(--grau7);
    padding: 20px 2%;
    margin: 0;
	margin-top: 130px;
}

/* LEISTUNG */

#main article.leistung {
	padding: 25px;
	position: relative;
	text-align: center;
	min-width: 170px;
    max-width: 85%;
	margin: 1.5% auto;
}
#main article.leistung p{
	margin-bottom: 30px;
}
#main article.leistung h4{
    line-height: 1.1em;
}
#main article.leistung h6::before {
	content: '';
	margin: 10px auto;
	width: 20px;
	height: 2px;
	background-color: var(--grau5);
	position: absolute;
    left: calc(50% - 10px);
    bottom: 45px;
}
#main article.leistung figure{
	max-width: 120px;
	min-width: 50px;
	margin: 10px auto;
	float: none;
}
.leistungencontainer{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	background: var(--grau8);
	text-align: center;
    justify-content: center;
	
	margin-top: -20px;
	/*margin-bottom: -20px; */
}


/* VORSCHAU / AKTUELLES auf der STARTSEITE */
	
#main article.vorschau {
	margin-top: 20px;
	width:100%;
	float: none;
	clear: both;
	padding: 0;
	/*height: 400px; */
	filter: none;
	min-width: 300px;
	max-width: 47%;
}

#main article.vorschau div {
	/*top: 50px; */
	display: block;
    position: relative;
    height: 140px;
	padding: 60px 4% 20px 4%;
	background:var(--grau4);
}
#main article.vorschau div.vorschaucontent {
}
#main article.vorschau div.vorschauimg {
	background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
	filter: grayscale();
	transition: all ease-in-out 1ms;
}
#main article.vorschau div.vorschauimg:hover {
	filter: none;
	transition: all ease-in-out 1ms;
}
	/*
#main article.vorschau img.bildlinks, .vorschau img{
	float: none;
	margin: 0;
	padding: 0;
	width:100%;
	margin-bottom: 10px;
	height: auto;
} */
	
#main article.vorschau p, .vorschau li, .vorschau h3, .vorschau h4, .vorschau hr{
	display: none;
}
#main article.vorschau h1{
	text-transform: uppercase;
	font-weight: 500;
	color:var(--grau1);
	height: auto;
	margin: 0;
	font-size: 1.2em;
	letter-spacing: 0;
    padding: 0;
}

#main article.vorschau h2{
	color:var(--schwarz);
	height: auto;
	margin: 20px 0;
	font-size: 1em;
	text-transform: none;
	letter-spacing: 0;
    padding: 0;
}

#main article.vorschau h1::after, #main article.vorschau h2::after {
	display: none;
}

#main article.vorschau.politik div.vorschaucontent:before{
	content: "Politik";
	width: 200px;
	margin:0;
	position: absolute;
	background-image:url("../img/kategorie_medienmarkt.png");
	background-repeat: no-repeat;
	background-position: left;
	color: var(--weiss);
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
	padding: 5px 0 5px 60px;
    top: 0;
    left: 0;
	overflow: hidden;
}

#main article.vorschau.gesellschaft div.vorschaucontent:before{
	content: "Gesellschaft";
	width: 200px;
	margin:0;
	position: absolute;
	background-image:url(../img/kategorie_gesellschaft.png);
	background-repeat: no-repeat;
	background-position: left;
	color: var(--weiss);
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
	padding: 5px 0 5px 60px;
    top: 0;
    left: 0;
	overflow: hidden;
}

#main article.vorschau.medienmarkt div.vorschaucontent:before{
	content: "Medienmarkt";
	width: 200px;
	margin:0;
	position: absolute;
	background-image:url(../img/kategorie_medienmarkt.png);
	background-repeat: no-repeat;
	background-position: left;
	color: var(--weiss);
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
	padding: 5px 0 5px 60px;
    top: 0;
    left: 0;
	overflow: hidden;
}

#main article.vorschau::after {
	content: 'mehr lesen';
	background-image:url(../img/mehrlesen.png);
	background-repeat: no-repeat;
	background-position: left;
	position: absolute;
	color: var(--weiss);
	text-transform: uppercase;
	font-size: 0.8em;
	right: 0;
	bottom: 0;
	z-index: +1;
	height: 34px;
	width: 150px;
	text-align: right;
    padding: 5px 20px 0 0;
    box-sizing: border-box;
	filter: grayscale();
}

#main article.vorschau:hover::after {
	filter: none;
}


/* AKTUELLES auf der BEITRÄGESEITE */

#main article.sammeln {
	flex: 1;
	margin: 0 auto;
	width: 90%;
	/*aspect-ratio: 0.7; */
	max-width: 250px;
	float: none;
	border: 1px solid var(--grau5);
	overflow: hidden;
	box-sizing: border-box;
	background: var(--weiss);
    padding: 0;
	
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;

	clear: both;
}

#main article.sammeln div {
	display: block;
    position: relative;
    min-height: 180px;
	padding: 20px 4% 20px 4%;
	background:var(--weiss);
}

#main article.sammeln div.sammelncontent {
	min-height: 100px;
	padding-bottom: 50px;
}

#main article.sammeln:hover {
	-webkit-box-shadow: 5px 5px 5px 0px rgba(156,150,150,0.5);
	-moz-box-shadow: 5px 5px 5px 0px rgba(156,150,150,0.5);
	box-shadow: 5px 5px 5px 0px rgba(156,150,150,0.5);
	cursor: pointer;
}
	
#main article.sammeln h1{
	text-align: left;
	padding:10px;
	font-size: 1.3em;
	line-height: 1em;
	letter-spacing: 0;
	margin: 0;
}
	
#main article.sammeln h2{
	color:var(--grau3);
	text-align: left;
	padding:10px;
	background: none;
	font-size: 1em;
	line-height: 1em;
	margin:0;
	text-transform: none; 
}

#main article.sammeln h2:after{
	display: none;
} 

#main article.sammeln::after {
	content: 'mehr lesen';
	background-image:url(../img/mehrlesen.png);
	background-repeat: no-repeat;
	background-position: left;
	position: absolute;
	color: var(--weiss);
	text-transform: uppercase;
	font-size: 0.8em;
	right: 0;
	bottom: 0;
	z-index: +1;
	height: 34px;
	width: 150px;
	text-align: right;
    padding: 5px 20px 0 0;
    box-sizing: border-box;
	opacity: 0;
}

#main article.sammeln:hover::after {
	content: 'mehr lesen';
	background-image:url(../img/mehrlesen.png);
	background-repeat: no-repeat;
	background-position: left;
	position: absolute;
	color: var(--weiss);
	text-transform: uppercase;
	font-size: 0.8em;
	right: 0;
	bottom: 0;
	z-index: +1;
	height: 34px;
	width: 150px;
	text-align: right;
    padding: 5px 20px 0 0;
    box-sizing: border-box;
	opacity: 1;
}

#main article.sammeln .articledate, .vorschau .articledate {
	display: none;
}

#main article.sammeln div.sammelnimg {
	background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}



#pagedate {
	color:var(--grau5);
	font-weight: bold;
}

	

/* SNAP-BOX / Testimonials */

#main article.snapbox {
	background: var(--grau8);
	padding: 0;
	width: 100%;
	height: auto;
	margin:0 auto;
	position: relative;
	min-width: 200px;
	max-width: 100%;
}

#main article.snapbox::before {
	content: '';
	width: 57px;
	height: 57px;
	position: absolute;
	background-image: url("../img/quote.png");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	top:-20px;
	left:4%;
}

.snaptextcontainer {
	box-sizing: border-box;
	padding-left: 150px;
	
	width: 100%;
	text-align: center;
	padding: 50px 0 30px 0;
}

.snapcontainer {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: block;
	min-height: 200px;
}

.snapleft, .snapright {
	top: 40%;
	width: 20px;
	height: 100%;
	display: flex;
	transition: all 0.3s ease-in-out;
	z-index: 1000;
	position: absolute;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.snapleft span, .snapright span {
	display: inline-block;
	flex: 1;
}

.snapright:hover, .snapleft:hover {
	cursor: pointer;
}

.snapright.hidden, .snapleft.hidden {
	display: none;
}

.snapleft {
	left: 0;
	background-image: url('../img/snapleft.png');
}

.snapright {
	right: 0;
	background-image: url("../img/snapright.png");
}

.snapslider {
	width: 90%;
	max-width: 85vw;
	min-height: 200px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-snap-stop: always;
	scroll-behavior: smooth;
	position: relative;
	box-sizing: border-box;
	margin: 0 auto 5% auto;
    padding: 0 0 10px 10px;
	padding: 0;
}

.snapslider::-webkit-scrollbar {
    display: none!important;
    height: 0;
    width: 0;
    background-color: transparent;
}

.snapslide .snap, #main article.snap {
	position: relative;
	margin: 70px 0 0 0;
	width: 100%;
	flex: 1;
	font-size: 0.8em;
	line-height: 1.2em;
	background: #fff;
	box-shadow: 0 0 5px var(--grau2);
	scroll-snap-align: center;
	box-sizing: border-box;
	max-width: 100%;
	padding-top: 3%;
}
#main article.snap figure {
	z-index: +1;
	max-width: 200px;
}
#main article.snap figure img{
	max-width: 130px !important;
	border-radius: 100%;
	aspect-ratio: 1;
}

/* NAVIGATION */

nav {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	right: 0;
	display: none;
	width: 100vw;
	height: 100vh;
	max-width: 400px;
	text-align: left;
	z-index: 1001;
	background: var(--grau8);
	box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

nav ul {
	margin: 0;
	padding: 0;
	display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}


nav ul li {
	box-sizing: border-box;
	display: block;
	float: none;
	width: 100%;
	padding-left: 0px;
	list-style: none !important;
	border-top: solid 2px rgba(0,0,0,0.07);
	border-bottom: none;
	padding: 0 20px;
	animation-name: slide-in;
    animation-duration: .33s;
    animation-timing-function: cubic-bezier(.15,.48,.53,1.15);
    animation-fill-mode: forwards;
}

@keyframes slide-in {
  0% {
		-webkit-transform: translateX(1000px);
		transform: translateX(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		opacity: 1;
	}
}

nav ul li:nth-child(2) {
    animation-delay: .05s;
}
nav ul li:nth-child(3) {
    animation-delay: .1s;
}
nav ul li:nth-child(4) {
    animation-delay: .15s;
}
nav ul li:nth-child(5) {
    animation-delay: .2s;
}
nav ul li:nth-child(6) {
    animation-delay: .25s;
}
nav ul li:nth-child(7) {
    animation-delay: .3s;
}
nav ul li:nth-child(8) {
    animation-delay: .35s;
}

nav ul li:hover, nav ul li:active{

}

nav ul li::before {
	display: none;
}

nav a {
	background-color: transparent;
	transition: all 0.3s ease-in-out;
}

nav ul li:first-child,
nav ul ul li:first-child {
	border-top: none;
}

nav ul li:last-child {
	border-bottom: none;
}

nav ul li a,
nav ul li a:hover,
nav ul li a:visited {
	font-family: "macho";
    font-style: normal;
    font-weight: 500;
	display: block;
	box-sizing: border-box;
	width: 100%;
	color: var(--grau2);
	text-decoration: none !important;
	text-transform: uppercase;
	font-size: 1.2em;
	font-size: 1em;
}
nav ul li a:hover,
nav ul li a.active:hover{
	color: var(--blau);
}
nav ul li a.active{
	color: var(--blau2);
}

nav ul ul {
	display:block;
	border:none;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin-left: -20px;
}

/* Navigation - Submenü */


nav ul ul li{
	float:none;
	border:none;
	border-bottom:1px solid var(--grau3);
	line-height: 2em;
	background:var(--grau4);
	border-top: none;
}

nav ul ul li a, 
nav ul ul li a:visited{
	margin:0;
	color:var(--grau1);
	text-transform: none;
	line-height: 1.2em;
	padding: 7px 0;
}

nav ul ul li a:hover {
	text-transform: none;
	line-height: 1.2em;
	padding: 7px 0;
}

nav .subnavi {
	position: absolute;
	top: 20%;
	left: 20px;
	display: flex;
	flex-direction: row;
	width: auto;
	justify-content: center;
}
nav .subnavi li{
	max-width: 50px;
	margin: 0;
	padding: 0;
	border:none;
}
nav .subnavi li a:hover{
	opacity: 0.6;
	transition: all 0.3ms;
}

input#suche {
	display: block;
	background-color: var(--weiss);
	border: 1px solid var(--grau4);
	width: 70%;
	height: 30px;
	border-radius: 20px;
	margin: 20px;
	background-image: url(/img/icon_lupe.png);
	background-size: auto 80%;
	background-position: 10px center;
	background-repeat: no-repeat;
	padding-left: 60px;
	color: var(--grau1);
	/*bottom: 50px;
	position: absolute; */
	box-sizing: border-box;
	/*width: 200px;
	top: 250px;
	right: 20px;
	z-index: 999; */
}
input#suche:focus-visible {
	outline: 2px solid var(--grau3);
}

#barriere {
	/*display: none;*/
	position: absolute;
    right: 0;
    rotate: -90deg;
    background: var(--grau3);
    color: var(--weiss);
    padding: 0 10px;
    transform-origin: bottom right;
	transition: all 0.3s linear 0s;
	    z-index: 9999;
}
#barriere a, #barriere a:visited, #barriere a:hover {
	color: var(--weiss);
	letter-spacing: 0.05em;
}

#barriere:hover {
	background:var(--grau2);
	transition: all 0.3s linear 0s;
}

.highlight {
	background-color: yellow;
}

#main {
	grid-area: main;
	/*width: 90vw; */
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
	padding: 0 4%;
	max-width: 1300px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	background: var(--grau7);
}

#main.allebeitraege {
	padding-top: 30px;
	column-gap: 30px;
	grid-row-gap: 30px;
}

.hyphenate {
	hyphens: auto;
}







/* SCHRIFTEN =====================*/
/*================================*/

h1 {
	font-family: "macho";
	color:var(--blau);
	font-size:1.3em;
	font-weight:lighter;
	text-transform:uppercase;
	letter-spacing:1px;
	padding:0;
	margin:0;
	line-height: 1.2em;
}

h1::after {
	width: 40px;
	height: 2px;
	background:var(--blau);
	display: block;
	content: '';
	margin: 10px 0 20px;
}

h2::after {
	width: 40px;
	height: 2px;
	background:var(--grau5);
	display: block;
	content: '';
	margin: 10px 0 20px;
}
.center h2::after {
	margin: 10px auto 20px auto;
}
.colorbackground h2::after{
	background:var(--grau3);
}
.darkbackground h2::after{
	background:var(--weiss);
}

h2 {
	color:var(--grau1);
	font-family: "macho";
	font-size:1.2em;
	margin:0;
	padding:0;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight: normal;
}

h3 {
	color:var(--grau2);
	font-family: "macho";
	font-size:1.1em;
	margin:0;
	font-weight:300;
	line-height:1.3em;
}

h4 {
	color:var(--grau3);
	font-size:1.0em;
	margin:0;
	text-transform: none;
	font-weight: normal;
	
}

h5 {
	font-size:1.0em;
	margin:0;
	font-weight:bold;
}
.darkbackground h5 a,
h5 a, h5 a:visited, input[type=button], button{ 
	padding: 14px 28px;
	font-size: 14px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 2px solid var(--weiss);
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 20px auto;
	background-color: var(--grau5);
	color: var(--schwarz);
	margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    max-width: fit-content;
}
.darkbackground h5 a:hover,
h5 a:hover, input[type=button]:hover, button:hover{ 
	/*background-image: linear-gradient(to top, var(--grau4) 0%, var(--grau3) 170%); */
	-webkit-transition: all 0.3s linear 0s;
	-moz-transition: all 0.3s linear 0s;
	-ms-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;	
	background-color: var(--grau6);
	color: var(--blau);
	box-shadow: 5px 5px 5px 0px rgba(156,150,150,0.5);
}

h5 a:active, input[type=button]:active, button:active{ 
	background-color: var(--grau5);
	color: var(--schwarz);
	border: 2px solid var(--weiss);
}

h6{
	color:var(--grau3);
	font-size:1em;
	margin:0;
}

a.download {
	/*padding-left:50px;
	line-height: 40px; */
	line-height: 1.1em;
	margin-left: 50px;
	display: block;
}

a.download::before{
	content:'';
	width: 40px;
	height: 40px;
	background-image: url("../img/icon_download.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	margin-left: -50px;
	margin-top: -3px;
}

.text-left {
	float:left;
	text-align:right;
}

.text-right {
	float:right;
	text-align:left;
}

p, h1, h2, h3, h4, h5, h6{

	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

blockquote {
	font-weight: normal;
    border: 1px solid var(--grau5);
    border-radius: 20px;
    padding: 25px 50px;
    background: rgba(255,255,255,0.5);
    position: relative;
	color: var(--blau);
	font-size: 1.2em;
    line-height: 1.4em;
	margin: 40px 0 0 0;
	/*width: 40%;
	min-width: 300px; 
	float: left;*/
	font-style: italic;
	/*z-index: -1; */
}
blockquote:before {
	/*content: open-quote;
    font-size: 10em;
    line-height: 0.5em;
    margin-left: -80px;
    position: absolute;
    margin-top: -100px;
	color: var(--grau5);
	font-family: non-serif;
	left: 0; */
	
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	background-image: url("../img/quote.png");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	top:-20px;
	left:5%;
}
.colorbackground blockquote:before {
	color: var(--grau4);
}
.darkbackground blockquote:before {
	color: var(--grau7);
}

blockquote p:nth-child(2) {
	text-align: right;
	font-size: 0.7em;
	line-height: 1.5em;
	color: var(--grau4);
	font-style: italic;
}

/* BILDER ==========================*/
/*==================================*/
.bildlinks {
	float:none;
	margin: 0 0 20px 0;
	min-width:200px;
	position: relative;
	z-index: +1;
}

.bildrechts {
	float:none;
	margin: 0 0 20px 0;
	min-width:200px;
	position: relative;
	z-index: +1;
}

.bildtop {
	float: none;
	margin:0 auto;
	text-align: center;
	width:100%;
	display: block;
	position: relative;
	z-index: +1;
}

footer .bildrechts, footer .bildlinks, footer .bildtop {
	border: none;
}


/* MEHR LESEN styles =============*/
/*================================*/

.mehrlinkein::before{
	color: #9c9696;
	content: "Mehr lesen";
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px 0 10px 55px;
	line-height: 2em;
}

.mehrlinkein {
	margin: 50px 0;
	float: none;
	clear: both;
	border:1px solid #9c9696;
	background:#fff;
	height: 30px;
	width: 210px;
	padding: 0;
}

.mehrlinkein:hover{
	cursor: pointer;
	background: rgba(217,202,202,0.30);
}

.mehrlinkaus::before{
	color: #9c9696;
	content: "ausblenden";
	font-weight: bold;
	text-transform: uppercase;
	padding:10px 55px;
	line-height: 2em;
}

.mehrlinkaus {
	margin: 50px 0;
	float: none;
	clear: both;
	border:1px solid #9c9696;
	background:#fff;
	height: 30px;
	width: 200px;
	padding: 0;
}

.mehrlinkaus:hover{
	cursor: pointer;
	background: rgba(217,202,202,0.30);
}

.mehrlinkein:not(:target) .mehrtext {display: none;}
.mehrlinkein:target .mehrtext {display: block;}

.mehrlinkein:onclick .mehrtext {display: none;}
.mehrlinkein:onclick .mehrtext {display: block;}



/* FOOTER */

footer {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background-color: var(--grau1);
	margin: 0;
	padding: 40px 0;
	position: relative;
	border-top: 5px solid var(--grau3);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}


footer p {
	color: var(--weiss);
	font-size: 0.9em;
	line-height: 1.9em;
}

footer a,
footer a:active,
footer a:visited {
	color: var(--weiss);
	line-height: 1.9em;
}
footer a:hover {
	color: var(--grau6);
}

footer article {
	box-sizing: border-box;
	padding: 10px 5%;
	position: relative;
	width: 45%;
	width: 90%;
	min-width: 300px;
    
}
footer article:first-child{
	width: 100%;
	border-bottom: 2px solid var(--grau3);
}

footer h2{
	color:var(--grau5);
	font-weight: 700;
	line-height:1em;
	margin:8px 0 0 0;
	padding:0;
	background: none;
	font-size: 1.3em;
}
footer article:first-child img{
	margin: 0;
	padding: 0;
	max-width: 300px;
}

.foto {
	margin: 0;
	padding: 0 !important;
}


/* Slider */

.slider {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	max-height: 300px;
	display: block;
	overflow: hidden;
	border: 1px solid #9c9696;
	position: relative;
	margin-bottom: 35px;
}

.slider img {
	/*max-height: 330px;*/
	display: block;
}

.slider p{
	position: absolute;
	vertical-align: middle;
	color:#fff;
	font-size: 5vmin;
	top:50px;
	margin: 0;
	padding: 0;
	left: 2%;
	text-shadow: 3px 3px 5px /*#514a4a*/ #000;
	max-width: 500px;
	text-transform: uppercase;
}


/* twisterbox ====================*/
/*================================*/

#main article.twister {
	overflow: hidden;
	position: relative;
	z-index: 1;
	float: left;
	margin: 0 2% 2% 0;
	padding: 0;
	width: 100%;
	height: 400px;
}

#main article.twister:last-child {
	margin-right: 0;
}

#main article.twister .box {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: all 1.0s linear;
	-webkit-transition: all 1.0s linaer; 
	box-shadow: -5px 5px 5px #aaa;	
}

#main article.twister .box .front,
#main article.twister .box .back {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
}

#main article.twister .box .front {
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #726c6c;
	background-size: cover;
	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

#main article.twister .box .front h2, .twister .box .back h3 {
	color: #FFF;
	background:#514a4a;
	width:90%;
	margin:0;
	padding: 2px 5%;
	text-align: center;
	font-size: 1em;
	bottom: 0;
	position: absolute;
	min-height: 65px;
	height: auto;
}
#main article.twister .box .back h3:after {
	height: 0;
	content: none;
	display: none;
}

#main article.twister .box .back {
	display: block;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 0;
	color: #fff;
	text-align: center;
	background-color: #514a4a;
}

#main article.twister .box .back p {
	color: #fff;
	position: absolute;
	margin: 20px;
}

#main article.twister:hover .box {
	transform: rotateY(180deg);
	box-shadow: -5px 5px 5px #aaa;	
}

#main article.twister .back h2 {
	display:block;
	backface-visibility:visible;
}


/* LOGIN-BEREICH */

#loginabdunkeln {
	display: block;
	width: 100vw;
	height: auto;
	position: fixed;
	z-index: 5000;
}

#loginboxclose {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background-image: url('/img/close.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

#loginbox {
	position: relative;
	padding: 10px;
	box-sizing: border-box;
	width: 350px;
	height: auto;
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

#loginbox label {
	display: inline-block;
	width: 120px;
}

iframe {
	width: calc(100% - 25px);
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0;
	padding: 0;
}

#main article.boxmitiframe {
	margin-left: calc(-4% - 5px);
	width: calc(108% + 10px);
	padding-left: 0;
	padding-right: 0;
}

#medienanalysen_logo {
	position: fixed;
	right: 20px;
	top: 20px;
	width: 250px;
	height: auto;
	z-index: 5000;
}


@media only screen and (min-width: 500px) {

	.gridContainer {
		clear: none;
		float: none;
		margin-left: auto;
		margin-top:0;
		width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		padding-bottom: 200px;
	}


	#main article.sammeln {
		width: 50%;
		float: left;
		min-width: 210px;
		min-height: 300px;
	}


	.leistungencontainer{
		flex-direction: row;
		width: 100%;
	}
	#main article.leistung {
		padding: 15px;
		max-width: 30%;
		flex: 1;
		padding-top: 0;
	}
	
	#main article.leistung h4{
		height: 50px;
	}
	
	
	#main article.leistung h6{
		position: absolute;
		bottom: 0;
		width: calc(100% - 30px);
		text-align: center;
		box-sizing: border-box;
	}
	#main article.leistung h6::before {
		bottom: 15px;
	}
	
	
	/* twisterbox */
	
	#main article.twister {
		overflow: hidden;
		position: relative;
		z-index: 1;
		float: left;
		margin: 0 2% 2% 0;
		padding: 0;
		width: 48%;
	}
	
	#main article.fotobackground {

	}
	
	#main article.fotobackground div {

	}
	
	#main article.fotobackgroundleft {
		background-position: 0 -50px;
	}
	
	#main article.fotobackgroundleft div {
		margin-top: 200px;
	}
	
	
	#logo {
	}
		
	img.logo {
		border:0;
		max-width:300px;
		float:none;
	}
	
	/* BILDER */

	.bildlinks {
		float: left;
		margin: 0 30px 20px 0;
		width: 50%;
	}

	.bildrechts {
		float: right;
		margin: 0 0 20px 30px;
		width: 50%;
	}

	.bildtop {
		float: none;
		margin: 0 auto 20px auto;
		min-width: 200px;
	}
}


@media only screen and (min-width: 800px) {

	#main {
		padding-top: 30px;
		padding-bottom: 50px;
		flex-direction: row;
	}
	
	#main article.fotobackgroundleft {
		background-position: 0 -100px;
	}
	
	/*#main article.box50 {
		flex: 12;
		min-width: 40%;
		max-width: 60%;
	} */

	/* SNAPSLIDER / Testimonials */
	
	.snapslider {
		margin: 0;
		width: 100%;
	}
	.snapslide .snap, #main article.snap {
		position: relative;
		margin: 70px 0 0 0;
		min-width: 300px;
	}
	
	#main article.snapbox {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0 4% 70px 4%;
	}
	
	.snapleft {
		left: -20px;
	}
	
	.snapright {
		right: -20px;
	}
	
	.snaptextcontainer {
		flex: 1;
		padding: 70px 30px 0 0;
		text-align: left;
		min-width: 25%;
		width: 25%;
	}
	
	.snapcontainer {
		flex: 3;
		display: flex;
		min-width: 75%;
		width: 75%;
		max-width: none;
	}
	
	#main article.snap {
		flex: 1;
		min-width: calc(100% / 2);
	}
	
	
	
	/* Schriften */

	h1 {
		font-size:1.9em;
	}

	h2 {
		font-size:1.5em;
	}

	h3 {
		font-size:1.4em;
	}

	h4 {
		font-size:1.2em;
	}

	h5 {
		font-size:1em;
	}
	
	#content_22092 h1 {
		max-width: 700px;
	}
	
	/* BILDER */

	.bildlinks {
		float: left;
		margin: 0 30px 20px 0;
		width: auto;
	}

	.bildrechts {
		float: right;
		margin: 0 0 20px 30px;
		width: auto;
	}

	.bildtop {
	}
	
}

@media only screen and (min-width: 1200px) {

	#main article.snap {
		flex: 1;
		min-width: calc(100% / 3);
	}
	
	/* Fotobackground */
	
	#main article.fotobackground {

	}

	#main article.fotobackground div {
		width: 40%;
		float: right;
		margin-top: 0;
	}
	
	#main article.fotobackgroundleft {
		background-position: left center;
		background-size: 60% auto;
		background-repeat: no-repeat;
		position: relative;
		min-height: 200px;
		padding: 0;
	}

	#main article.fotobackgroundleft div {
		width: 40%;
		float: right;
		margin-top: 0;
	}

	/* NAVIGATION */
	
	#mobilswitch {
		display: none;
	}

	
	nav ul li a,
	nav ul li a:after,
	nav ul li a:before {
	  transition: all .5s;
		text-align: center;
	}
	
	nav ul li::before {
		display: none;
		height: 0;
		width: 0;
	}
	
	nav > ul::before {
	  display: none;
	}
	
	nav > ul:hover li {
	  display: block;
	}
	
	nav{
		display:flex;
		width:100%;
		height: 40px;
		z-index:800;
		padding:0;
		float: none;
		position: inherit;
		margin: 0 auto;
		box-shadow: none;
		/*background: var(--weiss); */
    	min-width: 100%;
	}

	nav ul {
		max-width: 1500px;
		margin: 0 auto;
		top: auto;
    	transform: translate(0, 0);
		
		display: flex;
		justify-content:center;
		flex-direction: row;
		
		position: relative;
	}

	nav ul li {
		display:block;
		float:left;
		width:auto;
		font-size: 100%;
		margin:0;
		padding: 0 30px;
		border-top:none;
		-webkit-transition: all 0.1s ease-in-out;
		-moz-transition: all 0.1s ease-in-out;
		-ms-transition: all 0.1s ease-in-out;
		-o-transition: all 0.1s ease-in-out;
		transition: all 0.1s ease-in-out;
		max-height: 40px;
	}
	
	
		/* SHIFT */
	nav ul li a {
	  position:relative;
	  z-index: 1;
	}
	/*nav ul li a:hover {
		margin-top: -5px;
    	border-bottom: solid white 5px;
	} */
	
	nav ul li ul {
		z-index: 1100;
		width: auto;
		left: 0;
		top: 40px;
		display: block;
		position: absolute;
		visibility:hidden;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		-khtml-opacity: 0.0;
		opacity: 0.0;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		
		margin-left: 0;
		background: var(--weiss);
		box-shadow: 2px 2px 5px 0 rgb(0 0 0 / 50%);
	}


	nav ul li:hover  ul {
		visibility:visible;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		-khtml-opacity: 1.0;
		opacity: 1.0;
	} 
	
	/* Navigation - Submenü */
	
	nav ul ul li a:after {
		display: none;
	}

	nav ul ul li{
		float:none;
		border:none;
		border-bottom:1px solid var(--grau3);
		line-height: 2em;
		background:white;
		border-top: none;
		width: 100%;
		min-width: max-content;
	}

	nav ul ul li a:hover {
		color: var(--grau3);
		font-size: 0.9em;
	}

	nav ul ul li a, 
	nav ul ul li a:visited{
		margin:0;
		text-transform: none;
		line-height: 1.2em;
    	padding: 7px 0;
		color:var(--grau1);
		text-align: left;
		font-size: 0.9em;
	}

	nav ul ul li a:hover {
		color:var(--grau3);
		text-transform: none;
		line-height: 1.2em;
		padding: 7px 0;
	}
	
	nav .subnavi {
		position: absolute;
		top: 0;
		right: 4%;
		left: auto;
	}
	
	input#suche {
		width: 150px;
		margin: 20px;
		position: absolute;
		right: 4%;
		margin: 0;
		top: 60px;
		/*bottom: 50px;
		position: absolute; */
		/*width: 200px;
		top: 250px;
		right: 20px;
		z-index: 999; */
	}

	
	/* NAVIGATION Ende */
	
	
	.gridContainer {
		/*max-width: 1280px;
		margin: auto;
		clear: none;
		float: none;
		margin-left: auto;
		height: auto;
		position: relative; */
	}
	
	/* Header ========================*/
	/*================================*/

	
	
	/* Text & content area styles* ====*/
	/*================================*/
	
	.columns2 , .columns3 {
		-moz-column-count: 2;
		-moz-column-gap: 30px;
		-moz-column-rule: 2px dotted #ccc;
		
		-webkit-column-count: 2;
		-webkit-column-gap: 30px;
		-webkit-column-rule: 2px dotted #ccc;
		
		column-count: 2;
		column-gap: 30px;
		column-rule: 2px dotted #ccc;
		
		-o-column-count: 2;
		-o-column-gap: 30px;
		-o-column-rule: 2px dotted #ccc;
		
		-ms-column-count: 2;
		-ms-column-gap: 30px;
		-ms-column-rule: 2px dotted #ccc;
	}
	
	
	/* VORSCHAU / AKTUELLES auf der STARTSEITE */
	
	#main article.vorschau {
		width: 30.3%;
		float: left;
		padding: 0;

		clear: none;
		min-width: 200px;
		margin: 0 auto;
		
	}




	
	/* Styles fuer article ======================= */
	/* =========================================== */
	

	#main article.sammeln {
		width: calc(33% - 40px);
		min-width: 30%;
    	max-width: 50%;
	}
	
	#main article.box100, #main article {
		margin-left: 0;
	}

	#main article.box75 {
		flex: 18;
		min-width: 65%
	}

	#main article.box66 {
		flex: 16;
		min-width: 56%;
		max-width: 66%;
	}

	#main article.box50 {
		flex: 12;
		min-width: 40%;
		max-width: 60%;
	}

	#main article.box33 {
		flex: 8;
		min-width: 26%;
		padding: 20px 2%;
	}

	#main article.box25 {
		flex: 6;
		min-width: 22%;
		max-width: 33%;
		padding: 10px 5px;
	}
	
	
	
	
	/* twisterbox ======================= */
	/* ================================= */
	
	#main article.twister {
		overflow: hidden;
		position: relative;
		z-index: 1;
		float: left;
		margin: 0 2% 2% 0;
		padding: 0;
		width: 22%;
		height: 200px;
	}
	
	#main article.twister:last-child {
		margin-right: 0;
	}
	
	#main article.twister .box {
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transition: all 1.0s linear;
		-webkit-transition: all 1.0s linaer; 
		box-shadow: -5px 5px 5px #aaa;	
	}
	
	#main article.twister .box .front,
	#main article.twister .box .back {
		width: 100%;
		height: 100%;
		position: absolute;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
			 backface-visibility: hidden;
		-webkit-transition: 0.6s;
			 transition: 0.6s;
		-webkit-transform-style: preserve-3d;
			 transform-style: preserve-3d;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#main article.twister .box .front {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #726c6c;
		z-index: 2;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	
	#main article.twister .box .back {
		display: block;
		transform: rotateY(180deg);
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		background-color: #726c6c;
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
	
	#main article.twister:hover .box {
		-webkit-transform: rotateY(180deg);  
		-webkit-transform-style: preserve-3d;
		-ms-transform: rotateY(180deg);      
		-ms-transform-style: preserve-3d;
		transform: rotateY(180deg);          
		transform-style: preserve-3d;	
		box-shadow: -5px 5px 5px #aaa;	
	}
	
		
	/* FOOTER */
	
	footer {
		display: flex;
	}

	footer article {
		padding: 0 2%;
		margin: 0;
		min-width: 20%;
    	max-width: 25%;
    	box-sizing: border-box;
		border-bottom: none;
	}
	footer article:first-child {
		border-bottom: none;
	}
	footer article:nth-child(2) {
		border-right: 2px solid var(--grau2);

		margin-left: 0;
		padding-right: 20px;
	}


	
	.columns3 {
		-moz-column-count: 3;
		-moz-column-gap: 30px;
		-moz-column-rule: 2px dotted #ccc;
		
		-webkit-column-count: 3;
		-webkit-column-gap: 30px;
		-webkit-column-rule: 2px dotted #ccc;
		
		column-count: 3;
		column-gap: 30px;
		column-rule: 2px dotted #ccc;
		
		-o-column-count: 3;
		-o-column-gap: 30px;
		-o-column-rule: 2px dotted #ccc;
		
		-ms-column-count: 3;
		-ms-column-gap: 30px;
		-ms-column-rule: 2px dotted #ccc;
	
	}
	
}