.flexbox {
  display: flex;
  flex-direction: column; /*Div-Ausrichtung in Spalten/untereinander anordnen */
}

.flexbox > .flex-item {
  background: #eee; 
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #ccc;
}

.flexbox > .flex-item > .flex-img {
  width: 45%;
}

.flexbox > .flex-item > .flex-img  > img{
  width: 100%;
  border: 10px solid #fff;
}

.flexbox > .flex-item > .flex-txt {
  width: 55%;
  padding: 1rem;
  overflow:auto;
}

.flexbox > .flex-item > .flex-txt > h2 {
  margin-top: 0;
}

table.projekt-table {
	border-collapse:collapse;
	margin: 0rem 0 3rem;
}

table.projekt-table td {
	padding: 0.25rem 0 0.25rem 0.75rem;
	
}

table.projekt-table tr td:first-child {
	font-weight: 500;
	padding-right: 1rem;
}

.flexbox > .flex-item > .btn > .p-btn {
	padding: 0.5rem;
	border: 1px solid #ccc;
	background: #dfdfdf;
	color: #555;
	text-decoration:none;
	margin: 0 auto 0; 
}

.flexbox > .flex-item > .btn {
	order: 3;
	display:block;
	padding: 2rem;
	margin: auto;
}

.flexbox > .flex-item > .btn > .p-btn:hover {
	background: #fff;
}

/* Jedes zweite Element Ausrichtung tauschen */
.flexbox > .flex-item:nth-of-type(even) > .flex-img {
  order: 2; /*Erstes Div wird an zweite Stelle geschoben */
}

.flexbox > .flex-item:nth-of-type(even) > .flex-txt {
  order: 1; /*Zweites Div wird an erste Stelle geschoben */
}


.projektdetail-kopf {
	 
  margin-bottom: 2rem;
  
}

.projektdetail-kopf img{
	border: 10px solid #eee;
}

.projektdetail-text {
	background: #eee; 
  margin-bottom: 3rem;
  padding: 2rem;
  overflow:auto;
}

.projektdetail-titel h1 {
	font-size: 1.625rem;
}


/* Wenn der Viewport kleiner ist als 600px, Elemente untereinander anzeigen und Ausrichtung wieder zurücktauschen */
@media screen and (max-width: 700px){
  .flexbox > .flex-item {
    flex-direction: column;
	border: 2px solid #ccc;
  }

  .flexbox > .flex-item > .flex-img,
  .flexbox > .flex-item > .flex-txt  {
    width: 100%;
	font-size:14px;
  }
  .flexbox > .flex-item > .flex-txt > h2 {
	font-size: 1rem;
  }

  .flexbox > .flex-item:nth-of-type(even) > .flex-img {
    order: 1;
  }

  .flexbox > .flex-item:nth-of-type(even) > .flex-txt {
    order: 2;
  }
  
  .projektdetail-kopf {
	 
  font-size:14px;
  margin-bottom: 0;
  
}
  
  .projektdetail-text {
	font-size:14px;
	padding: 1rem;
}

.projektdetail-titel h1 {
	font-size: 1.1rem;
}

}


.projektmainimg {
	width: 100%;
}