h2, h3{
    margin: 20px;
}

p {
   margin: 5%;
   font-size: 18px;
}

main {
    background-color: #b9ccdb;
    padding-top: 5%;
}

main h2 {
    text-align: center;
}

section {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    section {
        width: 100%;
    }

    h2 {
        font-size: 24px;}

    main {
        padding: 0;
    }
}

@media (max-width: 480px) { 
    h1 {
    font-size: 24px;
    }

    h2 {
    font-size: 22px;
    }

    p {
    font-size: 16px;
    }
      
}

div img {
    width: 100%;
}

#neubauten {
    background-color: white;
    padding-top: .5%;
    margin-bottom: 5%;
}

#neubauten h2 {
    margin: 5% 5% 3% 5%;
}

#neubauten1 {
    padding: 0;
    display: flex;
    justify-content: space-around;
}

#neubauten1 > li {
    width: 47%;
}

#neubauten1 li {
    margin: 0;
    list-style: none;
}

#neubauten h3 {
    margin-top: 5%;
}

#varianten {
    display: flex; 
    justify-content: space-around;
    flex-direction: column;
}

#neubauten1a {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5%;
}

#varianten > ul {
    padding: 0 15% 5% 15%;
    list-style: none;
    text-align: left;
    font-size: 18px;
}

.cockpit img {
    background-color: rgb(151, 151, 151);
    border: 2px solid grey
}

#neubauten1b {
    margin: 0 15% 5% 15%;
}

#neubauten1b p {
    margin-top: 0;
    text-align: left;
}

@media (max-width: 1024px) { 

    #neubauten > h2 {
        margin-bottom: 0;
    }

    #varianten > ul {
        padding: 5% 12.5%;
        text-align: left;
   } 

   
    #neubauten1a {
        margin: 0 12.5% 5% 12.5%;
    
   }
    
    #neubauten1b {
        width: 80%;
    }

    #neubauten1b p {
        text-align: left;
    }
}

@media (max-width: 768px) { 
    #varianten > ul {
        padding: 5%;
        text-align: left;
        font-size: 18px;
   } 

   
    #neubauten1a {
        margin: 0 5% 5% 5%;
    
   }
    
    #neubauten1b {
        width: 100%;
        margin: 0;
    }

    #neubauten1b p {
        text-align: left;
    }
}

@media (max-width: 480px) { 
    #neubauten1 {
        flex-direction: column;
   }

   #neubauten1 li {
    width: 100%;
    margin: 5% 0;
   }
} 

/* === MASTEN UND BAUME FLEX LAYOUT === */

.mba {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    margin-top: 5%;
    
}

#mast {
    margin: 50px;
    background-color: #dbdad7;
}

.mba2 {
    margin-right: 10%;
}

.mba2 ul {
    padding-left: 10%;
}

.mbb {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    background-color: white;
    margin-bottom: 50px;
    
}

.mbb1 {
    flex: 1.6;
    padding: 0 0 50px 50px;
}

.mbb1 p {
    margin-bottom: 0;
    margin-left: 0;
}

.mbb1 ul {
    padding-left: 5%;
}

#baum {
    width: 50%;
    background-color: #dbdad7;
    margin: 40px;
}

/* === Masten UND BAUME GRID LAYOUT === */

.masten_und_baeume {
    margin-top: 5%;
    margin-bottom: 5%;
}

.mast-grid {
  display: grid;
  width: 100%;
  margin: 0 auto;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.mast-grid > div {
    background-color: white;
    padding: 20px;
    text-align: left;
    font-size: 18px;
    display: flex;
}

#mast_grid_top_full {
    flex-direction: column;
    align-items: center;
    display: none;
}

#mast_grid_top_full p {
    margin: 0;
}

#mast_grid_bottom_right {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.mast-flex-container {
    display: flex;
    justify-content: center;
}

#mast {
    width: 100%;
    margin: 0 10% 0 0;
    display: flex;
    align-items: center;
}

#mast-headline {
    margin-bottom: 10%;
}

.mba2 {
    display: flex;
    align-items: center;
}

.mbb1 {
    padding: 3%;
}

#baum {
    width: 100%;
    margin: 0%;
}

#baum img {
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    #mast_grid_top_full {
        display: block;
    }

    #mast_grid_top_full p {
        text-align: center;
    }

    .mast-headline {
        display: none;
    }

    .mba2 {
        flex-direction: column;
        align-items: center;
        margin-left: auto;
        margin-right:auto;
    }

    #mast_grid_bottom_right {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .mast-flex-container {
        flex-direction: column;
    }

    #mast {
        margin: 0 0 20px 0;
    }

    .mba1 ul li {
        font-size: 18px;
    }

    .mba2 {
        margin: 0;
    }
    
    #mast_flex_container {
        display: flex;
        flex-direction: column-reverse;
    }
}

.zubehoer {
    display: flex;
    width: 95%;
    background-color: white;
    justify-content: space-around;
}

.zubehoer2 {
    display: flex;
    width: 95%;
    background-color: white;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 5%;
}

.weiteres  {
    list-style: none;
    padding: 0;
    margin: 20px;
    display: flex;
    justify-content: space-around;
    width: 97%;
}

.weiteres > li {
    flex: 1;
}

#alle-foils {
    text-align: center;
    width: 70%;
}

.foil_item {
    font-size: 18px;
}

.foil-bild {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #dbdad7;
}

#beschlaege-box {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 5%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 480px) {
    .foil_item {
    font-size: 16px;
}
}

/* === ZUBEHÖR GRID LAYOUT === */

.foil-container {
  display: grid;
  width: 96%;
  margin: 0 auto 5% auto;
  background-color: white;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;

  grid-template-areas:
    "header header header"
    "col1 col2 col3"
    "col1b col2b col3b";
}

/* Grid-Areas zuweisen */
#foil_item1 { grid-area: header; }

/* Zeile 2 */
.foil_item2 { grid-area: col1; }
.foil_item3 { grid-area: col2; }
.foil_item4 { grid-area: col3; }

/* Zeile 3 */
#foil_item5 { grid-area: col1b; }
#foil_item6 { grid-area: col2b; }
#foil_item7 { grid-area: col3b; }


.foil-container > div {
  width: 100%;
  background: white;
}

.foil-container div h3 {
  margin: 5%;
}

.foil_bild{
  width: 90%;
  margin: 0 auto 10% auto;
  background-color: #dbdad7;
}

.foil-container > div img {
  width: 100%;
  height: auto;
}

#foil_item1 {
  text-align: left;
  padding: 2% 10%;
  background-color: white;
}

@media (max-width: 768px) {
  .foil-container {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "col1"
      "col1b"
      "col2"
      "col2b"
      "col3"
      "col3b";
  }

  #foil_item1 {
    text-align: left;
    width: 100%;
    padding: 2%;
    margin: 0%;
  }

   #persenning-list {
    padding-left: 10%;
  }
}

/* === REPARATUREN SECTION === */

.reparaturen1 {
    background-color: #fff;
    padding: 3%;
    margin-top: 5%;
}

#reparatur1a {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#reparatur1b {
    display: flex; 
}

#reparatur1b > div > h3 {
    margin-left: 5%;
}

#reparaturen2 {
    background-color: #fff;
    width: 80%;
    margin-bottom: 5%;
    margin-top: 5%;
    text-align: left;
}

@media (max-width: 768px) {
    #reparatur1a, #reparaturen2 {
        width: 100%; 
    }
}

/* === COPYRIGHT FOOTER === */

#copy-right-leistungen {
    margin: 1% 5% 1% 0%;
}

#copy-right-leistungen p {
    margin: 0;
}

/* ==== vorerst === */

#beschlaege-vorerst a {
    color: #000;
    font-weight: normal;
    text-decoration: underline;
}

@media (max-width: 768px) {
   #foil_item6 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
   }

   #foil-item6a {
    width: 100%;
   }

   #beschlaege-vorerst ul {
    padding-left: 10%;
   }
}