@charset "UTF-8";

/* ===== Grundlayout ===== */
.WerSindWir{
  display: grid;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  grid-template-columns: 20px 1360px 20px; /* Desktop-Default */
}
.Sec-1{  }
.Sec-2{  }
.Sec-3{  }

/* Fluid-Text in WerSindWir (gilt immer) */
.WerSindWir .Sec-2 p{
  font-size: clamp(16px, calc(14.4px + 0.4vw), 20px);
  line-height: 1.55;
}
.WerSindWir .Sec-2 h2{
  font-size: clamp(20px, calc(18.4px + 0.4vw), 24px);
  line-height: 1.25;
}

/* ===== Gründer-Sektion ===== */
.Gruender{
  display: grid;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  grid-template-columns: 20px 890px 20px 450px 20px; /* Desktop-Default */
}
.Gruender p{
  font-size: clamp(16px, calc(14.4px + 0.4vw), 20px);
  line-height: 1.55;
}
.Gruender h2{
  font-size: clamp(20px, calc(18.4px + 0.4vw), 24px);
  line-height: 1.25;
}

/* Demo-Farben */
.GrueSec-4{ }
.GrueSec-5{ }
.GrueSec-6{ }
.GrueSec-7{ }
.GrueSec-8{ }
.GrueSec-9{ }
.GrueSec-8 img{ width: 100% !important; height: auto !important; display:block; }

/* ===== Bannerbild ===== */
.Bannerbild-1{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.Bannerbild-1 img{
  display: block;
  width: 100% !important;  /* überschreibt evtl. HTML-Attribute */
  height: auto !important;
}


.Spacer{
    width: 100%;
    min-height:clamp(20px,calc(4px + 4vw),60px);
    display: grid;
    grid-template-rows: 1;
    grid-template-columns: 1;
    
}
.Line-1{
    grid-row: span 1;

}



/* ===== Media Queries ===== */

/* 701–1400px */
@media (min-width: 701px) and (max-width: 1400px){
  .WerSindWir{
    grid-template-columns:
      minmax(20px, 1.4%) minmax(260px, 97.2%) minmax(20px, 1.4%);
  }
  .Gruender{
    grid-template-columns:
      minmax(6px, 1.4%) minmax(260px, 64%)
      minmax(6px, 1.4%)  minmax(122px, 31.8%)
      minmax(6px, 1.4%);
  }
}

/* 401–700px */
@media (min-width: 401px) and (max-width: 700px){
  .WerSindWir{
    grid-template-columns: 12px calc(100vw - 24px) 12px;
    max-width: 100vw;
  }

  /* Gründer-Layout: eine Spalte, 6px Rand, bestimmte Blöcke ausblenden */
  .Gruender{
    grid-template-columns: 1fr;
    padding-inline: 6px;
    row-gap: 12px;
    max-width: 100vw;
  }
  .GrueSec-4, .GrueSec-7, .GrueSec-9{ display: none !important; }
  .GrueSec-5, .GrueSec-6, .GrueSec-8{
    grid-column: 1 / -1;
    width: 100%;
  }
      /* GrueSec-8: Bild max. 400px breit, sonst 100% der Spalte; zentriert */
  .GrueSec-8 img{
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }
}

/* ≤400px */
@media (max-width: 400px){
  .WerSindWir{
    grid-template-columns: 12px calc(100vw - 24px) 12px;
    max-width: 100vw;
  }
  .Gruender{
    grid-template-columns: 1fr;
    padding-inline: 12px;
    row-gap: 12px;
    max-width: 100vw;
  }
  .Gruender > *{ min-width: 0; width: 100%; }
  .Gruender img{ width: 100% !important; height: auto !important; display:block; }
}

/* Icons in .GrueSec-6: nebeneinander + fluid 40→60px */
.GrueSec-6 ul{
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.GrueSec-6 li{ display: flex; }

.GrueSec-6 img{
  display: block;
  width:  clamp(40px, calc(32px + 2vw), 60px) !important;
  height: clamp(40px, calc(32px + 2vw), 60px) !important;
  /* optional: falls Icons im Link liegen
  vertical-align: middle;
  */
}