@charset "UTF-8";
/* CSS Document */
/*geändert in left, vorher center, das war das Problem, dass alle Texte centriert wurden*/

.fixed {
	position: fixed;
}

body	{
	background-color: #FFFFFF;
	text-align: center;
	font-family: "Lucida Grande", Arial, sans-serif;
	margin: 0;
}

/* Schriften */

p	{
	color:#666;
	font-size: 18px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.5em;
}
/*Kleinere Schriftgröße für Fließtext in 2. Spalte*/
p2	{
	color:#666;
	font-size: 16px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.4em;
}

/*Überschriften*/
p21	{
	color:#999;
	font-size: 20px;
	font-style:inherit
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.4em;
}

p3	{
	color:#999;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.2em;
}

p31	{
	color:#FF3B30;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}
/*violett*/
p32	{
	color:#AF52DE;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}

/*grün*/
p33	{
	color:#008000;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}

p4	{
	color:#999;
	font-size: 12px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}

p41	{
	color:#FF3B30;
	font-size: 12px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}

p5	{
	color:#999;
	font-size: 10px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 0.8em;
}


/*Textauszeichnung violett*/

.txtausz {
	color:#AF52DE;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}

/*Textauszeichnung grün*/

.txtausz_gruen {
	color:#008000;
	font-size: 14px;
	font-family: "Lucida Grande", Arial, sans-serif;
	line-height: 1.0em;
}


/* Seiten-Kapitel */
h1	{
	font-family: "Adobe Fangsong", Lucida Grande, Arial, sans-serif;
	color: #999999;
	font-size: 44px;
	line-height: 2em;
	letter-spacing: 0.1em;
}

/*Oberpunkt*/
h2	{
	font-family: "Montserrat-Variable", ../fonts/Montserrat-Variable.ttf;
	color: #666;
	font-size: 36px;
	line-height: 30px;

}
/*Unterpunkt*/
h3	{color: #666;
	font-size: 24px;
}


h4	{
	font-family: "Lucida Grande", Arial, sans-serif;
	color: #666;
	font-size: 18px;

}

/* für NEUE MÄRKTE */
h5	{
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 16px;
	color: #666;
}

h6	{font-family: "Lucida Grande", Arial, sans-serif;
	color: #333;
	font-style: normal;
	font-size: 14px

	background-color:#999999
}

h7	{font-family: "Lucida Grande", Arial, sans-serif;
	color: #666;
	font-style: normal;
	font-size: 12px
}

a	{text-decoration: none;
	color: #36C;
}
a:hover	{color: #999999;
}

itemtext {font-family: "Lucida Grande", Arial, sans-serif;
	color: #666;
	font-style: normal;
	font-size: 14px
}


.feld h2	{
	font-size: 24px;
	color: #09F;
	font-style: normal;
	font-variant: normal;
	font-family: "Lucida Grande", Arial, sans-serif;
}

.feld veranst_Termine	{
	font-size: 36px;
	line-height: 2;
	color: #9999;
	font-style: normal;
	font-variant: normal;
	font-family: "Lucida Grande", Arial, sans-serif;
}


/* Navi */

	#navi-mobile-icon {
		display:none;
	}

	.navi-haupt {
		display: inline-block;
		padding: 0em 1em 0em 1em;
	}

	.navi	{
		text-align: center;
		background-color: #9EDCFF;        /* Hintergrundfarbe für die Navigation */
  		padding: 4px 4px;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  		margin-top: 3px;                        /* Keinen Außenabstand */
	}

	.navi-unter {
		position: absolute;
		left: 0;
		text-align: center;
		width:99.6%;
		background-color: #5CC3FE;
		padding: 4px 4px;                   /* Innenabstand: oben/unten 4px, li/re 0 */
		margin-top: 4px;
		display: none;
		z-index: 100;

	}

	.navi-haupt:hover > .navi-unter {
		display: block;
	}


	.navi a {color: #666;                  /* Schriftfarbe schwarz */
  			text-decoration: none;         /* Unterstreichung entfernen */
  			padding: 4px 12px;
			border-left: #FFF 3px;              /* oben/unten 4px, re/li 8px */
	}
	.navi a:hover	{color: #FFF;
  					background-color: #00F;
	}


	/* Sidebar CSS */
	#sidebar {
		position: fixed;
		right: 0;	/* left: 0 => Linke Seite, right: 0 => rechte Seite */
		top: 0;
		height: 100%;
		width: 65px;
		z-index: 100;
	}

	#s-container {
		position: absolute;
		width: 100%;
		top: 40%;	/* Position der Sidebar */
		background-color: #353b48;
	}

	#s-container ul {
		list-style: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#s-container ul li {
		width: 100%;
		border-bottom: 1px, solid white;
	}

	#s-container ul li:hover {
		background: #40739e;
	}

	#s-container ul li:last-child {
		border-bottom: 0px;
	}

	#s-container ul li span {
		display: block;
		width: 100%;
		padding-top: 100%;
		background-repeat: no-repeat;
		background-size: 75%;
		background-position: 50% 50%;
	}

	/* Icons */
	#icon-anfahrt {
		background: url(sidebar_icons/anfahrt.png);
	}

	#icon-ansprechpartner {
		background: url(sidebar_icons/ansprechpartner.png);
	}

	#icon-email {
		background: url(sidebar_icons/email.png);

	}

	#icon-home {
		background: url(sidebar_icons/sidebar_home.png);

	}

	#icon-datenschutz {
		background: url(sidebar_icons/sidebar_datenschutz.png);
		az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})


	}


	/* Spaltenlayout */
	.wrapper {
		width: 100%;
		position: relative;
		text-align: left;
	}

    .spalte-links {
        display: inline-block;
        width: 69%;
		/*border-right: 1px, solid black;*/
    }

	.spalte-rechts {
		display: inline-block;
		border-left: 1px solid black;
		margin-top: 10em;
		position: absolute;
		width: 29%;
		padding: 1em;
		text-wrap: normal;
	}

	.center {
		text-align: center;
	}

/* div-Boxen */

	/* Seiten Hintergrund */
	.seite	{
		background-color: #FFFFFF;
		max-width: 975px;
		min-width: 640px;
		/* geändert in links, vorher center*/
		padding-top: 10px;
		margin: auto;
		text-align: left;
	}

	.landing-page {
		position: absolute;
		left: 0;
	}


	/*Kopf der Seite für Logo */
.header {height: 120px;
			text-align: center;
	}

	.logo	{
		background-image: url('img/DHA_Logo_Pkt_ZW.png');
		background-size: auto 100%;
		display: inline-block;
		width: 120px;
		height: 120px;
	}



#box1 { position: absolute;
       height: auto; width:200px;
       left: 1200px; top:500px; }



	/* Aktuelles Titelbild_index nur auf den Startseiten verwendet index.html, willkommen.html und willkommen_denkhaus.html*/
.tibild_index_3	{background: url(img/industrie_IMG_1925_975.png);
					max-width: auto;
						height: 550px;
						overflow: hidden;
						background-repeat: no-repeat;
						background-position: 0 0;
						background-size: cover;
	}
	/* Altuelles Bild Industriehalle Ende */
	<!----------------- ->
	/* Test mit Marius-Bild als Header */
	.tibild_index_marius_gray	{background: url(img/herogray.png);
					max-width: auto;
						height: 749px;
						overflow: hidden;
						background-repeat: no-repeat;
						background-position: 0 0;
						background-size: cover;
	}
	.tibild_index_marius_skyscraper	{background: url(img/heroimg.png);
					max-width: auto;
						height: 535px;
						overflow: hidden;
						background-repeat: no-repeat;
						background-position: 0 0;
						background-size: cover;
	}
	/* Test Marius-Bild Ende */

	.tibild_index_2	{background: url(img/way-918900_1920_975.png);
					max-width :975px;
					min-width: 640px;
					height: 492px;
					overflow: hidden;
	}
	.tibild_index	{background: url(img/DENKHAUS_wissen.jpg);
					max-width: 975px;
					min-width: 640px;
					height: 492px;
					overflow: hidden;
	}
	.willkommen_bild	{background: url(img/dha_wissen_schloss_975.png);
						max-width: 975;
						min-width: 640px;
						height: 389px;
						overflow: hidden;
	}
	.willkommen_bild_antwort	{background: url(img/dha_wissen_schloss_975.png);
						max-width: 975;
						min-width: 640px;
						height: 389px;
						overflow: hidden;
	}
	.infobrief_bild	{background: url(img/infobrief_bild.png);
						max-width: auto;
						height: 389px;
						overflow: hidden;
	}
	.rundgang_bild	{background: url(images/denkhaus_ost_kapelle_sonne_1500_150px.jpg);
						max-width: auto;
						height: 550px;
						overflow: hidden;
						background-repeat: no-repeat;
						background-position: 0 0;
						background-size: cover;

	}
	.tibild_emailer	{background:url(Emailer/akademie_fuer_unternehm_zukunft.png);
					max-width: 975px;
					min-width: 640px;
					height: 290px;
					overflow: hidden;
	}
	.themabild_emailer	{background:url(Emailer/mut_komp_gesch.png);
					max-width: 975px;
					min-width: 640px;
					height: 290px;
					overflow: hidden;
	}

	.site_daternschutz_head	{background:url(img/veranstaltung_datenschutz_dsgvo_header.png);
						max-width: 975px;
						min-width: 640px;
						height: 389px;
						overflow: hidden;
	}

	.site_daternschutz_rundum_head	{background:url(img/denkhaus_dsgvo_rundum_dh_header.png);
						max-width: 975px;
						min-width: 640px;
						height: 389px;
						overflow: hidden;
	}

/* ~~ Dies sind die Spalten für das Layout. Aus Vorlage reminder_ihk_bay_schw ~~ */
.sidebar1 {
	float: right;
	width: 235px;
	background: #999;
	padding-bottom: 10px;
	color: #FFF
}


		/*Slogan*/
	div .slogan	{width: auto;
				padding-left: 20px;
				padding-right: 20px;
				margin-left: auto;
				margin-right: auto;
	}

	.txt	{
	float: right;
	text-align: right;
	position: absolute;
	height: auto;
	top: 725px;
	left: 166px;
	overflow: hidden;
	width: auto;
	}

	.tibild_slogan	{
	float: right;

	position: absolute;
	top: 565px;
	left: 366px;
	height: auto;
	overflow: hidden;
	width: auto;
	font-family:"Lucida Grande", Arial, sans-serif;
	color: #FFF;
	font-style: normal;
	font-size: 24px
	}

	/* neue Beiträge anlegen */
	div .feld	{width:auto;
				padding-left: 60px;
				padding-right: 60px;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
				line-height: 190%;
	}
	
	div .einrueck_1	{width:auto;
				padding-left: 75px;
				padding-right: 60px;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
				line-height: 190%;
	}
	
	div .einrueck_2	{width:auto;
				padding-left: 100px;
				padding-right: 60px;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
				line-height: 190%;
	}
	
	div .einrueck_3	{width:auto;
				padding-left: 120px;
				padding-right: 60px;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
				line-height: 190%;
	}
		div .feld_iFrame	{width:100%;
		font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
		font-size: 14px

	}

	div .Absatzgross	{width: auto;
				padding-left: 20px;
				padding-right: 20px;
				margin-left: auto;
				margin-right: auto;
				font-size: 18px;
	}


	/* neuen Button anlegen 10.11.17*/
	div .button	{width:auto;
	text-align:center;
				padding-left: 20px;
				padding-right: 20px;
				margin-left: auto;
				margin-right: auto;
	}

	/* Abbinder für Infobrief*/
	div .impressum {
		background-color: #666;
		color: #FFF;
		font-size: 18px;
		width: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

	div .table	{width:auto; padding-left: 20px;
				padding-right: 20px;
				margin-left: auto;
				margin-right: auto;
	}
}
/* Doppelspalte */
	div .RahmenDoSpa	{
	background: #FFFFFF;
	width: 900px;
	margin: 0px;
	height: auto;

	}
	div .SpaLi {
	background: #FFFFFF;
	width: 50%; height: auto;
	float: left;
	width: 196px;
	height: auto;
	}
	div .SpaRi {
		 "background: #FFFFFF;
		 width: 50%;
		 height: auto;
		 float: right;
	}

	/* Bilder horizontal*/
	figure {
display: table-cell;
padding: 0 4px;
text-align: center
}

/* id */
	/*id zentrieren */
	#center {
	text-align: center;
	}
	/*id links */
	#links {text-align: left;
	}

	/*id rechts */
	#rechts	{text-align: right;
	}

/* Tabellen */

	/*Tabelle normal */
	
	#Tabelle {
	font-size: 11px;
	font-style: normal;
	color: #333333;
}
.Tabelle {
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
}
#links blockquote #links5 blockquote table {
	font-weight: bold;
}
#font table {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}
.Tabelle_inne_14pt {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
}


	/* Formular */
	tabel .formular	{border: 0px;
					width: 480px;
	}
	tr .formular	{height: 55px;
	}
.satz_klein {
	font-size: 14px;
	font-family: "Lucida Grande", Arial,sans-serif;
}
.absatz_groß_24pt {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	color: #666;
	letter-spacing: 15%;
	word-spacing: 15%;
}

.absatz_groß_18pt {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 18px;
	font-style: bold;
	font-weight: bold;
	color: #666;
	letter-spacing: 15%;
	word-spacing: 15%;
	text-align: center;
}
.absatz_groß_24pt_blau {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #06F;
	letter-spacing: 15%;
	text-align: justify;
	word-spacing: 15%;
}

.line {

}

.quad {
	width: 30%;
	padding-bottom: 30%;
	position: relative;
	display: inline-block;
	text-align: center;
}

.quad-content {
	position: absolute;
	width: 100%;
}

.quad-caption {
	margin-bottom: 1em;
}

.quad-text {
	margin-top: 1em;
}
/*von index-Seite denkahus-akadmeie.de*/


  #schrift_im_Bild_weiß {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 16px;
      font-weight: bold;
      color: #FFF;
      text-decoration: blink;
  }
  #schrift_im_bild_weiß_2 {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      color: #FFF;
      text-decoration: blink;
  }
  #weißer_Text_Bild {
      color: #FFF;
  }
  #Erläuterung_Txt {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 10px;
      font-style: normal;
      font-weight: standard;
      color: #FFF;
  }

/*Rahmen um Text */
.Rahmen_um_Text {
	background-colour: #666;
	border-bottom: #999;
	boder-left: #999;
	boder-width: 0 0 thin thin;
	border-style: none none groove groove;

 }


.trennlinie {
	<hr noshade style="background-color: blue; height: 500px; width: 1px;">
}

/* Tooltip index erster Absatz */

	[data-tooltip]:before {
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

/* bootstrap zum Test*/



.carousel{position:relative}

.carousel-inner{position:relative;width:100%;overflow:hidden}

.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}

.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);left:0}

.carousel-inner>.item.active.left,.carousel-inner>.item.prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);left:0}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0}

.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;outline:0;filter:alpha(opacity=90);opacity:.9}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev
{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}

.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}

.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}

.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}
.carousel-control .icon-prev:before{content:"\2039"}.carousel-control .icon-next:before{content:"\203a"}
.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}
.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}
.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6 }
.carousel-caption .btn{text-shadow:none}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}
.carousel-caption{right:20%;left:20%;padding-bottom:30px}
.carousel-indicators{bottom:20px}
<!-- Neu Test für Marius -->
*	Styles for Redeign of Homepage 2022 (by Marius Gebert)
*	Contact: gebert.marius@gmail.com
*
*/


@font-face {
	font-family: "Montserrat", sans-serif;
	src: url('../fonts/Montserrat-Variable.ttf')
}

:root {
	--color-black: #000000;
    --color-grey: #8E8E93;
    --color-grey2: #AEAEB2;
    --color-grey3: #C7C7CC;
    --color-grey4: #D1D1D6;
    --color-grey5: #E5E5EA;
    --color-grey6: #F2F2F7;
    --color-white: #FFFFFF;
    --color-red: #FF3B30;
    --color-orange: #FF9500;
    --color-yellow: #FFCC00;
    --color-green: #34C759;
    --color-mint: #00C7BE;
    --color-teal: #30B0C7;
    --color-cyan: #32ADE6;
    --color-blue: #007AFF;
    --color-indigo: #5856D6;
    --color-purple: #AF52DE;
    --color-pink: #FF2D55;
    --color-brown: #A2845E;
    font-family: 'Montserrat', sans-serif;
}

.landing-page {
	font-family: 'Montserrat', sans-serif;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	z-index: 0;
}
<!-- wurde am 08.03.2022 von KJG geändert - Kollision mit .header oben -->
.header_2 {
	display: flex;
	align-items: center;
	width: 100%;
	margin: auto;
	justify-content: space-between;
	z-index: 1;
	padding: 1rem;
	box-sizing: border-box;
}

.header > .logo {
	font-size: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
}

.header nav a {
	text-decoration: none;
	color: var(--color-black);
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 .5rem;
	font-size: .9rem;
}

.hero-gray {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
}

.hero-img {
	position: absolute;
	top: 50vh;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	max-width: 550px;
	opacity: .5;
}

.hero-title {
	position: absolute;
	top: 40vh;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 80%;
	max-width: 650px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-title h1 {
	text-transform: uppercase;
	font-size: 3rem;
}

.hero-title p {
	text-transform: uppercase;
	font-size: 1.5rem;
	margin-top: 1rem;
}

.introduction {
	margin-top: 90vh;
	margin-bottom: 3rem;
	display: flex;
	gap: 3rem;
}

.introduction h2 {
	font-weight: 500;
}

.introduction p {
	line-height: 1.4rem;
	margin-top: .5rem;
}

.big-picture-section {
	margin-top: 5rem;
}

.big-picture-section img {
	width: 100%;
	border-radius: 1rem;
}

.big-picture-section .texts {
	display: flex;
	gap: 5rem;
	margin-top: 3rem;
}

.texts > div {
	flex: 1;
}

.texts hr {
	border: 1px solid var(--color-black);
}

.texts p {
	line-height: 1.4rem;
	font-size: .9rem;
}

.texts h3 {
	font-weight: 500;
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
}

.blog-content {
	background-color: var(--color-grey6);
	width: 100%;
	margin-top: 5rem;
	padding: 3rem 1rem 5rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.blog-content h1 {
	text-transform: uppercase;
	text-align: center;
}

.article-wrapper {
	display: flex;
	gap: 5rem;
	margin-top: 7rem;
}

.article-image-right {
	flex-direction: row-reverse;
}

.article-wrapper > div {
	flex: 1;
}

.article-wrapper .img-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.article-wrapper .img-wrapper img {
	width: 80%;
	border-radius: .8rem;
	height: auto;
}

.article-wrapper .content-wrapper {
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer {
	background-color: var(--color-black);
	width: 100%;
	padding: 2rem 1rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.footer-links {
	color: var(--color-white);
	display: flex;
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-col {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.footer-links p {
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 1rem;
}

.footer-links a {
	font-weight: 500;
	text-decoration: none;
	color: var(--color-grey4);
	font-size: .8rem;
	margin-bottom: .8rem;
	line-height: 1.1rem;
}

.footer-links a:hover {
	text-decoration: underline;
}

.copyright {
	text-align: center;
	color: var(--color-grey4);
	margin-top: 3rem;
	font-size: .4rem;
}

.copyright a {
	color: var(--color-grey4);
}


/*
*
* GENERAL RUSABLE STYLES
*
*/

.inline-cta {
	color:var(--color-blue);
	font-weight: 500;
}

.cta {
	text-decoration: none;
	color: var(--color-black);
	padding: .7rem 3rem;
	font-size: .9rem;
	border-radius: 99rem;
	border: 1px solid var(--color-black);
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	align-self: flex-start;
	justify-self: flex-start;
	transition: .4s ease all;
}

.cta:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-5 {
	margin-top: 5rem;
}

.mt-10 {
	margin-top: 10rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.container {
  width: 70%;
}

.footnote {
 color: var(--color-grey);
 text-align: center;
}

h3 {
	font-weight: 500;
	line-height: 1.8rem;
}

/*
*  ANPASSUNG AN HANDY
*/
body, .landing-page {
	width: 100vw;
}

@media only screen and (max-width: 900px) {
	.container {
		width: 90%;
	}

	.article-wrapper .img-wrapper img {
		width: 99%;
	}
}
<!-- geändert a 08.03.2022 wegen kollision mit .header
@media only screen and (max-width: 600px) {
	<!--.header {
		justify-content: center;
	} -->

	.article-wrapper {
		flex-direction: column;
		gap: 2rem;
	}

	.header .logo {
		display: none;
	}

	.hero-gray {
		width: 130%;
	}

	.hero-img {
		top: 50vh;
		left: 50%;
		width: 90%;
		opacity: .4;
	}

	.big-picture-section .texts {
		text-align: left;
		flex-direction: column;
		gap: 5rem;
		margin-top: 3rem;
	}

	.big-picture-section .texts h3 {
		font-weight: 500;
		margin-top: 1rem;
		margin-bottom: .5rem;
	}

	.hero-title {
		transform: translate(-50%,-50%);
		width: 90%;
	}

	.introduction {
		flex-direction: column;
		margin-top: 70vh;
	}

	.hero-title h1 {
		text-transform: uppercase;
		font-size: 2rem;
	}

	.hero-title p {
		text-transform: uppercase;
		font-size: 1.3rem;
		margin-top: .5rem;
	}

	.footer-links {
		flex-direction: column;
	}

	.article-wrapper .img-wrapper img {
		width: 95%;
	}
  }


  /*
* Cookie-Banner von Abdullah
*/

/* .u-cookies-consent {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.u-cookies-consent.show {
  display: block;
} */