/*  Ein Kommentar in CSS */

/*  
	Der * definiert eine globale Variable.
	Den sogenannten "global reset".
	Hier werden alle Elemente angesprochen, die später nicht anders definiert werden. 
	Früher verwendet um die verschiedenen Browser Versionen auf den gleich Standard zu bringen. 
	Oft wird auch heute noch, besonders bei Word Press Templates oder bei Bootstrap eine normalize.css eingesetzt, die dies für ALLE html Elemente durchführt.

	In diesem Fall werden zwei Sachen erreicht:
	margin und padding  werden auf 0 zurück gesetzt, um dann diese Eigenschaften mit eigenen Werten zu versehen.
	Die Schrifttype wird mit font-family auf eine Standard Schrift eingestellt. So wird erreicht, dass IMMER ALLE Schriften denselben font haben. Sollten später z.B, Überschriften davon abweichen, müssen sie gesondert definiert werden.
	Und einige Eigenschaften werden global definiert, um sie später nicht immer wieder einsetzen zu müssen.
	Dies ist selbstverständlich komplett optional und kann jederzeit gelöscht oder verändert werden.
*/
*



{
/* margin definiert den Aussenabstand einer Box */	
	margin:0px;	
/* padding definiert den Innenabstand einer Box */
	padding:0px;
/* font-family definiert die Schriftart */	
	_font-family:sans-serif;
/* position:relative definiert die Startposition einer Box */	
	position:relative;
/*  box-sizing:border-box definiert das padding und border NICHT zu Breite und Höhe dazu addiert werden  */	
	box-sizing:border-box;
}



@font-face 
	{
    font-family:Alumni Sans Xlight;
    src: url(../fonts/Alumni_Sans/AlumniSans-ExtraLight.ttf);
	}


	@font-face 
	{
    font-family:Alumni Sans Reg;
    src: url(../fonts/Alumni_Sans/AlumniSans-Regular.ttf);
	}

	@font-face 
	{
    font-family:Alumni Sans Blck;
    src: url(../fonts/Alumni_Sans/AlumniSans-Black.ttf);
	}


@font-face 
	{
    font-family:DxSlight;
    src: url(../fonts/DxSlight-MediumUltra\ -\ Free\ Personal\ Use.otf);
	}


/* CURSOR START CURSOS START CURSOR START CURSOR START */	
	@media ( hover: none ) {
	  .cursor {
		display: none !important;
		}
	  }
	* {
	  cursor: none;
	
	  }
	.cursor {
	  --size: 10px;
	
	  height: var( --size );
	  width: var( --size );
	  position: relative;
	
	  border-radius: 50%;
	  pointer-events: none;
	  position: absolute;
	  transform: translate( -380%, -220% );
	  z-index: 99999999999;
	
	  }


	.cursor.cursor-dot {
	  background: #FF77D9; /* This defines the color of the cursor */
	  mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */
	  _transition: width 0.6s, height 0.6s, background-color 0.6s;
	  transition-timing-function: ease-out;
	
	  }
	.cursor-dot.active {
	  --size: 50px;
	  background-color: #FF77D9;
	  position: absolute;
	  transform: translate( -100%, -90% );
	  }
	
/* CURSOR ENDE CURSOS ENDE CURSOR ENDE CURSOR ENDE */	



html,body
{
	height:100%;
	scroll-behavior:smooth;
}

body 
{
	background:#1e1e1e;
	color:#d2d2d2;
	margin: 20px 30px 0px 30px;	
}

/* ANFANG NOISY BG ANFANG NOISY BG ANFANG NOISY BG */	
.bg {
	position: fixed;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	width: 200%;
	height: 200vh;
	background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
	background-repeat: repeat;
	animation: bg-animation .2s infinite;
	opacity: .9;
	visibility: visible;
  }
  
  @keyframes bg-animation {
	  0% { transform: translate(0,0) }
	  10% { transform: translate(-5%,-5%) }
	  20% { transform: translate(-10%,5%) }
	  30% { transform: translate(5%,-10%) }
	  40% { transform: translate(-5%,15%) }
	  50% { transform: translate(-10%,5%) }
	  60% { transform: translate(15%,0) }
	  70% { transform: translate(0,10%) }
	  80% { transform: translate(-15%,0) }
	  90% { transform: translate(10%,5%) }
	  100% { transform: translate(5%,0) }
  }
/* ENDE NOISY BG ENDE NOISY BG ENDE NOISY BG */


#navi
{
	z-index: 1;
}

#logo
{
	float: left;
	width: 10%;
	_background: #E3E3E3;
	margin-bottom: 10px;
}

#menue
{
	font-family:DxSlight;
	text-align: end;
	font-size: 150%;
	background: lawngreen;

}

ul
{
	width: 80%;
	_background: violet;
	float: right;
	}

li
{
	_padding:10px;
	margin: 10px;
	display:inline-block;
	color: rgb(224, 224, 224);

}

/* DROPDOWN PORTFOLIO  DROPDOWN PORTFOLIO  DROPDOWN PORTFOLIO  DROPDOWN PORTFOLIO */ 
/* Dropdown Button */
.dropbtn {
	color: d2d2d2;
	padding: 16px;
	_font-size: 16px;
	border: none;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #2D2D2D;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: left;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
	color: rgb(224, 224, 224);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #FF77D9; color: #2D2D2D;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */

/* DROPDOWN PORTFOLIO ENDE DROPDOWN PORTFOLIO ENDE DROPDOWN PORTFOLIO ENDE */ 



.off-screen-menu
{
	display: none;
}

#erstezeile, #zweitezeile, #kategorien
{
	font-family:DxSlight;
	letter-spacing: 2px;
	text-transform: uppercase;
}


#hey
{
	float: left;
	_background: blue;
	width: 20%;
}

.highlight
{
	color: #FF77D9;
}

#christina
{	
	float: right;	
	_background: khaki;
	width: 80%;
	text-align: right;
}

#christinamobile
{
	display: none;
}


#erstezeile
{
	font-size: 950%;
	_width: 100%;
	clear: both;
	padding-top: 30px;
	_background: aliceblue;
}

#zweitezeile
{
	font-size: 350%;
	_width: 100%;
	background: darkcyan;

}


#artist
{ 
	_background: green;
	width: 25%;
	padding-top: 270px;
	float:left;
}

#workgif
{
	float: left;
	_color: aquamarine;	
	padding-top: 53px;
	max-width: 100%;
}

#workgiftablet
{
	display: none;
}

#webdesign
{
	float:right;
	text-align: end;
	width: 50%;
	_background: blueviolet;
	padding-top: 270px;
}


#zweitezeiletablet, #zweitezeilemobile, #ichbinmobile
{display: none;}

#kategorien
{
	width: 100%;
	_float: right;
	_background: firebrick;
	display: flex;
	_justify-content: flex-end;
	align-items: center;
	list-style: none;
	padding-right: 110px;
	padding-top: 60px;
	padding-bottom: 50px;
}

#arrow
{
	padding-right: 40px;
}

.webprint
{
	padding-right: 40px;
	font-size: 150%;
	text-decoration: underline 2px #FF77D9;
}





/* EDITORIAL DESIGN START EDITORIAL DESIGN START EDITORIAL DESIGN START EDITORIAL DESIGN START */

#leer
{
	padding: 60px 0 60px 50px;
}

#headline
{
	font-size: 300%;
	_background: aqua;
	font-family:DxSlight;
	_display: flex;
	_justify-content: space-between;
	clear: both;
	border-bottom: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
}

#editorialdesign
{
	display: flex;
	border-bottom: 1px solid #d2d2d2;
	padding: 6px 0 5px 0;
	_margin-top: 200px;
}

#arrowdown
{
	margin-left: 250px;
	margin-top: 10px;
	position: absolute;
}

#arbeit
{
	text-align: end;
	padding: 6px 0 5px 0;
}



/* START PROJEKT 1 EDITORIAL START PROJEKT 1 EDITORIAL START PROJEKT 1 EDITORIAL */

#projektcases
{	position: relative;
	width:100%;
	height: auto;
	margin-bottom: 430px;
}

.projektcasezwei, .projektcasedrei, .projektcasevier, .projektcasefuenf, .projektcasesechs 
{
	margin-top: 55%;
}



#projektnamenavi
{
  _background: wheat;
  margin-top: 45px;
  align-items: center; 
  display: flex;
}


#projektname
{
	font-family:Alumni Sans Xlight;
	margin-right: 8px;
	padding-top: 6px;
	float: left;
	_background: lavenderblush;
}


.slideshow, .slideshow-zwei, .slideshow-drei, .slideshow-vier, .slideshow-fuenf, .slideshow-sechs {
	background-color: #2D2D2D;
	width: 100%;
	height: auto;
	position: relative;
}


.slide, .slide-zwei, .slide-drei, .slide-vier, .slide-fuenf, .slide-sechs {
	position: absolute;
	width: 100%;
	height: auto;
	_background-color: green;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.4s;
}



.slide-bild {
	width: 100%;
	height: auto;
	_min-height: 500px;
	object-fit: cover;
	border: 1px solid rgb(224, 224, 224); border-radius: 8px;
}

.pfeil {
	position: absolute;
	top: 0;
	bottom: 0;
	display: inline-block;
	justify-content: center;
	_margin: 2%;
	_margin-top: 45%;
	opacity: 0;
}

.pfeilzwei, .pfeildrei, .pfeilvier, .pfeilfuenf, .pfeilsechs {
	position: absolute;
	top: 0;
	bottom: 10;
	display: inline-block;
	justify-content: center;
	opacity: 0;
}


.pfeil img, .pfeilzwei img, .pfeildrei img, .pfeilvier img, .pfeilfuenf img, .pfeilsechs img {
   	width: 33vw; /* Breite relativ zur Ansichtshöhe */
	height: auto;
	min-height: 400px;
	_width: clamp(10vw, 33vw, 33px);
}


.pfeil-links img, .pfeil-links-zwei img, .pfeil-links-drei img, .pfeil-links-vier img, .pfeil-links-fuenf img, .pfeil-links-sechs img {
	cursor: url(/images/Cursoe_zurueck.png), auto !important;
}

.pfeil-rechts img, .pfeil-rechts-zwei img, .pfeil-rechts-drei img, .pfeil-rechts-vier img, .pfeil-rechts-fuenf img, .pfeil-rechts-sechs img {
	cursor: url(/images/Cursoe_weiter.png), auto !important; 
}

.pfeil:hover {
	_color:#000000;
	opacity: 0;
}

.pfeil-links, .pfeil-links-zwei, .pfeil-links-drei, .pfeil-links-vier, .pfeil-links-fuenf, .pfeil-links-sechs {
	left:0;
}

.pfeil-rechts, .pfeil-rechts-zwei, .pfeil-rechts-drei, .pfeil-rechts-vier, .pfeil-rechts-fuenf, .pfeil-rechts-sechs {
	right: 0;
}



.indikatorenliste, .indikatorenliste-zwei, .indikatorenliste-drei, .indikatorenliste-vier, .indikatorenliste-fuenf, .indikatorenliste-sechs {
	_position: absolute;
	font-size: 40px;
	display: flex;
	_background: #b8439a;
	height: 50px;
	_padding: 0;
	_background: green;
	margin-bottom: 6px;
}


.indikator, .indikator-zwei, .indikator-drei, .indikator-vier, .indikator-fuenf, .indikator-sechs {
	user-select: none;
	color: #FF77D9;
	opacity: 0.3;
	transition: opacity 1s;
	margin-right: -5px;
	_background: green;
}

.aktiv {
	opacity: 1;
}



.slide-textbereich {
	position: absolute;
	left: 6%;
	right: 5%;
	bottom: 0;
	top:10%;
	_margin-left: 40px;
}

p{
	font-family: Alumni Sans Reg;
	_font-size: 20px;
	line-height: 135%;
}

#jobbeschreibung
{	
	display: flex;
	font-size: clamp(15px, 2vw, 23px);
}

#erklaerung
{
	width: 60%;
	margin-right: 40px;
	_background: rebeccapurple
}

#beteiligung
{
	width: 40%;
	_background: yellow;
}

.beteiligung
	{
		font-family: Alumni Sans Blck;
	}

h1{
	font-family:DxSlight;
	margin-bottom: 20px;
	font-size: 13vw;
}


/* ENDE PROJEKT 2 EDITORIAL ENDE PROJEKT 2 EDITORIAL ENDE PROJEKT 2 EDITORIAL */
/* EDITORIAL DESIGN ENDE EDITORIAL DESIGN ENDE EDITORIAL DESIGN ENDE EDITORIAL DESIGN ENDE */



#pfeilrauf
{	
	_float: right;
}

#arrowup
{
	display: flex;
	margin-top: 55%;
	justify-content: center;
}


/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */

#letzterpart
{
	margin-bottom: 80px;
}

#kontaktzeile
{	display: flex;
	justify-content: space-between;
	padding-top: 65px;
	font-size: x-large;
}

#mail, #linkedintext
{	
	color: #FF77D9;
	font-family:DxSlight;
	font-size: 10vw;
	text-align: center;
	margin-top: 50px;
}

#impressum
{
	font-family: Alumni Sans Reg;
}

#footer
	{
		display: flex;
		justify-content: space-between;
		font-size: x-large;
		margin-bottom: 30px;
	}

/* FOOTER ENDE FOOTER ENDE FOOTER ENDE FOOTER ENDE FOOTER ENDE FOOTER ENDE FOOTER ENDE */



/* ABOUT START ABOUT START ABOUT START ABOUT START ABOUT START ABOUT START ABOUT START */

#zweikachelnoben
{
	_background: lawngreen;
	display: flex;
}

#zweikachelnunten
{
	_background: #af9393;
	display: flex;
	margin-top: 15px;
}
.herz
{
	padding-top: 42px;
}
.kachel {
    font-family: DxSlight;
    text-align: center;
    border: 1px solid #FF77D9; 
    border-radius: 8px;
    padding: 45px;
    margin-right: 10px;
    flex: 1; /* Kacheln passen sich der verfügbaren Breite an */
}

	.kachel:hover {
		transform: rotate(5deg) !important;
		transition: all 0.2s ease-in-out !important;
	  }
	  
	  .kachel {
		transition: all 0.2s ease-in-out !important;
	  }

#vierkacheln {
	width: 100%;
	height: auto;
}

#kachelnportrait
{
	width: 100%;
	height: auto;
	display: flex;
}
#ersterpart
{
	display: flex;
	width: 100%;
	height: auto;
	justify-content: center;
	padding-right: 10px;
}

#portrait
{
	width: 100%;
	height: auto;
	margin-right: 35px;
	_border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	_align-items: center;
	object-fit: cover;
}

#portrait:hover {
	transform: rotate(5deg) !important;
	transition: all 0.2s ease-in-out !important;
  }
  
  #portrait {
	transition: all 0.2s ease-in-out !important;
  }

#informationen
{
	font-size: x-large;
}

#adobe, #figma, #aftereffects, #html 
{
	border-bottom: #FF77D9 solid 1px;
	padding: 10px 0 10px 0;
	font-family: Alumni Sans Reg;
}

#ich
{	margin-bottom: 20px;}


/* Container styles */
.scrolling-text-container {
	margin-top: 100px;
    overflow: hidden;
	border-bottom: #FF77D9 1px solid;
	border-top: #FF77D9 1px solid;

}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
	font-family: DxSlight;
    font-size: 2em;
    padding: 19px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 50px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}


/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-10%);
    }
	100% {
        transform: translateX(-50%); /* Scrollt eine halbe Breite, sodass der Inhalt nahtlos wiederholt wird */
    }
}

.herzkopf {
	margin-top: 10px;
}

#saetze
{
	margin-top: 90px;
	display: flex;
	justify-content: center;
}

#ichsaetze
{
	font-family: DxSlight;
	margin-right: 20px;
	font-size: 30px;
}

#allesaetze
{	font-family: Alumni Sans Reg;
	font-size: x-large;
}

#bildschirm
{
	width: 100%;
	height: auto;
	margin-top: 30px;
}


/* ABOUT ENDE ABOUT ENDE ABOUT ENDE ABOUT ENDE ABOUT ENDE ABOUT ENDE ABOUT ENDE */




/* KONTAKT START KONTAKT START KONTAKT START KONTAKT START KONTAKT START KONTAKT START */

#kontakthej
{
	_background: #af9393;
	text-align: center;
	border-bottom: #FF77D9 solid 1px;
	padding-bottom: 30px;
	color:  #FF77D9;
	font-family: DxSlight;
	font-size: 10vw;
	margin-bottom: 100px;
}

/* KONTAKT ENDE KONTAKT ENDE KONTAKT ENDE KONTAKT ENDE KONTAKT ENDE KONTAKT ENDE */


/* IMPRESUM START IMPRESUM START IMPRESUM START IMPRESUM START IMPRESUM START */

#impressumsite
{
	font-size: larger;
	margin-bottom: 100px;
}

/* IMPRESUM ENDE IMPRESUM ENDE IMPRESUM ENDE IMPRESUM ENDE IMPRESUM ENDE */



a
{
	color:#d2d2d2;
	text-decoration:none;
}








/* MEDIA QUERY TABLET MEDIA QUERY TABLET MEDIA QUERY TABLET */
@media (min-width: 601px) and (max-width: 1060px) {
	/* Styles für Tablets */


	body {
	  _font-size: 18px;
	}

	.off-screen-menu
	{
		display: none;
	}

	#zweitezeile 
	{
		display: none;
	}

	#zweitezeiletablet
	{	
		display:block;
		font-family:DxSlight;
		font-size: 45px;
		float: left;
		width: 100%;
	}

	#kategorien
	{
		float: right;
		_background: salmon;
		width: 60%;
		padding-top: 150px;
		padding-bottom: 100px;
		padding-left: 10px;
	}

	#workgiftablet
	{
	display: block;
	float:left;
	width: 40%;
	padding-top: 30px;
	_background: lawngreen;
	padding-bottom: 100px;
	}

	.slide-bild {
		min-height: 400px;
	}

	.slide-bild {
		_height: 400px;
	}

	.slide-zwei.video {
		height: 400px;
	}

		/* ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT START START START */

		#ersterpart {
			flex-direction: column;
		}
		
	
		#kachelnportrait
		{
			_flex-direction: row;
			_flex-wrap: nowrap;
		}
		#ich
		{
			margin-top: 40px;
		}
  }

/* MEDIA QUERY TABLET MEDIA QUERY TABLET MEDIA QUERY TABLET */







/* MEDIA QUERY MOBILE MEDIA QUERY MOBILE MEDIA QUERY MOBILE */
  @media (max-width: 600px) {
	/* Styles für mobile Geräte */
	body {
	  font-size: 16px;
	}

	#menue
	{
		display: none;
	}



	/* BURGER MENUE BURGER MENUE BURGER MENUE */
/* off-screen-menu */
.off-screen-menu {
	z-index: 1;
    background-color:  rgb(45, 45, 45);
    height: 100vh;
    width: 100%;
    max-width: 450px;
    position: fixed;
    top: 0;
    right: -450px;
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    text-align: center;
    font-size: 4rem;
    transition: .3s ease;
	font-family:DxSlight;
}
.off-screen-menu.active {
    right: 0;
}



/* nav */
nav {
	z-index: 2;
    padding: 1rem;
    display: flex;
    background-color: rgb(1e1e1e);

}



/* ham menu */
.ham-menu {

    height: 50px;
    width: 40px;
    margin-left: auto;
	margin-top: -10px;
    position: relative;
}
.ham-menu span {
    height: 5px;
    width: 100%;
    background-color: #b8439a;
    border-radius: 25px;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
.ham-menu span:nth-child(1) {
	
    top: 25%;
}
.ham-menu span:nth-child(3) {
	
    top: 75%;
}
.ham-menu.active span {
	
	background-color: rgb(FF77D9);
}
.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2) {
    opacity: 0;
}
.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
	/* BURGER MENUE ENDE BURGER MENUE ENDE BURGER MENUE ENDE */



	
	#hey
	{
		width: 100%;
		font-size: 200%;
		_background: red;
		margin-bottom: -80px;
	}
	#christina
	{
		display: none;
		_width: 50%;
		_font-size: 50%;
		_margin-right: 20px;
	}

	#ichbinmobile
	{
		display: block;
		text-transform: uppercase;
		width: 100%;
		font-size: 80px;
		font-family:DxSlight;
		_background: darkcyan;
		margin-left: 5px;
		margin-bottom: -13px;
	}

	
	#christinamobile
{
	display: block;
	text-align: end;
	font-family:DxSlight;
	text-transform: uppercase;
	width: 100%;
	font-size: 80px;
}
	#zweitezeile
	{
		display: none;
	}

	#zweitezeilemobile
	{
		display: block;
		font-family:DxSlight;
		letter-spacing: 1px;
		text-transform: uppercase;
		width: 100%;
		font-size: 19px;
		margin-left: 5px;
		margin-bottom: 20px;
	}
	.slide-bild {
		height: 400px;
	}

	.slide-zwei.video {
		height: 400px;
	}

	.mobileslide {
		content: url(/images/mockup_aida_magazin_innen_600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslideib {
		content: url(/images/ib_mockup_innen_linien_600x600px_mobile.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.mobileslideibvideo {
		content: url(/images/AIDA\ Katalog\ Vorstellungsvideo-600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
		}

	.mobileslideaidakatalog {
		content: url(/images/Mockup_AIDA_Katalog_Cover_600x600_mobile.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslidekataloginnen{
		content: url(/images/mockup_aida_katalog_innen_600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslideasien {
		content: url(/images/mockup_asien_innen_600x600_mobile.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslidearosagif{
		content: url(/images/mockup_arosa_einstimmer_600x600px_mobile.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslidearosainnen{
		content: url(/images/arosa_mockup_innen_linien_600x600_mobile.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}



	
	/* WEBDESIGN START WEBDESIGN START WEBDESIGN START WEBDESIGN START */

	.mobileslidebanzaidesktop{
		content: url(/images/banzai-desktop-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.mobileslidebanzaigif
	{
		content: url(/images/banzai-loopgif-600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.mobileslidebanzaimobile
	{
		content: url(/images/banzai-mobile-mockup-600x600-1.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.inspivorstellungsvideomobile
	{
		content: url(/images/AIDA-Inspi-Vorstellungsvideo-600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.mobileslideinspidesktop
	{
		content: url(/images/aidainspi-desktop-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}
	.mobileslideinspimobile{
		content: url(/images/aidainspi-mobile-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;
	}

	.luckytatvorstellungsvideomobile
	{
		content: url(/images/lucky-tat-vorstellungsvideo-600x600.gif);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;		
	}
	.mobileslideluckytatwebsite
	{
		content: url(/images/luckytat-desktop-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;	
	}

	.mobileslidefuckvegans
	{
		content: url(/images/Fck-Vegans-App-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;	
	}
	
	.mobileslidefuckvegansux
	{
		content: url(/images/Fck-Vegans-App-UX-mockup-600x600.jpg);
		height: 400px;
		object-fit: cover;
		border: 1px solid rgb(224, 224, 224); border-radius: 8px;	
	}

	/* WEBDESIGN ENDE WEBDESIGN ENDE WEBDESIGN ENDE WEBDESIGN ENDE */





	/* ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT START START START */

	#ersterpart {
		flex-direction: column;
		margin-top: -70px;
	}
	
	#kachelnportrait, #portrait {
		flex-direction: column;
	}
	
	#portrait {
		margin-left: 0; /* Kein Abstand mehr bei mobiler Ansicht */
		margin-top: 20px;
	}

	#ich
	{
		margin-top: 20px;
	}

	#vierkacheln
	{
		display: none;
	}

	#bildschirme
	{
		display: none;
	}
}







/* MEDIA QUERY MOBILE MEDIA QUERY MOBILE MEDIA QUERY MOBILE */