/* section 1*/
.section1-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    background-image: var(--background2-image-url);
}

.section1-img-container {
    display: flex;
    flex-direction: column;
    width: 66%;
}

.section1-img {
    width:100%;        
    max-height: 690px;
    max-width: 890px;
}

.siegel-logo {
    width: 450px;
}

.trusted-partner-logo {
    width: 200px;
}

/* section 2*/

.section2-content {
    display: flex;
    flex-direction: column;
    background-image: url("../images/Burst-Speed-Grafik.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
}

.section2-card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width:100%;
    flex-wrap: wrap;
}

.section2-img {
    width:100%;
    left: 0;
    z-index: 1;
}

.section2-icon {
    width: 40px;
    height: 40px;
    top: -280px;
}

.section2-card {
    display: block;
    position: relative;
    border: 1px solid var(--var-section2-card-border-color);
    border-radius: 12px;
    background: linear-gradient(to bottom, #071b36, #23526b);
    padding: 40px;
    
    width: 25%;
    min-width: 360px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Section 3*/
.section3-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.section3-img-container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 40%;
}

.section3-txt {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin-left: 10px;
}

.section3-img {
    position: relative;
    width:120%;
    height:80%;
    transform: translateX(-100px);
}

.section3-icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.section3-icon {
    width: 106px;
    height: 96px;
    margin-right: 40px;
}




.section3-component {
    display: flex;
    flex-direction: row;
}

.section3-card {
  position: relative;
  display: flex;
  flex-direction: row;
  border: 1px solid var(--var-result-box-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  padding-top: 20px;
  padding-bottom: 20px;
  margin-right: 10px;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Section 4*/
.section4-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.section4-txt {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.section4-img-container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 50%;
}

/* Section 5*/

.section5-container {
    width: 100%;
    max-width: 1360px;
    box-sizing: border-box;
}


.section5-img {
    box-sizing: border-box;
    width: 100%;
}

.section5-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}


.screenshot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--var-section2-card-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  padding: 40px;
  margin-left: 0px;
  margin-right: 20px;
  width: 550px;
  max-width: 600px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.screenshot-img {
    width:100%;
}


/* Section 6*/

.section6-container {
    display: flex;
    flex-direction: column;
}

.section6-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section6-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/4-Stufen-Universum-Grafik.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section6-card {
  position: relative;
  display: flex;
  flex-direction: row;
  border: 1px solid var(--var-result-box-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  box-sizing: content-box;
  width: 99%;
  height: 120px;
  margin-bottom: 40px;
}

.section6-number-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
    margin-right: 50px;
    margin-top: 80px;
}

.section6-number {
    font-size: 72pt;
    color:var(--var-h1-text-color);
}

.section6-footer {
    margin-left: 100px;
    margin-right: 100px;
}

/* section 7*/
.section7-txt {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin-left: 40px;
}
.section7-img-container {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 40%;
    overflow: hidden;
}

.section7-img {
    position: relative;
}


/* section 8*/
.section8-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.usecase-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.usecase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--var-section2-card-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  padding: 40px;
  margin-left: 10px;
  margin-right: 10px;
  width: 360px;
  max-width: 360px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* section 9*/
.section9-bg-container {
    display: flex;
    flex-direction: column;
    background-image: var(--background3-image-url);
    width: 100%;
    justify-content: center;
    align-items: center;
}

.section9-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.reference-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.reference-card {
  position: relative;
  display: flex;
  flex-direction: column;
  
  border: 1px solid var(--var-section2-card-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  padding: 40px;
  width: 25%;
  min-width: 360px;
  margin-top: 40px;
  margin-bottom: 40px;
  justify-content: space-between;
}

.reference-card-img {
    position: absolute;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    top: -50px;
    transform: translateX(80px);
    z-index: 1;
}

/* section 10*/
.section10-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.package-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;   

}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--var-section2-card-border-color);
  border-radius: 12px;
  background: linear-gradient(to bottom, #071b36, #23526b);
  padding: 40px;
  margin-left: 10px;
  margin-right: 10px;
  width: 25%;
  margin-top: 40px;
  margin-bottom: 40px;
  justify-content: space-between;
}

.recommendet {
    border: 1px solid var(--var-cta-bg-color2);
}

.recommendet-text {
    color: var(--var-cta-bg-color2);
}

/* section 11*/
.section11-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}

.accordion {
  width: 99%;
  font-family:"plex", sans-serif;
  margin: 20px auto; 
}

.accordion details {
  margin-bottom: 20px; 
  border: 1px solid var(--var-result-box-border-color);
  background: linear-gradient(to bottom, #071b36, #23526b);
  border-radius: 12px; 
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  
}

.accordion details summary {
  padding: 10px; 
  font-weight: bold; 
  cursor: pointer;
 color:var(--var-h1-text-color);
}

.accordion details p {
  padding: 10px; 
  border-top: 1px solid var(--var-result-box-border-color);
}


/* section 12*/
.section12-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.auxy-cta-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 12px;
    border: 1px solid var(--var-cta-bg-color2);
    background: linear-gradient(to bottom, #071b36, #23526b);
    width: 99%;
    padding-bottom: 20px;
}

.auxy-cta-text-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 60%;
    margin-left: 80px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.auxy-cta-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    z-index: 1;
}

.calendly-inline-widget {
    width: 500px;
    height: 500px;
}

.auxy-cta-image {
    position: relative;
    width: 150%;
    padding-right: 20%;
    transform: translateX(-65px);
}

/* Footer-Styling */

.footer-bg {
    background-image: var(--background3-image-url);
    width: 100%;
}
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  border-top: 1px solid #ccc;
  
  
  width: 100%;
}

/* Spalten-Styling */
.column1, .column2, .column3 {
  flex-basis: 30%;
  padding: 10px;
}

/* Links-Styling */
.column2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column2 li {
  margin-bottom: 10px;
}

.column2 a {
  text-decoration: none;

}

.column2 a:hover {
  color: #23527c;
}