@charset "UTF-8";
@font-face {
  font-family: robotoRegular;
  src: url("/fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: robotoBold;
  src: url("/fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: robotoBlack;
  src: url("/fonts/Roboto-Black.ttf");
}
@font-face {
  font-family: robotoItalic;
  src: url("/fonts/Roboto-Italic.ttf");
}
@font-face {
  font-family: robotoConBold;
  src: url("/fonts/RobotoCondensed-Bold.ttf");
}
@font-face {
  font-family: robotoConBlack;
  src: url("/fonts/RobotoCondensed-Black.ttf");
}
/* ------------------------------------------------ */
* {
  margin: 0px;
  padding: 0px;
}
body {
  min-height: 100vh;
  background-image: url("bilder/hgr1px.png");
}
p {
  font-family: roboto, sans-serif;
  font-size: clamp(15px, 1vw, 30px);
line-height: 1.2;
}
.topmenu {
  background-image: url("bilder/hgr1px.png");
}
/*------------------Navigation----------------*/
nav ul {
  position: fixed;
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
nav li {
  height: 85px;
}
nav a {
  height: 100%;
  padding: 0 30px;
  margin-top: 0px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: rgb(17, 128, 108);
  font-family: roboto, sans-serif;
  font-size: clamp(15px, 1vw, 30px);
}
nav a:hover {
  /*background-color: #f0f0f0;*/
  color: black;
}
nav img {
  width: 13px;
  height: 13px;
  margin-right: 10px;
  /*display: flex;*/
}
/*.linieHauptnav{
	position: relative;
	height: 10px;
	background-color: aqua;
	border-bottom: dotted 2px black;
}*/
/*----------------------sidebar - Einblendmenü---------------------*/
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 200px;
  z-index: 999;
  background-color: rgba(209, 209, 209, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sidebar li {
  width: 100%;
  height: 30px;
  padding: 0 10px;
}
.sidebar a {
  width: 100%;
  margin-left: -10px;
}
.sidebar img {
  width: 13px;
  height: 13px;
}
.sidebar li:first-child {
  margin-left: 0px;
  margin-top: 10px;
}
/*----------------------Logo links oben---------------------*/
.logo {
  position: fixed;
  top: 20px;
  left: 20px;
  height: 77px;
  width: 81px;
  z-index: 995;
  /*background-color:bisque;*/
  padding-top: 0px;
  padding-left: 0px;
  margin-top: 0px;
  margin-left: 0px;
  display: block;
  /*flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;*/
}
.sizelogo {
  height: 80%;
  width: 80%;
}
/*-----------------------Bereich Seite "Index"--------------------------------------*/
/*----------------------------------------------------------------------------------------*/
/*----------------------Platzhalter unter Navigationsleiste---------------------*/
.placeholder {
  width: 100%;
  height: 50px;
  margin-bottom: 100px;
}
/*----------------------Haupt-Container für Content-----------------------------------------*/
.maincontainer {
  width: 100%;
  position: static;
  z-index: 995;
}
/*-----------------------------------Bild auf Indexseite---------------------*/
.center {
  margin-top: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 70%;
}
/*----------------Ausblenden des Hamburgersymbol im Bereich Navigationsleiste----------------*/
.menu-button {
  display: none;
}
/*-----------------------Bereich Seite "Werkgruppen"--------------------------------------*/
/*------------------------------Werkgruppe 1 Objekte----------------------------------------------*/
.maincontainerWerkgruppe {
  margin-left: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 230px);
  grid-template-rows: repeat(auto-fit, 249px);
  gap: 15px;
  justify-content: center;
}
.headline {
  margin-top: -20px;
  margin-bottom: 20px;
  margin-left: 30px;
}
.headline h1 {
  text-align: center;
  color: rgba(17, 128, 108, 1.00);
}
.linienabdeckung {
  height: 15px;
  /*background-color: aqua;*/
  margin-left: 28px;
}
.abdeckflaeche {
  height: 100%;
  background-image: url("bilder/hgr1px.png");
  width: 150px;
  margin: auto;
}
.containertrennlinie {
  margin-left: 31px;
  margin-bottom: -13px;
}
.trennlinie {
  border-bottom: 3px dotted rgba(17, 128, 108, 1.00);
  width: 400px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin: auto
}
/*----------------------------------------------Werkgruppe 2 Assemblagen -----------------------------*/
.headline2 {
  margin-top: -25px;
  margin-bottom: 30px;
  margin-left: 30px;
}
.headline2 h1 {
  text-align: center;
  color: rgba(17, 128, 108, 1.00);
}
.maincontainerWerkgruppe2 {
  margin-left: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 230px);
  grid-template-rows: repeat(auto-fit, 249px);
  gap: 15px;
  justify-content: center;
}
.linienabdeckung2 {
  height: 15px;
  /*background-color: aqua;*/
  margin-left: 28px;
  margin-top: -10px;
}
.abdeckflaeche2 {
  height: 100%;
  /*background-color: darkkhaki;*/
  background-image: url("bilder/hgr1px.png");
  width: 230px;
  margin: auto;
}
.containertrennlinie2 {
  margin-left: 31px;
  margin-top: 80px;
  margin-bottom: 0px;
}
.trennlinie2 {
  border-bottom: 3px dotted rgba(17, 128, 108, 1.00);
  width: 400px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin: auto
}
/*----------------------------------------------Werkgruppe 3 Malerei -----------------------------*/
.headline3 {
  margin-top: -25px;
  margin-bottom: 30px;
  margin-left: 30px;
}
.headline3 h1 {
  text-align: center;
  color: rgba(17, 128, 108, 1.00);
}
.maincontainerWerkgruppe3 {
  margin-left: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 230px);
  grid-template-rows: repeat(auto-fit, 249px);
  gap: 15px;
  justify-content: center;
}
.linienabdeckung3 {
  height: 15px;
  /*background-color: aqua;*/
  margin-left: 28px;
  margin-top: -10px;
}
.abdeckflaeche3 {
  height: 100%;
  /*background-color: darkkhaki;*/
  background-image: url("bilder/hgr1px.png");
  width: 150px;
  margin: auto;
}
.containertrennlinie3 {
  margin-left: 31px;
  margin-top: 80px;
  margin-bottom: 0px;
}
.trennlinie3 {
  border-bottom: 3px dotted rgba(17, 128, 108, 1.00);
  width: 400px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin: auto
}
/*----------------------------------------------Werkgruppe 4 Zeichnungen -----------------------------*/
.headline4 {
  margin-top: -25px;
  margin-bottom: 30px;
  margin-left: 30px;
}
.headline4 h1 {
  text-align: center;
  color: rgba(17, 128, 108, 1.00);
}
.maincontainerWerkgruppe4 {
  margin-left: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 230px);
  grid-template-rows: repeat(auto-fit, 249px);
  gap: 15px;
  justify-content: center;
}
.linienabdeckung4 {
  height: 15px;
  /*background-color: aqua;*/
  margin-left: 28px;
  margin-top: -10px;
}
.abdeckflaeche4 {
  height: 100%;
  /*background-color: darkkhaki;*/
  background-image: url("bilder/hgr1px.png");
  width: 230px;
  margin: auto;
}
.containertrennlinie4 {
  margin-left: 31px;
  margin-top: 80px;
  margin-bottom: 0px;
}
.trennlinie4 {
  border-bottom: 3px dotted rgba(17, 128, 108, 1.00);
  width: 400px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin: auto
}
/*----------------------------------------------Werkgruppe 5 Mischtechnik -----------------------------*/
.headline5 {
  margin-top: -25px;
  margin-bottom: 30px;
  margin-left: 30px;
}
.headline5 h1 {
  text-align: center;
  color: rgba(17, 128, 108, 1.00);
}
.maincontainerWerkgruppe5 {
  margin-left: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 230px);
  grid-template-rows: repeat(auto-fit, 249px);
  gap: 15px;
  justify-content: center;
}
.linienabdeckung5 {
  height: 15px;
  /*background-color: aqua;*/
  margin-left: 28px;
  margin-top: -10px;
}
.abdeckflaeche5 {
  height: 100%;
  /*background-color: darkkhaki;*/
  background-image: url("bilder/hgr1px.png");
  width: 240px;
  margin: auto;
}
.containertrennlinie5 {
  margin-left: 31px;
  margin-top: 80px;
  margin-bottom: 0px;
}
.trennlinie5 {
  border-bottom: 3px dotted rgba(17, 128, 108, 1.00);
  width: 400px;
  height: 0px;
  margin-top: 0px;
  margin-bottom: 5px;
  margin: auto
}
/*------------------------Style der Überschriften----------------*/
h1 {
  font-family: robotoConBlack, sans-serif;
  font-size: clamp(30px, 1vw, 60px);
  letter-spacing: 3px;
}
h2 {
  font-family: robotoConBold, sans-serif;
  font-size: clamp(20px, 1vw, 40px);
  color: rgba(17, 128, 108, 1.00);
  letter-spacing: 2px;
  margin-bottom: 5px;
}
h3 {
  font-family: roboto, sans-serif;
  font-size: clamp(15px, 1vw, 30px);
  color: black;
}
/*------------------------Gridelemente Werkgruppenelemente-------------------------*/
.gridElement {
  background-color: rgb(225, 225, 225);
  width: 230px;
  height: 249px;
  border: solid 2px white;
}
.gridVorschaubild {
  padding-left: 15px;
  padding-top: 15px;
}

.gridVorschautext {
  margin-top: 2px;
  margin-left: 15px;
}
/*-----------------------------------------Inhalt der Einzelprojekte---------------------*/

/*-----------------------------------------Inhaltsbeschreibung---------------------*/
.subheadInhalt{
	font-family: robotoBold, sans-serif; 
	color: rgba(17, 128, 108, 1.00);
}
.inhaltEinzelprojekt {
  margin-left: 30px;
  margin-bottom: 10px;
}
.accordion-item-body-content-plast{
  display: none;
  column-count: 2;
	column-width: 250px;
}
.accordion-item-body-content-konsumismus{
  display: none;
  column-count: 2;
	column-width: 250px;

}
.accordion-item-body-content-techtur{
  display: none;
  column-count: 2;
	column-width: 250px;
}

.accordion-item {
  margin-left: 30px;
  margin-right: 30px;
	margin-top: 30px;
}
.accordion-item-header {
  /*padding-left: 10px;*/
  padding-top: 7px;
  padding-bottom: 7px;
  /*background-color: white;*/
  max-width: 800px;
}
.accordion-item-body {
  /*padding-left: 10px;*/
  margin-top: 5px;
	padding-top: 5px;
  padding-bottom: 10px;
	/*background-color: white;*/
	max-width: 800px;
}
.accordion-item-body-content {
	column-count: 2;
	column-width: 250px;
}
.accordion-item-body p{
line-height: 1.6;
}
.trennlinie-einzelprojekt{
	height: 20px;
	border-bottom: 3px;
	border-bottom-color: rgba(17, 128, 108, 1.00);
	border-bottom-style: dotted;
	max-width: 110px;
	margin-left: 30px;
	margin-bottom: 5px;
}
.trennlinie-einzelprojekt-unten{
	height: 0px;
	border-top: 3px;
	border-top-color: rgba(17, 128, 108, 1.00);
	border-top-style: dotted;
	max-width: 800px;
	margin-left: 0px;
	margin-top: 5px;
	
}
.trennlinie-erlaeuterung-unten{
	height: 0px;
	border-top: 3px;
	border-top-color: rgba(17, 128, 108, 1.00);
	border-top-style: dotted;
	max-width: 800px;
	margin-left: 0px;
	margin-top: 5px;
}
/*-----------------------------------------Technische Infos---------------------*/
.accordion1{
	margin-top: 10px;
}
.accordion-item1 {
  margin-left: 30px;
  margin-right: 30px;
}
.accordion-item-header1 {
  /*padding-left: 10px;*/
  padding-top: 7px;
  padding-bottom: 7px;
  /*background-color: white;*/
  max-width: 800px;
}
.accordion-item-body1 {
  /*padding-left: 10px;*/
  margin-top: 5px;
	padding-top: 5px;
  padding-bottom: 10px;
	/*background-color: white;*/
}
.accordion-item-body-content1 {
		max-width: 800px;

	/*column-count: 3;
	column-width: 250px;*/
	display: grid;
	grid-template-columns: repeat(auto-fit, 251px);
  gap: 22px;
  justify-content: left;
}
.gridelementTechnik{
	width: 250px;
	margin-bottom: -20px;
}
.accordion-item-body1 p{
line-height: 1.6;
}
.trennlinie-einzelprojekt1{
	height: 20px;
	border-bottom: 3px;
	border-bottom-color: rgba(17, 128, 108, 1.00);
	border-bottom-style: dotted;
	max-width: 110px;
	margin-left: 30px;
	margin-bottom: 5px;
}
.trennlinie-einzelprojekt-unten1{
	height: 0px;
	border-top: 3px;
	border-top-color: rgba(17, 128, 108, 1.00);
	border-top-style: dotted;
	max-width: 800px;
	margin-left: 0px;
	margin-top: 5px;
	
}
.trennlinie-erlaeuterung-unten1{
	height: 0px;
	border-top: 3px;
	border-top-color: rgba(17, 128, 108, 1.00);
	border-top-style: dotted;
	max-width: 800px;
	margin-left: 30px;
	margin-top: 20px;
}
/*---------------------------Austellungen Einzelabbildungen-------------------------------------*/

.einzelAbbildung1{
	margin-left: 30px;
	margin-top: 20px;
	background-color: rgb(225, 225, 225);
		max-width: 800px;
	min-height: 100px;
	border: solid 3px white;
}

.bildmotiv1 img{
	margin-top: 50px;
	margin-bottom: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 80%;

}


.inhaltEinzelprojekt2{
	margin-top: 60px;
	margin-left: 30px;
	margin-bottom: 30px;
}

.endAbstand{
	height: 50px;
}
.abschlussabstandWG{
	height: 50px;
}

.abschlusslinieWG{
	margin-top: 30px;
	height: 0px;
	width: 250px;
	margin-right: auto;
		margin-left: auto;
	border-bottom: dotted 3px rgba(17, 128, 108, 1.00)
}
.einleitungsseite{
  display: flex;
}
.einleitungsseite p{
  margin-right: 20px;
}
.einleitungsseite button{
  border-width: 0px;
  background-color: transparent;
}
.einleitungsseite button:hover{
  color: rgba(17, 128, 108, 1.00);
}
/*---------------------------Bildschirmauflösungen-------------------------------------*/
@media (max-width: 800px) {
  .hideonMobile {
    display: none;
  }
  .menu-button {
    display: block;
  }
 
}
@media (max-width: 400px){
  .sidebar {
    width: 500px;
  }
  .logo {
    background-color: transparent;
  }
}