@font-face {
    font-family: arial;
}

/* Grid Container */

.c-grid-container{
  display: grid;
  grid-template-columns: 6fr 2fr 1fr 1fr 1fr 1fr 2fr 6fr;
  row-gap: 10px;
  column-gap: 0px;
  margin: 0;
  grid-template-areas:
  "eins zwei untertitel untertitel untertitel untertitel vier fuenf"
  "eins zwei kundenart kundenart kundenart kundenart vier fuenf"
  "eins zwei anrede anrede anrede anrede vier fuenf"
  "eins zwei firma firma firma firma vier fuenf"
  "eins zwei vorname vorname nachname nachname vier fuenf"
  "eins zwei plz ort ort ort vier fuenf"
  "eins zwei adresse adresse adresse adresse vier fuenf"
  "eins zwei email email email email vier fuenf"
  "eins zwei phone phone phone phone vier fuenf"
  "eins zwei support support support support vier fuenf"
  "eins zwei supportart supportart supportart supportart vier fuenf"
  "eins zwei textarea textarea textarea textarea vier fuenf"
  "eins zwei textarea textarea textarea textarea vier fuenf"
  "eins zwei upload upload upload upload vier fuenf"
  "eins zwei agb agb agb agb vier fuenf"
  "eins zwei senden senden senden senden vier fuenf";
}

/* Grid Container ENDE*/

.c-title {
    margin: 0;
    font-family: arial;
    padding: 20px;
    font-size: 60px;
    color: white;
    display: flex;
    justify-content: center;
}

/* grid areas */

.c-untertitel,.c-support  {
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

.c-kundenart, .c-anrede, .c-upload {
  text-align: center;
  font-family: arial;
  font-size: 25px;
}

.c-firma, .c-vorname, .c-nachname, .c-plz, .c-ort, .c-adresse,
.c-email, .c-phone, .c-supportart, .c-textarea  {
  text-align: left;
  font-family: arial;
  font-size: 25px;
}

.c-untertitel {
  grid-area: untertitel;
}

.c-kundenart  {
  grid-area: kundenart;
}

.c-anrede  {
  grid-area: anrede;
}

.c-firma  {
  grid-area: firma;
}

.c-vorname {
  grid-area: vorname;
}

.c-nachname {
  grid-area: nachname;
}

.c-plz {
  grid-area: plz;
}

.c-ort {
  grid-area: ort;
}

.c-adresse {
  grid-area: adresse;
}

.c-email {
  grid-area: email;
}

.c-phone {
  grid-area: phone;
}

.c-support {
  grid-area: support;
}

.c-supportart{
  grid-area: supportart;
}

.c-textarea {
    grid-area: textarea;
}

.c-agb {
  grid-area: agb;
  text-align: left;
  font-family: arial;
  margin-left: auto;
  margin-right: auto;
}

.c-upload {
    grid-area: upload;
}

.c-senden {
  grid-area: senden;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  background-color: green;
  color: white;
  width: 50%;
		border-radius: 10px;
	border-color: black;
}

.c-item-1 {
  background-color: none;
  grid-area: eins;
}

.c-item-2 {
  background-color: none;
  grid-area: zwei;
}

.c-item-4 {
  background-color: none;
  grid-area: vier;
}

.c-item-5 {
  background-color: none;
  grid-area: fuenf;
}

.c-item-6 {
  background-color: none;
  grid-area: sechs;
}


/* grid areas ENDE */

/* Eingabefelder width*/

#plz {
  width: 60%;
  font-size: 20px;
  font-family: arial;
}

#vorname, #firma, #nachname {
  width: 80%;
  font-size: 20px;
  font-family: arial;
}

#ort {
  width: 87%;
  font-size: 20px;
  font-family: arial;
}

#firma, #adresse, #email, #phone, #supportart, #textarea{
  width: 90%;
  font-size: 20px;
  font-family: arial;
  border-radius: 10px;
  border-color: black;
}

/* Eingabefelder width ENDE*/


.c-header {
  margin: 0;
  background-color: #002939;
}

.c-body {
  margin: 0;
}

h3 {
    margin-top: 20px;
    margin-bottom: 0;
    color: #00ada8;
}

input {
	padding: 5px;
	border-radius: 10px;
	border-color: black;
}

@media screen and (max-width : 1500px)  {

  .c-grid-container{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 2fr 1fr;
    row-gap: 10px;
    column-gap: 0px;
    margin: 0;
    grid-template-areas:
    "zwei untertitel untertitel untertitel untertitel vier"
    "zwei kundenart kundenart kundenart kundenart vier"
    "zwei anrede anrede anrede anrede vier"
    "zwei firma firma firma firma vier"
    "zwei vorname vorname nachname nachname vier"
    "zwei plz ort ort ort vier"
    "zwei adresse adresse adresse adresse vier"
    "zwei email email email email vier"
    "zwei phone phone phone phone vier"
    "zwei support support support support vier"
    "zwei supportart supportart supportart supportart vier"
    "zwei textarea textarea textarea textarea vier"
    "zwei textarea textarea textarea textarea vier"
    "zwei upload upload upload upload vier"
    "zwei agb agb agb agb vier"
    "zwei senden senden senden senden vier";
  }

.c-firma, .c-vorname, .c-nachname, .c-plz, .c-ort, .c-adresse, .c-email, .c-phone,
.c-supportart, .c-textarea, .c-agb {
  text-align: left;
  font-size: 20px;
}

.c-item-1, .c-item-5 {
  display: none;
}

}

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

  .c-title {
      font-size: 40px;
  }

  }

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

    .c-title {
        font-size: 30px;
    }

}